当前位置: > > > HTML5 - 使用JavaScript控制<video>视频播放(自定义视频播放器)

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>
	&nbsp;&nbsp;
	<button onclick="speedUp()">快放</button>
	<button onclick="slowDown()">慢放</button>
	<button onclick="normalSpeed()">正常</button>
</body>
</html>
评论1
  • 1楼
    2016-04-13 23:43
    嘻嘻

    video的ID和src只能是固定的吧!不能用变量替换吗?

    站长回复

    你指的是:

    <video id="videoPlayer" src="hangge.mp4" width="400" height="300"
            ontimeupdate="progressUpdate()">
    </video>
    这里面的id和src吗?这个都不能用变量替换,要写固定的字符串。不过src的属性值可以在程序中动态设置和改变。