H5視頻播放小結（video.js不好用！！！）

近期在做一個H5的視頻課堂，遇到了H5播放的需求，因為原生的video的樣式不太理想，尤其是封面無法壓住控制條，這就需要我們自定義播放控件。

於是，找了很近的插件，找到了用戶比較多的video.js插件，可是，這個插件在移動端，尤其是要兼容安卓和ios，有很多bug, 包括自適應，包括點擊播放和暫停，都有bug，而且官方的issue里面也沒有找到解決辦法，中文的參考資料也較少。

於是，放棄了video.js  !!!!!

找啊找，終於找到了一款簡單的，比較實用的video插件。

下面，講述如何使用：

1、首先引入相關的css和js

<link rel="stylesheet" href="css/video.css">
<script src="js/screenfull.min.js"></script>
<script src="js/video.min.1.0.1.js"></script>

https://img.boltshopvip.com/api/h5/video.css

https://img.boltshopvip.com/api/h5/screenfull.min.js

https://img.boltshopvip.com/api/h5/video.min.1.0.1.js

以上就是三個需要引入的文件的七牛雲路徑。

2、html如下：

 <video class="ppq-video video-hidden" src="" webkit-playsinline="true" playsinline="true"
                            x-webkit-airplay="allow" x5-playsinline poster="" id="myvideo"></video>

這個video 需要可以解決安卓和ios默認全屏播放的效果。！

3、js如下：

setTimeout(() => {
                    document.getElementById("myvideo").src =
                        "https://jgs.powerdadmom.com/mtdd/video/1563189714820.mp4";
                    document.getElementById("myvideo").poster =
                        "https://img.boltshopvip.com/api/h5/video.jpg";
                    $('#myvideo').initVideoPlayer();
                    
  }, 1500);

這里用了定時器，防止dom沒有加載進來！

這樣就實現了簡單的video的播放！