HTML5 видео и Chrome / Webkit - PullRequest
Новая
       20

HTML5 видео и Chrome / Webkit

4 голосов
/ 06 февраля 2012

У меня возникли проблемы с элементом <video>. У меня есть небольшая демонстрационная страница, где я запускаю видео. Этот файл доступен в .webm, .mp4 и .ogv. Видео воспроизводится правильно в Firefox (10) Mac + Win , Safari Mac , Chrome Mac .

Ни Safari-версия windows , ни Chrome не воспроизводят и не показывают этот видеофайл (возможно, проблема с Webkit?). Вот как выглядит HTML-код: 

<video controls>
    <source src="video/chicane.webm" type='video/webm; codecs="vp8, vorbis"'/>
    <source src="video/chicane.mp4" type="video/mp4"/>
    <source src="video/chicane.ogv" type="video/ogv"/>
</video>

Я также использую файл .htaccess для нормализации типов MIME, похоже на 

# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm

Изучив инструменты разработчика Chromes или Safaris (вкладка «Сеть»), похоже, что он решает воспроизвести файл .webm, но не может понять mime type (показывает неопределенное), а также выглядит так пытается получить доступ к файлам дважды.

Посмотри сам:

http://www.typeofnan.com («потрясающая вкладка»)

Понятия не имею, почему он работает нормально на OSX с обоими браузерами, если кто-то может обнаружить ошибку на сайте, пожалуйста, дайте мне знать. В настоящее время я обнаруживаю некоторые функции и использую Javascript для .play() видео. Однако, если я использую атрибут autoplay в теге <video>, Chrome, по крайней мере, воспроизводит звук, но по-прежнему не воспроизводит видео.

Ссылка: Источник сайта на github

Ответы [ 4 ]

3 голосов
/ 27 сентября 2012

Вот что я сделал, чтобы заставить его работать.Поскольку браузер принимает первое видео, которое он может воспроизвести, я поставил сначала версию WEBM, и у Chrome с этим нет проблем.

2 голосов
/ 06 февраля 2012

Вы пытались добавить codecs дополнительную информацию в каждый <source>?
Возможно, WebKit не может автоматически распознавать кодек, используемый для кодирования источника видео. 

// from html5rocks.com, see link on the bottom of answer
<video>
  <source src="movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

http://www.html5rocks.com/en/tutorials/video/basics/#toc-markup

0 голосов
/ 06 февраля 2012

Я написал эту разметку с нуля, используя ваши URL-адреса видео, и, похоже, она работает нормально: 

<video controls width="360" height="360">
    <source src="http://www.typeofnan.com/video/chicane.mp4" type="video/mp4">
    <source src="http://www.typeofnan.com/video/chicane.webm" type="video/webm">
    <source src="http://www.typeofnan.com/video/chicane.ogv" type="video/ogg">
    <span title="No video playback capabilities, please download the video below">Your video</span>
</video>
<p>
    <strong>Download video:</strong> <a href="http://www.typeofnan.com/video/chicane.mp4">MP4 format</a> | <a href="http://www.typeofnan.com/video/chicane.ogv">Ogg format</a> | <a href="http://www.typeofnan.com/video/chicane.webm">WebM format</a>
</p>

См. Видео для всех .

0 голосов
/ 06 февраля 2012

Он работает на моей машине: Windows 7 Family + Chrome 16. Я открыл инструменты разработчика.Затем я добавил autoplay="autoplay" в тег video.Затем я отредактировал тег html source, относящийся к формату webm, чтобы он мог иметь: 

<source src="video/chicane.webm" type="video/webm; codecs=\" vp8, vorbis\"">

Возможно, это была просто проблема с выходом (с двойными кавычками).

...