На нашем сайте мы используем 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 мы научились.


Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.



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





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




Перехватываем нажатия клавиш в C#
Альтернативное средневековье от Пехова


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