IE9 HTML5 видео поддержка - PullRequest
Новая
       6

IE9 HTML5 видео поддержка

10 голосов
/ 27 октября 2011

У меня возникают некоторые проблемы с отображением HTML5-видео в IE9, я добавил различные типы в свой htaccess 

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Это то, что я имею в качестве html 

<video id="video" autoplay loop preload>
            <source src="video/final_loop.mp4" type="video/mp4" />
            <source src="video/final_loop.webm" type="video/webm" />
            <source src="video/final_loop.ogg" type="video/ogg" />

            Your browser does not support the <code>video</code> element. 
        </video>

Я такжепытался конвертировать видео в формат Theora ogv и использовать 

<source src="video/final_loop.theora.ogv" type="video/ogv" />

Но это тоже не работает, я думал, .ogg поддерживается в IE9?

Ответы [ 7 ]

8 голосов
/ 13 марта 2014

Internet Explorer 9 поддерживает MPEG4 с использованием кодека H.264.Но также необходимо, чтобы файл мог начать воспроизводиться, как только начнется его загрузка.

Вот основные шаги по созданию файла MPEG, который работает в IE9 (с помощью avconv в Ubuntu).Я потратил много часов, чтобы понять это, поэтому я надеюсь, что это может помочь кому-то еще.

  1. Преобразование видео в MPEG4 с использованием кодека H.264.Вам не нужно ничего фантастического, просто позвольте avconv сделать всю работу за вас: 

    avconv -i video.mp4 -vcodec libx264 pre_out.mp4

  2. Это видео будет работать во всех браузерах, поддерживающих MPEG4, кроме IE9.Чтобы добавить поддержку IE9, необходимо переместить информацию о файле в заголовок файла, чтобы браузер мог начать воспроизведение, как только он начнет загружать его.ЭТО КЛЮЧ ДЛЯ IE9 !!! 

    qt-faststart pre_out.mp4 out.mp4

qt-faststart - это утилиты Quicktime, которые также поддерживают формат файлов H.264 / ACC.Он входит в пакет libav-tools.

5 голосов
/ 27 октября 2011

Вы пытаетесь использовать это на IIS?

Если это так, вы должны добавить соответствующие типы пантомимы, чтобы распознать ваши видеофайлы: 

<configuration>
  <system.webServer>
    <staticContent>
      <!-- Video -->
      <mimeMap fileExtension=".mp4" mimeType="video/mp4"/>
      <mimeMap fileExtension=".webm" mimeType="video/webm"/>
    </staticContent>
  </system.webServer>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
    </system.web>

</configuration>

Вот некоторая разметка, которая работает для меня в IE9 (в корневой папке у меня есть папка «video» с моими файлами): 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Video Demo</title>    
    </head>
    <body>
        <video id='movie'
            autoplay 
            controls
            loop 
            preload=auto
            playbackRate="1"
            width="800">
                <source src="video/video.mp4" type='video/mp4' /> 
                <source src="video/video.webm" type='video/webm' />
        </video>
    </body>

</html>
1 голос
/ 29 сентября 2014

Обратите внимание, что для IE9 источник видео должен быть указан в атрибуте 'src' самого видео-тега.

Я предлагаю вам специально определить IE9 и добавить это свойство в тег видео.Вы должны сделать это специально для IE9, потому что Firefox на OSX не примет видеофайл MP4 в теге src.

Надеюсь, это поможет!

1 голос
/ 24 декабря 2012

См. эту страницу ; он обеспечивает решение проблемы постера с IE9 и расширяет возможности видеокодеков:

Некоторые простые CSS и условные выражения сделали свое дело. Сейчас я придерживаюсь мнения, что постеры должны быть размещены в начале (первый кадр) и в конце (последний кадр) видео, как если бы они были обложками альбомов. Таким образом, изображение в начале и конце видео даст НЕКОТОРЫМ зрителям визуальное представление о том, почему они должны воспроизводить видео (так же, как причина, по которой вы иногда покупаете альбом, из-за обложки).

1 голос
/ 04 марта 2012

Как уже упоминалось, IE9 не поддерживает OGV, только MP4 и WebM (с плагином). Я столкнулся с множеством проблем даже с MP4, который должен воспроизводиться естественным образом, прежде чем выяснить, что при обслуживании файлов MP4 для IE9 необходимо учитывать метаинформацию файла, называемую атомом moov, встроенную в сам файл MP4. Если он находится в конце файла, куда его помещают некоторые кодировщики, включая ffmpeg , IE9 не начнет воспроизведение видео, если не загружен весь видеофайл. Перемещение метаданных moov atom в начало файла обеспечивает прогрессивную загрузку файла MP4, и IE9 прекрасно обрабатывает видео.

Для выполнения этой операции есть инструмент под названием qt-faststart . Я совершил чудеса, компилируя и используя версию командной строки для Linux, поставляемую с ffmpeg. 

make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4
0 голосов
/ 27 октября 2011
0 голосов
/ 27 октября 2011

На официальном сайте Microsoft есть этот фрагмент кода для видео на IE9 

<video width="400"
    height="300"
    src="video.mp4"
    poster="frame.png"
    autoplay
    controls
    loop>
    This content appears if the video tag or the codec is not supported.
 </video>

Попробуйте с этим кодом.

...