upload/assets/html/cover.html

<style>
  #component-anim .layui-card-body{padding: 15px;}

  #component-anim .component-anim-demo{font-size: 0;}
  #component-anim .component-anim-demo li{display: inline-block; vertical-align: middle; width: 127px; line-height: 25px; padding: 20px 0; font-size: 14px; text-align: center; color: #666; transition: all .3s; -webkit-transition: all .3s;margin:5px;}
  #component-anim .component-anim-demo li .layui-icon{display: inline-block; font-size: 36px;}

  #component-anim .component-anim-demo li .fontclass{display: none;}
  #component-anim .component-anim-demo li .name{color: #c2c2c2;}
  #component-anim .component-anim-demo li:hover{background-color: #f2f2f2; color: #000;}

  #component-anim .component-anim-demo li{width: 168px;}
  #component-anim .component-anim-demo .layui-anim{cursor: pointer;}
  #component-anim .component-anim-demo .layui-anim{width:150px;height:100px;}
  #component-anim .component-anim-demo .code{height:25px;width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}

  #component-anim .component-anim-demo .layui-anim-yes
  {
    border:1px solid #0000ff;
  }
  #component-anim .component-anim-demo .layui-anim-no
  {
    border: 1px solid #e2e2e2;
  }
  </style>

<div class="layui-card"  id="component-anim">
  <div class="layui-card-header">
    <input type="hidden" id="cover_key" value="<{$key}>">
    <input type="hidden" id="cover_cur" value="<{$cur}>">
    <input type="hidden" id="cover_pic_url" value="<{$cover_pic_url}>">
    <div class="layui-inline">第几秒截图：<div class="layui-input-inline"><input type="text" style="width: 100%;" class="layui-input" id="cover_num" value="<{$num}>" ></div></div>

    <div class="layui-inline" class="file-search" onclick="crop()"><div class="layui-input-inline"><button type="button" class="layui-btn"><i class="fa fa-save"></i> 生成</button></div></div>


  </div>
  <div class="layui-card-body">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md6">
        <div class="layui-panel">
        <video src="<{$cur}>" width="300" controls="true"/>
        </div>   
      </div>
      <div class="layui-col-md6">
        <div class="layui-panel">
          <img src="<{$cover_pic}>" id="cover_pic" width="300" />
        </div>   
      </div>
    </div>    
  </div>
<script>
function crop()
{
    var num = $('#cover_num').val();
    var cur = $('#cover_cur').val();
    var key = $('#cover_key').val();

    var url = $('#cover_pic_url').val() + '&json=1&callback=?';
    $.getJSON(url, {num:num}, function(t) {
        $('#cover_pic').attr('src', t.data);
    })
}
</script>

</div>