想要播放rtmp視訊檔案流用H5的video標籤是不可行的，所以這裡我引用了一款外掛 vue-video-player ，當然想要流暢的運用 vue-video-player 播放視訊還必須安裝輔助外掛 videojs-flash。最後還要特別注意的是必須使用npm安裝，當然我在安裝過程中也遇到了一個問題，就是在選擇使用 vue-video-player前還安裝了videojs外掛，解除安裝從新安裝 vue-video-player時由於專案中有以前安裝的其他視訊元件影響，一直執行不起來，後面我把node_modules相關的視訊元件都刪除以及package中的安裝目錄都刪除後從新安裝就可以運行了，如果你們有遇到這種類似的情況可以對你們有幫助。

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視訊檔案流 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！