Вставка видеоролика

Вставка видеоролика

Для вставки на Web-страницу видеоролика предназначен парный тег <VIDEO>. Интернет-адрес видеофайла указывается с помощью знакомого нам атрибута SRC этого тега:

<VIDEO SRC="film.ogg"></VIDEO>

Встретив этот тег, Web-обозреватель выведет в том месте Web-страницы, где он проставлен, панель просмотра содержимого видеоролика. В зависимости от указанных нами в теге <VIDEO> атрибутов, он может сразу загрузить и воспроизвести аудиофайл, только загрузить его без воспроизведения или вообще ничего не делать. Также он может вывести на Web-страницу элементы управления воспроизведением видеоролика.

Как и тег <AUDIO>, тег <VIDEO> создает блочный элемент Web-страницы и поддерживает атрибуты AUTOPLAY, CONTROLS и AUTOBUFFER:

<VIDEO SRC="film.ogg" AUTOPLAY CONTROLS></VIDEO>

Если воспроизведение видеоролика еще не запущено, в панели просмотра будет выведен первый его кадр или вообще ничего (конкретное поведение зависит от Web-обозревателя). Но мы можем указать графическое изображение, которое будет туда выведено в качестве заставки. Для этого служит атрибут POSTER тега <VIDEO>; его значение указывает интернет-адрес нужного графического файла:

<VIDEO SRC="film.ogg" CONTROLS POSTER="filmposter.jpg"></VIDEO>

Здесь мы указали для видеоролика изображение-заставку, которое будет выведено в панели просмотра перед началом его воспроизведения и которое хранится в файле filmposter.jpg.

Ну что, попрактикуемся? Сначала найдем видеофайл подходящего формата. Автор отыскал небольшой видеоролик формата OGG и дал ему имя film.ogg. Вы можете выбрать любой другой видеоролик, но, разумеется, в приводимом далее HTML- коде придется указать имя его файла.

НА ЗАМЕТКУ

Если вы не найдете видеоролика подходящего формата, то можете сами создать его, перекодировав видеоролик, сохраненный в другом формате. Для этого подойдет утилита SUPER ©, которую можно найти по интернет-адресу http://www.erightsoft.com/SUPER.html. Она поддерживает очень много мультимедийных форматов, в том числе и OGG.

Откроем 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>Тег VIDEO</TITLE>

</HEAD>

<BODY>

<H1>Тег VIDEO</H1>

<P>Тег VIDEO служит для вставки на Web-страницу видеоролика.</P>

<H6>Пример:</H6>

<PRE>&lt;VIDEO SRC=&quot;film.ogg&quot; CONTROLS&gt;&lt;/VIDEO&gt;</PRE>

<H6>Результат:</H6>

<VIDEO SRC="film.ogg" CONTROLS></VIDEO>

</BODY>

</HTML>

Сохраним Web-страницу в файле с именем t_video.htm. Поместим выбранный видеофайл (у автора — film.ogg) в папку, где находятся все файлы нашего Web-сайта (и t_video.htm в том числе). И откроем готовую Web-страницу t_video.htm в Web- обозревателе (рис. 4.3).

Рис. 4.3. Web-страница t_video.htm в Web-обозревателе

Ниже кода примера мы увидим результат его выполнения — панель просмотра и элементы для управления воспроизведением. Нажмем кнопку воспроизведения и посмотрим "кино". Отметим, что после начала воспроизведения элементы управления пропадут; чтобы получить к ним доступ, следует навести на панель просмотра курсор мыши. Как только воспроизведение видеоролика закончится, эти элементы управления снова появятся на экране.

Данный текст является ознакомительным фрагментом.



Поделитесь на страничке

Похожие главы из других книг:

Вставка в веб-документ видеоролика

Из книги автора

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


Вставка

Из книги автора

Вставка Редко какой документ состоит только из текста – как правило, его сопровождают рисунки, фотографии, а в случае работы с онлайновым пакетом так и хочется вставить пару гиперссылок! Не нужно сопротивляться своим желаниям – ссылки вставляются в редактируемый


Вставка видеоролика

Из книги автора

Вставка видеоролика Для вставки на Web-страницу видеоролика предназначен парный тег <VIDEO>. Интернет-адрес видеофайла указывается с помощью знакомого нам атрибута SRC этого тега:<VIDEO SRC="film.ogg"></VIDEO>Встретив этот тег, Web-обозреватель выведет в том месте Web-страницы, где


18.6.1 Копирование и вставка

Из книги автора

18.6.1 Копирование и вставка Если на виртуальной машине установлен пакет VMware Tools, имеется возможность осуществлять операции копирования и вставки между приложениями, запущенными в виртуальной машине и на базовом компьютере, а также между двумя виртуальными машинами.


6.1.3. Вставка рисунков

Из книги автора

6.1.3. Вставка рисунков В любом современном документе есть рисунки - будь-то диаграмма или же простой логотип компании. Давно прошли времена сугубо текстовых документов. Рисунки оживляют документ, делают его внешне привлекательнее. Рис. 6.3. Окно вставки картинкиВставить


Вставка

Из книги автора

Вставка Приступим к рассмотрению вкладки Вставка (рис. 1.47). Рис. 1.47. Вкладка Вставка Как вы все уже догадались, инструменты этой вкладки позволяют вставить что-нибудь в текст


Вставка инструкций SQL в VBA-код

Из книги автора

Вставка инструкций SQL в VBA-код Фрагменты кола, приведенные раньше в настоящей главе, должны были проиллюстрировать, как добавлять инструкции SQL в код, написанный на VBA. Здесь очень важно не забывать о том, что VBA обрабатывает инструкции SQL как текстовые строки, а не как часть


Вставка блока

Из книги автора

Вставка блока Команда INSERT осуществляет вставку в текущий чертеж предварительно определенных блоков или существующих файлов рисунков в качестве блока.Команда insert вызывается из падающего меню Insert ? Block… или щелчком на пиктограмме Insert на панели инструментов Draw. При этом


Вставка блока

Из книги автора

Вставка блока Команда INSERT осуществляет вставку в текущий чертеж предварительно определенных блоков или существующих файлов рисунков в качестве блока.Команда INSERT вызывается из падающего меню Insert ? Block… или щелчком на пиктограмме Insert на панели инструментов Draw. При этом


Вставка тишины

Из книги автора

Вставка тишины Рассмотрим такую обработку звукового файла, как вставка фрагмента тишины, доступную с помощью процессора Insert Silence (Вставка тишины). Чтобы вставить в файл фрагмент тишины, необходимо выполнить следующие действия.1. Установите указатель текущей позиции в


Вставка изображений

Из книги автора

Вставка изображений Обмен данными между программами – отдельный, очень важный и достаточно сложный вопрос. ArchiCAD, естественно, имеет инструменты такого обмена, но рассмотрение этих возможностей выходит за рамки данной книги. Мы опишем только возможность вставки


Вставка рисунков

Из книги автора

Вставка рисунков Инструмент вставки изображений активизируется щелчком на кнопке Figure (Изображение) раздела More (Дополнительно) палитры Toolbox (Палитра инструментов). На информационной палитре появляются его параметры (рис. 12.6). Рис. 12.6. Настройки вставки рисунков на


Вставка сносок

Из книги автора

Вставка сносок При создании научных, курсовых или дипломных (особенно по гуманитарным наукам) работ иногда бывает необходимо непосредственно в тексте указать точный источник, откуда была взята цитата. Для этого и в книжном тексте, и в документе, созданном в редакторе Word,


4.7.3. Съемка видеоролика

Из книги автора

4.7.3. Съемка видеоролика Для съемки видеоролика необходимо перейти в соответствующий режим, нажав на кнопку: Обратите внимание, значок фотоаппарата сменится на значок кинокамеры: По которому следует щелкнуть мышью для запуска съемки видеоролика. После отсчета таймером


Вставка

Из книги автора

Вставка Вставка оглавленияТеперь, зная, как пронумеровать листы, неплохо бы научиться делать и оглавление[42]. Microsoft Word делает и это тоже, причем гораздо быстрее любого из людей. Для этого некоторые абзацы надо объявить заголовками с помощью окна с выпадающим списком Стиль