Всем большой привет и сегодня мы рассмотрим работу с 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.
На этом я сегодня с вами прощаюсь.
Желаю успехов и удачи в программировании! Пока!