Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Teg-video-v-html5

Тег video в HTML5

Давненько я ничего не писал, но сегодня я все-таки взялся решил взяться за этот урок. Он будет немного большим чем предыдущие. В этом уроке мы с вами познакомимся с замечательным абсолютно новым тегом <video>.

В чем же прелесть данного тега? А вся прелесть заключается в том, что теперь вам не требуется использовать никаких плагинов для вставки видео файлов. Более того теперь вы сможете сами настраивать и стилизовать элементы видео. И так начнем!

Тег video позволяет добавлять, воспроизводить и управлять настройками видео файла на страничке документа HTML5. Путь к видео файлу можно задать двумя разными способами: через атрибут src или тег <source>. Общий синтаксис имеет следующий вид:

<video>
  <source src="Путь к видео файлу">
  </video>

или <video src=»Путь к видео файлу»>
</video>

Для элемента видео представлен целый ряд атрибутов, которые расширяют его возможности:

Автовоспроизведение autoplay

Как вы уж догадались из названия атрибут autoplay позволяет нам автоматически начать воспроизведение видео файла.
Синтаксис для данного атрибута имеет следующий вид:

<video autoplay="autoplay">
  </video>
  
или ещё проще

<video autoplay></video>
 

Скажу сразу, что я бы не советовал использовать данный атрибут так, как посетителям странички сайта вряд ли это понравится. Но всё же имейте ввиду что такой атрибут есть. Возможно вы захотите использовать его для загрузки видео вместо слайд-шоу.

Элементы управления controls

А вот этот атрибут, наоборот, я бы посоветовал вам использовать. Атрибут controls добавляет панель управления видеовоспроизведения, причем вид панели и элементы управления могут быть различными в зависимости от браузера на котором, воспроизводится видео. Синтаксис имеет вид:

 <video controls="controls">
  </video>
  
или 

<video controls></video>

Высота и ширина

Атрибуты height и width задают высоту и ширину области видевоспроизведения соответственно. Думаю здесь объяснения излишне так, как данные атрибуты используются для изображений. Общий синтаксис:

<video height="высота" width="ширина"></video> 

Путь к видео файлу src

Об этом атрибуте мы говорили в самом начале статьи, он указывает путь к видео файлу.

Предварительная загрузка preload

Данный атрибут позволяет управлять предварительной загрузкой файла. Имеет несколько значений:

Синтаксис применения для данного атрибута имеет следующий вид:

<video preload="значение атрибута"></video> 

Изображение poster

Данный атрибут позволяет указать путь к изображению, которое будет использоваться перед запуском видео. Если не использовать данный атрибут, то будет показан первый кадр видео фрагмента. Синтаксис имеет следующий вид:

<video poster="Путь к файлу изображения"></video><video poster="Путь к файлу изображения"></video> 

Повтор loop

Этот атрибут используется для бесконечного воспроизведения видео после его завершения. Имеет следующий синтаксис:

<video loop="loop"></video>

или просто

<video loop></video>
 

Что же ещё надо обязательно знать про тег video? Осталась ещё одна вещь. Всё дело в том, что разные браузеры поддерживают разные аудио и видео кодеки.
Т.е видео файл воспроизводимый на одном браузере, не будет воспроизводиться на другом. Чтобы исправить данное положение видео кодируют с помощью разных кодеков и добавляют закодированные файлы одновременно,
используя тег <source> и атрибут type. Для закрепления данного урока я покажу вам небольшой пример использования видео в HTML5:

 <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>video в html5</title>
 </head>
 <body>
  <video width="400" height="300" controls="controls"
 poster="video/video.jpg">
   <source src="../video/zoo.ogv" type='video/ogg;
 codecs="theora, vorbis"'>
   <source src="../video/zoo.mp4" type='video/mp4;
 codecs="avc1.42E01E, mp4a.40.2"'>
   <source src="../video/zoo.webm" type='video/webm;
 codecs="vp8, vorbis"'>
   <p>Видео не поддерживается вашим браузером. Скачать 
видео вы можете <a href="../video/zoo.mp4">здесь</a>.</p>
  </video>
 </body>
</html>

Уверен, что вам понравился данный урок. Совсем скоро мы закончим изучение HTML5 и подведём некоторые итоги.



наверх