Значки курсора переключения JQuery

Question

У меня есть сайт WordPress с видео на главной странице.

Это видео воспроизводится автоматически. Я хочу, чтобы пользователь мог остановить его, нажав. Об этом ответили в другом месте, и это работает.

ОДНАКО Я хочу поменять значок курсора в зависимости от того, будет ли следующий щелчок воспроизводиться или приостанавливать видео.

В настоящее время у меня есть:

<script type="text/javascript"> 
jQuery(document).ready(function() { 
    jQuery("#videointro").hover(function(event) { 
     if(event.type === "mouseenter") { 
      jQuery(this).attr("controls", ""); 
     } else if(event.type === "mouseleave") { 
      jQuery(this).removeAttr("controls"); 
     } 
    }); 

}); 
</script> 

и CSS из:

#videointro:hover { 
    cursor:url(images/ButtonPause-01.png), auto; 
} 

... и в основном никакого понятия о том, где я могу пойти с этим.

Надеясь, что кто-то может просветить свет на этом, пожалуйста.

Приветствия Dave

Answer 1

Самый простой метод позволяет назначать пользовательские имена классов для воспроизведения и паузы и назначить различные курсоры на основе имени класса. Если видеопроигрыватель находится в состоянии воспроизведения, тогда установите класс как playing, иначе установите класс как paused.

Дайте пользовательские курсоры с

.playing{ 
    cursor:url(images/ButtonPause-01.png), auto; 
} 

.paused{ 
    cursor:url(images/ButtonPlay-01.png), auto; 
} 

Вы можете обнаружить приостановленное состояние с paused собственности видео-плеер, который будет boolen значение. Это может быть проверено в режиме висения и нажмите событие

if((jQuery(this)[0].paused)) 
    jQuery(this).addClass("paused").removeClass("playing"); 
    else 
    jQuery(this).addClass("playing").removeClass("paused"); 

который добавит paused класса, если видео не воспроизводится в противном случае добавить playing класс.

jQuery(document).ready(function() { 
 
jQuery("#videointro").click(function(){ 
 
    (jQuery(this)[0].paused)?jQuery(this)[0].play():jQuery(this)[0].pause(); 
 
    if((jQuery(this)[0].paused)) 
 
    jQuery(this).addClass("paused").removeClass("playing"); 
 
    else 
 
    jQuery(this).addClass("playing").removeClass("paused"); 
 
}); 
 
    
 
jQuery("#videointro").hover(function(event) { 
 
\t if((jQuery(this)[0].paused)) 
 
    jQuery(this).addClass("paused").removeClass("playing"); 
 
    else 
 
    jQuery(this).addClass("playing").removeClass("paused"); 
 
     
 
    if(event.type === "mouseenter") 
 
     jQuery(this).attr("controls", ""); 
 
    else if(event.type === "mouseleave") 
 
     jQuery(this).removeAttr("controls"); 
 
    }); 
 
});

.paused{ 
 
    cursor:url(http://cur.cursors-4u.net/games/gam-13/gam1232.png), auto; 
 
} 
 

 
.playing{ 
 
    cursor:url(http://cur.cursors-4u.net/cursors/cur-1/cur1.png),auto; 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.2.2.js"></script> 
 
<video class="playing" autoplay="true" id="videointro" src="http://www.w3schools.com/html/mov_bbb.mp4"> 
 
</video>