HTML позволяет нам создавать стандартные видео- и аудиоплееры, не требующие использования каких-либо плагинов. Добавить видео и аудио на веб-страницу почти так же просто, как добавить изображение или форматировать текст.

Есть два разных способа включить видеоэлементы. Мы обсудим их оба ниже.

Видео элемент

Элемент <video> позволяет нам встраивать видеофайлы в HTML, очень похоже на то, как встраиваются изображения.

Мы можем включить следующие атрибуты:

  • src Этот атрибут обозначает источник, который очень похож на атрибут src, используемый в элементе изображения. Мы добавим ссылку на видеофайл в атрибут src.
  • type Это будет видео / mp4, потому что .mp4 - это формат видео, которое мы используем. Мы также можем использовать различные форматы видео, такие как .ogg или .webm, тогда значение атрибута type изменится на video / ogg или video / WebM соответственно.

Примечание. распространенными видеоформатами являются WebM, Ogg, MP4.

Теперь у нас есть это видео на нашей странице. Но есть проблема. Это видео не воспроизводится автоматически, а также нет элементов управления для запуска видео.
Нам придется добавить элементы управления вручную с помощью атрибута controls к нашему элементу видео.

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

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

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

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

У нас также могут быть элементы управления и автовоспроизведение вместе.

В зависимости от требований вы можете предоставить различные атрибуты видеоэлементу.

Выше я упоминал, что есть два разных способа добавить видеоэлемент. Попробуем по-другому.

Исходный элемент

Раньше мы использовали видеоэлемент с самозакрывающимся тегом, но здесь мы закроем видеоэлемент. Итак, у нас есть открывающий и закрывающий теги.

Мы также удалим атрибуты type и source из видеоэлемента и вставим их в другой элемент.

<video>
  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4">
</video>

Мы просто переместили атрибуты в исходный элемент.

Итак, зачем нам это делать?

Что ж, в большинстве случаев с видео у нас будет несколько источников, потому что нам нужно предоставить разные типы файлов в зависимости от того, какой браузер просматривает ваше видео, потому что разные браузеры поддерживают разные типы файлов.

Видео будет выглядеть точно так же. Но теперь у нас более широкая поддержка браузеров.

Теперь, если мы хотим добавить такие атрибуты, как controls, autoplay, loop и т. Д., Мы добавим их к элементу <video>.

Аудио элемент

Элемент <audio> очень похож на элемент видео. Однако единственное существенное отличие состоит в отсутствии визуальных эффектов.

Мы можем использовать элемент audio для воспроизведения аудиофайла на нашей веб-странице, например файла mp3.

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

  • Используйте один тег, представляющий весь элемент.
  • Открывающий и закрывающий теги с дочерними элементами между ними.

Теперь у нас будет открывающий и закрывающий аудиотеги, а затем мы добавим исходный элемент между ними.

Структура папок может выглядеть так:

|-- project
    |-- audio
      |-- sample.mp3
      |-- sample.ogg
    |-- css
      |-- main.css
      |-- normalize.css
    index.html

В приведенном выше примере элементу <audio> не задан атрибут управления, поэтому элемент <audio> не будет отображаться в документе HTML.

Теперь вы можете видеть, что здесь есть только несколько ключевых отличий. Значение атрибута type изменено с «видео / mp4» на «аудио / mp3». В атрибуте src мы изменили видеофайл с расширением .mp4 на аудиофайл с расширением .mp3.

Теперь, как и в случае с элементом видео, мы не сможем остановить или запустить звук без каких-либо элементов управления. Итак, мы добавим атрибут controls к элементу audio.

Вы также можете добавить другие атрибуты в элемент <audio>, такие как автозапуск, цикл и т. Д.

Мы рассмотрели основы аудио и видео элементов в HTML.

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

Надеюсь, вы нашли этот пост информативным и полезным. Буду рад услышать ваши отзывы!

Спасибо за чтение!