如何检测媒体是否在reactjs中播放，或者是否可能？

我正在尝试在react上创建媒体播放器，我想使用react媒体事件，但我不知道如何使用它们。需要一些帮助

import React, { Component } from 'react';

class Player extends Component {
  constructor(props) {
    super(props);

  }

  playOrPause() {
    #how should I check here if video is playing or not
  }

  render() {
    return (
      <div id="player">
          <div id="video-container">
            <video key={this.props.video.song} poster={this.props.video.cover_image} controls>
              <source src={this.props.video.url} type="audio/mpeg" />
            </video>
          </div>
          <div id="pbar-container">
            <div id="pbar"></div>
          </div>
          <div id="buttons-container">
            <img id="play-button" onClick={this.playOrPause} src="images/play.png" alt="play"/>
            <div id="time-field">
             0:00 / 0:00
            </div>
            <img id="sound-button" src="images/sound.png" alt="sound"/>
            <div id="sbar-container">
              <div id="sbar"></div>
            </div>
            <img id="fullscreen-button" src="images/fullscreen.png" alt="fullscreen"/>
          </div>
        </div>
    );
  }
}

export default Player;

---

您可以使用ref函数来获取实际的HTML视频元素

我在下面对其进行了简化，以演示如何使用ref来获取视频元素，允许您像使用纯JS一样加载/播放/暂停

class Player extends Component { 
  state = {
    playing: false
  }

  componentDidMount() {
    this.video.load()
  }

  playOrPause = () => {
    // this.video is the element and can be used inside other methods
    if (this.video.paused) {
      this.video.play()
      this.setState(() => ({ playing: true }))
    } else {
      video.pause()
      this.setState(() => ({ playing: false }))
    }
  }

  render() {
    // El here is the HTML video element
    const ref = (el) => { this.video = el }
    const { playing } = this.state;
    return (
      <div>
        <video ref={ref} />
        <button onClick={this.playOrPause}>
          <img 
            src={playing ? 'images/pause.png' : 'images/play.png'} 
            alt={playing ? 'pause' : 'play'} 
          />
        </button>
      </div>
    )
  }
}

类播放器扩展组件{
状态={
播放：错误
}
componentDidMount（）{
this.video.load（）
}
playOrPause=（）=>{
//此.video是元素，可以在其他方法中使用
如果（此.video.paused）{
这个。视频。播放（）
this.setState（（）=>（{playing:true}））
}否则{
视频暂停（）
this.setState（（）=>（{playing:false}））
}
}
render（）{
//这里是HTML视频元素
常量ref=（el）=>{this.video=el}
const{playing}=this.state；
返回(
)
}
}

您可以使用ref函数获取实际的HTML视频元素

我在下面对其进行了简化，以演示如何使用ref来获取视频元素，允许您像使用纯JS一样加载/播放/暂停

class Player extends Component { 
  state = {
    playing: false
  }

  componentDidMount() {
    this.video.load()
  }

  playOrPause = () => {
    // this.video is the element and can be used inside other methods
    if (this.video.paused) {
      this.video.play()
      this.setState(() => ({ playing: true }))
    } else {
      video.pause()
      this.setState(() => ({ playing: false }))
    }
  }

  render() {
    // El here is the HTML video element
    const ref = (el) => { this.video = el }
    const { playing } = this.state;
    return (
      <div>
        <video ref={ref} />
        <button onClick={this.playOrPause}>
          <img 
            src={playing ? 'images/pause.png' : 'images/play.png'} 
            alt={playing ? 'pause' : 'play'} 
          />
        </button>
      </div>
    )
  }
}

类播放器扩展组件{
状态={
播放：错误
}
componentDidMount（）{
this.video.load（）
}
playOrPause=（）=>{
//此.video是元素，可以在其他方法中使用
如果（此.video.paused）{
这个。视频。播放（）
this.setState（（）=>（{playing:true}））
}否则{
视频暂停（）
this.setState（（）=>（{playing:false}））
}
}
render（）{
//这里是HTML视频元素
常量ref=（el）=>{this.video=el}
const{playing}=this.state；
返回(
)
}
}

您是否尝试过此解决方案您是否尝试过此解决方案