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

у меня возникли проблемы с отображением видео 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 ответов


на официальном сайте 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>

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


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. Это часть .


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

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

<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 (в корневой папке, у меня есть папка "видео" в "Мои файлы"):

<!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>

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

есть инструмент под названием qт-служба FastStart для выполнения этой операции. Творил чудеса для меня, компилируя и используя версию командной строки Linux, распространяемую с ffmpeg.

make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4

посмотреть этой страница; это обеспечивает решение проблемы плаката с IE9, и расширяется на видеокодеках:

простые CSS и условные операторы сделали свое дело. Я теперь придерживаюсь мнения, что плакаты должны быть размещены в начале (Первый кадр) и в конце (последний кадр) видео, как если бы они были обложками альбомов. Таким образом, изображение в начале и конце видео даст зрителю некоторое визуальное представление о том, почему они должны воспроизводить видео (так же, как причина, по которой вы иногда покупаете альбом, - это обложка).


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

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

надеюсь, что это помогает!