当前位置:首页 >> 网络编程

vue项目中播放rtmp视频文件流的方法

想要播放rtmp视频文件流用H5的video标签是不可行的,所以这里我引用了一款插件 vue-video-player ,当然想要流畅的运用 vue-video-player 播放视频还必须安装辅助插件 videojs-flash。最后还要特别注意的是必须使用npm安装,当然我在安装过程中也遇到了一个问题,就是在选择使用 vue-video-player前还安装了videojs插件,卸载从新安装 vue-video-player时由于项目中有以前安装的其他视频组件影响,一直运行不起来,后面我把node_modules相关的视频组件都删除以及package中的安装目录都删除后从新安装就可以运行了,如果你们有遇到这种类似的情况可以对你们有帮助。
下面展示一些相关的操作步骤:
1、安装vue-video-playervideojs-flash插件

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

2、在package里面查看是否安装成功以及安装后的版本,如下图所示:

vue项目中播放rtmp视频文件流的方法

3、全局引用,在main.js文件中引入,如下图所示:

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
Vue.use(VueVideoPlayer)

或者是在当前页面引用,如下所示:

import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'

在这里我需要特别说明的是引用时必须注意videojs-flash必须要放在vue-video-player的后面,不然同样也会导致视频无法正常播放。
4、下面就是简单的应用案例,如果你需要更多的详细规则可以查看npm插件安装的网站https://www.npmjs.com/package/vue-video-player
完整案例说明如下:

<template>
	<videoPlayer class="vjs-custom-skin videoPlayer" ref="videoplayer" 
		:playsinline="true" width="90%" :options="playerOptions"
  	customEventName="changed" @play="onPlayerPlay($event)">
   </videoPlayer>
</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: {//测试视频流数据
			     width: "210",
			     height: "134",
			     language: 'zh-CN',
			     techOrder: ['flash'],
			     muted: true,
			     autoplay: true,
			     controls: true,
			     loop: true,
			     sources: [{
			      type: 'rtmp/mp4',
			      src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //rtmp流地址
			     }],
			     poster: 'static/fire/bgpp.png',
			     flash:{
			      swf:'static/video-js.swf' //视频屏幕小于400x300时设置
			     }
		    },
			}
		}
  }
</script>

5、部分bug解决办法
①当视频小于400x300时,视频不能自动播放,在flash下面添加静态video-js.swf资源,如上面案例所示;
②如果是像这样(rtmp://192.168.20.185:1935/live/openUrl/l2MJZsI)的流文件,需要在后面加一个 /才可以播放
videojs-flash
vue-video-player的顺序问题,vue-video-player必须放置在videojs-flash之前
④如果都没有上面的问题,可以查看一下是否浏览器的flash是否开起,开起可以在浏览器的设置里面去搜索flash,查到后设置允许即可

总结