layui上传视频并获得视频时长的方法

Posted 2021-03-16 panziwen

layui官方上传视频时并没直接提供获取视频时长的方法，需要我们间接获得

html增加一个<video>标签，因为video标签可以帮我们获取视频时长

<video id="videoattr" width="250" height="100" ></video>

当然，你也可以设置隐藏。

然后JS就可以利用<video>的duration来得到时长。

//同时绑定多个元素，并将属性设定在元素上
upload.render({
    elem: ‘.upload-menu‘,
    url: ‘http://upload-z2.qiniup.com‘,//上传到七牛云
    multiple: false, //是否允许多文件上传。设置 true即可开启。不支持ie8/9
    bindAction:‘#add‘,
    accept:‘video‘,
    size:10240,//KB，不能大于10M
    auto:false,//自动上传
    data:{
        token: function(){
            var token;
            $.ajax({
                async: false,//ajax 非异步获取taken
                type: ‘post‘,
                url: ‘{:url(‘Articles/getToken‘)}‘,
                success: function (res) {
                    token = res;
                }
            });
            return token;
        }
    },
    choose:function(obj){
        //预读本地文件示例，不支持ie8
        layer.load(2);
        obj.preview(function(index, file, result){
            var url = URL.createObjectURL(file);//把file转成URL
            $(‘#videoattr‘).attr(‘src‘, url); //视频链接
            var timer = setTimeout(function(){
                layer.close(layer.index);
                var video_time = document.getElementById("videoattr").duration;//视频时长
                console.log(video_time);
                if(video_time>60){
                    layer.msg(‘上传视频不能超过60秒‘, {icon: 2})
                }else{
                    $(‘#add‘).css("visibility","visible"); //一开始先将确认上传按钮隐藏，得到视频时长后才开放
                }
                clearTimeout(timer);
            },1000);
        });
    },
    before: function(obj) {
       //console.log(obj);
        layer.msg(‘上传中...‘, {
            icon: 16,
            shade: 0.01,
            time: 0
        })
    },
    done: function(res) {
        console.log(res.data);
        //return false;
        layer.close(layer.msg(‘上传成功！‘));//下面是把上传以后的图片显示出来
        var html=‘<div class="thumb-list"><i class="layui-icon close-icon">&#x1006;</i><img src="‘+res.data.src+‘" title="‘+res.key+‘"></div>‘;
        $(‘.thumb-box‘).append(html);
        thumb.push(res.data.src);
        if($(‘.thumb-list‘).length == 9){
            $(‘.upload-menu‘).hide();
        }
    }
    ,error: function(){
        layer.msg(‘上传错误！‘);
    }
});

一开始先将确认上传按钮隐藏，防止还没得到视频时长就已经开始上传导致参数错误等问题。

另外，必须设置setTimeout定时器，因为代码的执行是并行的，防止<video>还没加载完就向它获取时长，这样得到的结果将会是NaN