HTML5视频播放控制

video对象

想要自己控制<video>定义的视频需要了解video对象的相关属性、方法和事件。
假设视频标签定义为：

<video id="myvideo" src="a.mp4" width="500" preload="metadata"></video>

该标签自带的属性包括：

• src：视频文件地址
• width：视频宽度
• height：视频高度
• controls：带有此属性时会显示浏览器提供的播放控件，如果想自制控件就不带此属性。
• loop：带有此属性时视频会循环播放
• autoplay：带有此属性时视频会自动播放
• preload：指定在打开页面时视频的加载方式，取值：none-不加载，auto-加载整个视频，metadata-只加载视频元信息
• poster：值是一张图片地址，可作为视频封面，在视频播放前显示

除以上标签自带的属性外，video对象还有一些很有用的属性：

• duration：返回视频的总时间，以秒计
• currentTime：设置或返回当前播放时间，以秒计
• paused：设置或返回视频是否暂停，值为true/false
• muted：设置或返回视频是否静音，值为true/false
• volume：设置或返回视频的音量，值为0~1间的数值，默认为1
• videoWidth：视频实际宽度
• videoHeight：视频实际高度

主要方法：

• play()：播放
• pause()：暂停

主要事件：

• loadedmetadata：视频元数据已加载，此时可以获取视频尺寸，视频长度、视频类型等信息了。
• canplay：视频可以播放时。此时可以做播放前的准备工作。
• timeupdate：视频播放过程中。此时可以做那些需要与视频播放同步的事情。
• ended：视频播放结束。此时可以做收尾工作。

播放控制举例：

主要HTML：

<!-- 视频 -->
<video id="video" src="media/海草舞.mp4" width="500" preload="metadata"></video>
<!-- 进度条 -->
<div id="progress" class="out"></div>
<!-- 控件面板 -->
<div id="mycontrols" class="mycontrols">
	<div id="play" class="play"></div><!--播放|暂停-->
	<div id="stop" class="stop"></div><!-- 停止 -->
	<div id="on_off" class="on"></div><!-- 弹幕开关 -->
	<div><span id="curTime"></span> / <span id="durTime"></span></div><!-- 时间 -->
	<div>屏宽：小<div class="range" id="range"></div>大</div><!-- 范围控件 -->
	<div id="volume" class="volume"></div><!--音量-->
</div>

所有控件都是用CSS绘制的，本文不做讨论。
以下给出主要控制JS代码：

//获取视频对象
var myvideo = document.getElementById("video");

获取视频总时长、屏幕大小等参数：可写在loadedmetadata或canplay事件中，拿到是时间是以秒为单位的实数，拿到的屏幕大小是实际视频的大小（实际上有用的是宽高比，在弹幕中有用）。

var spect; //视频宽高比
myvideo.onloadedmetadata = function () {
	spect = myvideo.videoWidth/myvideo.videoHeight; 
	var dtime = Math.floor(myvideo.duration);
	//转换成时:分:秒的格式写入durTime标签
}

播放/暂停：两者共用一个标签，一次单击播放，再次单击暂停。定时器的作用是定时更新面板上的播放时间。

var tID;
document.getElementById("play").onclick = function(){
	if(myvideo.paused){
		myvideo.play();
		tID = setInterval(function () {//启动1s定时器
			cTime = Math.floor(myvideo.currentTime);
			//转换成时:分:秒的格式写入curTime标签
       },1000);
	}else {
		myvideo.pause();
		clearInterval(tID); //停止定时器
	}
};

停止：video对象没有停止方法，需要用暂停结合设置当前时间为0解决。

document.getElementById("stop").onclick = function(){
	myvideo.pause();
	myvideo.currentTime = 0;
	clearInterval(tID);//停止播放时启动的定时器
};

如果是正常播放结束，也应该停止定时器：

myvideo.onended = function(){
	clearInterval(tID);
};

其它的调整视频大小可修改myvideo.width，调节音量可修改myvideo.volume。

本例只是给出了最基本的控制代码，实际实现要复杂得多，感兴趣的可慢慢琢磨。