vue+video.js實現trmp協議多個視頻直播

1、npm包準備

cnpm i video.js -S
cnpm i videojs-flash -S

2、main.js 中進行引入

import Video from "video.js";
import "videojs-flash";
import "video.js/dist/video-js.min.css";
Vue.prototype.$video = Video;

3、組件中進行使用

<!-- 視頻組件 html部分 -->
<div class="mp4-wrap" v-for="item in videoList" :key="item.id">
  <video
    :id="`myVideo${item.id}`"
    class="video-js vjs-big-play-centered"
    data-setup="{}"
    v-for="item in video"
    :key="item.id"
  >
    <source :src="item.url" type="rtmp/flv" />
  </video>
</div>

data(){
  return {
    videoList: [//trmp視頻源數組
        {
          url: "rtmp://58.200.131.2:1935/livetv/hunantv",
          id: 2
        },
        {
          url:
            "rtmp://rtmp01open.ys7.com/openlive/f01018a141094b7fa138b9d0b856507b.hd",
          id: 4
        },
        {
          url: "rtmp://119.23.19.140:1935/live/openUrl/YaVoFjO",
          id: 1
        },
        {
          url: "rtmp://58.200.131.2:1935/livetv/gxtv",
          id: 9
        }
      ],
  }
}

mounted(){
  this.initVideo();
},

methods:{
    initVideo() {
      let videoArr = [];
      this.video.map((item,index) => {
       //把視頻配置項 push 進新數組逐個播放
        videoArr.push(
            this.$video("myVideo" + item.id, {
            controls: true,//顯示控件
            autoplay: true,//自動播放
            preload: "auto",//預加載
            // poster: "",//封面圖
          })
        )
        videoArr[index].play();
      });
      //離開組件時銷燬每一個實例
      this.$once('hook:beforeDestroy',()=>{
        for(let i in this.video){
          videoArr[i].dispose();
        }
      })
    },
}

/*
  Author：XiNine
 下期：vue + vue-video-player實現 HSL 多視頻直播（海康）
*/

Tips：
1.通過試驗，海康威視的trmp流沒法播放，具體緣由還不知道
2.不過下期的文章，有能夠現實海康直播流的方案。

效果圖