Учебники

HTML — Вставить мультимедиа

Иногда вам нужно добавить музыку или видео на вашу веб-страницу. Самый простой способ добавить видео или звук на ваш веб-сайт — это включить специальный HTML-тег <embed> . Этот тег заставляет сам браузер включать элементы управления для мультимедиа, при условии, что браузер автоматически поддерживает тег <embed> и данный тип мультимедиа.

Вы также можете включить тег <noembed> для браузеров, которые не распознают тег <embed>. Например, вы можете использовать <embed> для отображения фильма по вашему выбору и <noembed> для отображения одного изображения JPG, если браузер не поддерживает тег <embed>.

пример

Вот простой пример воспроизведения встроенного миди-файла:

<!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>.

Примечание. Атрибуты align и autostart устарели в HTML5. Не используйте эти атрибуты.

Примечание. Атрибуты align и autostart устарели в HTML5. Не используйте эти атрибуты.

Sr.No Атрибут и описание
1

выравнивать

Определяет, как выровнять объект. Он может быть установлен в центр, влево или вправо .

2

автоматический старт

Этот логический атрибут указывает, должен ли носитель запускаться автоматически. Вы можете установить его как true или false.

3

петля

Определяет, должен ли звук воспроизводиться непрерывно (установите петлю в значение true), определенное количество раз (положительное значение) или нет вообще (false)

4

прослушиваний

Определяет количество раз для воспроизведения звука. Это альтернативный вариант цикла, если вы используете IE.

5

скрытый

Указывает, должен ли мультимедийный объект отображаться на странице. Ложное значение означает нет, а истинное значение означает да.

6

ширина

Ширина объекта в пикселях

7

рост

Высота объекта в пикселях

8

название

Имя, используемое для ссылки на объект.

9

ЦСИ

URL объекта для встраивания.

10

объем

Регулирует громкость звука. Может быть от 0 (выкл.) До 100 (полный объем).

выравнивать

Определяет, как выровнять объект. Он может быть установлен в центр, влево или вправо .

автоматический старт

Этот логический атрибут указывает, должен ли носитель запускаться автоматически. Вы можете установить его как true или false.

петля

Определяет, должен ли звук воспроизводиться непрерывно (установите петлю в значение true), определенное количество раз (положительное значение) или нет вообще (false)

прослушиваний

Определяет количество раз для воспроизведения звука. Это альтернативный вариант цикла, если вы используете IE.

скрытый

Указывает, должен ли мультимедийный объект отображаться на странице. Ложное значение означает нет, а истинное значение означает да.

ширина

Ширина объекта в пикселях

рост

Высота объекта в пикселях

название

Имя, используемое для ссылки на объект.

ЦСИ

URL объекта для встраивания.

объем

Регулирует громкость звука. Может быть от 0 (выкл.) До 100 (полный объем).

Поддерживаемые типы видео

Внутри тега embed вы можете использовать различные типы мультимедиа, такие как Flash-фильмы (.swf), AVI (.avi) и MOV (.mov).

  • Файлы .swf — это типы файлов, созданные программой Macromedia Flash.

  • Файлы .wmv — типы файлов Windows Media для Windows Media.

  • Файлы .mov — это формат Apple Quick Time Movie.

  • Файлы .mpeg — это файлы фильмов, созданные группой экспертов Moving Pictures.

Файлы .swf — это типы файлов, созданные программой Macromedia Flash.

Файлы .wmv — типы файлов Windows Media для Windows Media.

Файлы .mov — это формат Apple Quick Time Movie.

Файлы .mpeg — это файлы фильмов, созданные группой экспертов Moving Pictures.

Live Demo

<!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, и большинство других браузеров игнорируют этот тег. Он загружает и воспроизводит аудиофайл, когда основной документ сначала загружается пользователем и отображается. Фоновый звуковой файл также будет воспроизводиться всякий раз, когда пользователь обновляет браузер.

Примечание . Тег bgsound устарел и должен быть удален в будущей версии HTML. Поэтому их не стоит использовать, для добавления звука предлагается использовать тег HTML5 audio. Но в целях обучения в этой главе будет подробно объяснен тег bgsound.

Этот тег имеет только два атрибута loop и src . Оба эти атрибута имеют такое же значение, как описано выше.

Вот простой пример воспроизведения небольшого миди-файла:

<!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> , который предлагает универсальное решение для включения общего объекта. Элемент <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 Plug-in использовать. Вы можете использовать необязательный атрибут codebase, чтобы указать, нужно ли и как загружать JRE.