vueプロジェクトでは、rtmpビデオファイルの流れを再生する方法があります。

tmpのビデオファイルを再生するにはH 5のvideoタグを使ってはいけませんので、ここでプラグインvue-video-playerを引用しました。もちろんスムーズにvue-video-playerを使ってビデオを再生するには補助プラグインvideojs-flashをインストールしなければなりません。最後に、npmを使ってインストールしなければならないことに注意します。もちろん、インストール中にも問題がありました。vue-video-playerを使う前に、videojsプラグインをインストールしました。インストールしたvue-video-playerを外す時、プロジェクトの中に以前にインストールした他の视频コンポーネントの影響がありますので、ずっと実行できません。modules関連のビデオコンポーネントは全部削除して、packageの中のインストールディレクトリは全部削除して、新しくインストールしてから実行できます。もしこのような状況があったら、あなた達に助けがあります。
以下に関連するいくつかの操作手順を示します。
1、vue-video-playerとvideojs-flashプラグインをインストールする

npm install vue-video-player --save
npm install video-flash --save

2、パッケージ内でインストール成功とインストール後のバージョンを確認します。

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、一部のバグ解決方法
①動画が400 x 300以下の場合、動画は自動的に再生できません。フラッシュの下に静止画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プロジェクトの中でtmpのビデオファイルの流れを再生する記事について紹介します。これまでの記事を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。