【前端用法】前端JS获取视频时长的写法

忘是亡心i 2023-07-13 10:53 22阅读 0赞

下面的代码直接可以使用，获取视频的时长，然后可以根据业务再具体写逻辑

<!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>js获取视频时长</title>
    </head>
    
    <body>
        <div>
            <video src="https://vdept.bdstatic.com/4d7353594449333461724852716d4747/424253456e584b79/59d96f0aa420b86938e7ebaeb47553c871ed1a661934348af5651aa12986c93eab77ed9603a021062dd6be2c523d7ea4.mp4?auth_key=1583929206-0-0-0d2202f24b6757a116072d28b1c7ecae"
                   controls preload="auto" id="player"></video>
        </div>
        <input name="submit" type="submit" onclick="getInfo();">
        <div>
            <script language="javascript">
                var time;
                function getInfo(){
                    var pl=document.getElementById("player");
                    time = pl.duration;
                    var totalSecond = Math.floor(time);
                    // 得到分钟数加秒数
                    if (totalSecond > 60){
                        var minute = Math.floor(totalSecond / 60) ;
                        if (minute < 10) {
                            minute = "0" + minute;
                        }
                        console.info("second --> " + totalSecond % 60);
                        console.info("minute + second --> " + minute + ":" + totalSecond % 60);
                    }
                    alert(totalSecond);
                }
            </script>
        </div>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5OTAyNw_size_16_color_FFFFFF_t_70]: /images/20230529/88ef001ffb3f4c1d9b10277203adede3.png