Видео HTML5 не будет воспроизводиться только в Chrome

некоторый фон

Я тестировал свое видео в FF и Safari (включая iDevices), и он воспроизводится правильно, но он не будет воспроизводиться в браузере Chrome. Как вы можете видеть в приведенном ниже коде, я создал файлы mp4, m4v, webM и ogv, и я протестировал их все на своем компьютере для любых проблем с воспроизведением.

симптомы/проблема

В Chrome видео загружается, и в журнале консоли нет ошибок. Когда нажата кнопка воспроизведения, она загружает часть файла, но затем не воспроизводит его. Тем не менее, интересно, если я произвольно нажму на более поздний период времени, скажем, примерно на полпути, он будет воспроизводить около 5 секунд видео даже с субтитрами, но no аудио.

мои исследования

Я прочитал о любых проблемах, которые могут вызвать это, но я не нашел никаких идей, которые работают. Чтобы отметить, я написал следующее в моем файле .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

Кроме того, я использую библиотеку 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'
});

Любые идеи?

Спасибо за любую помощь в этом вопросе!

Ответ 1

С некоторой помощью от другого человека мы выяснили, что это проблема заказа исходных файлов в HTML файле. Я узнал, что браузеры принимают первый удобный формат, и их проблема связана с файлом .m4v, поэтому я начал с .mp4, затем .webm. Здесь порядок, который работает в 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, High и т.д.).

Ответ 2

Вы пытались установить MIME-тип вашего .m4v на "video/m4v" или "video/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"

Ответ 3

У меня была аналогичная проблема, в Chrome не было видео. Пробовал устанавливать бета-версию 64bit, возвращаясь к выпуску Chrome 32bit.

Единственное, что сработало для меня, - это обновление моих видеодрайверов.

У меня есть NVIDIA GTS 240. Загрузили, установили драйверы и перезапустили, а Chrome 38.0.2125.77 beta-m (64-bit) снова начали воспроизводить видео в формате HTML5 на YouTube, Vimeo и других. Надеюсь, это поможет кому-то еще.