場景

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视频文件流的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。