odd_job/app/worker/view/video/videoform.html

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">普通招聘</div>
                <div class="layui-card-body" pad15>

                    <div class="layui-form layui-form-pane" lay-filter="LAY-video-videoform-edit">
                        <input type="hidden" name="id" value="{$video_data.id}">
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span style="color:#f90c05;">*</span>小视频标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" value="{$video_data.title}" lay-verify="required" placeholder="请输入..."
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item" id="video-box">
                            <input type="hidden" id="old_videourl" value="{$video_data.videourl}" name="old_videourl"/>
                            <input type="hidden" id="new_videourl" value="" name="new_videourl"/>

                            <label class="layui-form-label">小视频</label>
                            <div class="layui-input-inline">
                                <button type="submit" class="layui-btn"  id="add_video" ><i class="layui-icon"></i>选择视频</button>
                            </div>
                            <video id="videoid" width="320" height="240" controls="controls" >

                                <source id="show_video"  src="{$video_data.videourl}" type="video/mp4" />
                            </video>

                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" >小视频封面</label>

                            <div class="layui-input-inline">
                                <button type="button" class="layui-btn"  id="capture" ><i class="layui-icon"></i>截图</button>
                            </div>
                            <input type="hidden" id="imageurl" name="imageurl" value="{$video_data.imageurl}">
                            <img id="imgsrc" width="140px" height="240px"  src="{$video_data.imageurl}">

                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <input type="button" lay-submit lay-filter="LAY-video-videoform-edit-submit" value="确认提交" class="layui-btn">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<script>
    layui.config({
        base: '/static/echoui/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'form', 'set', 'layedit', 'layarea','upload'], function() {

        var $ = layui.$,
            setter = layui.setter,
            admin = layui.admin,
            layedit = layui.layedit,
            form = layui.form,
            upload = layui.upload;

        var scale = 0.25;
        var video_time;

        form.render();

        upload.render({
            elem: '#add_video'
            ,url: setter.baseWorkerUrl + 'comjobs/upload_video'  //改成您自己的上传接口
            ,accept: 'video' //视频
            ,done: function(res){
                var src = res.data.src;
                sourceDom = $("<source src=\""+ src +"\">");
                // $("#video-box video").append(sourceDom);
                document.getElementById("videoid").src=src ;
                document.getElementById("videoid").play();

                var timer = setTimeout(function(){
                    video_time = document.getElementById("videoid").duration;//视频时长
                    if(Math.ceil(video_time) > 15){
                        layer.msg('上传视频不能超过15秒', {icon: 2});
                        $("#add_video").css('cssText','background-color:#e81313');
                    }else{
                        alert(src);
                        layer.msg('上传成功');
                        $("#add_video").css('cssText','background-color:#009688');
                        $("#new_videourl").val(src);

                    }
                    clearTimeout(timer);
                },1000);

            }
        });

        //小视频截图
        video = $('#videoid').get(0);

        $('#capture').on('click', function(){
            captureImage();
        });
        var captureImage = function(){
            var canvas = document.createElement("canvas");
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
            $("#imgsrc").attr('src',canvas.toDataURL());
            $("#imageurl").val(canvas.toDataURL());

        };


        form.on('submit(LAY-video-videoform-edit-submit)', function(obj) {
            if(video_time)
            {
                if(Math.ceil(video_time) >15)
                {
                    layer.msg('视频不能超过15秒');
                    return false;
                }
            }
            var index = parent.layer.getFrameIndex(window.name);
            admin.req({
                url: setter.baseWorkerUrl + 'video/videoform',
                data: obj.field,
                type: 'post',
                done: function(res) {
                    layer.msg("提交成功", {
                        icon: 1
                    });
                    parent.layui.table.reload('LAY-video-videolist-table'); //重载表格
                    parent.layer.close(index);
                }
            });
        });
    });
</script>