IT虾米网

js调用video的播放时长

kenshinobiy 2022年11月07日 编程语言 93 0
<video id=“vid”> <source src="./video.mp4"></video>  //尽量这样写 别直接再video中写src 那样会出现啊兼容性问题 
 
<div class="time1">00:00:00</div> //视频播放时间 
 
<div class="time1">88:88:88</div>// 视频总时长
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); 
}) 
 
// 秒转换分钟00:00:00格式 
function timeToMinute(times){ 
    var t; 
    if(times > -1){ 
        var hour = Math.floor(times/3600); 
        var min = Math.floor(times/60) % 60; 
        var sec = times % 60; 
        if(hour < 10) { 
            t = '0'+ hour + ":"; 
        } else { 
            t = hour + ":"; 
        } 
 
        if(min < 10){t += "0";} 
        t += min + ":"; 
        if(sec < 10){t += "0";} 
        t += sec.toFixed(2); 
    } 
    t=t.substring(0,t.length-3); 
    return t; 
}

本文参考链接:https://www.cnblogs.com/zhaoying/p/15122933.html
评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

Java多线程中Lock锁如何使用