码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-01-12 11:42:28      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:render   方法   span   com   attr   htm   box   ons   需要   

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

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

标签:render   方法   span   com   attr   htm   box   ons   需要   

原文地址:https://www.cnblogs.com/panziwen/p/12182048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!