Creating a backup link for a video player component in NextJs

My aim is to make sure that two video player components in a NextJS application can still access and play videos even when the application is running locally using npm run dev without an internet connection.

Currently, 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 currently being filled through an array with online links like:

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

I want to enhance the array by including a local fallback link, just in case the application is executed locally without internet access, for example:

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

In what way can I configure both components to pull from an extra, local source link when the external online links are not accessible?

javascriptreactjstypescriptnext.js

Answer №1

Are these elements part of external libraries? If they are, I suggest reaching out to their respective communities for help.

If you are only using the <video> element, there is no built-in option for a local fallback link. In that case, you would need to implement your own fallback logic. Here's a simple example:

const videoLink = "https://youtube.com";
const fallbackVideo = "../localvideo.mp4"

const [checkingStatus, setCheckingStatus] = useState(true) // Don't display the video player until we finish checking

const [onlineStatus, setOnlineStatus] = useState(false)

useEffect(async () => {
  try {
    await axios.get(videoLink)
    setOnlineStatus(true)
  } catch (error) { 
    setOnlineStatus(false)
  } finally {
    setCheckingStatus(false)
  }
}, [])

return !checkingStatus && <ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100"
                         {...props} url={onlineStatus ? videoLink : fallbackVideo} poster="images/330163_C2B_Clean.png">
                     </ReactPlayer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Extend the express request object with Typescript and then export the modified object

Seeking to enhance the Request object from express with custom fields using typescript. Based on this particular source, I created a file named @types/express/index.d.ts containing the following code : import { MyClass } from "../../src/MyClass" ...

node.jstypescriptexpressnpm

There are no leaks displayed in Chrome Dev Tools, however, the Task Manager will show them until Chrome eventually crashes

Do you have a CPU-intensive application that you're working on? Check it out here: https://codepen.io/team/amcharts/pen/47c41af971fe467b8b41f29be7ed1880 It involves a Canvas on which various elements are constantly being drawn. Here's the HTML ...

javascriptmemory-leaks

The current @next/swc version does not match with Next.js, with a detected version of 14.0.3 compared to Next.js' 13.5

Every time I attempt to launch my docker image, an error pops up indicating a mismatching @next/swc version. The error message mentions: "Mismatching @next/swc version, detected: 14.0.3 while Next.js is on 13.5.3." This results in an internal server error ...

next.jsdocker-composedockerfile

Extending the Object prototype within an ES6 module can lead to errors such as "Property not found on type 'Object'."

There are two modules in my project - mod1.ts and mod2.ts. //mod1.ts import {Test} from "./mod2"; //LINE X interface Object { GetFooAsString(): string; } Object.prototype.GetFooAsString = function () { return this.GetFoo().toString(); } //mod2. ...

typescriptprototype

What steps can you take to resolve the "TypeError: Cannot read property 'id' of undefined" issue?

I have been developing an app that involves using databases to add items for users based on their user ID, which is their username. However, whenever I attempt to add an item, I encounter an error that I can't seem to troubleshoot. The error message r ...

javascriptnode.jsmongodbexpressmongoose

The Videojs controls are unresponsive to clicks

Having a strange issue with videojs. I've been attempting to load videojs in the same way as outlined in the documentation, using a dynamic video tag. videojs(document.getElementById('myVideo'), { "controls": true, "autoplay": false, "prelo ...

javascriptjqueryhtmlhtml5-videodynamic-loading

Can a single Axios request in JavaScript include both a Body and Files?

Is it possible to send both a file and body with the POST request below in axios? axios.post("http://localhost:3000/upload", formData) How can I include something in the body:{} section as well? Server response: files: { myFile: { nam ...

javascriptnode.jsreactjspostaxios

Exploring the Integration of OverlayScrollbars with TypeScript

Currently, I am delving into TypeScript utilizing a project built on ASP.NET Core 3.0 and the VS 2019 IDE. Recently, I acquired the OverlayScrollbars plugin via npm: . npm install overlayscrollbars npm install @types/overlayscrollbar Provided below is a ...

typescript

Error encountered with ts-loader in the node_modules/@types directory within Webpack

After successfully compiling my project, I encountered errors when trying to run npm install and then webpack in a new directory. The errors are as follows: ERROR in /home/nobody/myproject/server/node_modules/@types/mongodb/index.d.ts (500,12): error TS10 ...

typescriptwebpackts-loader

Error encountered in Intellij for Typescript interface: SyntaxError - Unexpected identifier

I am currently testing a basic interface with the following code: interface TestInterface { id: number; text: string; } const testInterfaceImplementation: TestInterface = { id: 1, text: 'sample text' }; console.log(testInterface ...

javascripttypescriptintellij-ideasyntaxinterface

Creating a dynamic polyline with custom data on Mapbox is a great way to enhance your mapping experience

Hey everyone, I'm looking to create a polyline or path on Mapbox using my own data. I came across an example on mapbox.com that shows how to draw a sine wave on the map. How can I customize this example to use my own data? <!DOCTYPE html> <h ...

javascriptleafletmapboxpolyline

Choosing multiple images using JavaScript/jQuery

Gridster is being used for a webpage, with widgets containing images that can be added and deleted using the "+" and "X" buttons. Current Status Clicking the "+" button opens a modal where multiple images can be selected and added to the widgets by click ...

javascriptjquery

Looking for a solution to eliminate Parsing Error: Unexpected Token when developing with React? I've already implemented ESLint and Prettier

Currently, I am working on building a form in React with MUI. Below is the code snippet that I have been working with: const textFields = [ { label: 'Name', placeholder: 'Enter a company name', }, { label: 'Addres ...

javascriptreactjsmaterial-ui

Define an object in TypeScript without including a specific field type in the definition

Let's consider a scenario where there is an interface called Book: interface Book { id: number info: { name: string, } } Next, a list named bookList is defined: const bookList: Book[] = [ { id: 1, info: { ...

typescript

Error encountered: The Bootstrap Carousel function is causing a TypeError as e[g] is not defined

I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...

javascriptjqueryhtmltwitter-bootstrapjquery-templates

Maintaining Sanity: dynamically conceal fields based on selection in a reference field

Is there a way to dynamically hide fields based on the value of a referenced field? I am dealing with two distinct types: Destination and DestinationType Here is how the reference from the Destination type to the DestinationType type looks like: defineFi ...

next.jssanity

`Angular 9 template directives`

I am facing an issue with my Angular template that includes a ng-template. I have attempted to insert an embedded view using ngTemplateOutlet, but I keep encountering the following error: core.js:4061 ERROR Error: ExpressionChangedAfterItHasBeenCheckedEr ...

htmlangulartypescript

Instructions for implementing a Back button that takes you directly to the text or link you clicked on to view an image

My goal is to have multiple anchor links within text, each linking to a specific image on the same page. Once the user views the image, I want them to be able to click a 'Back' button that will take them back to where they left off in the text. ...

javascriptjquery

Refreshing a Nested Component Within a Parent Component in React

Currently, I am in the final stage of a small project where a Higher Order Component (HOC) is being utilized to display a basic Tinder-like application. The internal component is a class-based component containing its own fetch() call that presents user d ...

javascriptreactjs

What are the steps to setting up SystemJS with Auth0?

I am having trouble configuring SystemJS for Auth0 (angular2-jwt) and Angular 2.0.0-beta.6 as I keep encountering the following error message: GET http://localhost:3000/angular2/http 404 (Not Found)fetchTextFromURL @ system.src.js:1068(anonymous function) ...

javascriptnpmangularsystemjs