Поддержка видео в 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" />

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

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

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

    qt-faststart pre_out.mp4 out.mp4

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

Ответ 3

Вы пытаетесь использовать это в 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>

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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

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