如何解决当从外部组件切换全屏时,取消静音react-player
在VideoList
中,单击了一个按钮并进入全屏模式(按预期方式工作)
单击全屏时,我将取消播放器静音。
如何将“静音”更改从VideoList
传递到Player
?在我的Player
中,我还有一个“取消静音”按钮(该按钮也按预期工作:
这是我到目前为止所拥有的
VideoItem.jsx
import React,{ useRef,useState,useEffect } from "react"
import { findDOMNode } from "react-dom"
import screenfull from "screenfull"
import VideoPlayer from "./VideoPlayer"
const VideoList = (videos) => {
const ref = useRef()
const toggleFullScreen = () => {
screenfull.request(findDOMNode(ref.current))
}
const unMute = () => {
console.log("Should pass Mute state to player",muted)
}
return (
<>
<VideoPlayer
ref={ref}
mute={muted}
videoURL={videoUrl}
/>
<a
href="#"
onClick={e => {
e.preventDefault()
unMute()
toggleFullScreen()
}}
>
Show Fullscreen
</a>
)
}
Player.jsx
import React,{ forwardRef,useEffect } from "react"
import ReactPlayer from "react-player"
const VideoPlayer = forwardRef((props,ref,mute) => {
let [muteState,setMuteState] = useState(true)
return (
<>
<i className={`fal fa-volume-${muteState ? "up" : "mute"}`}
onClick={() => {
setMuteState(!muteState)
}}
/>
<ReactPlayer
ref={ref}
muted={muteState}
loop={true}
playing={true}
url={props.videoURL}
/>
</>
)
}
谢谢!
解决方法
当您尝试从父级设置状态时,这通常表明您应该向上移动状态并使子级由父级控制:
const VideoList = (videos) => {
const player = useRef();
const [muted,setMuted] = useState(true);
const [fullscreen,setFullscreen] = useState(false);
const handleToggleMute = () => setMuted(current => !current);
const handleFullscreen = event => {
event.preventDefault();
setMuted(false);
setFullscreen(true);
};
return (
<>
<VideoPlayer
ref={ref}
muted={muted}
fullscreen={fullscreen}
videoURL={videoUrl}
onToggleMute={handleToggleMute}
/>
<a href="#" onClick={handleFullscreen}>Show Fullscreen</a>
)
}
我也将useEffect
与另一个状态fullscreen
一起使用,以避免转发视频播放器的引用。
const VideoPlayer = ({videoURL,muted,fullscreen,onToggleMute}) => {
const playerRef = useRef();
useEffect(() => {
if (fullscreen) {
const videoElem = playerRef.current.getInternalPlayer();
screenfull.request(videoElem);
}
},[fullscreen]);
return (
<>
<i
className={`fal fa-volume-${muted ? "up" : "mute"}`}
onClick={onToggleMute}
/>
<ReactPlayer
ref={playerRef}
muted={muted}
loop={true}
playing={true}
url={videoURL}
/>
</>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。