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 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
js分页工具实例
Jan 28 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
逐行分析鸿蒙系统的 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
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
js图片预加载示例
2014/04/30 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
微信小程序 共用变量值的实现
2017/07/12 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
html5菜单折纸效果
2014/04/22 HTML / CSS
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
建筑实习自我鉴定
2013/10/18 职场文书
工商学院毕业生自荐信
2013/11/12 职场文书
业务员岗位职责
2013/11/16 职场文书
酒店公关部经理岗位职责
2013/11/24 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
Python实现随机生成迷宫并自动寻路
2021/06/13 Python