Главная » Все про HTML » Как вставить флэш-ролики, видео и аудио файлы в HTML документ? Урок №18

Как вставить флэш-ролики, видео и аудио файлы в HTML документ? Урок №18

2014-04-10 / Вр:19:02 / просмотров: 16215

Думаю, пришло время получить ответ на вопрос, как вставить флэш-ролики, видео и аудио файлы в HTML документ.
Покажу несколько способов, как вставить видео ролик или аудио файл.

Способ 1.

Видео и аудио файл можно вставить в HTML-документ с помощью тега <embed>.

<embed src="bloggood-ru.swf">

Закрывающий тег не требуется.

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

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Вид плеера зависит от подключенного плагина и атрибутов тега <embed>.

Например, вот Google Chrome:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Или в Internet Explorer:

Атрибуты EMBED

height — высота плеера (в пикселях). Пример:

<embed src="bloggood-ru.swf" height="100">

width — ширина плеера (в пикселях). Пример:

<embed src="bloggood-ru.swf" width="200">

src — адрес флэш-ролика, видео или аудио файла. Пример:

<embed src="bloggood-ru.swf">

type — указывает MIME-тип (спецификация форматирования сообщений и кодирования информации для передачи по интернету) содержимого элемента.

pluginspage — адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру.

autostart — если параметр стоит «0», то это значит, что после загрузки веб-страницы, плеер будет остановлен. Если указать параметр «1», тогда после загрузки веб-страницы, плеер будет автоматически воспроизведен (работает в браузере IE). Пример:

<embed src="bloggood.swf" autostart="0">

title — вывод всплывающей подсказки при наведении курсора мышки на аудио или видео плеер. (Работает в браузере IE).

Пример:

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<title>ТЕГ embed</title>
</head>
<body>
<embed src="bloggood-ru.mp4" width="300" height="300" autostart="0" ENGINE="application/x-mplayer2" pluginspage="https://www.macromedia.com/go/getflashplayer">
</body>
</html>

Результат в Google Chrome:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

А можно вот так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>ТЕГ embed</title>
<META HTTP-EQUIV="content-type" CONTENT="TEXT/HTML; CHARSET=windows-1251">
</head>
<body>
<embed src="bloggood-ru.mp4">
</body>
</html>

Результат в Google Chrome:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Способ 2.

Изображения, аудио, видео, Java приложения, ActiveX, PDF и Flash можно вставить в HTML-документ с помощью тега <OBJECT>.

<OBJECT data="путь к объекту" type="тип объекта" width="ширина" height="высота"></OBJECT>

Закрывающий тег обязателен.

Атрибуты OBJECT

data – указывает путь к файлу объекта;
type – тип обекта (не является обязательным). Например:

type="application/x-shockwave-flash" или type="image/png" и т.д.;

width – ширина;
height–высота

Также можно прописать текст между открывающими тегами <object> </object>. Написанный текст будет отображаться в том случае, если браузер не поддерживает элемент object.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<title>Тег OBJECT</title>
</head>
<body>
<object width="300" height="200" data="bloggood-ru.swf">
 Ваш браузер не поддерживает тег object
</object>
</body>
</html>

Результат данного примера в окне браузера, если он не поддерживает тег OBJECT:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Способ 3.

Вставить аудио на веб-страницу можно и тегом <AUDIO>:

<AUDIO SRC="sound.wav"></AUDIO>

Атрибуты тега AUDIO

autoplay - аудио воспроизводится автоматически сразу после загрузки веб-страницы;

controls - панель управления к аудио плееру;

height - высота аудио плеера;

loop - повтор воспроизведение аудио сначала после его завершения;

src - путь к аудио файлу

Пример:

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<title>ТЕГ AUDIO</title>
</head>
<body>
<AUDIO SRC="bloggood-ru.mp3" controls="controls" autoplay="autoplay" loop="loop"></AUDIO>
</body>
</html>

Результат:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ

Вставить видеоролик на веб-страницу можно и тегом <VIDEO>:

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

Атрибуты тега VIDEO

autoplay - видео воспроизводится автоматически сразу после загрузки веб-страницы;
controls - панель управления к видео плееру;
height - высота видео плеера;
width - ширина видео плеера;
loop - повтор воспроизведение видео сначала после его завершения;
src - путь к видео файлу;
poster - адрес картинки. Картинка будет отображаться пользователю, пока видео не доступно или не воспроизводится.

Пример:

<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<title>ТЕГ VIDEO</title>
</head>
<body>
 <video src="bloggood-ru.mp4" width="400" height="300" controls="controls" poster="kartinka.png">
 Тег video не поддерживается вашим браузером.
 <a href="bloggood-ru.mp4">Скачайте видео</a>.
 </video>
</body>
</html>

Результат:

Вначале загружается картинка «kartinka.png».

Как вставить флэш-ролики, видео и аудио файлы в HTML документ

Когда вы нажмете «плей», картинка исчезнет и заработает видео:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ?

Если браузер не поддерживает тег <video>, вы увидите вот это:

Как вставить флэш-ролики, видео и аудио файлы в HTML документ

Вот и все.
Если есть исправление, дополнение или вопросы по теме «как вставить флэш-ролики, видео и аудио файлы в HTML документ», пишите в комментарии, постараюсь ответить.