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;
}

...基本上不知道我可以用它去哪里。

希望有人能对此有所启发。

干杯戴夫

Answer 1

最简单的方法是为播放和暂停分配自定义类名，并根据类名分配不同的光标。如果视频播放器处于播放状态，则将类设置为 playing 否则将类设置为 paused。

给自定义光标

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

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

您可以使用视频播放器的 paused 属性检测暂停状态，这将是一个 bool 值。这可以在悬停和点击事件中检查

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) {
	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>