[H5]<video>自定義實現點擊的時候暫停與播放效果

如圖所示：需要實現的自定義效果是點擊視頻上的圖標或者視頻的時候實現暫停與播放
思路整理：
1.需要將圖片定位到視頻上
2.點擊視頻的時候，暫停圖片顯示，播放的時候圖標隱藏
3.點擊圖片的時候，和第二步操作一致

HTML 注：由於我是寫在react項目中，所以src的鏈接都是用require模塊獲取的，如果不是寫在react項目中的話直接寫路徑就可以

 <div style={{ position: "relative"}}>
          //視頻中心的暫停按鈕圖片
          <img
            id="videoPalse"
            src={[require("./../../assets/laterImg/[email protected]")]}
            alt=""
          /> 
          <video
            id="videoplay"
            poster={[require("./../../assets/laterImg/[email protected]")]}
            src={[require("./../../assets/laterImg/westlake.mp4")]}
            type="video/mp4"
            playsInline={ true }   // 小屏播放
            webkit-playsinline="true"  // ios系統下小屏播放
            width="1" 
            height="1"
          />
</div>

css

video{
    width:100%;
    height:100%;
    object-fit:fill;
    border-radius: 5px;
}
/**視頻中心暫停圖片的樣式**/
#videoPalse{
    position: absolute;
    z-index: 100;
    width:50px;
    top:25%;
    left:42%;
}

js

 //點擊屏幕的時候暫停，並且圖片隱藏，再次點擊視頻或者圖片的時候播放
    let videoplay = document.getElementById("videoplay");
    if (videoplay) {
 //點擊圖片的時候暫停，並且使圖片隱藏，再次點擊視頻或者圖片的時候播放
      videoplay.onclick = function() {
        if (videoplay.paused) {
          videoplay.play();
          videoPalse.style.display = "none";   //播放的時候圖標隱藏
        } else {
          videoplay.pause();
          videoPalse.style.display = "block";   //暫停的時候圖標顯示
        }
      };
    //對於ios系統播放完畢之後變黑的情況,在播放結束的時候所以要重新刷新一下src
    if(isiOS){
    //isiOS是我設置的變量判斷ios系統的常量，如果需要判斷條件可以評論或者私信我
      videoplay.addEventListener('ended', function (e) {
        // 播放結束時觸發的時候使播放圖標顯示，同時播放完之後重新加載video的src
            videoPalse.style.display = "block"; 
            videoplay.src=require("./../../assets/laterImg/westlake.mp4");
            })
    }
     
    }
   //同樣點擊圖標的時候也需要播放暫停，下面是對圖標的處理
    let videoPalse = document.getElementById("videoPalse");    //video標籤
    if (videoPalse) {
      videoPalse.onclick = function() {
        if (videoplay.paused) {     //點擊視頻的時候如果暫停狀態，則讓其播放
          videoplay.play();
          videoPalse.style.display = "none";
        } else {
          videoplay.pause();
          videoPalse.style.display = "block";
        }
      };
    }

注意：<video>標籤播放的視頻在不同的瀏覽器和手機中展示不同，對於谷歌瀏覽器手機模擬模式中上面的控制事件會生效，如果放在手機上：安卓系統小屏幕播放，播放的時候會顯示controls控件層，自定義圖標顯示隱藏js不生效。對於ios系統，播放視頻默認會大屏幕播放，自定義的圖標顯示隱藏的js控制同樣不生效了，對於ios系統，處理禁止大屏幕播放事件之後圖標的自定義控制就會生效，關於怎麼禁止ios視頻大屏幕播放事件會在我的下面文章中會進一步寫