HTML - встраивание мультимедиа
Иногда вам нужно добавить музыку или видео на свою веб-страницу. Самый простой способ добавить видео или звук на ваш веб-сайт - это добавить специальный HTML-тег, называемый<embed>. Этот тег заставляет сам браузер включать элементы управления для мультимедиа, автоматически при условии, что браузер поддерживает тег <embed> и данный тип мультимедиа.
Вы также можете включить <noembed>для браузеров, которые не распознают тег <embed>. Вы можете, например, использовать <embed> для отображения фильма по вашему выбору, и<noembed> для отображения одного изображения JPG, если браузер не поддерживает тег <embed>.
пример
Вот простой пример воспроизведения встроенного файла midi:
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>
Атрибуты тега <embed>
Ниже приводится список важных атрибутов, которые можно использовать с тегом <embed>.
Note-Атрибуты align и autostart устарели в HTML5. Не используйте эти атрибуты.
Старший Нет | Атрибут и описание |
---|---|
1 | align Определяет, как выровнять объект. Его можно установить по центру, влево или вправо . |
2 | autostart Этот логический атрибут указывает, должен ли носитель запускаться автоматически. Вы можете установить значение true или false. |
3 | loop Определяет, должен ли звук воспроизводиться непрерывно (установите для цикла значение true), определенное количество раз (положительное значение) или не воспроизводить вообще (false) |
4 | playcount Задает количество воспроизведений звука. Это альтернативный вариант для цикла, если вы используете IE. |
5 | hidden Указывает, следует ли отображать мультимедийный объект на странице. Ложное значение означает «нет», а истинное значение означает «да». |
6 | width Ширина объекта в пикселях |
7 | height Высота объекта в пикселях |
8 | name Имя, используемое для ссылки на объект. |
9 | src URL-адрес внедряемого объекта. |
10 | volume Регулирует громкость звука. Может быть от 0 (выключено) до 100 (полная громкость). |
Поддерживаемые типы видео
Вы можете использовать различные типы файлов мультимедиа, такие как Flash-ролики (.swf), файлы AVI (.avi) и MOV (.mov) внутри тега embed.
.swf files - типы файлов, создаваемые программой Macromedia Flash.
.wmv files - типы файлов мультимедийного видео в Microsoft Windows.
.mov files - это формат Apple Quick Time Movie.
.mpeg files - файлы фильмов, созданные экспертной группой Moving Pictures.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>
Это даст следующий результат -
Фоновый звук
Вы можете использовать HTML <bgsound>тег, чтобы воспроизвести звуковую дорожку на фоне вашей веб-страницы. Этот тег поддерживается только Internet Explorer, и большинство других браузеров игнорируют этот тег. Он загружает и воспроизводит аудиофайл, когда основной документ сначала загружается пользователем и отображается. Фоновый звуковой файл также будет воспроизводиться всякий раз, когда пользователь обновляет браузер.
Note- Тег bgsound устарел и предполагается, что он будет удален в будущей версии HTML. Поэтому их лучше не использовать, рекомендуется использовать аудио тега HTML5 для добавления звука. Но, тем не менее, в целях обучения в этой главе будут подробно описаны теги bgsound.
Этот тег имеет только два атрибута: loop и src . Оба эти атрибута имеют такое же значение, как объяснено выше.
Вот простой пример воспроизведения небольшого файла midi -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>
Это приведет к пустому экрану. Этот тег не отображает никаких компонентов и остается скрытым.
Internet Explorer также может обрабатывать только три файла в различных звуковых форматах - wav, собственный формат для ПК; au, собственный формат для большинства рабочих станций Unix; и MIDI, универсальная схема кодирования музыки.
Тег HTML-объекта
HTML 4 представляет <object>element, который предлагает универсальное решение для включения общих объектов. В<object> Элемент позволяет авторам HTML определять все, что требуется объекту для его представления пользовательским агентом.
Вот несколько примеров -
Пример - 1
Вы можете встроить HTML-документ в сам HTML-документ следующим образом:
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>
Здесь появится атрибут alt, если браузер не поддерживает тег объекта .
Пример - 2
Вы можете встроить PDF-документ в HTML-документ следующим образом:
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>
Пример - 3
Вы можете указать некоторые параметры, относящиеся к документу, с помощью <param>тег. Вот пример для встраивания файла wav -
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>
Пример - 4
Вы можете добавить флэш-документ следующим образом -
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />
<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>
Пример - 5
Вы можете добавить java-апплет в HTML-документ следующим образом:
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>
В classidАтрибут определяет, какую версию подключаемого модуля Java использовать. Вы можете использовать необязательный атрибут кодовой базы, чтобы указать, нужно ли и как загружать JRE.