Видео HTML5 не будет воспроизводиться только в Chrome
некоторые предпосылки
я протестировал свое видео в FF и Safari (включая iDevices), и он играет правильно, но он не будет воспроизводиться в браузере Chrome. Как вы можете видеть в коде ниже, я создал файлы mp4, m4v, webM и ogv, и я протестировал их все на своем компьютере для любых проблем с воспроизведением.
симптомы/проблема
в Chrome видео, кажется, загружается, и есть ошибок в журнале консоли нет. Когда кнопка "Играть" нажимая, он загружает часть файла, но затем не воспроизводит его. Но, что интересно, если я произвольно нажму на более позднее время в тайм-баре, скажем, примерно на полпути, он будет воспроизводить около 5 секунд видео даже с субтитрами, но нет аудио.
мои исследования
Я читал о любых проблемах, которые могут быть причиной этого, но я не нашел никаких идей, которые работают. Чтобы отметить ,я написал следующее в своем.реврайт файл:
# ----------------------------------------------------------------------
# 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
кроме того, я использую mediaelement.библиотека js.
код
вот 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>
вот простой js:
$('video,audio').mediaelementplayer({
features: ['playpause','progress','current','tracks','volume'],
startLanguage: 'en'
});
какие идеи?
Спасибо за любую помощь в этом вопросе!
5 ответов
С некоторой помощью другого человека мы выяснили, что это проблема заказа исходных файлов в файле HTML. Я узнал, что браузеры принимают первый полезный формат, и их, похоже, проблема с этим .файл m4v, поэтому я начал с.тогда mp4 .Колсоном. Вот порядок, который работает в Safari (даже на моем iPhone 5), Firefox,и 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>
теперь мне придется повторно проверить кодировку в файле m4v (возможно, проблема Baseline vs Main, Высокие и т. д.).
вы пробовали, установив тип MIME вашего .m4v в "видео / m4v" или "видео/x-m4v"?
- браузеры могут использовать canPlayType
метод внутренне, чтобы проверить, если <source>
является кандидатом на воспроизведение.
В Chrome у меня есть следующие результаты:
document.createElement("video").canPlayType("video/mp4"); // "maybe"
document.createElement("video").canPlayType("video/m4v"); // ""
document.createElement("video").canPlayType("video/x-m4v"); // "maybe"
У меня была аналогичная проблема, никакие видео не будут воспроизводиться в Chrome. Попробовал установить бета-версию 64bit, вернувшись к выпуску Chrome 32bit.
единственное, что сработало для меня, было обновление видео-драйвера.
У меня есть NVIDIA GTS 240. Скачал, установил драйверы и перезапустил, а Chrome 38.0.2125.77 beta-m (64-бит) снова начал воспроизводить видео HTML5 на youtube, vimeo и других. Надеюсь, это поможет кому-то еще.
попробуй такое
<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>
спасибо
всем вам, кто попал сюда и не нашел правильного решения, я узнал, что видео mp4 должно соответствовать определенному формату.
моя проблема заключалась в том, что я получил видео 1920x1080, которое не будет загружаться под Chrome (под Firefox он работал как шарм). После нескольких часов поиска мне наконец удалось повесить проблему, первые несколько потоков, где 1912x1088 так Chrome не будет играть (я получил точный размер потока из инструмента MediaInfo). Чтобы все исправить, я просто ... изменил размер до 1920x1080, и это сработало.