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财产，这将是一个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>