Для вставки на Web-страницу видеоролика предназначен парный тег <video>. Интернет-адрес видеофайла указывается с помощью знакомого нам атрибута src этого тега:
<video src="rolik.ogg"</video>
Встретив этот тег, Web-обозреватель выведет в том месте Web-страницы, где он проставлен, панель просмотра содержимого видеоролика. В зависимости от указанных нами в теге <video> атрибутов, он может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. Также он может вывести на Web-страницу элементы управления воспроизведением видеоролика.
Как и тег <audio>, тег <video> создает блочный элемент Web-страницы и поддерживает атрибуты autoplay, controls и autobuffer:
<video src="rolik.ogg" autoplay controls></video>
Если воспроизведение видеоролика еще не запущено, в панели просмотра будет выведен первый его кадр или вообще ничего (конкретное поведение зависит от Web-обозревателя). Но мы можем указать графическое изображение, которое будет туда выведено в качестве заставки. Для этого служит атрибут poster тега <video>; его значение указывает интернет-адрес нужного графического файла:
Здесь мы указали для видеоролика изображение-заставку, которое будет выведено в панели просмотра перед началом его воспроизведения и которое хранится в файле filmposter.jpg. Теперь попробуем на практике! Сначала найдем видеофайл подходящего формата. Автор отыскал небольшой видеоролик формата OGG и дал ему имя rolik.ogg. Вы можете выбрать любой другой видеоролик, но, разумеется, в приводимом далее HTML-коде придется указать имя его файла. Откроем Web-страницу index.htm и впишем в раздел тегов тег <video>. Создадим описывающую этот тег Web-страницу, HTML-код которой приведен в листинге 4.3.
Листинг 4.3
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Ter VIDEO</title>
</head>
<body> <h1>Ter VIDEO</h1>
<p>Ter VIDEO служит для вставки на Web-страницу видеоролика.</p>
<h5>Пример:</h5>
<pre><video src="rolik.ogg" controls></video></pre>
<h5>Результат:</h5>
Сохраним Web-страницу в файле с именем t_video.htm. Поместим выбранный видеофайл (у автора — film.ogg) в папку, где находятся все файлы нашего Web-сайта (и t_video.htm в том числе). И откроем готовую Web-страницу t_video.htm в Web-обозревателе.
Так-же видео на сайт можно выложить можно с помощью сгенерированного html кода, размещенного на специальный видео-хостингах: youtube, yandex, vimeo, ru tube. Чтобы получить такой код, для установки его на сайт, нужно пройти по одной из ссылок. Далее необходимо выбрать пунк "Поделиться" и щелкнуть мышкой. В обновившимся окне откроется два вида добавления: первое - ссылка на файл, второе - сгенерировать код. В первом случае для просмотра видео, ссылка перенаправит пользователя с вашего сайта на свой. Во-втором скопировав код плеера и установив к себе на страницу, пользователь может спокойно просматривать кучу вашего видео в режиме online. Поэтому смело нажимает "Сгенерировать код", копируем и вставляем на нужную вам страницу. (Листинг 4.4)
На заметку:
Лучше использовать видео/аудио своего аккуанта. Очень часто бывает, что выставленные чужие видео ролики, оказываются удаленными из-за нарушения прав. Чтобы не было таких проблем, лучше создать свой аккуант и загружать туда свои видео. По крайней мере будете увкрены, что ни на месте!
