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

来源：互联网发布：衣橱设计软件编辑：程序博客网时间：2024/06/05 01:55

直接上代码：

<!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>

阅读全文

0 0