Суббота , 22 Июль 2017
Как новичку заработать в интернете?
ДомойПубликацииИспользование тега video в html

Использование тега video в html

Сталкиваюсь с ситуацией, что порой людям хочется разместить на сайте видео. а учитывая, что самый распространённый тип — avi, ситуация меняется следующим образом: «как мне разместить на своём сайте видео avi».

Спешу обрадовать: никак. Универсальный способ есть, но он, фактически, один: использование флеш. Таким образом, без конвертирования всё равно не обойтись. Но это сейчас. В будущем обещают ввести тег video в html5, который будет отвечать за проигрывание контента. “Вот оно, светлое будущее”, радостно потирают руки веб-мастера и… самодовольно обламываются.

2

Как оказалось, в мире не только несколько видео-форматов, но и несколько браузеров (браузер: то самое окошко с мельтешащей буквой e; тот самый ‘синий’, а не ‘оранжевый/красный/etc.’ интернет). Доля ie составляет уже не >2/3, как раньше. Поэтому ви́дение основного формата ‘видео для video’ майкромягкими далеко не всегда совпадает с мнением остальных разработчиков браузеров. Но лучше отвлечься от войн браузеров, потому что ВСЕГДА побеждает тот, у кого больше денег (в крайнем случае, можно купить конкурента и, таким-образом, всё-равно победить).

Обратившись к первоисточнику, можно найти весьма примечательную фразу: использование форматов Ogg/Theora/Vorbis и MP4/H.264/AAC покрывает большинство случаев (если не все). Фраза хороша, но актуальна для браузеров, поддерживающих тег video.

Ага — решит любознательный — и какой же из форматов выбрали основные производители браузеров?

Разработчики firefox и opera отдали предпочтение формату Ogg Theora;

Разработчики ie9 (ie8 и ниже тег video не поддерживают!) и safari (что неудивительно) предпочли H.264;

Разработчики chrome, чтобы остаться в выигрыше (тоже весьма объяснимо для сравнительного молодого браузера), поддерживают оба формата.

И вот, собственно, именно с этого и начинаются пляски с бубнами (да и с остальными мастями тоже).

Для начала, неплохо разобраться с тегом video, что это вообще за зверь? Внешне он немного похож на object: во внешний контейнер вставляются дополнительные элементы, определяющие тип и местонахождение проигрываемого контента.

Для примера:

<video controls="controls" width="320" height="240" src="file.ogv">
<p>not support video</p>
</video>
    <video controls="controls" width="320" height="240">
        <source src="file.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <p>not support video</p>
    </video>

В первом примере показан «укороченный» вариант. Содержимое между открывающим и закрывающим тегом video будет выведено в случае, если браузер не поддерживает воспроизведение *.ogv-файлов.

Второй пример инетереснее. в нём показывается, как именно можно «впихнуть» внутрь тега разносортное содержимое. Как и в первом случае, если файл не поддерживается, будет выведено предупреждение.

Теперь можно вспомнить комментарий w3 и привести вариант, рабочий для почти всех (“если не всех”) браузеров (ещё раз повторюсь: это актуально только для браузеров, знакомых с тегом video):

    <video controls="controls" width="320" height="240">
        <source src="file.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="file.mp4" type='video/mp4; codecs="avc1, mp4a"'>
        <p>not support video</p>
    </video>

Таким образом, если браузер не поддерживает *.ogv, будет воспроизведён *.mp4, и наоборот. Если же ни один формат не поддерживается, пользователь увидит сообщение о недопустимом типе файла.

3

Может возникнуть естественный вопрос: а какой файл воспроизведётся, если поддерживаются оба формата? Воспроизведётся тот, который ближе к открывающему тегу video. Так что не нужно бояться, что браузер начнёт воспроизводить сразу оба файла, или файлы вступят в конфликт.

Замечательно, задел на будущее есть. Правда, произошло столкновение с неприятностью: все файлы требуется конвертировать в 2 формата. Да?

Нет!

Будущее — это хорошо, но без “настоящего” оно невозможно. А настоящее — целая толпа пользователей с браузерами internet explorer 8 и ниже. Таким образом, окончательный код вышеописанного безобразия ещё сильнее разрастётся:

    <video controls="controls" width="320" height="240">
        <source src="file.ogv" type='video/ogg; codecs="theora, vorbis"'>
        <source src="file.mp4" type='video/mp4; codecs="avc1, mp4a"'>
        <object width="320" height="240"
            classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
            <param name="url" value="file.avi">
            <param name="width" value="320">
            <param name="height" value="240">
            <param name="AutoStart" value="1">
            <embed src="file.avi"
                      type="application/x-mplayer2"
                      width="320" height="240"
                      AutoStart="1"></embed>
        </object>
        <p>not support video</p>
    </video>

В данном примере посредством тега object в страничку внедряется элемент управления Windows Media Player (привет твикерщикам, его удалившим).

В тегах param/embed можно, конечно, указать mp4/ogv файл, но всё-таки *.avi является для windows «родным», поэтому проблем с воспроизведением должно быть меньше.

Полный листинг можно скачать отсюда. Для корректной работы в папочку с html-файлом требуется поместить файлики: file.mp4, file.ogv, file.avi (можно взять из своей коллекции или где-нибудь в интернете).

PS: браузеры постоянно развиваются и совершенствуются; в них появляются новые возможности и изменяются старые. Вполне может быть, что создателям firefox/opera придётся пересмотреть свои позиции, и общепринятым форматом станет H.264. Но пока этого не случилось, можно использовать «универсальное лекарство» — флеш. Adobe Flash Player, начиная с версии 9.0.115.0, поддерживает H.264 и AAC.



Рейтинг: 0

Автор публикации

1 594
не в сети 4 часа

x64 (aka andi)

Комментарии: 2289Публикации: 320Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (1 голосов, в среднем: 5,00 из 5)
Загрузка...

Оставить комментарий

Ваш email не будет опубликован.Необходимы поля отмечены *

*

Добавьте изображение (jpg/gif/png)

Авторизация

Регистрация

Пароль не введен

Генерация пароля