H5 获取视频时长失败

莱克星顿的枪声 2017-09-07 02:10:11



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js获取视频总时长</title>

</head>

<body>



<video id="test" controls>

    <source src="Passenger%20-%20Let%20Her%20Go.mp4">

    您的浏览器不支持video标签

</video>





<video id="movFormat" controls>

    <source src="01.MOV">

    您的浏览器不支持video标签

</video>



<div>

    <input type="button" onclick="getTime()" value="获取mp4格式视频的总时长">

</div>



<script>

    function getTime() {

        var test = document.getElementById("test");

        var time = test.duration;

        time = parseInt(time);

        alert(time);

    }



    var test = document.getElementById("test");

    //成功获取资源长度执行

/*    test.onloadedmetadata = function () {

        //获取视频时长

        var time = test.duration;

        time = parseInt(time);

        console.log("mp4:" + time);

        alert("mp4:" + time);

    }*/



//    当媒介能够开始播放但可能因缓冲而需要停止时运行脚本

    test.oncanplay=function () {

        //获取视频时长

        var time = test.duration;

        time = parseInt(time);

        console.log("mp4:" + time);

        alert("mp4:" + time);

    }



    var mov = document.getElementById("movFormat");

   /* mov.onloadedmetadata=function () {

        var time = mov.duration;

        //获取mov格式的时长

        time=parseInt(time);

        console.log("mov:"+time);

        alert("mov:"+time);

    }*/





      //当媒介能够开始播放但可能因缓冲而需要停止时运行脚本

    mov.oncanplay=function () {

        var time = mov.duration;

        //获取mov格式的时长

        time=parseInt(time);

        console.log("mov:"+time);

        alert("mov:"+time);

    }

</script>

</body>

</html>