video标簽踩坑小記

使用video标簽實作簡單的視訊展示，關鍵點是封面的設定和視訊在目前區域的播放，自定義封面圖和播放按鈕，覆寫在原生視訊标簽的上面。最終實作的效果如下圖所示：

踩坑小記：

1. 問題：視訊封面在個别浏覽器顯示不全

   解決：不使用video标簽預設的poster屬性，自定義封面和播放按鈕。

2. 問題：視訊在微信浏覽器點選全屏播放，不能在目前區域播放

   解決：通過設定x5-playsinline="true"實作x5核心的相容。

最終實作代碼如下：

<style>
        .video-cover-box{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 280px;  
        }
        .video-box{
            position: relative;
            width: 100%;
            height: 280px; 
        }
        .jkj-video{
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
        .jkj-video-cover{     /*視訊封面圖*/
            width: 100%;
            height: 280px;
            background:transparent url('img/video_cover.jpg') 100% 100% no-repeat;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
        }
        .video-play-icon{    /*視訊播放按鈕*/
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 70px;
            background: url('img/play.png') no-repeat;
            background-size: 100% 100%;
        }
</style>
           

<div class="video-box">
       <!-- 視訊部分 -->
        <video width="100%" height="100%" class="jkj-video" preload="auto" webkit-playsinline="true" playsinline=""  x5-playsinline="true"
            x-webkit-airplay="true" preload="auto" x5-video-orientation="portraint" id="jkjVideo">
            <source src="jkj.mp4" type="video/mp4" />
        </video>​
        <!-- 封面部分 -->
        <div class="video-cover-box">
            <div class="jkj-video-cover"></div>
            <div class="video-play-icon"></div>
        </div>
</div>
           

// 點選video封面消失，播放視訊
 $('.video-cover-box').click(function () {
    $(this).hide();
    document.getElementById('jkjVideo').play();
})