Как сделать проигрывание html 5 видео при наведение мыши?

Question

[desuvin]

Необходимо сделать, чтобы html5 video тег проигрывался при наведение и останавливался, когда мышка уходит с него. Проблема в том, что элемент добавляется позже поэтому стандартный jquery hover не работает (данный способ находил в гугле). По document get id тоже не вариант, потому что количество видео на странице огромное количество. Если через jquery each навесить им id, то потом непонятно как реализовать наведение на каждое. Как-нибудь можно легко решить этот вопрос?

Comments

[desuvin]

И пользуясь случаем, не подскажите ли программ для записи окошечка экрана в webm. Именно окошечка, размеры которого можно регулировать, а не весь рабочий стол.

Answer 1

[Андрей Чернышев]

$("body").on("mouseover", "video", function(){
  this.play();
});
$("body").on("mouseleave", "video", function(){
  this.stop();
})

Comments

[desuvin]

Пробовал, в моем случае не сработало. Интересно, почему.

[desuvin]

стоял autoplay. Если его убрать, то при наведение включается, а при потере фокуса не останавливается

[desuvin]

$('video').each(function() {
this.play();
})
Подобная запись включает все видео, но если они были добавлены перед этим самим jQuery, то не работает.

[desuvin]

все, разобрался. Так и не понял в чем пробелма была. Может быть опечатка какая-нибудь :) Спасибо, большое!

[Илья Смирнов]

desuvin: а у меня стоп не работает, пауза работает а стоп нет

Answer 2

[SagePtr]

TJournal уже сделал подобный баннер, после этого навсегда исчез из моих списков исключения AdBlockPlus. А по делу, вариант с событием mouseover не подходит?

Comments

[desuvin]

Как в таком случае запустить видео? $(this).get(0).play не работает. без get 0 тоже

[SagePtr]

К примеру, вот так:
$('video').mouseover(function(){ this.play(); }).mouseout(function(){ this.pause(); })