NextJs - enabling a video player component to use a fallback link

ChrisBean 0
Viewed 17

My goal is to enable two video player components of a NextJS application, to access and play videos when being run on a local machine via npm run dev when there is no internet connection.

At the present moment, these two components..

  <HoverVideoPlayer videoSrc={item.videolink} pausedOverlay={ <img src={item.thumb} alt="Lorem Ipusm" />

and

     <ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100"
                         {...props} url={videoLink} poster="images/330163_C2B_Clean.png">
                     </ReactPlayer>

...are populated through an array with online links such as:

videolink: "https://cdn.jwplayer.com/videos/D44SzAxa-1AR7TaNs.mp4",

I want to extend the array with a local fallback link, in case the application is run locally without internet access such as:

videoLinkOffline: "../../videos/general/31930117_LF.mp4",

How can I set both components to draw from an additional, local link source when the external online links are unavailable?

next.js reactjs typescript javascript
1 Answers

Are these components third-party packages? If so, I would ask their community.

If that just uses <video>, AFAIK there is no fallback local link option. You would need to write in fallback logic. Something off the top of my head:

const link = "https://youtube.com";
const fallback = "../localvideo.mp4"

const [checking, setChecking] = useState(true) // don't display video player until we're done checking

const [isOnline, setIsOnline] = useState(false)

useEffect(async () => {
  try {
    await axios.get(link)
    setIsOnline(true)
  } catch { // Axios throws on statuses above 300
    setIsOnline(false)
  } finally {
    setChecking(false)
  }
}, [])

return !checking && <ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100"
                         {...props} url={isOnline ? link : fallback} poster="images/330163_C2B_Clean.png">
                     </ReactPlayer>
Anthony Ma0
Related