video視頻標簽一些設置，包括封面、播放結束后的封面、視頻占滿屏幕的方式、視頻播放暫停、展示控制欄、觸發全屏播放事件

video視頻標簽一些設置，包括封面、播放結束后的封面、視頻占滿屏幕的方式、視頻鏈接、視頻播放暫停、展示控制欄、觸發全屏播放事件

<video  id="video" autoplay="autoplay" muted='muted' controls="controls" poster="../../img/newIndexImages/images/indexifrstpost.png">
	<source src="img/resource/2019/ptxd/lbdjzz.mp4" type="video/mp4">
</video>

代碼如上，poster屬性用於設置視頻封面；視頻鏈接放在source標簽內的src屬性；加controls屬性就會展示控制欄，不加不顯示；

視頻占滿屏幕的方式

height：100%；
width：100%；
object-fit:cover；

以下為object-fit屬性，可以都嘗試下效果看看哪種是你比較喜歡的鋪滿效果（值得注意的是IE瀏覽器不兼容此屬性）
object-fit關鍵屬性：
object-fit：fill
被替換的內容大小可以填充元素的內容框。 整個對象將完全填充此框。 如果對象的高寬比不匹配其框的寬高比，那么該對象將被拉伸以適應（會變形）。
object-fit:container
被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加“黑邊”。
object-fit:cover
被替換的內容大小保持其寬高比，同時填充元素的整個內容框。 如果對象的寬高比與盒子的寬高比不匹配，該對象將被剪裁以適應。
object-fit:none
被替換的內容尺寸不會被改變。
object-fit:scale-down
內容的尺寸就像是指定了none或contain，取決於哪一個將導致更小的對象尺寸。

視頻進入網頁自動播放

查閱資料都是說在vedio屬性中加 autoplay="autoplay" muted='muted'，如第一段代碼，但是我試了都是被瀏覽器評屏蔽掉的（為了提高用戶體驗，瀏覽器不允許自動播放事件，除非用戶自己做了點擊播放事件），
在強制刷新時，才會自動播放，網頁剛進入並不會播放，我也嘗試了triggle事件去自動觸發點擊事件也不行，以下是能夠成功自動播放的代碼

var myVideo=document.getElementById("video"); 
myVideo.muted=true
myVideo.play(); 

在js里面定義muted，然后觸發play()

播放結束后的封面

沒有找到好的辦法，最后還是寫了一個假的，就是視頻播放完了，在視頻上面蓋一個圖片擋住視頻，播放時隱藏，播放完展示

 myVideo.onended = function() {
      $(".endimg").show()
 };

視頻播放暫停

$(".start").click(function(){
        var myVideo=document.getElementById("video");
        if (myVideo.paused) {
            myVideo.play();
        }else {
            myVideo.pause();
        }
    })

視頻觸發全屏

function launchFullscreen(element){
 //此方法不可以在異步任務中執行，否則火狐無法全屏
      　　if(element.requestFullscreen) {//瀏覽器兼容
      　　　　element.requestFullscreen();
      　　} else if(element.mozRequestFullScreen) {
      　　　　element.mozRequestFullScreen();
      　　} else if(element.msRequestFullscreen){
      　　　　element.msRequestFullscreen();
      　　} else if(element.oRequestFullscreen){
      　　　　element.oRequestFullscreen();
      　　} else if(element.webkitRequestFullscreen){
      　　　　element.webkitRequestFullScreen();
      　　}else{
      　　　　var docHtml = document.documentElement;
      　　　　var docBody = document.body;
      　　　　var videobox = document.getElementById('video');
      　　　　var cssText = 'width:100%;height:100%;overflow:hidden;';
      　　　　docHtml.style.cssText = cssText;
      　　　　docBody.style.cssText = cssText;
      　　　　videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';
      　　　　document.IsFullScreen = true;
      　　}
    }
//應用
 var myVideo=document.getElementById("video");
  launchFullscreen(myVideo);