使用nextjs、react和eventListeners取消flowplayer的正确方法

npm install flowplayer --save
# 或者
yarn add flowplayer

// components/Flowplayer.js
import React, { useEffect } from 'react';
import flowplayer from 'flowplayer';

const FlowplayerComponent = ({ videoId }) => {
  useEffect(() => {
    const player = flowplayer(`#${videoId}`, {
      // 配置Flowplayer选项
      autoplay: true,
      controls: true,
      // 其他配置...
    });

    // 清理函数，用于取消Flowplayer
    return () => {
      if (player && player.api) {
        player.api('unload');
      }
    };
  }, [videoId]);

  return <div id={videoId}></div>;
};

export default FlowplayerComponent;

// pages/index.js 或其他页面
import React from 'react';
import FlowplayerComponent from '../components/Flowplayer';

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to the Home Page</h1>
      <FlowplayerComponent videoId="unique-video-id" />
    </div>
  );
};

export default HomePage;

useEffect(() => {
  const player = flowplayer(`#${videoId}`, {
    // Flowplayer配置...
  });

  return () => {
    if (player && player.api) {
      player.api('unload');
    }
  };
}, [videoId]);