vue+videojs播放m3u8使用技巧收集

1. 播放按钮居中

在<video>标签中加入vjs-big-play-centered类可以实现播放按钮居中
代码如下：

<video
 class="video-js vjs-big-play-centered"
>
</video>

2.暂停时显示播放按钮

在css中添加属性，即可在video.js 暂停播放时显示播放按钮，下图中用了上一条按钮居中的方法：

代码如下：

//style
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}

3. 点击屏幕播放/暂停

在style中加入对应的css属性，点击屏幕任意位置可以播放/暂停视频。
代码如下：

//style
.video-js.vjs-playing .vjs-tech {
    pointer-events: auto;
}

pointer-events是CSS的一个属性，用来控制鼠标的动作，具体可参考《CSS里的pointer-events属性》。

4. 监听视频播放/暂停事件

（1）首先，使用ref绑定对应的video标签
（2）然后，使用addEventListener()方法进行监听视频播放/暂停
代码如下：

//template
<video
 ref="videoPlayer"
>
</video>

//script
this.$refs.videoPlayer.addEventListener("play", function () {
   console.log("开始播放");
});
this.$refs.videoPlayer.addEventListener("pause", function () {
   console.log("暂停播放");
});

引用(参考)
https://www.awaimai.com/2053....
https://www.cnblogs.com/ghfjj...