reactjs 如何在关闭模式时停止React Player播放?

nukf8bse  于 2023-02-18  发布在  React
关注(0)|答案(3)|浏览(243)

我正在为React项目使用React Player npm安装。视频播放器处于模态中。如何在模态关闭时停止播放?是否有ReactPlayer.stop()ReactPlayer.pause()类型的功能可以添加到我的hideModal函数中?

<Modal show={this.state.show} handleClose={this.hideModal} >               
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' width='100%'
height='100%' />
</Modal>
l7mqbcuq

l7mqbcuq1#

如果this.state.show返回布尔值(true/false),您可以通过如下状态控制它:

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing={this.state.show} width='100%' height='100%' />
ybzsozfc

ybzsozfc2#

viciousP有正确的答案,但我认为有必要展示完整的代码示例,以便其他人可以确切地了解它是如何工作的。
使用状态挂接

import React, { useState } from 'react';
import ReactPlayer from 'react-player';

function Video() {

    const video_source = "https://vimeo.com/blahblah";

    function close_video() {
        setPlay(false)
    }

    const [play, setPlay] = useState(true);

    return(
        <ReactPlayer id="video" url={video_source} playing={play}/>
    )

}

export default Video;

现在,您可以通过调用close_video()以编程方式停止播放视频

brccelvz

brccelvz3#

对于我来说更好的作品这个例子,重点是一起使用onPlay,onPause和播放 prop

function VideoModal({ isShow, onClose, source }: any) {
  const [isPlaying, setPlaying] = useState(false)
  

  return (
    <AppModal 
      onClose={() => {
        setPlaying(false)
        onClose()
      }}
      isShow={isShow}
    >
        <ReactPlayer
          playing={isPlaying} 
          height='100%' 
          width="100%" 
          controls={true} 
          onPlay={() => setPlaying(true)}
          onPause={() => setPlaying(false)}
          url={source} 
        />
    </AppModal>
  )
}

相关问题