JavaScript で動画の再生速度を変更

JavaScript を使って動画の再生速度を変更します。

まずはDEMO。

動画の下のボタンを押すと再生速度が変わります。

再生速度　 倍速

html

<div class="vcont">
    <div class="screen">
        <video id="myVideo" controls="">
            <source>
            <p>HTML5のvideoに対応したブラウザをご利用下さい</p>
        </video>
    </div>
	    
    <div class="ctrl">
        再生速度
        <img src="down-1.jpg" id="down" width="20" height="20">		
        <img src="reload-1.jpg" id="reload" width="20" height="20">
        <img src="up.jpg" id="up" width="20" height="20">
        <span id="speed"></span> 倍速
    </div>
</div>

jQuery

<script type="text/javascript">
jQuery(function(){
	var speed = 1 ;
	var oldspeed ;
	var newspeed ;
	jQuery("#speed").text(speed) ;
	jQuery('#myVideo').get(0).src = "out.mp4" ;	
	
	jQuery("#down").click(function(){
		oldspeed = jQuery("#speed").text() ;
		newspeed = parseInt(oldspeed) - 1 ;
		if (newspeed<1) {
			newspeed = 0.5 ;
		}
		jQuery("#speed").text(newspeed) ;
		jQuery('#myVideo').get(0).playbackRate = newspeed ;		
	});	
	jQuery("#up").click(function(){
		oldspeed = jQuery("#speed").text() ;
		newspeed = parseInt(oldspeed) + 1 ;
		jQuery("#speed").text(newspeed) ;
		jQuery('#myVideo').get(0).playbackRate = newspeed ;
	});
	jQuery("#reload").click(function(){
		newspeed = 1 ;
		jQuery("#speed").text(newspeed) ;
		jQuery('#myVideo').get(0).playbackRate = newspeed ;
	});
});
</script>