如何在 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()