layui上傳視頻並獲得視頻時長的方法

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