JS的video获取时长，出现问题汇总

Posted 2020-10-21 may-day

<video id="my_video_1" controls="controls" style=" width: 700px; height: 420px; margin: 0 auto; padding-top: 0px;"> <source src="@ViewBag.Url " type="application/x-mpegURL"> </video>

1，video在一部分手机可以播放，然而在一部分手机不可以播放的原因：这两个属性没添加 controls="controls"和autoplay="autoplay"

2，使用JQ获取video对象获取时长报错，根据我的调试发现，然而使用源生JS获取video对象获取时长成功：

获取不了：

$("#my_video_1").duration

获取时长：

document.getElementById("my_video").duration;

3，异步绑定获取video地址，后获取时长问题：

1》异步没success获取时长是失败的，一直为NAN

        var video = document.getElementById("my_video_1");
        $.ajax({
            type: "POST",
            url: "/Home/getVidUrl",
            data: "",
            success: function (json) {
                if (json != "") {
                    getVidDur();
                    $("#test").append(" <video id=‘my_video_" + i + "‘ controls=‘controls‘ style=‘ width: 100px; height: 200px; margin: 0 auto; padding-top: 0px;‘> <source src=‘" + json + " ‘ type=‘application/x-mpegURL‘> </video>");
                    i++;
                    //var video1 = document.getElementById("my_video_" + i + ""); //异步没加载完成获取时长是失败的
                    //alert(video1.duration)
                    //alert(json);
                }
                else {
                    alert("加载完成");
                }
            },
        });

而我们需要写下面方法调用获取：

 function getVidTime() {
        var json = [];
        for (var j = 1; j <= i - 1; j++) {
            var video = document.getElementById("my_video_" + j);
            alert(video.duration);
        }
   }