До недавнего времени воспроизведение видеофайлов на веб-странице было общеизвестно сложным. Пользователю требуется плагин Flash или Silverlight, и даже самый простой HTML-код — запутанный беспорядок:
<object width="320" height="240"> <param name="movie" value="myvideo.swf" /> <embed src="myvideo.swf" width="320" height="240"></embed> </object> Несколько функций HTML5 волнуют разработчиков больше, чем нативное аудио и видео. Теги <audio> и <video> позволяют воспроизводить мультимедийные файлы в браузере с поддержкой HTML5 без подключаемого модуля. Элементы также становятся частью DOM, так что вы можете создавать свои собственные элементы управления плеером, добавлять подписи и синхронизировать события JavaScript с воспроизведением мультимедиа. В качестве бонуса базовый код HTML5 гораздо проще понять:
<video src="myvideo.mp4" width="320" height="240" />
Конечно, жизнь веб-разработчика никогда не бывает такой простой. Хотя спецификация HTML5 определяет теги <audio> и <video> , она не определяет конкретный кодек, и у поставщиков есть свой выбор. Для IE и Safari вы не ошибетесь с файлами MP4 в кодировке H.264. Firefox, Chrome и Opera поддерживают Theora или Vorbis в контейнере Ogg, и WebM скоро будет доступен.
Следовательно, вам все равно придется кодировать несколько файлов для одного видео. К счастью, нет необходимости прибегать к сценариям или обнаружению браузера, потому что HTML5 позволяет нам определять любое количество исходных файлов — браузер выберет первый совместимый формат, который он найдет, например
<video width="320" height="240"> <source src="myvideo.mp4" type="video/mp4" /> <source src="myvideo.ogv" type="video/ogg" /> <source src="myvideo.webm" type="video/webm" /> </video>
Если браузер не поддерживает <video> , мы можем вернуться к версии Flash или Silverlight:
<video width="320" height="240"> <source src="myvideo.mp4" type="video/mp4" /> <source src="myvideo.ogv" type="video/ogg" /> <source src="myvideo.webm" type="video/webm" /> <object width="320" height="240"> <param name="movie" value="myvideo.swf" /> <embed src="myvideo.swf" width="320" height="240"></embed> </object> </video>
Кроме того, мы можем отобразить полезное сообщение об ошибке или показать изображение — возможно, анимированный PNG или GIF!
<video width="320" height="240"> <source src="myvideo.mp4" type="video/mp4" /> <source src="myvideo.ogv" type="video/ogg" /> <source src="myvideo.webm" type="video/webm" /> <p>Sorry, your browser cannot play this video.</p> <img src="videofail.png" /> </video>
Это средство было специально разработано в HTML5, поэтому видео можно показывать в старых браузерах с помощью подключаемого модуля. HTML5 очень счастливо живет с Flash или Silverlight — он не убьет их в ближайшее время !