关于javascript:vuevideojs实现trmp协议多个视频直播

一、npm 包筹备

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

二、main.js 中进行引入

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

三、组件中进行应用

<!-- 视频组件 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. 不过下期的文章，有能够事实海康直播流的计划。

效果图