HTML5视频播放器交互控制-优快云博客

本文链接：https://blog.youkuaiyun.com/zhengyong15984285623/article/details/8779509

<!DOCTYPE html>
<head>
<meta charset=utf-8> 
<title>html5播放器</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var video = $("#myVideo");
$('#play').click(function(){video[0].play();});
$('#pause').click(function(){video[0].pause();});
$('#go10').click(function(){video[0].currentTime+=5;});
$('#back10').click(function(){video[0].currentTime-=5;});
$('#rate1').click(function(){video[0].playbackRate+=2;});
$('#rate0').click(function(){video[0].playbackRate-=2;});
$('#volume1').click(function(){video[0].volume+=0.1;});
$('#volume0').click(function(){video[0].volume-=0.1;});
$('#muted1').click(function(){video[0].muted=true;});
$('#muted0').click(function(){video[0].muted=false;});
$('#full').click(function(){
   video[0].webkitEnterFullscreen();  //webkit类型的浏览器
   video[0].mozRequestFullScreen();   //FireFox浏览器
});

});
</script>
</head>


<video id="myVideo" width="600" height="400" controls="controls">
<source src="SAM_0413.MP4" type="video/mp4"/>
您的浏览器目前不支持html5
</video>

<br>

<button id="play" >播放</button>
<button id="pause" >暂停</button>
<button id="go10" >前进</button>
<button id="back10" >后退</button>
<button id="rate1" >播放速度+</button>
<button id="rate0" >播放速度-</button>
<button id="volume1" >音量+</button>
<button id="volume0" >音量-</button>
<button id="muted1" >静音</button>
<button id="muted0" >解除静音</button>
<button id="full" >全屏</button>

</body>

</body> 
</html>

html5视频播放