vue项目基于vue-video-player实现rtmp直播流

安装vue-video-player与videojs-flash

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

在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'

Vue.use(VueVideoPlayer)

组件中使用

<template>
	<div>
		<videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions"></videoPlayer>
	</div>
</template>
<script>
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'

export default {
	components: {
		videoPlayer
	},
	data () {
	return {
		playerOptions: {
			height: '300',
			sources: [{
				type: 'rtmp/mp4',
				src: 'rtmp://127.0.0.1:8080/test/test'
			}],
			techOrder: ['flash'],
			autoplay: false,
			controls: true
			}
		}
	}
}
</script>

这样就能实现rtmp直播流在浏览器中播放，但有以下几点切记，不要入坑

1.安装vue-video-player插件一定要用npm安装，不可使用cnpm安装，否则会报:“The "flash" tech is undefined. Skipped browser support check for that tech”
2.如果需要播放 RTMP 流，需要安装 videojs-flash 插件
3.如果两个流都需要播放，flash 插件需要安装到 hls 插件之前
4.如果需要播放 HLS 流，需要安装 videojs-contrib-hls 插件，非原生支持的浏览器，直播服务端需要开启 CORS
5.如果你需要在谷歌浏览器播放，需要将谷歌浏览器的flash设置改成允许使用flash插件播放