Media API. Управление видео из JavaScript
Вместе с новыми элементами audio и video в HTML5 был добавлен новый API в JavaScript для управления этими элементами. С помощью кода JavaScript мы можем получить элементы video и audio (как и любой другой элемент) и использовать их свойства. В JavaScript эти элементы представлены объектом HTMLMediaElement, который с помощью свойств, методов и событий позволяет управлять воспроизведением аудио и видео. Отметим наиболее важные свойства, которые могут нам пригодиться для настройки этих элементов:
playbackRate: устанавливает скорость воспроизведения. По умолчанию равно 1
src: возвращает название воспроизводимого ресурса, если он установлен в коде html элемента
duration: возвращает длительность файла в секундах
buffered: возвращает длительность той части файла, которая уже буферизирована и готова к воспроизведению
controls: устанавливает или возвращает наличие атрибута controls. Если он установлен, возвращается true, иначе возвращает false
loop: устанавливает или возвращает наличие атрибута loop. Если он установлен, возвращается true, иначе возвращает false
muted: устанавливает или возвращает наличие атрибута muted
preload: устанавливает или возвращает наличие атрибута preload
volume: устанавливает или возвращает уровень звука от 0.0 до 1.0
currentTime: возвращает текущее время воспроизведения
Отдельно для элемента video мы можем использовать ряд дополнительных свойств:
poster: устанавливает или возвращает атрибут poster
height: устанавливает или возвращает атрибут height
width: устанавливает или возвращает атрибут width
videoWidth, videoHeight: для элемента video возвращают ширину и высоту видео
Следует также отметить два метода, с помощью которых мы можем управлять воспроизведением:
play(): начинает воспроизведение
pause(): приостанавливает воспроизведение
Основные события элементов video и audio:
canplaythrough: это событие срабатывает после загрузки страницы, если браузер определит, что он может воспроизводить это видео/аудио
pause: событие срабатывает, когда воспроизведение мультимедиа приостанавливается, и оно переводится в состояние "paused"
play: событие срабатывает, когда начинается воспроизведение файла
volumechange: срабатывает при изменении уровня звука мультимедиа
ended: срабатывает при окончании воспроизведения
timeupdate: срабатывает при изменении времени воспроизведения
error: генерируется при возникновении ошибки
loadeddata: срабатывает, когда будет загружен первый фрейм видеофайла
loadedmetadata: срабатывает после загрузки метаданных мультимедиа (длительность воспроизведения, размеры видео и т.д.)
seeking: срабатывает, когда пользователь начинает перемещать курсор по шкале воспроизведения для перемещения к новому месту аудио- или видеофайла
seeked: срабатывает, когда пользователь завершил перемещение к новому месту на шкале воспроизведения