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屬性，然後再圖片文件夾下添加進去第一幀圖片，根據路徑添加進去即可。

補充：目前只能實現手工截取第一幀圖片後存放在文件夾裏面，然後根據路徑取出來現實，如果批量的視頻文件存在，前提是每一個視頻需要截取好後存好，或者全部的視頻統一顯示固定的一張圖片纔好，如有更好的辦法獲取，還請多多指教。