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

2024-11-29 11:26:35

想要播放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里面查看是否安装成功以及安装后的版本，如下图所示：

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视频文件流内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue + typescript + video.js实现流媒体播放视频监控功能

视频才用流媒体,有后台实时返回数据, 要支持flash播放, 所以需安装对应的flash插件.当视频播放时,每间隔3秒向后台发送请求供检测心跳,表明在线收看状态,需要后台持续发送视频数据. 1. yarn add video.js videojs-flash 2. 创建videp.js声明文件 3. 创建video_player.vue组件,供外部调用.源码如下 <script lang="ts"> import { Component, Emit, Prop, Vue }
Vue结合Video.js播放m3u8视频流的方法示例

首先,我们需要在vue工程中安装video.js相关依赖. npm install --save video.js npm install --save videojs-contrib-hls 然后,我们需要引入videojs的css文件,例如在main.js中引入 import 'video.js/dist/video-js.css' 接着,我们在需要播放视频的页面引入js对象 import videojs from 'video.js' import 'videojs-contrib-hls
vue实现自定义H5视频播放器的方法步骤

前言前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑... 设计阶段这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易. 需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...下面就这届上代码了;刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方式绑定事件监听; 最后图方便采
vue视频播放插件vue-video-player的具体使用方法

安装 npm install vue-video-player --save 引入可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一) [1]全局引用, 在main.js里面导入并引用 import VideoPlayer from 'vue-video-player' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' Vue.use(VideoPlayer) [2
vue使用video.js进行视频播放功能

关于video.js video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放(可加载本地静态资源视频以及网络链接视频) 官网:videojs.com/ 安装 npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video 使用 <div class="demo1-vide
vue-video-player实现实时视频播放方式(监控设备-rtmp流)

监控设备播放效果如下 1.vue项目安装vue-video-player npm install vue-video-player --save 2.编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources[0].src赋值就可以播放了,具体操作有注释) 注:style样式部分用了lang=scss,如果自己的项目没用他请用自己的方式改一下样式部分避免报错 <template> <div class="video-js&q
vue项目中播放rtmp视频文件流的方法

想要播放rtmp视频文件流用H5的video标签是不可行的,所以这里我引用了一款插件 vue-video-player ,当然想要流畅的运用 vue-video-player 播放视频还必须安装辅助插件 videojs-flash.最后还要特别注意的是必须使用npm安装,当然我在安装过程中也遇到了一个问题,就是在选择使用 vue-video-player前还安装了videojs插件,卸载从新安装 vue-video-player时由于项目中有以前安装的其他视频组件影响,一直运行不起来,后面我把n
vue项目中自定义video视频控制条的实现代码

最近公司项目中,添加了视频模块,但是产品觉得Video自带的控制条有点LOW,于是自己设计了一个.于是开始了自定义Video控制的采坑之旅.. 首页效果图: 需求描述: 当鼠标放在图片上的时候,自动播放视频,并显示预览进度条,当鼠标移开,显示预览图片,再次hover图片,继续上次播放视频详情页的效果图: 需求描述: 能自定义的暂停和播放模仿进度条可实现拖拽播放速度显示当前时间能选择倍速能控制声音能全屏播放接下来一步步的实现首先康康首页的,上结构代码: <div class="
vue项目中在外部js文件中直接调用vue实例的方法比如说this

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app
Vue项目中使用WebUploader实现文件上传的方法

简介: WebUploader是由 Baidu WebFE(FEX) 团队开发的一个简单的以 HTML5为主 , FLASH为辅的现代文件上传组件 .在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器 ,沿用原来的FLASH运行时, 兼容IE6+,iOS 6+, android 4+ .两套运行时,同样的调用方式,可供用户任意选用.采用大文件分片并发上传 ,极大的提高了文件上传效率. 分片.并发分片与并发结合,将一个大文件分割成多块, 并发上传 ,极大地提高
Vue项目中使用flow做类型检测的方法

在vue2.0的项目中加入flow类型检查.当前项目是用js写的,当项目越来越大,由于js弱类型的特性,相比ts(typescript)这种强类型的语言而言,后期维护会越来越困难.为了解决这个问题,决定使用flow 加入类型检查. flow了解 flow是fackbook公布的javascript静态类型检查器. 可以检查js中一些bug,eg:自动类型转换中出现的问题.flow官网首先,安装flow npm i flow-bin --save-dev 然后在package.json中添加脚本
在vue项目中使用Nprogress.js进度条的方法

NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入在main.js中引入要使用的npro
在vue项目中,将juery设置为全局变量的方法

1.首先执行:npm install jQuery --save-dev,在package.json里加入jQuery. 2.修改build下的webpack.base.conf.js 方法一: 首先加入: const webpack = require("webpack") 然后在module.exports 对象中加入: plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.Prov
vue项目中使用vue-layer弹框插件的方法

vue-layer弹框插件安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue); 参数说明 { type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) title: '信息', content: '', area: 'auto', offset: 'auto', icon: -1, btn: '确定', time: 0
vue项目中进行svg组件封装及配置方法步骤

最近刚入新的公司,拿到项目之后,发现一个有趣的事情就是标题的icon是用svg来弄的,这篇文章彻底弄清楚怎么使用 1.创建vue项目(通过cli来搭建脚手架,该测试项目是用vue cli4进行配置的) 2.创建一个自定义组件具体代码如下: <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href=
vue项目中使用vue-i18n报错的解决方法

前言 Vue-i18n大家应该都不陌生,Vue-i18n安装的安装方法如下: npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候,居然报错了,通过查找相关的资料终于找到了解决的方法,下面话不多说了,来一起看看详细的介绍吧发现问题 iview-admin框架克隆到本地,添加路由的时候,稍不注意就会遇到以下情况: Value of key 'xxx' is not string! Cannot translate the value of ke

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

相关推荐

随机推荐