react中hls

Question

react中hls

懒人

539

发布于
2019-07-25

新手上路，请多包涵

问题描述

react使用hls刷新页面会出现错误Uncaught Error: The error you provided does not contain a stack trace,并且直播中会出现白板情况（即视频没有了）

问题出现的环境背景及自己尝试过哪些方法

自己怀疑监听的事件不对，是不是应该监听其他事件，还怀疑是不是刷新时造成多个hls实例，就在hlsInit方法开头就判断了，可还是不行。

相关代码

import * as React from 'react';
import * as Hls from 'hls.js';
import * as $ from 'jquery';
import './LiveShow.css';

interface IStateVideo {
url: any;
backgroundImage?: any;
flag?: any;
hls?: any;
}
interface IPropsVideo {
url?: any;
result?: any;
}

export default class Video extends React.Component<IPropsVideo, IStateVideo> {
public timer1: any;
public constructor(props: IPropsVideo) {

super(props);
console.log(props);
this.state = {
  url: '',
  backgroundImage: '',
  flag: false,
  hls: '',
};

}
public componentWillUnmount(): void {

const { hls } = this.state;
if (hls) {
  hls.destroy();
}

}
public hlsInit(oPlayer: any, source: any): void {

if (this.state.hls) {
  this.state.hls.destroy();
}
if (Hls.isSupported()) {
  const hls: any = new Hls();
  hls.loadSource(source);
  hls.attachMedia(oPlayer);
  hls.on(Hls.Events.MANIFEST_PARSED, function (event: any, data: any): void { // 解析清单后触发
    console.log(' 解析清单后触发');
    console.log(event, data);
    oPlayer.play();

  });
  oPlayer.addEventListener('playing', function (): void {
    console.log('playing now');
   
  });
  hls.on(Hls.Events.BUFFER_APPENDED, function (): void {
    if (oPlayer.paused) {
      
      oPlayer.play();
      return;
    }
  });
  hls.on(Hls.Events.ERROR, function (event: any, data: any): void {

if (data.details === "levelLoadError") {

      console.log('由于网络错误导致级别加载失败时即levelLoadError引发的错误');
    }
    if (data.details === "manifestLoadError") {
      console.log("由于网络错误导致清单加载失败时即manifestLoadError引发");
    }
    switch (data.type) {
      case Hls.ErrorTypes.NETWORK_ERROR:
        hls.startLoad();
        break;
      case Hls.ErrorTypes.MEDIA_ERROR:
        hls.recoverMediaError();
        break;
      default:
        hls.destroy();
        console.log('default other error');
        break;
    }
 });
  this.setState({
    hls: hls,
  });
} else if (oPlayer.canPlayType('application/vnd.apple.mpegurl')) {
  oPlayer.src = source;
  oPlayer.addEventListener('loadedmetadata', function (): void {
    console.log('loadstart');
    oPlayer.play();
  });
}

}
public componentDidMount(): void {

const that = this;
console.log(that.props);
const container: any = document.getElementById("player");
this.setState({
  url: this.props.result.course.playAddress.hls,
  backgroundImage: require('./images/stop.png'),
}, function (): void {
  /*   hls版的*/
  that.hlsInit(container, that.props.result.course.playAddress.hls);
});

}
public render(): React.ReactNode {

return (
  <div id="BoxPlayer" >
    <video id="player"  className="bottom" width="300px" height="225px" style={{ mixBlendMode: 'screen' }}></video>
  </div>
);

}
}