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>