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

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 меняет фон области проигрывания, она требуется, если размеры ролика и картинки не совпадают.

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



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