Vue 配置vue-video-player

配置vue-video-player，实现视频流。只需 npm i vue-video-player 即可。亲测一定要使用 npm 安装，其他安装包引入不全，无法正常使用

//package.json
{
  "name": "v3demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "core-js": "2.6.9",
    "echarts": "^4.3.0",
    "element-ui": "^2.12.0",
    "qrcode": "^1.4.1",
    "three": "^0.108.0",
    "vue": "^2.6.10",
    "vue-baidu-map": "^0.21.22",
    "vue-clipboard2": "^0.3.1",
    "vue-lazyload": "^1.3.3",
    "vue-router": "^3.0.3",
    "vue-video-player": "^5.0.2",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}

//main.js
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import "videojs-flash"
import "videojs-contrib-hls"

<template>
  <div id="">
    <!-- 视频组件 -->
    <video-player
            class="video-player-box video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
    ></video-player>
  </div>
</template>

<script>
  export default {
    name: 'MyVideoPlayer',
    data() {
      return {
        // videojs options
        playerOptions: {
          language: 'en', //zh-CN 中文
          muted: true, //默认情况下将会消除任何音频
          autoplay: false, //如果true,浏览器准备好时开始回放
          loop: false, //视频一结束就重新开始
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          preload: 'auto', //建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持)
          // aspectRatio: '16:9', //将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: false, //当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器
          // techOrder: ['flash', 'html5'],      // 兼容顺序
          // flash: {hls: {withCredentials: false}},
          // html5: {hls: {withCredentials: false}},
          sources: [{
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目  视频流-'rtmp/flv'
            src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" //url地址
          }],
          // sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
          //   type: 'rtmp/hls',
          //   src: 'rtmp://192.168.1.199:10935/hls/stream_1'
          // }, {
          //   withCredentials: false,
          //   type: 'application/x-mpegURL',
          //   src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
          // }],
          poster: "/static/images/author.jpg", //初始化封面图片
          width: 400, //document.documentElement.clientWidth 播放器宽度
          height: 400, //document.documentElement.clientHeight 播放器高度
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true,  //全屏按钮
            currentTimeDisplay: false, // 当前时间
            volumeControl: false, // 声音控制键
            playToggle: false, // 暂停和播放键
            progressControl: true, // 进度条
          }
        }
      }
    },
    mounted() {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {}
  }
</script>

<style scoped>
  /* 调整播放器样式 */
  /*.video-player-box >>> #vjs_video_3 {*/
  /*  display: flex !important;*/
  /*  justify-content: center !important;*/
  /*  align-items: center !important;*/
  /*}*/

  /*.video-player-box >>> .video-js .vjs-big-play-button {*/
  /*  position: relative !important;*/
  /*  top: 0 !important;*/
  /*  left: 0 !important;*/
  /*}*/
</style>

<template>
  <div id="">
    <!-- HLS视频流组件 -->
    <video-player
            ref="videoPlayer"
            class="vjs-custom-skin"
            :options="playerOptions"
            @ready="playerReadied">
    </video-player>
  </div>
</template>

<script>
  export default {
    name: 'MyVideoPlayerHLS',
    data() {
      return {
        playerOptions: {
          // videojs and plugin options
          height: '360',
          sources: [{
            withCredentials: false,
            type: "application/x-mpegURL",
            src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8"
          }],
          controlBar: {
            timeDivider: false,
            durationDisplay: false
          },
          flash: { hls: { withCredentials: false }},
          html5: { hls: { withCredentials: false }},
          poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg"
        }
      }
    },
    mounted() {
      console.log('this is current player instance object', this.player)
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
    methods: {
      playerReadied(player) {
        var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
        player.tech_.hls.xhr.beforeRequest = function(options) {
          // console.log(options)
          return options
        }
      }
    }
  }
</script>

<style scoped>
</style>

<template>
  <div id="">
    <!-- RTMP视频流组件 -->
    <video-player
            class="vjs-custom-skin"
            :options="playerOptions">
    </video-player>
  </div>
</template>

<script>
  export default {
    name: 'MyVideoPlayerRTMP',
    data() {
      return {
        playerOptions: {
          height: '360',
          sources: [{
            type: 'rtmp/hls',
            src: 'rtmp://58.200.131.2:1935/livetv/hunantv'
          }],
          techOrder: ['flash'],
          autoplay: false,
          controls: true,
          poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg"
        }
      }
    }
  }
</script>

<style scoped>
</style>

使用时，只要修改 sources 数据源和类型即可