works decently well for now. a few videos do not play back.

This commit is contained in:
2022-02-07 20:41:39 -06:00
parent 24493767f9
commit 05711d49de
2 changed files with 44 additions and 11 deletions

View File

@@ -97,10 +97,14 @@ img, video {
.video-player { .video-player {
display: inline-flex; display: inline-flex;
flex-direction: column;
align-items: center;
} }
.post-audio, .post-video { #post-audio {
position: absolute; position: relative;
height: 3.5rem;
width: 60%;
} }
/* Handles comment styles on toggle */ /* Handles comment styles on toggle */

View File

@@ -5,14 +5,28 @@ export default function VideoPlayer({data, src}) {
const aud = useRef(); // identifies location of video/audio in DOM const aud = useRef(); // identifies location of video/audio in DOM
const [playing, setPlaying] = useState(false); // handles play/pause logic const [playing, setPlaying] = useState(false); // handles play/pause logic
const [error, setError] = useState(null);
const crossPostSrc = src; const crossPostSrc = src;
let url = crossPostSrc ? crossPostSrc : // sets video source according to applicable let url = crossPostSrc ? crossPostSrc : // sets video source according to applicable
(data.url ? data.url : null); // location within reddit response (data.url ? data.url : null); // location within reddit response
useEffect(() => { // synchronizes play/pause between two components
if (playing) { // according to section of state useEffect(() => {
const req = new XMLHttpRequest();
req.open('HEAD', `${url}/DASH_audio.mp4`, true);
req.send();
if (req.status === 404) {
setError(true);
}
if (req.status === 403) {
setError(true);
}
}, [url]);
useEffect(() => { // synchronizes play/pause between two components
if (playing) { // according to section of state
vid.current.play(); vid.current.play();
vid.current.currentTime = aud.current.currentTime; vid.current.currentTime = aud.current.currentTime;
} else if (!playing) { } else if (!playing) {
@@ -22,12 +36,27 @@ export default function VideoPlayer({data, src}) {
return ( return (
<div className="video-player"> <div className="video-player">
<video id="post-video" ref={vid} autoPlay={() => playing ? true : false} src={`${url}/DASH_1080.mp4`}>
This video is not supported by your browser. {
</video> !error ?
<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. <>
</video> <video id="post-video" ref={vid} autoPlay={playing ? true : false} src={`${url}/DASH_1080.mp4`}>
This video is not supported by your browser.
</video>
<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.
</video>
</>
:
<video id="post-video" ref={vid} controls src={`${url}/DASH_1080.mp4`}>
This video is not supported by your browser.
</video>
}
</div> </div>
); );
} }