前端-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 = new HlsJsPlayer({
        el: document.querySelector("#mmid"), // 选择demo
        // url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
        url: 'http://play.happok.com/happok/7440.m3u8?auth_key=1621421808-0-0-d284825ce4d69e098fbba3b3748b63b7',
        width: "100%",
        height: "240px",
        volume: 0.6, // 初始音量
        autoplay: true, // 自动播放
        playsinline: true,
        isLive: true, // 是否直播
        // rotate: {   //视频旋转按钮配置项
        //     innerRotate: true, //只旋转内部video
        //     clockwise: false // 旋转方向是否为顺时针
        // },
        controls:true, // 播放器控制
        controlsList: ['nodownload'], // 关闭控制器相关配置 ['nodownload','nofullscreen','noremoteplayback'] 只对原生video有效 对自定义UI请使用ignores选项
        ignores: ['fullscreen'], // 控制条忽略相关配置项 ['time', 'definition', 'error', 'fullscreen', 'i18n', 'loading', 'mobile', 'pc', 'play', 'poster', 'progress', 'replay', 'volume']
        lang: 'zh-cn', // 语言支持 'zh-cn' | 'en' | 'jp' 中文、英文、日文
        rotateFullscreen: false,// 样式全屏，不旋转=>视频会随着手机横竖屏进行切换
        closeVideoClick: true, // video触发click事件后视频切换播放/暂停状态 关闭
        closeVideoTouch: true, // h5端触发touchend事件后视频切换播放/暂停状态 关闭
        videoInit: true,
        poster: 'https://pics5.baidu.com/feed/ae51f3deb48f8c544ac3d4662d3a57fde0fe7f06.jpeg?token=ea1493323bf5a129e0569426a19e0e3e', // 封面图
        cors: true // 请求是否跨域
      });
    }, 150);
  }

4. 适配相关-同层播放微信端

'x5-video-player-type':'h5-page', //同层播放
playsinline: true // 处理ios点击播放默认全屏问题

5、api-事件 优化相关(网慢提示、以及结束控制)

// 播放器相关参数控制
 console.log(this.videoPlayer.networkState) // 返回视频的当前网络状态
  console.log(this.videoPlayer.hasStart)// 是否开始播放
  console.log(this.videoPlayer.readyState)//返回视频的就绪状态

this.videoPlayer.on('waiting',()=>{ // 页面监听缓冲时间，如果存在则进行判断缓冲的时间是否大于3秒
        console.log('waiting网慢加载')
        this.$set(this.loadObj,'wait',true) // 定义属性保存出现缓冲
        if(this.loadObjsetTimeOut){ // 定义属性保存setTIMEOUT事件，确保只执行一次
          clearTimeout(this.loadObjsetTimeOut)
        }
        this.loadObjsetTimeOut=setTimeout(()=>{
          if(Object.keys(this.loadObj).length > 0){ // 判断3s后是否还在缓冲
            Toast({
              type: 'html',
              message: '<span>本端网络信号弱</span>',
              position: 'top',
              duration: 2000,
              className:'cctoast',
            });
          }
          setTimeout(()=>{ // 判断13s后是否还在缓冲
            if(Object.keys(this.loadObj).length > 0){
                Toast({
                  type: 'html',
                  message: '<span>本端网络信号弱,请稍后重试</span>',
                  position: 'top',
                  duration: 2000,
                  className:'cctoast',
                });
              }
            },10000)
        },3000)
      })
      this.videoPlayer.on('canplay',()=>{ // 监听播放事件  缓冲如果结束了则对对象置空
        console.log('canplay可以播放')
        if(Object.keys(this.loadObj).length > 0){
          this.loadObj = {}
        }
      })
      this.videoPlayer.on('error',(error)=>{
        Toast({
          type: 'html',
          message: '<span>当前无直播</span>',
          position: 'top',
          duration: 3000,
          className:'cctoast',
        });
        // 视频流404的时候=>视频停止推流 进行监听错误的结束事件
        if(this.videoPlayer.readyState=='没有关于音频/视频是否就绪的信息'){
          //逻辑
          //结束视频
          // 一般可以使用一张图片进行代替视频demo
        } 
      })