HTML5 - видео в формате mp4 не воспроизводится в IE9 - PullRequest
Новая
       46

HTML5 - видео в формате mp4 не воспроизводится в IE9

36 голосов
/ 04 августа 2011

У меня есть видео 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>

Есть идеи?

Спасибо

ОБНОВЛЕНИЕ:

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

Ответы [ 13 ]

41 голосов
/ 11 ноября 2012

для 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>
18 голосов
/ 24 сентября 2011

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

Но чтобы видео работало в IE9 и Chrome, я просто добавил html5 doc type и использовал mp4: 

<!DOCTYPE html>
<html>
<body>
  <video src="video.mp4" width="400" height="300" preload controls>
  </video>
</body>
</html>
17 голосов
/ 23 декабря 2011

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

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

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

8 голосов
/ 24 мая 2012

У Дана есть один из лучших ответов, и я бы посоветовал вам использовать 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, чтобы оно воспроизводилось на всех мобильных устройствах.

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

6 голосов
/ 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.

3 голосов
/ 14 ноября 2012

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

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

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

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

3 голосов
/ 04 августа 2011

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

Начиная с 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.На практике мало кто собирается это делать.Таким образом, у вас остались форматы, которые QuickTime поддерживает «из коробки». Это длинный список, но он не включает WebM, Theora, Vorbis или контейнер Ogg.Однако QuickTime поставляется с поддержкой видео H.264 (основной профиль) и аудио AAC в контейнере MP4.

  • Мобильные телефоны, такие как iPhone от Apple и телефоны 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.

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

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

2 голосов
/ 19 ноября 2014

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

<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>
1 голос
/ 09 марта 2017

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
1 голос
/ 18 ноября 2014

Если какой-либо из приведенных выше ответов не работает, и вы работаете на сервере 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

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

Страница:
...