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


Posted in Javascript onSeptember 17, 2020

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

总结

到此这篇关于vue项目中播放rtmp视频文件流 的文章就介绍到这了,更多相关vue播放rtmp视频文件流 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 #Javascript
vue项目实现多语言切换的思路
Sep 17 #Javascript
vue实现放大镜效果
Sep 17 #Javascript
JavaScript封装单向链表的示例代码
Sep 17 #Javascript
vue修改Element的el-table样式的4种方法
Sep 17 #Javascript
vue+canvas实现拼图小游戏
Sep 18 #Javascript
JavaScript 常见的继承方式汇总
Sep 17 #Javascript
You might like
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript前补零操作实例
2015/03/11 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
人事主管的岗位职责
2013/11/16 职场文书
土木工程师岗位职责
2013/11/24 职场文书
银行员工考核评语
2014/12/31 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
Flink 侧流输出源码示例解析
2022/09/23 Servers