Question

player.jsx文件

import React, { Component } from "react";
import Hls from "hls.js";

class Player extends Component {
  state = {};

  componentDidUpdate() {
    if (Hls.isSupported() && this.player) {
      const video = this.player;
      const hls = new Hls();
      hls.loadSource(
        "https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8"
      );
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, function() {
        video.play();
      });
    }
  }

  render() {
    return (
      <div className="playerwrapper player">
        <div className="playerInner">
          <video
            className="videoCanvas"
            ref={player => (this.player = player)}
            autoPlay={true}
          />
        </div>
      </div>
    );
  }
}

export default Player;

当我编译它时，它不会闪烁示例视频，相反，它将在控制台中抛出错误

blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:42 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:42)
    at Object.srcDemuxDemuxerWorkerJs (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:184)
    at __webpack_require__ (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:42)
    at webpackBootstrapFunc (blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:170)
    at blob:http://localhost:3000/5ea277e7-0ac6-466a-9fe8-ba838935e82f:173

尽管我已经通过npm i hls.js安装了hls.js，但它在加载时引发了错误，尽管在网络标签中它从加载资源中接收了数据块，但是由于控制台中的错误而无法播放视频

hls.js示例视频无法在React应用程序中运行

0 个答案: