Как запустить/приостановить видео по наведению на другой блок (jQuery)?

Question

[Ivan Baki-Borodov]

имеется страничка, обе половинки её имеют фоном видео. если быть точным, вот эта new.volna.dance

нужно, чтобы воспроизводиться начинало то видео, на которое наводится курсор. изначально сделал так:

$(".hustlevideo").mouseover(function(){ 
$this.play(); 
});
$(".hustlevideo").mouseout(function(){ 
$this.pause(); 
});

но возникла проблема - при наведении на блок, который располагается поверх видео, оно, разумеется, останавливается.

перевесил обработчик на родительский блок, в котором располагается весь контент, получилось вот что:

$("#hustle").mouseover(function(){
$(".hustlevideo").play();
});
$("#hustle").mouseout(function(){
$(".hustlevideo").pause();
});

и теперь вываливаются ошибки
Uncaught TypeError: $(...).play is not a function и $(...).pause is not a function

Что я делаю не так и что мне сделать, чтобы получилось?

Answer 1

[Stalker_RED]

Вместо mouseover / mouseout используйте mouseenter / mouseleave.

$(...).play is not a function и $(...).pause is not a function
Что я делаю не так ... ?

Дык вы пытаетесь вызывать методы play() и pause() у объекта jQuery.

Попробуйте $(...)[0].play()

Comments

[Ivan Baki-Borodov]

спасибо, нолик помог! :)

[Елена]

Аналогичный вопрос как у автора. Вот только у меня не одно видео, а несколько, поэтому такой трюк не работает. Он запускает первое по счету видео и все. У меня удалось сделать запуск и при ховере по видео и остановку при его покидании, вот только, к сожалению, не удается сделать так, чтобы оно не останавливалось при наведении текста поверх видео, ибо из-за mouseleave срабатывает остановка при наведении на текст.

[Stalker_RED]

Елена,

$(...)[0] - это первый найденный объект, $(...)[1] - второй, $(...)[2] - третий, и так далее.

Соберите пример в песочнице что-ли.
Или просто вместо mouseleave попробуйте mouseout

[Елена]

Stalker_RED, вопрос решен таким образом:

$(".menu-item").on("mouseenter", function(){
$(this).find('video').get(0).play();
});
$(".menu-item").on("mouseleave", function(){
$(this).find('video').get(0).pause();
$(this).find('video').get(0).currentTime = 0;
});

Answer 2

[Роман]

document.querySelector('.hustlevideo').addEventListener('mouseover', function(e) {
      this.play();
    }, false);
    document.querySelector('.hustlevideo').addEventListener('mouseout', function(e) {
      this.pause();
    }, false);
    document.querySelector('.wcsvideo').addEventListener('mouseover', function(e) {
      this.play();
    }, false);
    document.querySelector('.wcsvideo').addEventListener('mouseout', function(e) {
      this.pause();
    }, false);

link