Видео 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, и это сработало.