html5 - para - video html source
problema de video html5 con Chrome (4)
Asegúrate de tener un doctype HTML5:
<!DOCTYPE html>
Esto solucionó el problema para mí.
Me gustaría usar un video html5 en mi página web, aquí está el código:
<video id="vid" width="100%" autoplay loop>
<source src="video/video.webm" type="video/webm">
<source src="video/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
El problema es que cuando uso webm como fuente de video:
<source src="video/video.webm" type="video/webm">
funciona bien en Chrome y FF. Pero tan pronto como agregue mp4:
<source src="video/video.webm" type="video/webm">
<source src="video/video.mp4" type="video/mp4">
Chrome muestra una pantalla negra y el texto "esperando video" en ella, pero safari y FF lo muestran como se esperaba.
Cualquier sugerencia para hacer que funcione en todos estos navegadores sería apreciada. Gracias.
Esta es una solución que encontré que funcionó para mi caso,
Primero, incrusta el video en tu html:
<video id="videoId" width="100%" autoplay loop>
<source src="main.webm" type="video/webm">
<source src="main.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Luego detecta si el navegador es chrome:
var isChrome = !!window.chrome;
var isIE = /*@cc_on!@*/false;
Si está cromado, reemplace el video con la versión webm. (Para aquellos que no se han enfrentado al problema por sí mismos: si incrusta ambos mp4 y webm, Chrome no reproducirá ninguno de ellos, por lo que debe incrustar "webm" solamente)
if( isChrome ) {
$("#videoId").replaceWith($(''<video id="videoId" width="100%" autoplay loop><source src="video.webm" type="video/webm"></video>''));
}
Y en cuanto a IE: en mi caso reemplacé el video html5 con una imagen:
if( isIE ) {
$("#videoId").replaceWith($(''<img id="videoId" src="img/video.jpg" />''));
}
Intente intercambiar los dos, ponga mp4 primero y el código web en segundo lugar, y vea qué sucede. Tengo esto,
<div id="ModelVideo">
<video max-width="100%" controls autoplay muted>
<source src="movie1.mp4" type="video/mp4">
<source src="movie1.webm" type="video/webm" controls>
Your browser does not support the video tag.
</video>
</div>
y el mío está funcionando bien en Chrome, mi mp4 es decir, pero no puedo probar en los otros navegadores, aunque mis pruebas Dreamweaver también se prueban en Safari, y ambas parecen funcionar bien.
(No te rías, sigues trabajando en el sitio web )
Quizás puedas decirme cómo puedo controlar el volumen con éxito, parece que tengo problemas con ese.
Tuve el mismo problema y no pude resolverlo con ninguna de las soluciones propuestas, ya sea arriba o en otros hilos (tampoco funcionó la actualización de la versión de Google Chrome o la desactivación de la aceleración de hardware de Chrome).
Al final, lo que me solucionó fue convertir el archivo de video a un formato mp4 diferente.
Resultó que había convertido el mp4 original con un codificador MP4 VIDEO, cuando debería haberlo hecho con un codificador H.264 Normal.
Aquí está el código completo:
<video width="320" height="240" controls>
<source src="video/Ruby.ogv" type="video/ogg" />
<source src="video/Ruby.webm" type="video/webm" />
<source src="video/Ruby-iPad.mp4" type="video/mp4" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="240" id="Ruby" align="middle">
<param name="movie" value="video/Ruby.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="false" />
<param name="loop" value="false" />
<param name="menu" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="video/Ruby.swf" width="330" height="295" id="Ruby">
<param name="movie" value="video/Ruby.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#cccccc" />
<param name="play" value="false" />
<param name="loop" value="false" />
<param name="menu" value="true" />
<!--<![endif]-->
<img src="video/Ruby.jpg" alt="No video playback capabilities" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
<p class="caption"><em>Ruby</em> (fragment), ICF Hastings 2013.</p>
El código anterior es una adaptación del método "Video para todos". Encontrarás más información en http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/
Utilizo una versión anterior de Wondershare Video Converter pero puede hacer el mismo trabajo desde servicios gratuitos en línea como http://video.online-convert.com/