react-player 怎么自定义一个播放停止
时间: 2024-01-14 20:01:55 浏览: 34
React Player 提供了一些内置的方法和属性,可以用来自定义播放器的行为。其中,包括 `onPlay` 和 `onPause` 方法,可以在播放和暂停时触发相应的事件。
以下是一个简单的示例,演示如何使用 React Player 和自定义按钮来控制播放和暂停:
```jsx
import React, { useState } from 'react';
import ReactPlayer from 'react-player';
function CustomPlayer() {
const [playing, setPlaying] = useState(false);
const handlePlay = () => {
setPlaying(true);
};
const handlePause = () => {
setPlaying(false);
};
return (
<div>
<ReactPlayer
url="https://www.youtube.com/watch?v=oUFJJNQGwhk"
playing={playing}
onPlay={handlePlay}
onPause={handlePause}
/>
<button onClick={() => setPlaying(!playing)}>
{playing ? 'Pause' : 'Play'}
</button>
</div>
);
}
export default CustomPlayer;
```
在上面的示例中,我们使用 `useState` 钩子来维护播放状态。当用户点击自定义按钮时,我们会切换播放状态,并且在 React Player 上触发相应的事件。这样,就能够实现自定义播放器的行为了。