Вставка видео в html 5

Аватар пользователя dev
Опубликовано пн, 07/06/2015 - 04:01 пользователем dev

Наблюдая за стремительным развитием 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>. Это, как правило, интерактивные скриншоты из видео, при нажатии на которые, видео будет играть в браузере.

Аватар пользователя ilona.baranok

Возможно использование flash технологий:

Используйте видеоплеер на flash (например http://flv-mp3.com/ru/), вставляете на сайт и прописываете в нём путь к файлу с видео (должно быть в формате flv). Сам flv можно с интернета выкачать с помощью расширения Downloadhelper для Firefox.

Аватар пользователя artur.baranok

Теги определяют видео на сайте:

<!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>

Атрибуты и значения

  • autoplay="autoplay" – видео воспроизводится сразу после загрузки страницы.
  • autobuffer="autobuffer" – видео воспроизводится уже в момент загрузки страницы.
  • controls="controls" – панель управления видеоплеером.
  • loop="loop" – по окончанию, видео проигрывается снова.
  • src="url" – источник видео.
  • type="video/ogg" – определяет формат видео.
  • height="" – высота видеоплеера.
  • width="" – ширина видеоплеера.

В примерах видно, файлы каких форматов были использованы. Будем надеяться, что разработчики web-браузеров со временем сойдутся во мнениях и выберут какой-то один видео формат, который получит кроссбраузерную поддержку. Но это в будущем, а пока довольствуемся тем, что есть.