HTML5 - видеоролик mp4 не воспроизводится в IE9

У меня есть видео mp4, которое я хочу играть в IE9, используя тег HTML5 <video>. Я добавил MIME-тип в IIS 7, поэтому, если я просматриваю http://localhost/video.mp4, он воспроизводится как в Chrome, так и в IE9, но не в HTML5, однако Chrome воспроизводит видео в HTML. Здесь код:

<html>
<body>
  <video src="video.mp4" width="400" height="300" preload controls>
  </video>
</body>
</html>

Любые идеи?

Спасибо

UPDATE:

Пробовал тот же файл в Firefox 5.0, и он тоже не работал, только Chrome может воспроизводить видео mp4.

Ответы

Ответ 1

Закончено использование http://videojs.com/ для поддержки всех браузеров.

Но чтобы получить видео, работающее в IE9 и Chrome, я просто добавил html5 тип документа и использовал mp4:

<!DOCTYPE html>
<html>
<body>
  <video src="video.mp4" width="400" height="300" preload controls>
  </video>
</body>
</html>

Ответ 2

для IE9 Я обнаружил, что для установки режима

требуется метатег,

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

<video width="400" height="300" preload controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag
</video>

Ответ 3

Если он все еще не работает, что, безусловно, может быть решением: закодируйте mp4 со сжатием формата H.264. Если вы кодируете его с помощью формата mpeg4 или divx, иначе он не будет работать в IE9 и может также привести к краху Google Chrome. Для этого я использую бесплатное программное обеспечение Any Video Converter. Но это можно сделать с помощью любого хорошего видеоурока.

Я пробовал все решения, перечисленные здесь, и пробовал другие обходные пути в течение нескольких дней, но проблема заключалась в том, как я создал свой mp4. IE9 не декодирует другой формат, чем H.264.

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

Ответ 4

У Dan есть один из лучших ответов, и я предлагаю вам использовать html5test.com в ваших целевых браузерах, чтобы увидеть поддерживаемые видеоформаты.

Как указано выше, ни один формат не работает, и я использую MP4, закодированный в H.264, WebM, и резерв вспышки. Это позволяет мне показывать видео по следующему:

Win 7 - IE9, Chrome, Firefox, Safari, Opera

Win XP - IE7, IE8, Chrome, Firefox, Safari, Opera

MacBook OS X - Chrome, Firefox, Safari, Opera

iPad 2, iPad 3

Linux - Android 2.3, Android 3

<video width="980" height="540" controls>
        <source src="images/placeholdername.mp4" type="video/mp4" />
        <source src="images/placeholdername.webm" type="video/webm" />
        <embed src="images/placeholdername.mp4" type="application/x-shockwave-flash" width="980" height="570" allowscriptaccess="always" allowfullscreen="true" autoplay="false"></embed>  <!--IE 8 - add 25-30 pixels to vid height to allow QT player controls-->    
    </video>

Примечание: Видео .mp4 должны быть закодированы в базовом профиле h264, чтобы он воспроизводился на всех мобильных устройствах.

Обновление: добавлено автовоспроизведение = "false" в резервную копию Flash. Это предотвращает запуск MP4 сразу после загрузки страницы на IE8, он начнет воспроизведение после нажатия кнопки воспроизведения.

Ответ 5

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.

Ответ 6

Из того, что я слышал, поддержка видео в лучшем случае минимальна.

Из http://diveintohtml5.ep.io/video.html#what-works:

На момент написания этой статьи это пейзаж видео в формате HTML5:

Mozilla Firefox (3.5 и более поздние версии) поддерживает видео Theora и звук Vorbis в контейнере Ogg. Firefox 4 также поддерживает WebM.

Opera (10,5 и более поздние версии) поддерживает видео Theora и аудио Vorbis в контейнере Ogg. Opera 10.60 также поддерживает WebM.

Google Chrome (3.0 и более поздние версии) поддерживает видео Theora и звук Vorbis в контейнере Ogg. Google Chrome 6.0 также поддерживает WebM.

Safari на компьютерах Mac и Windows (3.0 и более поздних) будет поддерживать все, что поддерживает QuickTime. Теоретически вы можете потребовать от своих пользователей установки сторонних плагинов QuickTime. На практике немногие пользователи собираются это сделать. Таким образом, youre осталось с форматами, которые QuickTime поддерживает "из коробки". Это длинный список, но он не включает WebM, Theora, Vorbis или контейнер Ogg. Однако QuickTime поставляется с поддержкой видео H.264 (основной профиль) и аудио AAC в контейнере MP4.

Мобильные телефоны, такие как телефоны Apple iPhone и Google Android, поддерживают видео H.264 (базовый профиль) и аудио AAC (профиль "с низкой сложностью" ) в контейнере MP4.

Adobe Flash (9.0.60.184 и более поздние версии) поддерживает видео H.264 (все профили) и аудио AAC (все профили) в контейнере MP4.

Internet Explorer 9 поддерживает все профили видео H.264 и аудио AAC или MP3 в контейнере MP4. Он также будет воспроизводить видео WebM, если вы установите сторонний кодек, который по умолчанию не установлен на любую версию Windows. IE9 не поддерживает другие сторонние кодеки (в отличие от Safari, в котором будут воспроизводиться все, что может играть QuickTime).

Internet Explorer 8 не поддерживает HTML5 видео, но практически все пользователи Internet Explorer будут иметь плагин Adobe Flash. Позже в этой главе я покажу вам, как вы можете использовать HTML5-видео, но грациозно откинуться на Flash.

Кроме того, вы должны отметить этот раздел чуть ниже на той же странице:

Нет единой комбинации контейнеров и кодеков, которые работают во всех браузерах HTML5.

Это вряд ли изменится в ближайшем будущем.

Чтобы сделать ваше видео доступным для просмотра на всех этих устройствах и платформах, вам потребуется несколько раз закодировать видео.

Ответ 7

У меня есть базовый профиль .mp4, который воспроизводится на одном сервере, и не на другом.

Единственное отличие:
один дает заголовок "Content-Length: ..."
другой "Trasfer-Encoding: chunked".

Я выяснил, что Content-Length не требуется, важно, чтобы не было заголовка NO chunked. Это можно сделать, отключив сжатие (deflate или gzip) для файлов .mp4. Как это можно сделать, это еще одна проблема и другая тема: Как отключить сжатие gzip Apache для некоторых медиафайлов в файле .htaccess?

Может возникнуть проблема с другим сервером:
он должен дать "Content-Type: video/mp4"
и НЕ "Content-Type: text/plain"

Ответ 8

Если какой-либо из приведенных выше ответов не работает, и вы находитесь на сервере apache, добавив следующее в ваш файл .htaccess:

//most of the common formats, add any that apply
AddType video/mp4 .mp4 
AddType audio/mp4 .m4a
AddType video/mp4 .m4v
AddType video/ogg .ogv 
AddType video/ogg .ogg
AddType video/webm .webm

У меня была аналогичная проблема, и это решило все мои проблемы с воспроизведением.

Ответ 9

использовать оба формата, он отлично работает во всех браузерах:

<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>

Ответ 10

Internet Explorer и Edge не поддерживают некоторые форматы MP4, которые делает Chrome. Вы можете использовать ffprobe для просмотра точного формата MP4. В моем случае у меня есть эти два видео:

Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf56.40.101
  Duration: 00:00:12.10, start: 0.000000, bitrate: 287 kb/s
    Stream #0:0(und): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuv444p, 1000x1000 [SAR 1:1 DAR 1:1], 281 kb/s, 60 fps, 60 tbr, 15360 tbn, 120 tbc (default)
    Metadata:
      handler_name    : VideoHandler


Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'b.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf57.66.102
  Duration: 00:00:33.83, start: 0.000000, bitrate: 505 kb/s
    Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 1280x680, 504 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler

Оба отлично работают в Chrome, но первый из них не работает в IE и Edge. Проблема в том, что IE и Edge не поддерживают yuv444. Вы можете преобразовать в более короткое цветовое пространство следующим образом:

ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4

Ответ 11

Попробуйте следующее и посмотрите, работает ли оно:

<video width="400" height="300" preload controls>
  <source src="video.mp4" type="video/mp4" />
  Your browser does not support the video tag.
</video>

Ответ 12

Мне пришлось установить IIS Media Services 4.1 из галереи веб-приложений Windows.

http://www.microsoft.com/web/gallery/install.aspx?appsxml=http://www.microsoft.com/web/webpi/3.0/MediaProductList.xml&appid=MediaServices

Ответ 13

Без JavaScript, единственный способ, которым я мог играть без ошибок:

<!--[if lte IE 9]>
<!-- PUT HERE A FLASH PLAYER WITH video.flv -->
<![endif]-->

<!--[if gt IE 9]><!-->
<video controls class="video">
    <source src="video.mp4" type="video/mp4">
    <!-- REPEAT FLASH PLAYER CODE HERE -->
</video>
<!--<![endif]-->