如何在 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 中检测媒体是不是正在播放或是不是可能?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 .NET C/C++/C# 检测该视频是不是在播放器中打开?