详解vue2.0+vue-video-player实现hls播放全过程

//在main.js内引入
require('videojs-contrib-hls/dist/videojs-contrib-hls');

启动服务，查看效果

npm run dev

videoJs的播放按钮默认为椭圆形，我个人有点不习惯，所以修改成了圆形。

增加css样式

.video-js .vjs-big-play-button{
  /*
  播放按钮换成圆形
  */
 height: 2em;
 width: 2em;
 line-height: 2em;
 border-radius: 1em;
 }

注意：

直接在 myPlayer.vue组件内增加样式会被覆盖，不论你有没有增加scoped属性，这取决于vue加载样式的顺序，之前查资料看了一个帖子，讲的很好，可惜找不着了。

我最终的解决方案是：自定义了一个css文件，使用require引入到了main.js内，放在上述样式引入之后。

require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
require('@/../static/css/myVideoCss.css');

大bug: 播放按钮与fastclick冲突

冲突是这样的：播放器在手机浏览器或者chrome开发者工具（手机尺寸）内，点击播放按钮，播放与暂停事件会被触发多次。

刚开始不知道什么原因，在github上提了个issure，刚提完就发现上一个关闭的issure解决的就是这个问题，这里得向作者道个歉，给您添堵了。哈哈。于是我看了另外一个人给的答案：与fastclick插件冲突……，但是….. 没有解决方案。然后我尝试注释掉了fastclick，果然是它影响的。

然后我去fastclick github 地址看了看 ,页面说的很清楚，只要在触发的元素上增加一个needsclick的class就可以了。

但是我试了好久都没有成功。这时候看到了神贴，大体浏览了一下fastclick的源码过程，并且作者提到“Fastclick 把 this.needsClick 放到了 ontouchEnd 末尾去执行，才导致前面说的加上了“needsclick”类名也无效的问题。”所以我想尝试修改fastclick的源码，并且验证一下。

我把整个faseclick.js拷贝了出来，并采用require的方式引用。

const FastClick = require('@/../static/js/fastclick.js');
FastClick.attach(document.body);

打开代码，猜想为什么needsclick没有起到作用，所以就直接检索了一下这个单词，在 FastClick.prototype.needsClick方法的最后,有一个验证：

return (/bneedsclickb/).test(target.className);

首先FastClick.prototype.needsClick方法是判断元素是否要保留穿透功能，而最后一行肯定是验证触发的元素的class是不是含有needsclick。所以我先猜测是不是我触发的元素没有加上class,所以console了target.className：