Добавление видео и аудио с использованием HTML5
Буду с вами честен. Я всегда считал добавление мультимедиа на веб-страницы с использованием HTML 4.01 настоящей мукой. Это не сложный, а просто запутанный процесс. HTML5 делает все значительно проще. Необходимый для этого синтаксис очень похож на тот, что используется для добавления изображений:
<video src="myVideo. ogg"></video>
Это глоток свежего воздуха для большинства веб-дизайнеров! Вместо того чтобы писать объемный код, необходимый для включения видео в страницу, можно поручить тегу <video></video> (или тегу <audio></audio> для аудио) всю тяжелую работу. Можно также вставить примечание между открывающим и закрывающим тегами для уведомления пользователей на тот случай, если они будут применять несовместимые с HTML5 браузеры. Кроме того, имеются дополнительные атрибуты, например height и width. Добавим их:
<video src="video/myVideo. mp4" width="640" height="480">What, do you mean you don’t understand HTML5?</video>
Теперь, если мы вставим приведенный чуть выше фрагмент кода в разметку нашей страницы, а затем взглянем на нее в браузере Safari, то увидим, что элементы управления воспроизведением отсутствуют. Чтобы они отобразились по умолчанию, нам необходимо добавить атрибут controls. Можно также добавить атрибут autoplay (но делать это все же не рекомендуется, поскольку никому не нравится, когда воспроизведение видео запускается автоматически). Добавление названных атрибутов демонстрируется в следующем фрагменте кода:
<video src="video/myVideo. mp4" width="640" height="480" controls autoplay>What, do you mean you don’t understand HTML5?</video>
Результат применения приведенного чуть выше фрагмента кода показан На рисунке 4.6.
На нашей странице появилась область воспроизведения с загруженным видео.
К прочим атрибутам относится preload для управления предварительной загрузкой мультимедиа (разработчики, впервые использовавшие HTML5, должны обратить внимание на то, что атрибут preload пришел на смену autobuffer), loop для повторного воспроизведения видео и poster для определения кадра видео, который будет показан до начала воспроизведения. Последний атрибут окажется полезен, если в воспроизведении видео возможна задержка. Чтобы использовать тот или иной атрибут, нужно просто добавить его в соответствующий тег. Вот пример включения всех упоминавшихся чуть ранее атрибутов:
<video src="video/myVideo. mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster. jpg">What, do you mean you don’t understand HTML5?</video>
Обеспечение альтернативных файлов-источников.
Первоначальная HTML5-спецификация предусматривала поддержку всеми браузерами прямого воспроизведения (без плагинов) видео и аудио в контейнерах Ogg. Однако из-за споров между участниками рабочей группы HTML5 требование по поводу поддержки Ogg (включая Theora-видео и Vorbis-аудио) в качестве базового стандарта было удалено из более поздних версий HTML5-спецификации. По этой причине сейчас одни браузеры поддерживают воспроизведение одного набора видео и аудиофайлов, а другие — другого. Например, Safari поддерживает использование в сочетании с элементами <video> и <audio> только медиа MP4/H.264/ AAC, в то время как Firefox и Opera поддерживают лишь Ogg и WebM.
К счастью, есть способ обеспечить поддержку разных форматов в одном теге. Однако это не избавит нас от необходимости создавать разные версии нашего мультимедиа. Хотя мы все и держим пальцы скрещенными в надежде на то, что текущая ситуация со временем разрешится, между тем, вооружившись разными версиями нашего файла, мы можем разметить <video> следующим образом:
<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster. jpg">
<source src="video/myVideo. ogv" type="video/ogg">
<source src="video/myVideo. mp4" type="video/mp4">
What, do you mean you don’t understand HTML5?
</video>
Если браузер поддерживает воспроизведение Ogg, то он будет использовать соответствующий файл; в противном случае браузер перейдет к следующему тегу <source>.
Резервные варианты для устаревших браузеров.
Использование тега <source> позволяет предусмотреть при необходимости несколько резервных вариантов. Например, наряду с обеспечением версий MP4 и Ogg мы, если потребуется включить подходящий резервный вариант для Internet Explorer версии 8 и ниже, можем добавить в качестве альтернативы Flash-видео. Более того, если у определенного пользователя не окажется подходящей технологии воспроизведения, мы можем предусмотреть для него ссылки на скачивание самих файлов:
<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster. jpg">
<source src="video/myVideo. mp4" type="video/mp4">
<source src="video/myVideo. ogv" type="video/ogg">
<object width="640" height="480" type="application/x-shockwaveflash" data="myFlashVideo. SWF">
<param name="movie" value="myFlashVideo. swf" />
<param name="flashvars" value="controlbar=over&image=myVideoPoster. jpg&file=video/myVideo. mp4" />
<img src="myVideoPoster. jpg" width="640" height="480" alt=" TITLE "
Title="No video playback capabilities, please download the video below" /> </object>
<p> <b>Download Video:</b>
MP4 Format: <a href="myVideo. mp4">"MP4"</a>
Ogg Format: <a href="myVideo. ogv">"Ogg"</a>
</p>
</video>
Теги <audio> и <video> работают почти одинаково.
Тег <audio> работает по тому же принципу и с теми же атрибутами, что и <video>, не поддерживая лишь атрибуты width, height и poster. Да, вы можете использовать теги <video> и <audio> почти как взаимозаменяемые. Основное различие между ними заключается в том, что <audio> не имеет области воспроизведения для видимого содержимого.
Добавить комментарий