快捷導(dǎo)航

vue項(xiàng)目中播放rtmp視頻文件流的方法

更新時(shí)間：2020年09月17日 15:17:51 作者：紙鳶鳶

這篇文章主要介紹了vue項(xiàng)目中播放rtmp視頻文件流 ,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

想要播放rtmp視頻文件流用H5的video標(biāo)簽是不可行的，所以這里我引用了一款插件 vue-video-player ，當(dāng)然想要流暢的運(yùn)用 vue-video-player 播放視頻還必須安裝輔助插件 videojs-flash。最后還要特別注意的是必須使用npm安裝，當(dāng)然我在安裝過(guò)程中也遇到了一個(gè)問(wèn)題，就是在選擇使用 vue-video-player前還安裝了videojs插件，卸載從新安裝 vue-video-player時(shí)由于項(xiàng)目中有以前安裝的其他視頻組件影響，一直運(yùn)行不起來(lái)，后面我把node_modules相關(guān)的視頻組件都刪除以及package中的安裝目錄都刪除后從新安裝就可以運(yùn)行了，如果你們有遇到這種類(lèi)似的情況可以對(duì)你們有幫助。
下面展示一些相關(guān)的操作步驟：
1、安裝vue-video-player和videojs-flash插件

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)

或者是在當(dāng)前頁(yè)面引用，如下所示：

import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'

在這里我需要特別說(shuō)明的是引用時(shí)必須注意videojs-flash必須要放在vue-video-player的后面，不然同樣也會(huì)導(dǎo)致視頻無(wú)法正常播放。
4、下面就是簡(jiǎn)單的應(yīng)用案例，如果你需要更多的詳細(xì)規(guī)則可以查看npm插件安裝的網(wǎng)站https://www.npmjs.com/package/vue-video-player
完整案例說(shuō)明如下：

<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: {//測(cè)試視頻流數(shù)據(jù)
			     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時(shí)設(shè)置
			     }
		    },
			}
		}
  }
</script>

5、部分bug解決辦法
①當(dāng)視頻小于400x300時(shí)，視頻不能自動(dòng)播放，在flash下面添加靜態(tài)video-js.swf資源，如上面案例所示；
②如果是像這樣（rtmp://192.168.20.185:1935/live/openUrl/l2MJZsI）的流文件，需要在后面加一個(gè) /才可以播放
③videojs-flash和vue-video-player的順序問(wèn)題，vue-video-player必須放置在videojs-flash之前
④如果都沒(méi)有上面的問(wèn)題，可以查看一下是否瀏覽器的flash是否開(kāi)起，開(kāi)起可以在瀏覽器的設(shè)置里面去搜索flash，查到后設(shè)置允許即可

總結(jié)

到此這篇關(guān)于vue項(xiàng)目中播放rtmp視頻文件流的文章就介紹到這了,更多相關(guān)vue播放rtmp視頻文件流內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: