innocuous-symmetry/cat-reddit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

passed play function to audio tag

Browse Source
This commit is contained in:
Mikayla Dobson
2022-02-07 20:01:08 -06:00
parent ad230bdf07
commit 002b5f7c2c
1 changed files with 4 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/features/video/VideoPlayer.js
View File

@@ -4,30 +4,26 @@ export default function VideoPlayer({data}) {
const vid = useRef(); const vid = useRef();
const aud = useRef(); const aud = useRef();
const vidPosition = useRef(0);
const audPosition = useRef(0);
let url = data.url ? data.url : null; let url = data.url ? data.url : null;
const [playing, setPlaying] = useState(false); const [playing, setPlaying] = useState(false);
useEffect(() => { useEffect(() => {
if (playing) { if (playing) {
aud.current.play(); vid.current.play();
vid.current.currentTime = aud.current.currentTime; vid.current.currentTime = aud.current.currentTime;
} else if (!playing) { } else if (!playing) {
aud.current.pause(); vid.current.pause();
} }
}, [playing, aud, vid]); }, [playing, aud, vid]);
return ( return (
<div className="video-player"> <div className="video-player">
<video ref={vid} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={`${url}/DASH_1080.mp4`}> <video id="post-video" ref={vid} autoPlay={() => playing ? true : false} src={`${url}/DASH_1080.mp4`}>
This video is not supported by your browser. This video is not supported by your browser.
</video> </video>
<video ref={aud} controls autoPlay={() => playing ? true : false} src={`${url}/DASH_audio.mp4`}> <video id="post-audio" ref={aud} controls onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} src={`${url}/DASH_audio.mp4`}>
This video is not supported by your browser. This video is not supported by your browser.
</video> </video>
<h1 style={{'color': 'white'}}>{playing.toString()}</h1>
</div> </div>
); );
} }