Vue中的视频播放插件( vue-video-player )

前言

在最近的项目中有一个网络视频的功能，在之前的项目中没有接触过类似的功能，第一次接触，把具体操作步骤，遇到的一些问题记录如下：（首先个人认为vue-video-player是很好用的）
第一步：我们用到的vue-video-player的时候，首先要安装vue-video-player：

npm install vue-video-player --save

第二步:在main.js中引入:

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

第三步：安装完了以后创建一个文件夹vueVideoPlayer.vue（在这里我用的是和这个插件一样的名字）

第四步:创建完成以后就要为这个vueVideoPlayer.vue这个文件夹填充内容了template里面的内容：

<template>
  <videoPlayer
    class="vjs-custom-skin videoPlayer"
    :options="playerOptions"
     ref="videoPlayer"
     :playsinline="true"
  ></videoPlayer>
</template>

引入刚刚下载的包

// import "video-js.css";
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'

JS的内容

export default {
  components: {
    videoPlayer,
  },
  data() {
    return {
      playerOptions: {
        height: '300',
        sources: [
          {
            type: 'rtmp/mp4', // 播放的类型，在这里项目中需要的是rtmp，也可以修改为：‘video/mp4’
            src: 'rtmp://58.200.131.2:1935/livetv/hunantv', // 这里就是你播放内容的路径了，项目中的是湖南卫视的路径。{（https://v-cdn.zjol.com.cn/280443.mp4）这里是mp4格式的路径} *src为必填内容*
          },
        ],
        techOrder: ['flash'],
        autoplay: false,
        controls: true,
      },
    }
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    },
  },
}

最后一步极为重要，在那个文件夹用到，就在那个文件夹引进来，在这里我所用到的文件夹是liveWindow.vue（ 这是我建立的直播组件的文件夹 ）

import vueVideoPlayer from '@/components/editor/vueVideoPlayer'

引进来以后别忘记注册一下：

  components: {
    vueVideoPlayer,
  },

接下来看展示效果：

遇到的问题
因为我就用了两个浏览器做了测试（ Google Chrome，搜狗 ）
在Google Chrome中就会提示Adobe Flash Player已不再指支持，是Google Chrome在2020年底已经彻底移除Flash

其他的没遇到问题，总结一句话，细节决定成果