video截取视频第一帧作为播放前默认图片

业务需求：最近在用百度编辑器ueditor，文章里面上传了视频后，在页面播放的时候，需要在视频没播放前取第一帧作为静态默认图片，然后判断环境是否是4G还是wife情况下，再进行是否自动播放。

直接上代码：

jsp:

<div class="imh-app-health_b" style="width:100%;">
                    <c:out value="${news.content}" escapeXml="false" />
 </div>

<input type="hidden" name='isPlay' id='isPlay' value="${isPlay}" /> 

js:

$(document).ready(function(){      
      var aaa = document.getElementsByTagName('video')[0].id = 'video';
      var video_do = document.querySelector("video");
      document.getElementById("video").poster="${pageContext.request.contextPath}/images/news/first-v1.jpg";
      video_do.muted=false;
      $("#video").attr("x5-playsinline",true);
      $("#video").attr("webkit-playsinline",true);
      $("#video").attr("playsinline",true);
      var isPlay = $("#isPlay").val();
      if(isPlay == 1){
          video_do.play();// ---视频截取第一帧---
      }
    });  

其中，在ueditor自己带的video标签中，没有poster这个属性，也没有id，所以就先加上id，再添加进去poster属性，然后再图片文件夹下添加进去第一帧图片，根据路径添加进去即可。

补充：目前只能实现手工截取第一帧图片后存放在文件夹里面，然后根据路径取出来现实，如果批量的视频文件存在，前提是每一个视频需要截取好后存好，或者全部的视频统一显示固定的一张图片才好，如有更好的办法获取，还请多多指教。