vue 打开html流_在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部分

class="vjs-custom-skin videoPlayer"

:options="playerOptions"

@pause="onPlayerPause($event)"

ref="videoPlayer"

>

2323

复制代码

Vue JS部分

我没有使用它的样式，所以我注释了

这部分js还支持切换视频源的，类似于换台的效果，但是我只找到这一个视频源，没办法演示

使用Chrome浏览器要允许Flash

当前视频流有些卡，需要等待10秒钟左右

// 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);

},

},

};

复制代码

全局引入方式

注意：这个方式引入了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 部分

.m-box {

width: 600px;

}

复制代码

运行效果

结束

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

补充

代码可能和文章不太一样，我抽时口写的可运行版本全部代码，基于vue-cli3.0 。

掘金无法上传压缩包，我直接上传到github了

github地址