Как вставить звук и видео на страницу через HTML5?

Задан 5 месяцев назад1.5к просмотров2 ответа

Нужно добавить на сайт аудиоплеер и видеоролик без всяких сторонних плееров и Flash. Как это правильно сделать средствами HTML5?

Полина Алексеева 🐣 Птенец

спросил 5 месяцев назад

2 ответа

✓ Принятый ответ — помог автору

В HTML5 для этого есть два встроенных тега: <audio> и <video>. Никаких плагинов не нужно.

Видео:

<video width="640" height="360" controls poster="preview.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Ваш браузер не поддерживает видео.
</video>

Аудио:

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  Ваш браузер не поддерживает аудио.
</audio>

Ключевые моменты:

controls — показывает стандартные кнопки play/pause/громкость. Без него плеер не виден.
Несколько <source> — браузер выберет первый поддерживаемый формат. Для совместимости дают mp4 + webm.
poster у видео — картинка-заглушка до запуска.
Текст внутри тега — фолбэк для совсем старых браузеров.

Дополнительные атрибуты: autoplay (учти, что браузеры блокируют автозапуск со звуком), loop, muted, preload.

Виктория Степанова 🐣 Птенец

4 месяца назад

И этими плеерами можно рулить из JS — у элементов есть методы .play() / .pause() и свойства .currentTime, .volume:

const video = document.querySelector('video');
video.play();
video.volume = 0.5;
video.currentTime = 30; // перемотать на 30-ю секунду

Удобно для кастомных плееров со своими кнопками.

Антон Михайлов 🐣 Птенец

5 месяцев назад

Ваш ответ

Войдите, чтобы ответить на вопрос.