layui 上傳視頻

html 

<div class="layui-form-item">
    <label class="layui-form-label">上傳視頻</label>
        <button type="button" class="layui-btn cover" id="control_video_button">上傳視頻</button>
        <button type="button" class="layui-btn layui-btn-danger cover" id="control_video_del" style="display: {$detail.control_video ? 'inline' : 'none'}">刪除視頻</button>
        <input type="hidden" id="control_video" value="{$detail.control_video}" name="control_video"/>
        <input type="hidden" id="temp_url_id" value="" name="temp_url_id"/>
</div>

 <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
        <video src="{$detail.control_video}" controls="controls" id="control_video_demo" style="width: 50%;display: {$detail.control_video ? 'block' : 'none'}">
                                您的瀏覽器不支持 video 標籤。
        </video>
        <p id="demoText"></p>
    </div>
</div>

 js

layui.use(['upload','form'], function(){
    var form = layui.form
        ,$ = layui.jquery
        ,upload = layui.upload;

var uploadInst = upload.render({
                elem: '#control_video_button', //綁定元素
                url: "{:url('Upload/upload')}",//上傳接口
                accept: 'video'
                ,before: function(obj){
                    //預讀本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#control_video_demo').attr('src', result); //圖片鏈接（base64）
                        $('#control_video_demo').css('display','block');
                        $('#control_video_del').css('display','inline');
                    });
                },
                done: function(res){
                    console.log(res);

                    //如果上傳失敗
                    if(res.code != 1){
                        return layer.msg('上傳失敗');
                    }
                    //上傳成功
                    document.getElementById("control_video").value = res.filename;
                    document.getElementById("temp_url_id").value = res.msg;

                },error: function(res){
                    console.log(res);
                    //演示失敗狀態，並實現重傳
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });

            $('#control_video_del').click(function(){
                $('#control_video_demo').css('display','none');
                $('#control_video_del').css('display','none');
                $('#control_video').val('');
            })
});

效果