场景

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视频文件流的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。