varios - El video HTML5 no se reproduce solo en Chrome
insertar video en html5 (5)
¿Has probado configurando el tipo MIME de tu .m4v en "video / m4v" o "video / x-m4v"?
Los navegadores pueden usar el método canPlayType internamente para verificar si un <source> es candidato para la reproducción.
En Chrome, tengo estos resultados:
document.createElement("video").canPlayType("video/mp4"); // "maybe"
document.createElement("video").canPlayType("video/m4v"); // ""
document.createElement("video").canPlayType("video/x-m4v"); // "maybe"
algunos antecedentes
He probado mi video en FF y Safari (incluyendo iDevices) y se reproduce correctamente, pero no se reproducirá en el navegador Chrome. Como puede ver en el siguiente código, he creado archivos mp4, m4v, webM y ogv, y los he probado en mi computadora para detectar cualquier problema de reproducción.
los síntomas / problema
En Chrome, el video parece cargarse y no hay errores en el registro de la consola . Cuando se presiona el botón de reproducción, carga una parte del archivo, pero luego no lo reproduce. Sin embargo, curiosamente, si hago clic de forma arbitraria en un momento posterior de la barra de tiempo, digamos que aproximadamente a la mitad, se reproducirá aproximadamente 5 segundos del video, incluso con los subtítulos, pero sin audio.
mi investigación
He leído sobre cualquier problema que pueda estar causando esto, pero no he encontrado ninguna idea que funcione. Para tener en cuenta, he escrito lo siguiente en mi archivo .htaccess:
# ----------------------------------------------------------------------
# Proper MIME type for all files
# ----------------------------------------------------------------------
# Audio
AddType audio/ogg oga ogg
AddType audio/mp4 m4a
AddType audio/webm webm
# Video
AddType video/ogg ogv
AddType video/mp4 mp4 m4v
AddType video/webm webm
# Assorted types
AddType image/x-icon ico
AddType image/webp webp
AddType text/cache-manifest appcache manifest
AddType text/x-component htc
AddType application/x-chrome-extension crx
AddType application/x-opera-extension oex
AddType application/x-xpinstall xpi
AddType application/octet-stream safariextz
AddType application/x-web-app-manifest+json webapp
AddType text/x-vcard vcf
AddType text/plain srt
Además, estoy usando la biblioteca mediaelement.js.
el código
Aquí está el HTML:
<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none">
<!-- M4V for Apple -->
<source type="video/mp4" src="assets/vid/PhysicsEtoys.m4v" />
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="assets/vid/PhysicsEtoys.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="assets/vid/PhysicsEtoys.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="assets/vid/PhysicsEtoys.ogv" />
<!-- Subtitles -->
<track kind="subtitles" src="assets/vid/subtitles.srt" srclang="en" />
<track kind="subtitles" src="assets/vid/subtitles.vtt" srclang="en" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="100%" height="400" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=assets/vid/PhysicsEtoys.mp4" />
<!-- Image as a last resort -->
<img src="assets/img/myVideo.jpg" width="320" height="240" title="No video playback capabilities" />
</object>
</video>
Aquí está el simple js:
$(''video,audio'').mediaelementplayer({
features: [''playpause'',''progress'',''current'',''tracks'',''volume''],
startLanguage: ''en''
});
¿Algunas ideas?
Gracias por cualquier ayuda en este asunto!
Con la ayuda de otra persona, descubrimos que era una cuestión de ordenar los archivos de origen dentro del archivo HTML. Aprendí que los navegadores aceptan el primer formato utilizable, y parece ser un problema con el archivo .m4v, así que empecé con .mp4, luego .webm. Aquí está el orden que funciona en Safari (incluso en mi iPhone 5), Firefox y Chrome :
<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="assets/vid/PhysicsEtoys.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="assets/vid/PhysicsEtoys.webm" />
<!-- M4V for Apple -->
<source type="video/mp4" src="assets/vid/PhysicsEtoys.m4v" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="assets/vid/PhysicsEtoys.ogv" />
<!-- Subtitles -->
<track kind="subtitles" src="assets/vid/subtitles.srt" srclang="en" />
<track kind="subtitles" src="assets/vid/subtitles.vtt" srclang="en" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="100%" height="400" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=true&file=assets/vid/PhysicsEtoys.mp4" />
<!-- Image as a last resort -->
<img src="assets/img/myVideo.jpg" width="320" height="240" title="No video playback capabilities" />
</object>
</video>
Ahora, tendré que volver a verificar la codificación en el archivo m4v (quizás un problema de Baseline vs Main, High, etc.).
Para todos los que llegaron aquí y no encontraron la solución correcta, descubrí que el video mp4 debe adaptarse a un formato específico.
Mi problema fue que obtuve un video de 1920x1080 que no se carga bajo Chrome (bajo Firefox funcionó a la perfección). Después de horas de búsqueda, finalmente logré resolver el problema, las primeras secuencias fueron 1912x1088, por lo que Chrome no lo reproduce (obtuve el tamaño exacto de la transmisión de la herramienta MediaInfo ). Así que para solucionarlo, simplemente lo redimensioné a 1920x1080 y funcionó.
Prueba esto
<video autoplay loop id="video-background" muted plays-inline>
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>
Gracias
Tuve un problema similar, no se reproducían videos en Chrome. Intenté instalar beta de 64 bits, volviendo a la versión de Chrome de 32 bits.
Lo único que funcionó para mí fue actualizar mis controladores de video .
Tengo el NVIDIA GTS 240. Descargué, instalé los controladores y reinicié, y Chrome 38.0.2125.77 beta-m (64 bits) comenzó a reproducir videos HTML5 nuevamente en youtube, vimeo y otros. Espero que esto ayude a alguien más.