您的位置：首页 > Web前端 > JavaScript

利用vedio播放视频和原生js对其进行控制

2017-07-01 21:59 387 查看

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#durationbar{
width: 500px;
height: 20px;
}
#durationbar progress{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<video id="videoSource" width="500px">
<source src="test.mp4" type="video/mp4">
</video>
<div id="durationbar">
<progress id="positionBar" value="0" max="100"></progress>
</div>
</div>
<button id="start">开始</button>
<button id="end">停止</button>
<button id="pause">暂停</button>
<button id="speed">2倍速度</button>
<script type="text/javascript">
window.onload=function(){
var oStart = document.getElementById('start');
var oEnd = document.getElementById('end');
var oPause = document.getElementById('pause');
var oSpeed = document.getElementById('speed');
var oVideo = document.getElementById('videoSource');
// 开始函数
oStart.onclick=function(){
oVideo.play();
}
// 暂停函数
oPause.onclick=function(){
oVideo.pause();
}
// 停止函数
oEnd.onclick=function(){
oVideo.pause();
oVideo.currentTime=0;
}
// 加速函数
oSpeed.onclick=function(){
oVideo.play();oVideo.playbackRate = 4;//注意这里速度大于4的时候，就没有声音了，声音得不到同步
}
// 这个事件是在视频播放中一直执行的事件
oVideo.ontimeupdate=function(){
var oPositionBar = document.getElementById('positionBar');
oPositionBar.value= (oVideo.currentTime/oVideo.duration*100);
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vedio html5 视频

相关文章推荐

新的分享

章节导航