如何在 React 中控制音频/视频 DOM 元素

Question

在使用 React 的项目中，目标是使用非本机控件控制 HTML5 音频/视频元素。

我不确定如何做到这一点，因为操纵元素的典型方式(根据我的理解(是通过 Props，这只有在我们希望重新渲染元素时才有用。

我的问题类似于以下内容：

class Audio extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<audio controls>
<source src="audio.mp3" type="audio/mp3" />
</audio>
);
}
}
class AudioControls extends React.Component {
constructor(props) {
super(props);
this.handlePlayClick = this.handlePlayClick.bind(this);
this.handlePauseClick = this.handlePauseClick.bind(this);
this.handleSeekClick = this.handleSeekClick.bind(this);
}
handlePlayClick(event) {
this.props.onPlayClick();
event.preventDefault();
}
handlePauseClick(event) {
this.props.onPauseClick();
event.preventDefault();
}
handleSeekClick(event) {
this.onSeekClick();
event.preventDefault();
}
render() {
<div>
<button onClick={this.handlePlayClick}>Play</button>
<button onClick={this.handlePauseClick}>Pause</button>
<button onClick={this.handleSeekClick}>Seek to 10 Seconds</button>
</div>
}
}
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Audio />
<p>Control the audio with the buttons below</p>
<AudioControls onPlayClick="" onPauseClick="" onSeekClick="" />
</div>
);
}
}

我们通常使用HTMLMediaElement.pause()、HTMLMediaElement.play()、HTMLMediaElement.currentTime等来控制播放。

感谢可以提供的任何帮助或协助。

Answer 1

你应该能够使用 refs 控制现有的 HTMLMediaElement。

https://reactjs.org/docs/refs-and-the-dom.html

<source ref={ref} src="audio.mp3" type="audio/mp3" />
....
ref.current.pause()