场景

Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)：

Vue+Video.js播放m3u8视频流(海康威视摄像头+RTMP服务+FFmpeg)_BADAO_LIUMANG_QIZHI的博客-CSDN博客_海康威视摄像头m3u8

上面实现的使用Video.js播放m3u8格式的视频流文件。

如果要在vue中直接播放rtmp视频流文件怎么办。

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、安装插件

npm install vue-video-player --save

npm install --save videojs-flash

这里要注意网络上有说如下安装方式的

npm install video-flash --save

这种方式会报错找不到，完整应该是videojs-flash

2、在页面中引用

//videojs-flash必须要放在vue-video-player的后面
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'

这里特别注意：

引用时必须注意videojs-flash必须要放在vue-video-player的后面

3、页面中引入videoPlayer组件

export default {name: "rtmpPlay",components: {videoPlayer},

4、页面上添加videoPlay组件

    <videoPlayer class="vjs-custom-skin videoPlayer" ref="videoplayer":playsinline="true" width="90%" :options="playerOptions"customEventName="changed" ></videoPlayer>

5、设置组件的设置属性

  data() {return {playerOptions: {width: "800",height: "400",language: 'zh-CN',techOrder: ['flash'],muted: true,autoplay: true,controls: false,//不显示暂停、声音、进度条组件loop: true,sources: [{type: 'rtmp/mp4',src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //网络rtmp流地址//src: 'rtmp://127.0.0.1:8822/live/badao' //本地rtmp流地址}],}};},

这里通过controls: false,//不显示暂停、声音、进度条组件

6、完整页面代码

<template><videoPlayer class="vjs-custom-skin videoPlayer" ref="videoplayer":playsinline="true" width="90%" :options="playerOptions"customEventName="changed" ></videoPlayer>
</template><script>
//videojs-flash必须要放在vue-video-player的后面
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
export default {name: "rtmpPlay",components: {videoPlayer},data() {return {playerOptions: {width: "800",height: "400",language: 'zh-CN',techOrder: ['flash'],muted: true,autoplay: true,controls: false,//不显示暂停、声音、进度条组件loop: true,sources: [{type: 'rtmp/mp4',src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //网络rtmp流地址//src: 'rtmp://127.0.0.1:8822/live/badao' //本地rtmp流地址}],}};},mounted() {},methods: {},
};
</script>

7、注意这里的rtmp视频流地址

 src: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp' //网络rtmp流地址

该地址是网络地址，运行效果

src: 'rtmp://127.0.0.1:8822/live/badao' //本地rtmp流地址

这个是本地搭建的视频推流的实现，可以参考如下

Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流：

Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_BADAO_LIUMANG_QIZHI的博客-CSDN博客_nginx rtmp windows

本地src的效果

8、注意这里只有支持并且下载了flash才能播放视频，这里使用的360极速浏览器并安装flash，重启浏览器之后就可以播放了。但是如果是Chrome浏览器则会提示

9、还要注意网络上有说vue-video-player同时安装时也会不播放的问题，所以如果之前已经安装了Video.js需要先将其删除卸载掉。

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流相关推荐

魔坊APP项目-27-直播、客户端中调整窗口大小、能播放rtmp格式直播流的播放器模块
直播客户端中直播的界面调整和当前窗口一致 live_list.html <!DOCTYPE html> <html lang="en"> <head ...
web三件套（经验贴）Google里，video标签播放mkv视频文件
video标签播放mkv视频文件第一次: <embed src="咏春.mkv" hidden="no" loop="true" R ...
video.js兼容微信浏览器，（播放.m3u8视频源）解决微信浏览器黑屏问题
video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题一.问题描述: 在h5做根据视频源直播功能时,在浏览器能打开视频,但是在部分安卓机和苹果机在微信浏览器打开会出现黑屏的状 ...
vue中使用h5 video标签实现弹窗播放本地视频
参考h5 < video >标签的用法在开发过程中主要涉及到以下几个需要关注的点 1.弹窗的打开关闭父组件中使用.sync绑定visible属性,可直接在子组件中关闭弹窗更新父组件传入 ...
vue整合videojs插件，播放RTMP，hls直播视频
1. Vue项目中安装videojs的相关依赖 npm install --save video.js npm install --save videojs-contrib-hls npm insta ...
Vue中使用Openlayers加载Geoserver发布的TileWMS时单击获取shp文件的坐标信息
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/ ...
vue中App.vue的主要作用
app.vue中不但可以当做是网站首页,也可以写所有页面中公共需要的动画或者样式.不在上面写代码也可以. app.vue是主组件,是页面入口文件,是vue页面资源的首加载项.所有的页面都是在app.v ...
vue 播放rtmp 直播拉流视频
一.写插件 <template><videoref="videoPlayer"class="video-js vjs-default-skin vjs- ...
video.js播放rtmp视频
最近公司要求拉取某公司流媒体服务器的视频监控,并在web端页面播放,流媒体服务器发送的是rtmp格式视频流,经过网上查资料,最后敲定使用video.js rtmp流需要依托flash播放,现在大多浏览 ...

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流

场景

实现

Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流相关推荐

最新文章

热门文章