华山资源网

vue项目中播放rtmp视频文件流的方法
网络编程 2024/12/23 佚名
3 1

想要播放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-player和videojs-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，查到后设置允许即可

总结

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com