Управление html5 видео

Я уже писал о html5 видео, но в той заметке мы использовали jQuery и не самый понятный метод его запуска – при наведении. А вот что если вам требуется заменить элементы управления видео на свои, ну и расположить их по-другому? Дело в том, что стандартные элементы выглядят так:



Находятся внизу видео, и нет возможности их передвинуть. Ну что ж, значит уберем и создадим свой обработчик. Для начала нам надо присвоить ид видео (можно, в принципе, обойтись и без этого - просто перебором по дереву DOM, но зачем усложнять себе жизнь?). Назовем просто - upread.

<video poster="img/art144-1.png" width="320" id="upread">
<source src="video/art144-1.mp4" type="video/mp4">
</video>

Добавим кнопку пауза/пуск:

<button id="pp" style="margin-left: -200px; position: relative; margin-top: -50px;" onclick="playPause();">пауза/пуск</button>

Теперь скрипт:

<script> 
var upread = document.getElementById("upread"); 
function playPause() { 
	if (upread.paused) {
        upread.play(); 
	}
	else { 
        upread.pause(); 
	}
	} 
</script>

Что у нас получается в итоге:

пауза/пуск - +

Аналогично можно реализовать зум для видео (увеличение/уменьшение размеров).

function BigS() { 
    upread.width =  upread.width + 100;
} 
function MinS() { 
    upread.width =  upread.width - 100;
} 

Кнопки, конечно, можно сделать другими. Можно сделать даже не кнопками, а картинками, с обработкой по клику. Можно, как часто делают, установить полупрозрачный треугольник в центре - для начала воспроизведения. Но это все уже частности, основному: как ставить обработчик событий видео html5 мы научились.