在HTML5中新加的video和radio,也对应有方法、属性和事件
以video标签为例：
<video id='video' controls = “controls”>
为兼容不同格式的视频
<video>
<source src=”1.mp4” type=”video/mp4” />
<source src = “2.ogg” type=”video/ogg” />
<source src=”3.webm” type=”video/webm” />
</video>
这里的controls（值为true、false） 属性是指定浏览器显示播放控件，包含播放，暂停按钮音量控制等。
var video = document.getElementById('video');
下面列出常用方法和属性
控制视频的播放和暂停
对应的play()和pause()方法
video.play();
video.pause();
判断视频是否处于暂停状态
video.paused
属性值为 true/false
获取视频总时长
video.duration
单位是秒（s）
如果媒体元数据未载入时查询返回NaN，对于直播无限时长的流媒体而言返回infinity；
设置播放器跳转到指定播放时间
video.currentTime
单位是秒（s）
指定媒体开始的时间
video.initialTime
单位是秒（s）
在设置currentTime属性的时候其值不能小于initialTime的值；
视频音量调节
video.volume
音量值介于0-1之间
如果将 muted 属性设置为 true 则会进入静音模式，设置为 false 则恢复之前指定的音量继续播放；
设置媒体的播放速度
video.playbackRate
1.0即为正常速度，大于1则表示“快进”，0-1之间表示“慢放”
媒体播放前是否需要预加载
video.preload
属性值为true/false
设置视频是否自动播放
video.autoplay
属性值为true/false
设置视频是否循环播放
video.loop
属性值为 true/false
判断视频播放是否结束
video.ended
属性值为 true/false
如果loop属性设置为true循环播放则ended值永不为真
监听媒体播放
当媒体播放时间改变时出发timeupdate事件
video.addEventListener('timeupdate',function(){
console.log('媒体播放时间改变');
// 这里根据视频播放进行操作
});
计算视频已经缓冲时间
played属性返回已经播放的时间段，duffered属性返回当前已经缓冲的时间段，seekable属性返回当前播放器需要跳到的时间段
played、buffered、seekable都是TimeRanges对象，每个对象都有一个length属性以及start(),end()方法，length表示当前的时间段，start(),end()分别返回当前时间段的起始时间和结束时间，对于一段连续时间段来说一般使用start(0),end(0)
var percent_loaded = Math.floor(video.buffered.end(0) / video.duration * 100);
这里的percent_loaded 就可以表示当前缓冲内容的百分比
视频全屏
if(video.requestFullscreen){
video.requestFullscreen();
} else if(video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if(video.webkitRequestFullScreen) {
video.webkitRequestFullScreen();
}
退出全屏
var doc = document;
if(doc .exitFullscreen){
doc .exitFullscreen();
}else if (doc .mozCancelFullScreen) {
doc .mozCancelFullScreen();
}else if (doc .webkitCancelFullScreen) {
doc .webkitCancelFullScreen();
}
值得注意的是各大浏览器对全屏实现效果不统一，有点坑
还有更多方法属性不多说，查阅 高程 和 js犀牛书
网友评论