I am trying to access the video progress bar with the npm react-youtube library. I would like to basically be able to know when the current time stamp is changed, sort of like an onClick event or something similiar.
My goal is to notice when the user changes the current time stamp(either by scrolling along the video progress bar or just by selecting a time), and then broadcast that new time stamp to update another player's progress with a socket connection.
Below is my YouTube player
I have these imports
import io from "socket.io-client";import { useState, useEffect, useRef } from "react";import YouTube, { YouTubeProps } from "react-youtube";import { useNavigate, useParams } from "react-router-dom";I also have this useRef here for my player:const playerRef = useRef();
<YouTube ref={playerRef} videoId={searchResponse[videoCount]} // defaults -> '' //id={string} // defaults -> '' //className={string} // defaults -> '' //iframeClassName={string} // defaults -> '' //style={object} // defaults -> {} //title={string} // defaults -> '' //loading={string} // defaults -> undefined //opts={obj} // defaults -> {} //onReady={(event) => { //console.log(event); //console.log(event.target); //console.log("now playing(by default)"); //playerRef.current.internalPlayer.playVideo(); //socket.emit("playVideo", { room: 123 }); //}} // defaults -> noop onPlay={(event) => { console.log(event); console.log(event.target); console.log("now playing"); event.target.playVideo(); socket.emit("playVideo", { room: room }); }} // defaults -> noop onPause={(event) => { console.log("now pausing", event); socket.emit("pauseVideo", { room: room }); }} // defaults -> noop //onEnd={func} // defaults -> noop //onError={func} // defaults -> noop onStateChange={(event) => { console.log("now changing state", event); console.log("current time is: " + event.target.getCurrentTime()); console.log(searchResponse[videoCount]); }} // defaults -> noop //onPlaybackRateChange={func} // defaults -> noop //onPlaybackQualityChange={func} // defaults -> noop />Thank you in advance!