javascript - 使用 ReactJS / Typescript / Socket.io 同步视频时出现问题
问题描述
我正在开发一个应用程序作为锻炼,它具有同步用户选择的 youtube 视频的功能,为此,我使用 ReactJs、Socket.io 和 React-player,但是当我进入同步部分时,我有一个问题。
我打算执行以下操作:视频的进度时间存储在 useState 中,如果用户是房间的所有者,并且此常量每 1 秒更新一次进度,那么,在启动视频时,会触发一个 handleStartVideo 函数,该函数将因为这个用户从房间的主人那里收到了他的视频时会发现的 currentTime,但是,我的问题是:我怎么能告知要使用的 currenTime 是一个仅由所有者定义的常量房间和普通用户没有明确的价值?可以通过socket.io发送吗?
const [videoCurrentTime, setVideoCurrentTime] = useState<[]>([]);
const reactRef = useRef(null);
function handleNumberProgress(numberProgress:number) {
if(userName === ownerRoom) {
setVideoCurrentTime(numberProgress);
}
}
function handleStartVideo() {
if(userName === ownerRoom) {
console.log("Você é o dono da sala");
} else {
reactRef.current?.seekTo(videoCurrentTime);
}
}
<ReactPlayer
url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
ref={reactRef}
onStart={handleStartVideo}
progressInterval={1000}
onProgress={(e) => {handleNumberProgress(e.playedSeconds)}}
config={{
youtube: {
playerVars: {
showinfo: 1,
autoplay: 1,
}
},
}}
/>
解决方案
推荐阅读
- nginx - Nginx 重启后没有获取有效的 SSL 证书
- javascript - 使用 Pupeteer 的网页自动化没有通过
- sql - Oracle 12c - 插入到选择查询中的不明确列,ORA-00918
- ios - 如何将数据从 UIViewsController 传递到 UIView,Swift
- java - javax.xml.ws.服务。
(Service.java:82) 空指针异常 - node.js - 如何在 KotlinJS 中使用 socket.io-client
- javascript - 使用减速器的搜索 API 性能不佳
- c# - 如何将列表转换为 IEnumerable
? - powerbi - Power BI:按产品和文件名计算首次和最终产量的措施
- c# - StreamReader 等待 ReadLineAsync 阻止执行