На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Управление 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 мы научились.



тегизаметки, html5, видео, javascript





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Настройка miniShop2 MODX Revolution: минимальная сумма в заказе
Урок 22. Функции поиска в строках C#


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.