Вставка видео в 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-браузеров со временем сойдутся во мнениях и выберут какой-то один видео формат, который получит кроссбраузерную поддержку. Но это в будущем, а пока довольствуемся тем, что есть.

Аватар пользователя Дмитрий

Как указать высоту и ширину видеоплеера чтобы ролик масштабировался на все окно браузера при изменении размера окна?

Добавить комментарий

CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.