Всем большой привет и сегодня мы рассмотрим работу с media Api. Данное api позволяет воспроизводить и манипулировать аудио и видео файлами. Поехали!

Первое что нам необходимо сделать так это прописать два специальных тега которые были введены в html5.

<video >
    <source src="video.mp4" type="video/mp4">
</video>
<audio>
    <source src="audio.mp3" type="audio/mp3">
</audio>

C помощью тега video мы можем подгружать в наш браузер видео, а с помощью тега audio - аудио файлы. В самих тегах у нас установлен тег source в котором задаются путь до файла с video или аудио ,и тип файла. Скажу сразу что для различных браузеров могут поддерживаться разные типы аудио и видео файлов. Поэтому мы можем перечислять различные типы просто дублируя тег source.

<video  >
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>
<audio>
    <source src="audio.mp3" type="audio/mp3">
    <source src="audio.ogg" type="audio/ogv">
</audio>

Самый распространенный и поддерживаемый формат это пожалуй mp4 для видео и mp3 для аудио. Теперь переходим к javascript, рассмотрим media api на примере работы с видео.

Первое что мы должны сделать это получить сам элемент видео:

var video = document.querySelector('video');

Далее мы можем работать с его свойствами, методами и событиями.

Основные свойства которые мы можем получить и установить:

src = "video.mp4"; //Путь до файла

video.src - cвойство src возвращает нам путь до нашего файла. Мы также можем установить или переустановить его через это свойство.

video.autoplay = true; //Автозапуск

autoplay - автовоспроизведение если установить значение true видео начнет воспроизводится сразу после загрузки страницы. Изначально значение установлено в false.

video.controls = true; //Панель управления

controls - панель управления произведением видео принимает два значения true и false, по умолчанию установлено false.

video.playbackRate = 1.5; //Скорость воспроизведения

playbackRate- устанавливает скорость воспроизведения по умолчанию установлена единица

video.volume = false; //Включить или выключить звук

volume - с помощью данного свойства мы можем включать(true) или отключать звук(false), изначально установлено true.

video.currentTime

currentTime - Получаем текущее время при произведении видео

video.duration

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

video.poster = "img/image.jpg";

poster - здесь указывается путь до картинки которая будет являться превью данного видео.

video.loop = true;

loop - цикличность воспроизведения, если установить значение true видео будет воспроизводится по кругу, изначально установлено false.

Также есть свойства videoWidth и videoHeight которые возвращают ширину и высоту видео.

С основными свойствами видео мы разобрались теперь переходим к методам.

video.play()

video() - С помощью данного метода мы можем начать воспроизведение видео

video.pause()

pause() - из названия понятно что данный метод ставит на паузу видео

Для данных методов есть также обработчики событий:

video.addEventListener('play', function(){
    console.log('play');
});

C помощью события play мы можем отловить момент начала воспроизведения видео.

video.addEventListener('pause', function(){
    console.log('pause');
});

А с помощью события pause то время когда видео было поставлено на паузу.

Есть и другие события, например:

video.addEventListener('timeupdate', function(){
    console.log(parseInt(video.currentTime));
});

Событие timeupdate срабатывает при изменении времени произведения видео. То есть если мы в обработчик поместим такую строчку video.currentTime напоминаю что свойство currentTime выводит текущее время. Мы по сути сделаем отчет времени работы видео.

video.addEventListener('ended', function(){
    console.log('Пользователь просмотрел видео до конца');
});

Как только видео закончится сработает событие ended.

Мы также можем отловить момент когда пользователь сделал перемотку видео

video.addEventListener('seeked', function(){
    console.log('Пользователь лукавит');
});

c помощью события seeked.

И напоследок рассмотрим событие volumechange:

video.addEventListener('volumechange', function(){
    console.log('Изменена громкость');
});

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

Итак, вот в принципе и все что я хотел вам сегодня рассказать. Но мы рассмотрели только работу с видео скажете вы, как же аудио? При работе с аудио используются те же самые свойства, методы и события что и с видео. Ну за исключением только свойств poster, videoWidth , videoWidth.

На этом я сегодня с вами прощаюсь.

Желаю успехов и удачи в программировании! Пока!