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

Запуск видео при наведении


HTML5 - отличная штука. Среди прочих возможностей в нем есть и тег воспроизведения видео; он так и называется - video. Работать с ним очень просто:

<video>
<source src="адрес видео">
</video>
Также можно добавить элементы управления (controls) к видео, поставить картинку перед воспроизведением (poster), зациклить его (loop) или начать воспроизведение сразу после загрузки страницы с роликом (autoplay). Но сейчас нам надо решить немного другую задачу - заставить видео начать воспроизведение при наведении указателя мыши. Решается задача несложно: задействуем jquery. Код решения:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"><script>
<video  poster="img/art144-1.png"  width=320 loop>
<source src="video/art144-1.mp4" type="video/mp4" />
</video>
<script>
$("body").on("mouseover", "video", function(){
  this.play();
  $( this ).css( "background-color", "black" );
});
$("body").on("mouseleave", "video", function(){
  this.pause();
})
</script>
В строке 1 подключаем последнюю версию jquery. С 2-й по 4-ю подключаем видео, причем задаем путь к изображению перед началом воспроизведения и делаем ролик зацикленным. Само проигрывание реализуется с помощью команды play(), находящейся в 7-й строке. Пауза - когда мышь покидает область видео - строка 11. Строка номер 8 меняет фон области проигрывания, она требуется, если размеры ролика и картинки не совпадают.

Вот, что у нас получилось в итоге:



Это проезд по мосту через реку Сухона. Именно так несложно можно воспроизвести видео на веб странице в браузере при наведении указателя мыши.



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



тегизаметки, jquery, javascript





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




Урок 24. Получение информации DateTime C#
Управляем своими дисками с помощью C#


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