Video的深入使用

HTML 元素 用于在HTML或者XHTML文档中嵌入视频内容

属性

• controls

设置或返回视频是否应该显示控件（比如播放/暂停等）

image.png

• autoplay

设置或返回是否在就绪（加载完成）后自动播放视频

• nodownload

设置是否去除去除下载按钮nodownload

• nofullscreen

设置是否去除全屏显示按钮

• poster

设置视频的封面

image.png

• muted

设置是否静音（注意：移动端非静音模式下无法自动播放）

• loop

设置循环播放

• preload

视频预加载模式

• volume

音量控制，区间范围在0-1

var time = document.getElementById("time");
time.currentTime = 60;// 秒

• 播放时间控制

• 播放地址切换

• 备用地址切换

• 播放速度

事件

• loadstart

?> 当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时

v.addEventListener('loadstart',function(e){
  console.log("loadstart");
})

• durationchange

音频/视频的时长

v.addEventListener('durationchange',function(e){
  console.log("时长", v.duration);
})

• loadedmetadata

当浏览器已经加载完成视频

v.addEventListener('loadedmetadata',function(e){
  console.log("loadedmetadata");
})

• loadeddata

当浏览器已加载视频的当前帧时

v.addEventListener('loadeddata',function(e){
  console.log("loadeddata");
})

• progress

?> 当浏览器正在下载视频

v.addEventListener('progress',function(e){
  console.log("progress");
})

• canplay

判断是否可以播放

v.addEventListener('canplay',function(){
  console.log('canplay');
})

• canplaythrough

判断是否可以流畅播放

v.addEventListener('canplaythrough',function(){
  console.log('canplaythrough');
})

• play

视频播放

v.addEventListener('play',function(){
  console.log('play');
})

• pause

视频暂停

v.addEventListener('pause',function(){
  console.log('pause');
})

• seeking

当用户开始移动/跳跃到音视频中的新位置时

v.addEventListener('seeking',function(){
  console.log('seeking');
})

• seeked

当用户已移动/跳跃到视频中的新位置

v.addEventListener('seeked',function(){
  console.log('seeked');
})

• waiting

当视频由于需要缓冲下一帧而停止，等待

v.addEventListener('waiting',function(){
  console.log('waiting');
})

• playing

当视频在已因缓冲而暂停或停止后已就绪时

v.addEventListener('playing',function(){
  console.log('playing');
})

• timeupdate

目前的播放位置已更改时，播放时间更新

v.addEventListener('timeupdate',function(){
  console.log('timeupdate');
})

• ended

播放结束

v.addEventListener('ended',function(){
  console.log('ended');
})

• error

播放错误

v.addEventListener('error',function(e){
  console.log('error', e);
})

• volumechange

当音量已更改时

v.addEventListener('volumechange',function(){
  console.log('volumechange');
})

• stalled

当浏览器尝试获取媒体数据，但数据不可用时

v.addEventListener('stalled',function(){
  console.log('stalled');
})

• ratechange

当视频的播放速度已更改时

v.addEventListener('ratechange',function(){
  console.log('ratechange');
})

参考资料：

MDN: video

HTML的媒体支持:audio和video元素

HTML 5 视频/音频参考手册

原文阅读 ---->
原文阅读2