上個月弄一個監(jiān)控視頻項目，需要將多個視頻流顯示在同一個頁面，并且做切換。
注意：東西有點多，加上我寫得也比較雜亂，看太快可能會看不懂，建議還是按步驟試一遍，加強(qiáng)記憶
用Vue-video-player實現(xiàn)，網(wǎng)上有許多關(guān)于這個的配置教程，我貼上一份：https://blog.csdn.net/liona_koukou/article/details/84025449
但是幾乎都是單個視頻的顯示，最后自己琢磨出來的多視頻顯示，給大家分享一下。
由于是商業(yè)項目，所以不方便貼出所有代碼，我盡量用部分偽代碼講清楚。
在此之前，我們先列一下需要的工作。

1.環(huán)境介紹及包安裝 2.流媒體服務(wù)器部署 3.單視頻顯示到頁面 4.多視頻顯示到頁面 5.多視頻下單個視頻的切換

1.環(huán)境介紹及包安裝
基本上這個都難不倒大家，網(wǎng)上教程很多，我主要講多視頻的實現(xiàn)，這里就比較粗略帶過。
我的開發(fā)環(huán)境使用的是Vue+webpack3.6，firefox瀏覽器
需要安裝的依賴包如下：

"vue-video-player": "4.0.6", "videojs-contrib-hls": "^5.14.1", "videojs-contrib-hls.js": "^3.2.0", "videojs-flash": "2.1.0", "videojs-swf": "^5.4.2",

基本上都是npm install --save xx，大家自行安裝。
在這里我給一份GitHub上的源碼：https://github.com/arut/nginx-rtmp-module
這份源碼是可以正常播放的，但是在我這不行，很坑，有博主說是vue-video-player版本更新后的問題，但是我測試后和版本無關(guān)，是一個十分坑的點：

坑點一：沒有打開火狐瀏覽器的視頻播放權(quán)限 坑點二：//poster: './static/images/logo.png', //這行代碼是沒錯的，但是一開始如果不注釋， 點擊視頻窗口的時候，會點擊到圖片，而不是視頻，火狐瀏覽器就不會彈出詢問你是否同意允許視頻播放，一遍后重新刪除注釋就可以了 坑點三：//flash: {// hls: { withCredentials: false },// swf: 'http://xxx.xx.xx'// }//得注釋flash的內(nèi)容，現(xiàn)在都不知道是為什么。可能是包導(dǎo)入的時候出問題了

然后就正常運(yùn)行了。

2.流媒體服務(wù)器部署
給出一個Windows下用FFmpeg+nginx+rtmp搭建直播環(huán)境 實現(xiàn)推流、拉流（超簡單教程）這個是真的好懂，我這個小白照著教程看一遍就搭起來了。
地址：https://www.jianshu.com/p/eacfc0a9f2fd
但是他給的視頻只有4分鐘左右，如果我們要調(diào)試，還是很不方便的，因為4分鐘完了又得重新開啟流轉(zhuǎn)換，所以大家可以用格式工廠轉(zhuǎn)換一下自己某個時長比較長的視頻，除此之外，他給的FFmpeg轉(zhuǎn)換參數(shù)也不太適合我們調(diào)試（轉(zhuǎn)換出來的畫質(zhì)太高，對于網(wǎng)絡(luò)比較差的同學(xué)來說，這樣轉(zhuǎn)換得太慢），我這里附上一個FFmpeg各類參數(shù)說明和使用：https://blog.csdn.net/weiwangchao_/article/details/71404600
這個是我自己用來轉(zhuǎn)換的參數(shù)：
ffmpeg -re -i panyan.flv -vcodec libx264 -r 25 -b:v 500k -s 640*480 -acodec aac -f flv rtmp://127.0.0.1:1935/live/panyan
注意：這條命令行得在視頻文件（如上的panyan.flv）目錄下運(yùn)行

可以將我們轉(zhuǎn)換后是視頻到VLC media player測試一下，如果能正常播放，說明你流媒體服務(wù)器已經(jīng)搭建完畢。

3.單視頻顯示到頁面
經(jīng)過上面兩個步驟，各位基本也大概了解怎么將一個視頻顯示在頁面，我這里的單視頻不是指一個，而是多個窗口的單視頻，截個圖發(fā)一下先：

這樣的話，我的頁面代碼是這樣實現(xiàn)的：

//利用v-for="i in 4"來部署4個視頻頁。 //class 是視頻窗口（大小，位置等），:class是視頻窗口的樣式切換，再加一個點擊事件 //注意，這里的 i 十分重要，它代表每個視頻流在視頻數(shù)組里的下標(biāo) <template v-for="i in 4"><div class='divVideo2' :class="{active:classObject[i]}" @click="()=>divVideo(i+1)" ><video-playerref='videoPlayerb'@ready='onPlayerReadied'class='vjs-custom-skin':options='playerOptions[i]' //這里存放的是視頻流的數(shù)據(jù)></video-player></div></template>**********//下面是Script 代碼********** data () { //data里數(shù)組初始化，這些都是偽代碼，直接抄沒用，理解一下就好，也不難理解flagSrc: '',//這個用來標(biāo)記被點擊視頻的URLflagActive: 0,//這個用來標(biāo)記被點擊視頻的索引（數(shù)組下標(biāo)）playerOptions: [],//這個是存放視頻的數(shù)組，如果你要切換視頻，直接判斷要新增的視頻（flagSrc）是否在數(shù)組內(nèi)，如果不在，在數(shù)組里將他代替initialized: false,//初始化currentTech: '',radio: '2',streams: {rtmp: '',hls: ''},playerOptionsflag: {loop: false,controls: true,autoplay: true, // 如果true，瀏覽器準(zhǔn)備好時開始播放muted: true, // 默認(rèn)情況下將會消除任何音頻poster: './static/images/logo.png', //沒有播放時圖片aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值// fluid: true, // 當(dāng)true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應(yīng)其容器html5: { hls: { withCredentials: false } },sources: [{ // 當(dāng)前視頻類型和urltype: 'rtmp/mp4',src: 'rtmp://127.0.0.1:1935/live/panyan' //我轉(zhuǎn)換的視頻流Url},{withCredentials: false,type: 'application/x-mpegURL',src: ''}],techOrder: ['flash'], // 兼容順序notSupportedMessage: '此視頻暫無法播放，請稍后再試'}, } //數(shù)組初始化 ********** 很重要的初始化 ********** //這個函數(shù)要在加載頁面是時候調(diào)用，也就是created（）里作為鉤子函數(shù)。initializationOption (){for(let i=0;i < 15;i++){//我這里是15個視頻顯示在頁面this.playerOptions[i] = cloneDeep(this.playerOptionsflag)//這是進(jìn)行克隆賦值（具體查Vue loadsh用法），如果不這樣做，15個視頻都會指向同一個源，會導(dǎo)致你只要修改一個視頻流URL,15個視頻都會變成同一個。所以需要每一個都獨(dú)立出來。} }

這樣一來，就能實現(xiàn)我上面那張圖的效果了。

4.多視頻顯示到頁面
有了上面的初始化（很重要，這行字的上面的代碼），你只要再給一個鉤子函數(shù)，對存放視頻的數(shù)組（this.playerOptions[ ]）進(jìn)行初始化，就能在剛剛載入頁面的時候，多個視頻同時播放了，如下圖：
在實現(xiàn)這個之前，我們封裝一下克隆的函數(shù)，這樣調(diào)用就輕松多了

// 克隆playerOptions的工廠方法playerOptionsCloneFactory(url){let playerOptionsClone = cloneDeep(this.playerOptionsflag)playerOptionsClone.sources[0].src = urlreturn playerOptionsClone },

然后再是視頻的初始化

//初始化函數(shù),類似如下 init () {this.playerOptions[i]= this.playerOptionsCloneFactory('rtmp://127.0.0.1:1935/live/視頻1')this.playerOptions[i+1]= this.playerOptionsCloneFactory('rtmp://127.0.0.1:1935/live/視頻2')this.playerOptions[i+2]= this.playerOptionsCloneFactory('rtmp://127.0.0.1:1935/live/視頻3')this.playerOptions[i+3]= this.playerOptionsCloneFactory('rtmp://127.0.0.1:1935/live/視頻4')......}

OK 多視頻的顯示就好了，然后切換視頻就簡單多了

5.多視頻下單個視頻的切換
還記得上面頁面代碼給了視頻窗口點擊事件嗎？

我們來實現(xiàn)這個點擊事件，使他點擊的時候切換視頻

divVideo (index) { //很簡單，我是用結(jié)構(gòu)樹列表做點擊切換的，要講就比較多，所以這里簡單實現(xiàn)切換，反正那個不難this.playerOptions[index-1]= this.playerOptionsCloneFactory('rtmp://127.0.0.1:1935/live/brmxj')}

屢一下最重要的點，多視頻初始化的時候，一定要改變數(shù)組本身（傳引用還是傳參數(shù)問題：https://www.cnblogs.com/yuyifan/p/6204365.html這個可以方便理解）
最后說真的能看到最后的都是有耐心的人，因為寫著寫著好亂，不如這樣，有問題評論區(qū)見？

總結(jié)

以上是生活随笔為你收集整理的Vue-Video-player多rtmp视频流显示在同一个页面+流媒体服务器部署的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。