由于项目中的视频较大所以使用了video.js，安装方法如下：
1 | npm install video.js |
使用方法在main.js中配置如下：
1 2 3 | import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video |
页面使用如下：
1 2 3 4 5 6 | <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered video" muted autoplay preload loop poster="../assets/images/video.jpg" > <source src="../../public/about.mp4" type="video/mp4" > </video> |
使用如上方法之后在其他端都可正常播放，只有iOS没办法自动播放，于是就Google开始寻找方法
最后找到方法如下：
1 2 3 4 5 6 7 8 9 10 | <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered video" muted autoplay preload loop x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline poster="../assets/images/video.jpg" > <source src="../../public/about.mp4" type="video/mp4" > </video> |
在video标签上添加如下即可：
1 2 3 4 | x5-video-player-fullscreen="true" x5-playsinline playsinline webkit-playsinline |
以上测试有效！！！
preload: （预加载）iPhone支持，Android不一定支持;
poster: （封面图片）iPhone支持，Android不一定支持;
autoplay: （自动播放）iPhone中的Safari不支持，webview可能被开启。Android不一定支持；
loop: （循环播放）iPhone支持，Android不一定支持;
controls: （控制条）iPhone支持，大师需要开始播放了才显示，Android基本支持;
width: （宽度）;
height: （高度）;
有时候在微信网页端插入