侧边栏壁纸
博主头像
工作笔记

若批评无自由,则赞美无意义。

  • 累计撰写 190 篇文章
  • 累计创建 206 个标签
  • 累计收到 20 条评论
标签搜索

目 录CONTENT

文章目录

video标签使用原生javascript监听事件

工作笔记
2022-12-01 / 0 评论 / 3 点赞 / 901 阅读 / 711 字 / 正在检测是否收录...
温馨提示:
🌝 免责声明:本文存在此处完全是为了方便个人工作记录学习,不存在任何商业利益信息。若不小心影响到您的利益,请联系首页博主信息中公开的邮箱,博主将进行删除处理。谢谢合作!

html-video-player

HTML5 DOM 为video元素提供了方法、属性和事件。这些方法、属性和事件允许您使用 JavaScript 来操作video 元素
例如在html中使用video标签:

/**
* poster            贴图
* controls         自动播放
* muted            静音
* loop               循环播放
* preload          预加载
* controls         自动播放
*/
<video id="_video" src="test.mp4" poster="poster.jpg" controls muted loop preload>
  1. 音量控制
var v = document.getElementById('_video');
v.volume = 0.5;
  1. 播放时间控制
var t = document.getElementById('_video');
t.currentTime = 60; //秒
  1. 播放地址切换
var s = document.getElementById('_src');
   setTimeout(()=>{
      s.src = 'test-2.mp4'
   },1000)

具体参数可以参考:HTML 音频/视频 DOM 参考手册

以下简单介绍事件:

var video = document.getElementById('_video');
//视频在创立初期时,duration是NaN  需要加载完视频元数据之后才能获取到视频时长(有可能只获取一部分)
console.log(video.duration,'duration')
video.paused     //播放是否暂停
video.play()        //开始播放
video.pause()     //暂停播放

//视频开始加载   第一个执行的事件
video.addEventListener('loadstart',function(e){
  console.log(e,'loadstart')
})

//视频时长发生变化
video.addEventListener('durationchange',function(e){
   //此时可以获取到视频时长
  console.log(e,'durationchange')
})

//视频元数据加载完毕
video.addEventListener('loadedmetadata',function(e){
  console.log(e,'loadedmetadata')
})

//没有足够的数据,来播放下一个视频片段
video.addEventListener('loadeddata',function(e){
  console.log(e,'loadeddata')
})

//正在加载数据  会多次触发
video.addEventListener('progress',function(e){
  console.log(e,'progress')
})

//通常视频播放需要canplay,canplaythrough事件
//播放视频有部分帧准备完毕,可以播放
video.addEventListener('canplay',function(e){
  console.log(e,'canplay')
})

//已经可以流畅的播放
video.addEventListener('canplaythrough',function(e){
  console.log(e,'canplaythrough')
})

//监听视频播放   (暂停到播放状态的改变)
video.addEventListener('play',function(e){
  console.log(e,'play')
})

//监听视频暂停   (播放到暂停状态的改变)
video.addEventListener('pause',function(e){
  console.log(e,'pause')
})

//跳转到指定地方时触发
video.addEventListener('seeking',function(e){
  console.log(e,'seeking')
})

//跳转到指定地方后触发
video.addEventListener('seeked',function(e){
  console.log(e,'seeked')
})

//无法解码,视频无法更新  (缓冲)
video.addEventListener('waiting',function(e){
  console.log(e,'waiting')
})

//从waiting状态解码成功后可到playing状态
video.addEventListener('playing',function(e){
  console.log(e,'playing')
})

//视频时间实时更新 (自定义进度条)
video.addEventListener('timeupdate',function(e){
  console.log(e,'timeupdate')
})

//视频播放结束(结束后插入广告)
video.addEventListener('ended',function(e){
  console.log(e,'ended')
})

//视频播放报错 (测试时 重试大概31次触发error事件)
video.addEventListener('error',function(e){
  console.log(e,'error')
})
3

评论区