前端-h5直播视频流（xgplayer 篇）

前言

1、通过接口获取媒体流地址或静态地址；（省略）
2、通过 西瓜播放器插件xgplayer 以及相关xgplayer支持的插件实现直播
本质：始终在调用流地址实现视频播放（个人理解）

使用

1. template

	<div
       ref="video"
         id="mmid"
         v-show="islivea"
     >div>

2. 安装西瓜播放器插件
   官网

$ npm install xgplayer
$ npm install xgplayer-hls.js
// 由于是直播，我们使用xgplayer-hls.js插件，对于hls协议的点播(直播)可以使用该插件完成，
//该插件是对hls.js的封装，力求稳定的同学可以使用该插件。
// 其他插件也可以，比如 xgplayer-flv
// $ npm install xgplayer-flv

3. 使用

引入

import Player from "xgplayer"; // 用来播放录播的MP4格式视频
// import FlvPlayer from "xgplayer-flv"; // 直播流flv
import HlsJsPlayer from "xgplayer-hls.js"; // 直播流m3u8（hls）

mounted下

// ts书写   js把：void去掉
mounted(): void {
   
    this.getVideo();
 }

相关参数配置和说明

// ts书写   js把private 私有声明去掉
 private getVideo() {
   
    setTimeout(() => {
   
      this.videoPlayer