Video的深入使用

摘要：原文阅读更好的阅读元素用于在或者文档中嵌入视频内容属性设置或返回视频是否应该显示控件比如播放暂停等设置或返回是否在就绪加载完成后自动播放视频设置是否去除去除下载按钮设置是否去除全屏显示按钮设置视频的封面设置是否静音注意移动

原文阅读:更好的阅读

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

controls

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

autoplay

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

nodownload

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

nofullscreen

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

poster

设置视频的封面

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 视频/音频参考手册

原文阅读 ---->