H5视频播放小结（video.js不好用！！！）

teamemory 2021-08-16 原文

近期在做一个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的播放！