easyplayer.js 在react中使用

要在React中使用easyplayer.js，你需要将其作为一个React组件进行封装。下面是一个简单的例子：

import React, { useEffect, useRef } from 'react';
import easyplayer from 'easyplayer';

const EasyPlayer = ({ url }) => {
  const playerRef = useRef(null);

  useEffect(() => {
    const player = easyplayer({
      id: playerRef.current,
      url,
      autoplay: true
    });

    return () => {
      player.destroy();
    };
  }, [url]);

  return <div ref={playerRef}></div>;
};

export default EasyPlayer;

在这个例子中，我们首先导入了React和easyplayer.js。然后我们创建了一个EasyPlayer组件，它接受一个URL作为属性。我们使用了useRef钩子来创建一个DOM元素的引用，它将被easyplayer.js用来创建播放器。我们使用了useEffect钩子来在组件挂载时初始化播放器，并在组件卸载时销毁播放器。最后，我们返回一个包含引用的div元素，这个元素将被传递给easyplayer.js。

使用这个组件很简单：

import React from 'react';
import EasyPlayer from './EasyPlayer';

const App = () => {
  return (
    <div>
      <EasyPlayer url="http://example.com/video.mp4" />
    </div>
  );
};

export default App;

这将在页面上渲染一个播放器，它将自动播放指定的视频。你可以根据需要调整播放器的选项和样式。