JavaScriptとYoutubeApiを活用してお手軽にマウスイベントで動画を制御する方法

Pocket

マウスイベントで動画の挙動を調整する記述を書きます。


<iframe class="popupYT" src="https://www.youtube.com/embed/09PPdToGepo?rel=0&enablejsapi=1" width="800" height="450" frameborder="0" allowfullscreen=""></iframe>


	$(function(){
	    var $playerWindow;
	    $('.movie').mouseover(function(){
	        $playerWindow = $(this)[0].contentWindow;
	        videoControl("playVideo");
	    });
	    $('.movie').mouseout(function(){
	        $playerWindow = $(this)[0].contentWindow;
	        videoControl("pauseVideo");
	    });
	    function videoControl(action){
	        $playerWindow.postMessage('{"event":"command","func":"'+action+'","args":""}', '*');
	    }
	});

	/*----- 処理のタイミングを前後に分ける方法 -----*/
	$(function(){
	    $.when(
	      //前の処理を記述する
	    ).done(function() {
	      //後の処理を記述する
	    });
	});

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*