HTML5 - 使用JavaScript控制<video>视频播放(自定义视频播放器)
下面不使用<video>的controls属性,通过创建一个自定义播放器演示如何使用js操作<video>元素。

效果图如下:

实现功能如下:
(1)可以播放,暂停,停止视频。
(2)可以改变播放速度(2倍速度加速播放,一半的速度慢速播放,正常速度播放)
(3)播放时有进度条,同时还能显示已播放时间。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hangge.com</title> </head> <style> #durationBar{ border:solid 1px #164900; width:100%; margin-bottom:5px; } #positionBar{ height:20px; color:white; font-weight:bold; background:#2D9900; text-align:center; } </style> <script> //播放 function play(){ var video = document.getElementById("videoPlayer"); video.play(); } //暂停 function pause(){ var video = document.getElementById("videoPlayer"); video.pause(); } //停止 function stop(){ var video = document.getElementById("videoPlayer"); video.pause(); video.currentTime = 0; } //快放 function speedUp(){ var video = document.getElementById("videoPlayer"); video.play(); video.playbackRate = 2; } //慢放 function slowDown(){ var video = document.getElementById("videoPlayer"); video.play(); video.playbackRate = 0.5; } //正常速度 function normalSpeed(){ var video = document.getElementById("videoPlayer"); video.play(); video.playbackRate = 1; } //进度条相关 function progressUpdate(){ var video = document.getElementById("videoPlayer"); //动态设置进度条 var postionBar = document.getElementById("positionBar"); postionBar.style.width = (video.currentTime / video.duration * 100) + "%"; //设置播放时间 displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + "秒"; } </script> <body> <video id="videoPlayer" src="hangge.mp4" width="400" height="300" ontimeupdate="progressUpdate()"> </video> <div id="durationBar"> <div id="positionBar"><span id="displayStatus">0秒</span></div> </div> <button onclick="play()">播放</button> <button onclick="pause()">暂停</button> <button onclick="stop()">停止</button> <button onclick="speedUp()">快放</button> <button onclick="slowDown()">慢放</button> <button onclick="normalSpeed()">正常</button> </body> </html>
video的ID和src只能是固定的吧!不能用变量替换吗?