如何在 reactjs 中检测媒体是不是正在播放或是不是可能?

Posted

技术标签:

【中文标题】如何在 reactjs 中检测媒体是不是正在播放或是不是可能?【英文标题】:How to detect if media is playing or not in reactjs or Is it possible?如何在 reactjs 中检测媒体是否正在播放或是否可能? 【发布时间】:2017-09-20 02:06:07 【问题描述】:

我正在尝试在 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" />
            <div id="time-field">
             0:00 / 0:00
            </div>
            <img id="sound-button" src="images/sound.png" />
            <div id="sbar-container">
              <div id="sbar"></div>
            </div>
            <img id="fullscreen-button" src="images/fullscreen.png" />
          </div>
        </div>
    );
  


export default Player;

上面是我的代码。

我正在尝试播放或暂停视频,但我不知道该怎么做。

使用 javascript 我可以执行这些操作,但我想知道在 React 中应该如何完成。

window.addEventListener('load', function() 

    video = document.getElementById('video');

    playButton = document.getElementById('play-button');

    video.load();
    video.addEventListener('canplay', function() 

        playButton.addEventListener('click', playOrPause, false);

    , false);

, false);

function playOrPause() 
    if (video.paused) 
        video.play();
        playButton.src = 'images/pause.png';
     else 
        video.pause();
        playButton.src = 'images/play.png';
    

【问题讨论】:

你试过这个解决方案***.com/questions/6877403/… 【参考方案1】:

您可以使用 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>
    )
  

【讨论】:

video.play() 虽然返回一个承诺(如果您尝试在没有用户交互的情况下播放它会抛出),您应该先等待。

以上是关于如何在 reactjs 中检测媒体是不是正在播放或是不是可能?的主要内容,如果未能解决你的问题,请参考以下文章

检测客户端是不是允许 HTML5 视频的内​​联媒体播放

如何使用 .NET C/C++/C# 检测该视频是不是在播放器中打开?

如何正确检测、解码和播放无线电流?

如何检测音量上下是不是被按下

如何检测 UILocalnotification 声音是不是正在播放

Android中如何截获第三方媒体播放器中正在播放的音乐或视频的当前播放时间进度和总时间?求高手指点