JQuery切り替えカーソルアイコン

Question

私は、フロントページにビデオ付きワードプレスサイトを持っています。

このビデオは自動的に再生されます。私は、ユーザーがクリックすることでそれを止めることができるようにしたい。これは他の場所で答えられており、これはうまくいきます。

いつか次のクリックがビデオを再生するか一時停止するかによって、カーソルアイコンを入れ替えたいと思います。

<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と設定します。

はあなたがboolen値になりますビデオプレーヤーのpausedプロパティで一時停止状態を検出することができます

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

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

でカスタムカーソルを与えます。これは、ホバーで確認し、ビデオはそうplayingクラスを追加再生されていない場合pausedクラスを追加するイベント

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

をクリックすることができます。

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>