Наблюдая за стремительным развитием HTML5, мы не обращаем внимания на то, как развивается HTML 5 на современных сайтах. Хотя многие тонкости HTML5 все еще в стадии разработки, Firefox, Safari, Opera и Chrome уже предложили поддержку большей части новой технологий.
Особый интерес возник к HTML5 тегу <video> . Этот тег должен был решать проблему со встроенной поддержки видео, с помощью одного кодека, во всех браузерах, без необходимости использования плагинов, таких как Flash. Хотя идея использовать универсальный кодек кажется утопичной, есть проект, который предлагает использовать тег <video> в браузерах, которые его поддерживают, а в остальных просто скрывать содержимое этого тега.
Код
Наилучшие результаты возможны при использовании такого кода:
<video width="640" height="360" poster="fallback.jpg" controls="controls"> <source src="http://mysite.com/videoname.mp4" type="video/mp4" /> <a href="http://mysite.com/"><img src="fallback.jpg" width="640" height="360" /></a></video>
Как вы видите, вы предоставляете альтернативу в виде изображения (которое удобно загружается, как превью для фильма, перед просмотром электронной почты для клиентов, которые поддерживают видео) в теге <video> вместе с шириной и высотой видео. Вместе с тегом <video> вы подключаете кодированное видео с помощью H.264 используя тег <source>, помня, что вы должны поставить ссылку на существующий файл на вашем сервере. Наконец, мы добавляем альтернативное содержание, которое нужно будет отображать в любом почтовом клиенте, который не поддерживает HTML5 тег <video>. Это, как правило, интерактивные скриншоты из видео, при нажатии на которые, видео будет играть в браузере.
Flash плеер вместо html5 видео
Возможно использование flash технологий:
Используйте видеоплеер на flash (например http://flv-mp3.com/ru/), вставляете на сайт и прописываете в нём путь к файлу с видео (должно быть в формате flv). Сам flv можно с интернета выкачать с помощью расширения Downloadhelper для Firefox.
Атрибуты тега video в HTML 5
Теги определяют видео на сайте:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<video src="video.mp4" controls="controls">
Ваш браузер не поддерживает теги <video> </video>! Обновите версию браузера!
</video>
</body>
</html>
Тег <source /> определяет источник видео:
<video controls="controls">
<source src="video.m4v" type="video/mp4" /> <!-- MPEG4 для браузеров Safari -->
<source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora для Firefox -->
</video>
Атрибуты и значения
В примерах видно, файлы каких форматов были использованы. Будем надеяться, что разработчики web-браузеров со временем сойдутся во мнениях и выберут какой-то один видео формат, который получит кроссбраузерную поддержку. Но это в будущем, а пока довольствуемся тем, что есть.