在Vue中使用播放直播流 vue-video-player rtmp方式

前言

---

折腾了小两天犯了很多不改犯得错误，所以写一篇文章记录下，另外感谢 vue-video-playe的作者，为我们提供了这么便利的代码。
另外建议各位同学看一下vue-video-playe的源码，大约半小时可以看完，这样有助于更好的理解vue-video-playe的原理

安装

安装一定要使用npm安装 如果你尝试了n种方法都无法播放视频，或者运行过程中报错，建议删除node_modules, 然后在package.json 中删除以下两个，然后重新用npm安装

npm install vue-video-player --save-dev
npm install videojs-flash --save-dev

Vue HTML部分

<template>
  <div class="m-box">
    <videoPlayer
      class="vjs-custom-skin videoPlayer"
      :options="playerOptions"
      @pause="onPlayerPause($event)"
      ref="videoPlayer"
    ></videoPlayer>
    <div @click="showVideo" class="btn">2323</div>
  </div>
</template>

Vue JS部分

• 我没有使用它的样式，所以我注释了
• 这部分js还支持切换视频源的，类似于换台的效果，但是我只找到这一个视频源，没办法演示
• 使用Chrome浏览器要允许Flash
• 当前视频流有些卡，需要等待10秒钟左右

<script>
// import "vue-video-player/src/custom-theme.css"; // 引入样式
// import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";   // 如果使用全局引入 这句话可以不写，
import "videojs-flash";  // 如果使用全局引入 这句话可以不写，
export default {
  components: {
    videoPlayer,   // 如果使用全局引入 这句话可以不写，
  },

  // rtmp://58.200.131.2:1935/livetv/hunantv
  data() {
    return {
      playerOptions: {
        height: "300",
        width: "600",
        sources: [
          {
            type: "rtmp/mp4",
            src: "rtmp://58.200.131.2:1935/livetv/hunantv",
          },
        ],
        techOrder: ["flash"],
        autoplay: true,
        controls: true,
      },
    };
  },
  methods: {
    showVideo() {
      let myPlayer = this.$refs.videoPlayer.player;

      // 用于多个视频源直接切换，但是现在只有一个视频源，
      myPlayer.src("rtmp://58.200.131.2:1935/livetv/hunantv");
    },

    onPlayerPause(player) {
      console.log(player);
    },
  },
};
</script>

全局引入方式

注意：这个方式引入了swf文件，解决了因网络问题加载不到swf无法播放的问题。

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/dist/videojs-contrib-hls'

videojs.options.flash.swf = "./video-js.swf";
Vue.use(VueVideoPlayer)

css 部分

<style>
.m-box {
  width: 600px;
}
</style>

运行效果

结束

以上代码就是可以直接运行，使用rtmp实现实时播放的全部代码

补充

代码可能和文章不太一样，我抽时口写的可运行版本全部代码，基于vue-cli3.0 。
掘金无法上传压缩包，我直接上传到github了
github地址