Как встроить аудио и видео с помощью HTML5?

Аудио и видео могут помочь добавить интерактивный контент на ваш сайт. Хорошо то, что HTML5 предлагает простой способ встраивания аудио и видео файлов. Он имеет проигрыватель по умолчанию, и большинство современных браузеров поддерживают проигрыватель HTML. В этой статье мы объясним, как встраивать аудио и видео файлы с помощью HTML5.

Слушайте свое аудио

Элемент

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>This is my audio</TITLE>
</HEAD>
<BODY>
<AUDIO controls autoplay loop>
<source src="https://www.webnots.com/how-to-embed-audio-and-video-using-html5/my-audio.mp3">
<source src="my-audio.ogg">
</AUDIO>
</BODY>
</HTML>
используется для определения версии HTML.

  • используется для HTML5.
  • Для HTML4 определение типа документа должно быть:

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

  • Чтобы обеспечить поддержку во всех веб-браузерах, рекомендуется использовать один и тот же аудиофайл с форматами .mp3 и .ogg, используя атрибут «источник».
  • Атрибут «controls» отображает элемент управления аудиоплеером.
  • Атрибут «autoplay» автоматически запускает воспроизведение музыки при загрузке проигрывателя.
  • Атрибут «loop» используется для непрерывного зацикливания аудиофайла.

Аудиоплеер в браузере Google Chrome будет выглядеть следующим образом:

Не рекомендуется использовать атрибут «автозапуск», если он вам не нужен, иначе автоматическое воспроизведение звука может нарушить работу пользователя. Лучше предоставить контроль пользователям.

Посмотреть и ваше видео…

HTML5 также позволяет вставлять видео на вашу страницу с помощью элемента

Используйте приведенный ниже код, чтобы вставить видеоплеер на свою страницу:

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>This is my video</TITLE>
</HEAD>
<BODY>
<VIDEO src=”my-video.mp4”
poster=”thumbnail.png”
width=”500” height=”400”
preload
controls
loop>
<P> This browser does not support HTML5 video </P>
</VIDEO>
</BODY>
</HTML>
  • Атрибуты «Controls», «autoplay» и «loop» предлагают те же функции, что и элемент audio.
  • «Предварительная загрузка» позволяет браузеру загружать видео при загрузке страницы. Может принимать одно из трех допустимых значений:
    • «Нет» – браузеру не требуется никаких действий, пока пользователь не воспроизведет видео.
    • «Авто» – браузер предварительно загрузит видео.
    • «Метаданные» – браузер собирает только метаданные, такие как продолжительность видео, размер и т. Д.
  • Атрибут «Плакат» показывает миниатюрное изображение до момента загрузки видео или нажатия пользователем кнопки воспроизведения.

0

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *