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.