html5 中的video标签获取视频总时长，当前播放时间,播放结束触发的的事件，及一些常用的video 事件

2024-01-11 15:51| 来源: 网络整理| 查看: 265

还是和往常一样废话不多BB 直接上代码我也要去吃饭了太饿了 (当时的话过了一年再看别样的心情)

//尽量这样写别直接再video中写src 那样会出现啊兼容性问题

00:00:00 //视频播放时间

88:88:88// 视频总时长

var video=document.getElementById('vid');

var time1=document.querySelector('.time1');

var time2=document.querySelector('.time2');

// 视频结束触发得事件

video.addEventListener("ended",function(){ video_Status.src="img/play.png"; })

// 视频可以播放触发得事件一般是视频准备就绪触发得事件

video.addEventListener("canplay",function(){ var timers=Math.ceil(this.duration); //视频总时长 time2.innerHTML=timeToMinute(timers); })

// 视频当前播放事件发生变化触发事件

video.addEventListener("timeupdate",function(){ var timers=Math.ceil(this.currentTime)；//视频当前播放时长 time1.innerHTML=timeToMinute(timers); })

// 视频暂停时候触发的事件

video.addEventListener("pause",function(){ // do something })

// 视频已经在开始在播放触发的事件

video.addEventListener("playing",function(){ // do something })

// 视频音量发生变化触发的事件

video.addEventListener("volumechange",function(){ // do something })

// 判断视频是否暂停还是播放状态

video.paused // 暂停 // autoplay 自动播放其实是不可以浏览器不允许用户进入页面直接播放视频的可以设置 muted 属性静音来实现其实还有其他的方法但不知道写在那个博客里面

大家可能注意到了我上面的那个 timeToMinute() 这个是一个函数就是你传进去一个数字会将其转换成时间格式 00:00:00

https://github.com/zhaoyunchong/timeFormat.git

函数在这里请大家觉得有用的话就多多关注下谢谢大家了小菜鸟去吃饭了很饿了受不了了

关注我持续更新前端知识

注意: 这篇博客是博主去年写的当时为了完成需求也是随意为之后来发现这篇文章看的人挺多的还是更改下排版和内容

【本文地址】

今日新闻