video标签踩坑小记

使用video标签实现简单的视频展示，关键点是封面的设置和视频在当前区域的播放，自定义封面图和播放按钮，覆盖在原生视频标签的上面。最终实现的效果如下图所示：

踩坑小记：

1. 问题：视频封面在个别浏览器显示不全
   解决：不使用video标签默认的poster属性，自定义封面和播放按钮。
2. 问题：视频在微信浏览器点击全屏播放，不能在当前区域播放
   解决：通过设置x5-playsinline="true"实现x5内核的兼容。

最终实现代码如下：

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