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。
本例只是给出了最基本的控制代码,实际实现要复杂得多,感兴趣的可慢慢琢磨。