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();
})