Vue.js 使用 vue-video-player 视频播放器（最全面）

前端效果：

1.首先要安装 vue-video-player 包

npm install vue-video-player --save

2.在 main.js 中进行配置

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer);

3.代码中使用

注意：class="video-player vjs-custom-skin" 这个必须写，不写无法出现上面完成效果！！！

4.参数配置：playerOptions中的内容

playerOptions: {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在

这个 playerOptions 是 data() 域中的内容

5.vue-video-player 其他 API

vue-video-player 是基于 video.js 实现的，所以 api 地址：https://docs.videojs.com/

调用的时候使用这个对象进行操作：this.$refs.videoPlayer.player