qingjian/view/manager/widget/video.html

<div class="upload-video-box">
    <div id="listVideo{$append}" class="upload_video">
        {if file_exists('.'.$src)&&!empty($src)}
        <div class="video-item">
            <video src="{$src}" controls="controls" width="260">您的浏览器不支持 video 标签。</video>
        </div>
        <hr />
        {/if}
    </div>
    <div class="upload_img_btn" id="upload-video{$append}">
        <i></i>
        <p>上传视频</p>
    </div>
    <div class="upload_img_btn" id="serverVideos{$append}" style="margin-left: 15px;">
        <i></i><p>服务器视频</p>
    </div>
    <div class="upload clearfix">
        <div class="layui-clear"></div>
        <div class="upload-image-points">
            <p id="upload-video-src{$append}"></p>
            <input type="hidden" id="video{$append}" name="video{$append}" value="{$src??''}" class="layui-file" readonly />
        </div>
        <div class="upload-image-points">
            {if !empty($videoSize)}
            <div class="layui-form-mid layui-word-aux">视频最佳尺寸为： {$videoSize} 数字0表示不限制</div>
            {else /}
            <div class="layui-form-mid layui-word-aux">请上传大小合适的视频</div>
            {/if}
        </div>
    </div>
</div>


<script type="text/javascript">
    var _token = $('#token').attr('content');
    
    $(document).ready(function() {
        var videoInput = "#video{$append}";
        var uploadUrl = "{:url('manager.upload/video')}";
        layui.use(['upload', 'element'], function() {
            var upload = layui.upload;
            var element = layui.element;
            var uploadInst = upload.render({
                elem: '#upload-video{$append}',
                url: uploadUrl,
                data:{_token:_token},
                field: 'video',
                accept: 'video',
                choose: function(obj) {
                    console.log(obj)
                    obj.preview(function(index, file, result) {
                        var imTpl = '<div class="video-item">' +
                            '<video src="' + result +
                            '" controls="controls" width="260">您的浏览器不支持 video 标签。</video>' +
                            '</div><hr />';
                        $('#listVideo{$append}').html(imTpl);
                        $(window).trigger("resize");
                    });
                },
                before: function(obj) {
                    console.log(obj)
                    layer.load();
                },
                done: function(res, index, upload) {
                    console.log(res)
                    layer.closeAll('loading');
                    if (res.code == 0) {
                        $(videoInput).val(res.data.src);
                    } else {
                        $(videoInput).val('');
                        layer.msg(res.msg, {
                            time: 1500
                        });
                    }
                },
                error: function(index, upload) {
                    layer.closeAll('loading');
                }
            });
            
            
            $('#serverVideos{$append}').click(function(){
                var html = ''
                $.ajax('/manager/file/list',{
                    data:{
                        type:'video',
                        page:1,
                        size:30
                    },
                    headers: {
                        'X-CSRF-TOKEN': _token
                    },
                    dataType:'json',//服务器返回json格式数据
                    type:'post',//HTTP请求类型
                    timeout:10000,//超时时间设置为10秒；
                    success:function(data){
                        if(data.code == 0){
                            if(data.data.length > 0){
                                html += '<div class="layui-card-body"><div class="serverVideoList"><ul>'
                                $.each(data.data,function(i,item){
                                    html += '<li><i data-src="'+item.src+'" data-box="listVideo{$append}" data-input="video{$append}" onclick="videoUrl(this)"></i><video src="'+item.src+'" controls="controls" width="260">您的浏览器不支持 video 标签。</video></li>'
                                })
                                html += '</ul></div>';
                                if(data.data.length >= 30){
                                    html += '<div class="serverMore"><a data-box="listVideo{$append}" data-input="video{$append}" onclick="videoList(this)">加载更多</a></div>'
                                }
                                html += '<div class="layui-clear"></div></div>';
                                layer.open({
                                    type: 1,
                                    title: '服务器视频',
                                    shadeClose: true,
                                    area: ['800px',''], //宽高
                                    move: false,
                                    content: html,
                                    success:function(layero, index) {
                                        alertRender()
                                        layero.find('.serverVideoList ul li i').attr('data-id',index)
                                        layero.find('.serverMore a').attr('data-id',index)
                                    }
                                });
                            }else{
                                layer.msg('暂无数据')
                            }
                        }
                    },
                    error:function(xhr,type,errorThrown){
                        
                    }
                });
            })

        });

    });
    
    function videoUrl(obj){
        var imTpl = '<div class="video-item">' +
            '<video src="' + $(obj).attr('data-src') +
            '" controls="controls" width="260">您的浏览器不支持 video 标签。</video>' +
            '</div><hr />';
        $('#'+$(obj).attr('data-box')).html(imTpl);
        $('#'+$(obj).attr('data-input')).val($(obj).attr('data-src'));
        parent.layer.close($(obj).attr('data-id'));
        $(window).trigger("resize");
    }
    function videoList(obj){
        var page = 2
        $.ajax('/manager/file/list',{
            data:{
                type:'img',
                page:page,
                size:30
            },
            headers: {
                'X-CSRF-TOKEN': _token
            },
            dataType:'json',//服务器返回json格式数据
            type:'post',//HTTP请求类型
            timeout:10000,//超时时间设置为10秒；
            success:function(data){
                if(data.code == 0){
                    if(data.data.length > 0){
                        var html = ''
                        $.each(data.data,function(i,item){
                            html += '<li><i data-src="'+item.src+'" data-id="'+$(obj).attr('data-id')+'" data-box="'+$(obj).attr('data-box')+'" data-input="'+$(obj).attr('data-input')+'" onclick="videoUrl(this)"></i><video src="'+item.src+'" controls="controls" width="260">您的浏览器不支持 video 标签。</video></li>'
                        })
                        $(obj).parent().parent().find('.serverVideoList ul').append(html)
                        $(window).trigger("resize");
                        if(data.data.length < 30){
                            $(obj).parent().append('<p>没有了</p>')
                            $(obj).parent().find('a').remove();
                        }else{
                            page++;
                        }
                    }else{
                        layer.msg(data.msg)
                    }
                }
            },
            error:function(xhr,type,errorThrown){
                
            }
        });
    }
    
</script>