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 相关文章推荐
JQuery写动态树示例代码
Jul 31 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
js querySelector() 使用方法
Dec 21 Javascript
vue模板语法-插值详解
Mar 06 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
JavaScript中的工厂函数(推荐)
2017/03/08 Javascript
vue中appear的用法
2017/08/17 Javascript
vue router demo详解
2017/10/13 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
vuex存取值和映射函数使用说明
2020/07/24 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
Python3写入文件常用方法实例分析
2015/05/22 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
python 如何将office文件转换为PDF
2020/09/22 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
高中生毕业自我鉴定范文
2013/12/22 职场文书
办理房产过户的委托书
2014/09/14 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
建立共青团委员会的请示
2019/04/02 职场文书