Учебники

HTML5 — аудио и видео

Август 22, 2018

Функции HTML5 включают встроенную поддержку аудио и видео без использования Flash.

HTML5-теги <audio> и <video> упрощают добавление мультимедиа на веб-сайт. Вам необходимо установить атрибут src для идентификации источника мультимедиа и включить атрибут элементов управления, чтобы пользователь мог воспроизводить и приостанавливать мультимедиа.

Встраивание видео

Вот самая простая форма встраивания видеофайла в вашу веб-страницу — 

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Your browser does not support the <video> element.   
</video>

В текущем проекте спецификации HTML5 не указано, какие форматы видео браузеры должны поддерживать в теге video. Но наиболее часто используемые форматы видео —

  • Ogg — файлы Ogg с видеокодеком Thedora и аудиокодеком Vorbis.

  • mpeg4 — файлы MPEG4 с видеокодеком H.264 и аудиокодеком AAC.

Ogg — файлы Ogg с видеокодеком Thedora и аудиокодеком Vorbis.

mpeg4 — файлы MPEG4 с видеокодеком H.264 и аудиокодеком AAC.

Вы можете использовать тег <source>, чтобы указать медиа, а также тип медиа и многие другие атрибуты. Элемент video позволяет использовать несколько исходных элементов, а браузер будет использовать первый распознанный формат —

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "/html5/foo.ogg" type ="video/ogg" />
         <source src = "/html5/foo.mp4" type = "video/mp4" />
         Your browser does not support the <video> element.
      </video>
      
   </body>
</html>

Это даст следующий результат —

Спецификация видео атрибутов

Видео тег HTML5 может иметь ряд атрибутов для управления внешним видом и различными функциями элемента управления —

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

Автовоспроизведение

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

2

автобуферизации

Если указан этот логический атрибут, видео автоматически начнет буферизацию, даже если для него не установлено автоматическое воспроизведение.

3

управления

Если этот атрибут присутствует, он позволит пользователю управлять воспроизведением видео, включая громкость, поиск и приостановку / возобновление воспроизведения.

4

рост

Этот атрибут указывает высоту области отображения видео в пикселях CSS.

5

петля

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

6

предварительная нагрузка

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

7

плакат

Это URL-адрес изображения, которое будет отображаться до тех пор, пока пользователь не начнет воспроизведение или поиск.

8

ЦСИ

URL видео для встраивания. Это необязательно; вместо этого вы можете использовать элемент <source> в блоке video, чтобы указать видео для встраивания.

9

ширина

Этот атрибут указывает ширину области отображения видео в пикселях CSS.

Автовоспроизведение

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

автобуферизации

Если указан этот логический атрибут, видео автоматически начнет буферизацию, даже если для него не установлено автоматическое воспроизведение.

управления

Если этот атрибут присутствует, он позволит пользователю управлять воспроизведением видео, включая громкость, поиск и приостановку / возобновление воспроизведения.

рост

Этот атрибут указывает высоту области отображения видео в пикселях CSS.

петля

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

предварительная нагрузка

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

плакат

Это URL-адрес изображения, которое будет отображаться до тех пор, пока пользователь не начнет воспроизведение или поиск.

ЦСИ

URL видео для встраивания. Это необязательно; вместо этого вы можете использовать элемент <source> в блоке video, чтобы указать видео для встраивания.

ширина

Этот атрибут указывает ширину области отображения видео в пикселях CSS.

Встраивание аудио

HTML5 поддерживает тег <audio>, который используется для встраивания звукового содержимого в документ HTML или XHTML следующим образом. 

<audio src = "foo.wav" controls autoplay>
   Your browser does not support the <audio> element.   
</audio>

Текущий проект спецификации HTML5 не указывает, какие аудиоформаты должны поддерживать браузеры в теге audio. Но наиболее часто используемыми аудиоформатами являются ogg, mp3 и wav .

Вы можете использовать <source & ggt; тег, чтобы указать медиа вместе с типом медиа и многими другими атрибутами. Аудиоэлемент позволяет использовать несколько исходных элементов, и браузер будет использовать первый распознанный формат —

Live Demo 

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "/html5/audio.ogg" type = "audio/ogg" />
         <source src = "/html5/audio.wav" type = "audio/wav" />
         Your browser does not support the <audio> element.
      </audio>
      
   </body>
</html>

Это даст следующий результат —

Спецификация аудио атрибутов

Аудио тег HTML5 может иметь ряд атрибутов для управления внешним видом и различными функциями этого элемента управления.

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

Автовоспроизведение

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

2

автобуферизации

Если указан этот логический атрибут, звук автоматически начнет буферизацию, даже если он не настроен на автоматическое воспроизведение.

3

управления

Если этот атрибут присутствует, он позволит пользователю управлять воспроизведением звука, включая громкость, поиск и приостановку / возобновление воспроизведения.

4

петля

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

5

предварительная нагрузка

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

6

ЦСИ

URL аудио для встраивания. Это необязательно; вместо этого вы можете использовать элемент <source> в блоке video, чтобы указать видео для встраивания.

Автовоспроизведение

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

автобуферизации

Если указан этот логический атрибут, звук автоматически начнет буферизацию, даже если он не настроен на автоматическое воспроизведение.

управления

Если этот атрибут присутствует, он позволит пользователю управлять воспроизведением звука, включая громкость, поиск и приостановку / возобновление воспроизведения.

петля

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

предварительная нагрузка

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

ЦСИ

URL аудио для встраивания. Это необязательно; вместо этого вы можете использовать элемент <source> в блоке video, чтобы указать видео для встраивания.

Обработка медиа-событий

Аудио и видео тег HTML5 может иметь ряд атрибутов для управления различными функциями элемента управления с помощью JavaScript —

S.No. Описание события
1

выкинуть

Это событие генерируется, когда воспроизведение прерывается.

2

может играть

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

3

закончился

Это событие генерируется после завершения воспроизведения.

4

ошибка

Это событие генерируется при возникновении ошибки.

5

loadeddata

Это событие генерируется, когда первый кадр носителя завершил загрузку.

6

loadstart

Это событие генерируется, когда начинается загрузка носителя.

7

Пауза

Это событие генерируется, когда воспроизведение приостановлено.

8

играть

Это событие генерируется, когда воспроизведение начинается или возобновляется.

9

прогресс

Это событие генерируется периодически для информирования о ходе загрузки носителя.

10

ratechange

Это событие генерируется при изменении скорости воспроизведения.

11

добившиеся

Это событие генерируется, когда операция поиска завершается.

12

Ищу

Это событие генерируется, когда начинается операция поиска.

13

приостановить

Это событие генерируется, когда загрузка носителя приостановлена.

14

volumechange

Это событие генерируется при изменении громкости звука.

15

ожидание

Это событие генерируется, когда запрошенная операция (такая как воспроизведение) задерживается в ожидании завершения другой операции (такой как поиск).

выкинуть

Это событие генерируется, когда воспроизведение прерывается.

может играть

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

закончился

Это событие генерируется после завершения воспроизведения.

ошибка

Это событие генерируется при возникновении ошибки.

loadeddata

Это событие генерируется, когда первый кадр носителя завершил загрузку.

loadstart

Это событие генерируется, когда начинается загрузка носителя.

Пауза

Это событие генерируется, когда воспроизведение приостановлено.

играть

Это событие генерируется, когда воспроизведение начинается или возобновляется.

прогресс

Это событие генерируется периодически для информирования о ходе загрузки носителя.

ratechange

Это событие генерируется при изменении скорости воспроизведения.

добившиеся

Это событие генерируется, когда операция поиска завершается.

Ищу

Это событие генерируется, когда начинается операция поиска.

приостановить

Это событие генерируется, когда загрузка носителя приостановлена.

volumechange

Это событие генерируется при изменении громкости звука.

ожидание

Это событие генерируется, когда запрошенная операция (такая как воспроизведение) задерживается в ожидании завершения другой операции (такой как поиск).

Ниже приведен пример, который позволяет воспроизвести данное видео —

Live Demo 

<!DOCTYPE HTML>

<html>
   <head>
   
      <script type = "text/javascript">
         function PlayVideo() {
            var v = document.getElementsByTagName("video")[0];  
            v.play(); 
         }
      </script>
   </head>
   
   <body>
   
      <form>         
         <video width = "300" height = "200" src = "/html5/foo.mp4">
         Your browser does not support the video element.
         </video>
         <br />
         <input type = "button" onclick = "PlayVideo();" value = "Play"/>
      </form>
      
   </body>
</html>

Это даст следующий результат —

Настройка серверов для медиа-типа

Большинство серверов по умолчанию не поддерживают носители Ogg или mp4 с правильными типами MIME, поэтому вам, вероятно, потребуется добавить соответствующую конфигурацию для этого.

44
Share: