揭秘：MuiPlayer & Hls.js 组合播放 m3u8 视频时，为何销毁后仍不断请求 ts 文件

2023-10-19 23:39:19

在使用 MuiPlayer 播放器配合 Hls.js 播放 m3u8 视频时，开发人员可能会遇到一个问题：即使销毁了播放器，依然会不断请求 ts 文件，导致资源浪费和性能问题。本文将深入分析这一问题背后的原因，并提出相应的解决方案，帮助开发人员优化视频播放性能。

问题分析

MuiPlayer 是一个基于 React 的视频播放器，而 Hls.js 是一个用于播放 HLS 流的 JavaScript 库。当使用 MuiPlayer 播放 m3u8 视频时，Hls.js 会在后台不断请求 ts 文件，以便将视频数据分段加载并播放。即使在销毁了 MuiPlayer 播放器之后，Hls.js 仍会继续请求 ts 文件，这是因为 Hls.js 是一个独立的库，它不会随着播放器的销毁而停止工作。

解决方案

为了解决这一问题，开发人员需要在销毁 MuiPlayer 播放器时，同时销毁 Hls.js 实例。这可以通过以下步骤实现：

在 MuiPlayer 组件中，创建一个 Hls 实例。
在组件的 componentWillUnmount() 生命周期方法中，销毁 Hls 实例。

import Hls from 'hls.js';

class MuiPlayer extends React.Component {
  constructor(props) {
    super(props);

    this.hls = new Hls();
  }

  componentWillUnmount() {
    this.hls.destroy();
  }

  render() {
    return (
      <div>
        {/* 播放器代码 */}
      </div>
    );
  }
}