HTML5 Multimedia"> HTML5 Multimedia">

Vulpo One

Маленькое исследование HTML5 Multimedia

Posted in IT/Multimedia, Development/Web

А точнее, поддержка элементов audio и video в современных браузерах.

Для проверки были сделаны 2 странички и использованы 4 мультимедиа файла в форматах mp3, ogg vorbis, ogg theora, x264/mp4

Итак… на сегодняшний день audio и video поддерживают:

  • Mozilla Firefox 3.5 RC (Windows, Linux) — скорее всего станет первым стабильным браузером с этой фичей
  • Mozilla SeaMonkey 2.0b1 (Windows, Linux) — ну… логично
  • Arora 0.7.1 (Linux). Виндовая почему-то не хочет…
  • Google Chrome 3.0 (Windows) — тоже пока еще development branch. Единственный конкурент Мозиллы на право первенства. Версия же под Linux пока вообще ничего не умеет

MSIE как всегда в пролете. Opera в мейнстрим пока свои наработки пускать не хочет. Safari вопреки слухам тоже пока поддержкой не обзавелся. (возможно, слухи были про MacOS)

Поддержка форматов
Где указаны 2 формата, было использовано несколько источников для элемента (см. код под катом)
 MozillaAroraChrome
mp3
ogg
mp3, oggogg
ogg
ogg, mp3ogg
ogg
mp4 (h264)
ogv (theora)
mp4, ogvogv
mp4
ogv, mp4ogv
ogv

Google Chrome понял формат mpeg, но всё равно предпочел ogv в обоих случаях независимо от порядка указания. Он просто хочет audio/mp4 в качестве MIME-типа. Подправил код и Хром сразу стал вести себя логичнее.

Arora почему-то не поняла множественные источники.

Код страничек (под катом):

audio.html

<html>
<head>
    <meta charset="utf-8"/>
    <title>HTML5 Audio</title>
</head>
<body>
    <p>
        mp3:<br />
        <audio src="audio.mp3" controls="controls">
            Нет поддержки элемента audio
        </audio>
    </p>
    <p>
        ogg:<br />
        <audio src="audio.ogg" controls="controls">
            Нет поддержки элемента audio
        </audio>
    </p>
    <p>
        Много источников. Сначала указан mp3, потом ogg:<br />
        <audio controls="controls">
            <source src="audio.mp3" type="audio/mpeg"/>
            <source src="audio.ogg" type="audio/ogg"/>
            Нет поддержки элемента audio
        </audio>
    </p>
    <p>
        Много источников. Сначала указан ogg, потом mp3:<br />
        <audio controls="controls">
            <source src="audio.ogg" type="audio/ogg"/>
            <source src="audio.mp3" type="audio/mpeg"/>
            Нет поддержки элемента audio
        </audio>
    </p>
    </body>
    </html>

video.html

<html>
<head>
    <meta charset="utf-8"/>
    <title>HTML5 Video</title>
</head>
<body>
    <p>
        mp4/x264:<br />
        <video src="video.mp4" controls="controls">
            Нет поддержки элемента video
        </video>
    </p>
    <p>
        ogv/theora:<br />
        <video src="video.ogv" controls="controls">
            Нет поддержки элемента video
        </video>
    </p>
    <p>
        Много источников. Сначала указан mp4, потом ogv:<br />
        <video controls="controls">
            <source src="video.mp4" type="video/mp4"/>
            <source src="video.ogv" type="video/ogg"/>
            Нет поддержки элемента video
        </video>
    </p>
    <p>
        Много источников. Сначала указан ogv, потом mp4:<br />
        <video controls="controls">
            <source src="video.ogv" type="video/ogg"/>
            <source src="video.mp4" type="video/mp4"/>
            Нет поддержки элемента video
        </video>
    </p>
</body>
</html>

arora, gecko, google chrome, html audio, html video, html5, mozilla firefox, seamonkey