Media API. Управление видео из JavaScript

Последнее обновление: 21.04.2016

Вместе с новыми элементами 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: срабатывает, когда пользователь завершил перемещение к новому месту на шкале воспроизведения

Теперь используем некоторые из этих свойств, событий и методов для управления элементом video:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Аудио в HTML5</title>
		<style>
			.hidden{
				display:none;
			}
			#playBtn {
				border: solid 1px #333;
				padding: 5px;
				cursor: pointer;
			}
			
		</style>
	</head>
	<body>
		<video width="400" height="300">
			<source src="cats.mp4" type="video/mp4">
			<source src="cats.webm" type="video/webm">
			<source src="cats.ogv" type="video/ogg">
		</video>
		<div id="controls" class="hidden">
			<a id="playBtn">Play</a>
			<span id="timer">00:00</span>
			<input type="range" step="0.1" min="0" max="1" value="0" id="volume" />
		</div>
		<script>
		// получаем все элементы
		var videoEl = document.getElementsByTagName('video')[0],
			playBtn = document.getElementById('playBtn'),
			vidControls = document.getElementById('controls'),
			volumeControl = document.getElementById('volume'),
			timePicker = document.getElementById('timer');
		
		// если браузер может воспроизводить видео удаляем класс
		videoEl.addEventListener('canplaythrough', function () {
			vidControls.classList.remove('hidden');
			videoEl.volume = volumeControl.value;
		}, false);
		// запускам или останавливаем воспроизведение
		playBtn.addEventListener('click', function () {
			if (videoEl.paused) {
				videoEl.play();
			} else {
				videoEl.pause();
			}
		}, false);
		
		videoEl.addEventListener('play', function () {
		
			playBtn.innerText = "Pause";
		}, false);
		
		videoEl.addEventListener('pause', function () {
		
			playBtn.innerText = "Play";
		}, false);
		
		volumeControl.addEventListener('input', function () {
		
			videoEl.volume = volumeControl.value;
		}, false);
		
		videoEl.addEventListener('ended', function () {
			videoEl.currentTime = 0;
		}, false);
		
		videoEl.addEventListener('timeupdate', function () {
			timePicker.innerHTML = secondsToTime(videoEl.currentTime);
		}, false);
		
		// рассчет отображаемого времени
		function secondsToTime(time){
			
			var h = Math.floor(time / (60 * 60)),
				dm = time % (60 * 60),
				m = Math.floor(dm / 60),
				ds = dm % 60,
				s = Math.ceil(ds);
			if (s === 60) {
				s = 0;
				m = m + 1;
			}
			if (s < 10) {
				s = '0' + s;
			}
			if (m === 60) {
				m = 0;
				h = h + 1;
			}
			if (m < 10) {
				m = '0' + m;
			}
			if (h === 0) {
				fulltime = m + ':' + s;
			} else {
				fulltime = h + ':' + m + ':' + s;
			}
			return fulltime;
		}
		</script>
	</body>
</html>

Вначале в коде JavaScript мы получаем все элементы. Затем, если браузер поддерживает видео и может его воспроизвести, то обрабатываем событие canplaythrough, устанавливая уровень звука и удаляя класс hidden:

videoEl.addEventListener('canplaythrough', function () {
	vidControls.classList.remove('hidden');
	videoEl.volume = volumeControl.value;
}, false);

Чтобы запустить воспроизведение, нам надо обработать нажатие ссылки Play:

playBtn.addEventListener('click', function () {
	if (videoEl.paused) {  // если видео остановлено, запускаем
		videoEl.play();
	} else {
		videoEl.pause();
	}
}, false);

Обрабатывая события запуска и остановки воспроизведения, мы можем изменять надпись на ссылке:

videoEl.addEventListener('play', function () {
		
	playBtn.innerText = "Pause";
}, false);
		
videoEl.addEventListener('pause', function () {
		
	playBtn.innerText = "Play";
}, false);

Обрабатывая событие input, которое возникает при изменении значения ползунка, мы можем синхронизировать изменение ползунка и громкость видео:

volumeControl.addEventListener('input', function () {
		
	videoEl.volume = volumeControl.value;
}, false);

Обработка события ended позволит сбросить время воспроизведения:

videoEl.addEventListener('ended', function () {
	
	videoEl.currentTime = 0;
}, false);

А обработчик события timeupdate позволит динамически изменять показатель времени воспроизведения:

videoEl.addEventListener('timeupdate', function () {
	timePicker.innerHTML = secondsToTime(videoEl.currentTime);
}, false);

Для форматирования строки времени применяется вспомогательная функция secondsToTime. В итоге мы получим следующие элементы воспроизведения:

Работа с видео в HTML5 и JavaScript

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

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850