在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地址