I am facing an issue where my video file is not being recognized by Next.js when using TypeScript

In my project using next.js, typescript, and tailwindcss, I encountered an issue while creating the Masthead for my website. I wanted to set a video as the background, but for some reason, the video was not being recognized. I tried moving it to different directories, importing it with 

import Background "./material-bg.mp4"
, and even converting the file from mp4 to webm. However, the problem persisted. I tested with a jpg file and it worked fine, but when it came to videos, there seemed to be an issue with recognition. This led me to believe that the problem lies in the system's ability to recognize videos, as other video files were also not being detected. Any help on this matter would be greatly appreciated!

<video autoPlay loop muted playsInline className='absolute w-full h-full object-cover'>
            <source src="./material-bg.webm" type='video/webm; codecs=vp9'/>
        </video>
typescriptnext.jstailwind-css

Answer №1

According to the documentation on the next.js website:

You can use Next.js to host static files, such as images, in a folder named public at the root of your project. These files can then be accessed in your code using the base URL (/).

To implement this, simply create a folder called public in your project's root directory and place your static files there. In this case, if you are dealing with a video file, maintain the same src path and everything should function correctly.

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

Utilizing the power of HTML5 drag and drop functionality in conjunction with Angular Material 2's md

When working with Angular Material 2 and attempting to enable reordering of list elements, I encountered an issue where the functionality works perfectly for li-tag but fails with md-list-item. Why is that? Here is a snippet of my template: <md-nav-li ...

htmlangulartypescriptangular-material

Is there a way to hide the navbar in React-Admin?

I am currently facing some difficulties in removing the default navbar from react-admin. https://i.sstatic.net/PrOy1.png The issue lies in the fact that my original Navbar is positioned at the bottom of the react-admin navbar, as shown when inspected and ...

reactjsreact-reduxmaterial-uinext.jsreact-admin

"Upon the initial page load, the persistence of values in local storage using Next.js, React, and Recoil

Check out this code I have, const Layout: React.FC<LayoutProps> = ({ children }) => { const darkMode = useRecoilValue(darkModeAtom) console.log('darkMode: ', darkMode) return ( <div className={`max-w-6xl mx-au ...

reactjstypescriptnext.jsstring-interpolationrecoiljs

Knexfile Doesn't Utilize TypeScript Paths

When attempting to run a migration, I encountered an issue with Knex. My Knexfile is in Typescript and uses path aliases from tsconfig.json. However, Knex is throwing an error stating Cannot find module '@foo-alias/bar-module'. What adjustments d ...

node.jstypescriptdatabase-migrationknex.jsnpm-scripts

Managing optgroup in select dropdown using Angular 4

Is there a way to retrieve the optgroup label value within an onchange function on a select box in Angular 4? In my form, I have a select box with multiple dates as option groups and time slots in 24-hour format for booking (e.g. 1000 for 10AM, 1200 for 1 ...

angulartypescriptdata-binding

Deciphering key-value pairs that are separated by commas

I am looking to convert the following format: realm="https://api.digitalocean.com/v2/registry/auth",service="registry.digitalocean.com",scope="registry:catalog:*" Into this JSON object: { realm: "https://api.digitaloce ...

javascriptnode.jstypescript

Get the @types definition installed from a forked repository

Background Information I recently made a workaround for a single type definition in my fork of DefinitelyTyped. This fix is located on a specific branch within my fork. It's important to note that this fix is temporary and should not be merged back ...

typescriptnpmyarnpkgdefinitelytyped

Tips for fixing: "Object may be null" error in Angular routing

Currently, I am working on the angular heroes tutorial provided in the angular documentation and encountering an error. An issue has been detected, which states that the object is possibly 'null'. getHero(): void { const id = +this.route.snaps ...

angulartypescriptangular-routing

What is the best way to display images one by one from a map using a random fade effect?

I am in the process of creating a logo wall for a website. I successfully managed to display them randomly using a map, but now I want to make them appear one by one in a random order (for example: image 1, image 6, image 3, ...) and keep them visible once ...

javascriptcssreactjsnext.jsfade

Is there a way to trigger a function with the onclick event in NextJs?

Working on my NestJS project, I am still a beginner in the field. My current task involves creating a web application that displays a leaflet map with clickable tiles. Each tile should have a button that triggers a specific function when clicked. However, ...

javascriptfunctionnext.jsleafletreact-leaflet

Disabling the intellisense feature for locale suggestions in Monaco is recommended

Switch the keyboard language to a different one (in this case Japanese using alt + shift), and when typing in Monaco editor, an intellisense menu appears with options to remove and search. Monaco Editor Version: V0.33.0 https://i.stack.imgur.com/SIyeV.pn ...

javascripttypescriptvisual-studio-codemonaco-editor

Is there a way to retrieve the text value of an input using just function components in React?

import Layout from "components/Layout" import { useState } from "react"; export async function getServerSideProps(context) { const res = await fetch(`${process.env.NEXT_API_URL}/kana-terms/all`) const data = await res.json() ...

reactjsnext.js

Retrieve the output of forkJoin subscription in Angular 6 using rxJs 6

A Straightforward Example: const tasks = []; for (let i = 0; i < this.initialData.length; i++) { tasks.push( this.taskService.getDetails(this.id1[i], this.id2[i]) }; combineLatest(...tasks).subscribe(taskGroup => { console.log(task ...

angulartypescriptrxjs

A guide on extracting a JSON data with a BigInt type using TypeScript

I am facing an issue with parsing a bigint from a JSON stream. The value I need to parse is 990000000069396215. In my TypeScript code, I have declared this value as id_address: bigint. However, the value gets truncated and returns something like 9900000000 ...

javascriptjsontypescriptbigint

What are the reasons for deprecating bindToController in Typescript?

When I am creating an AngularJS directive using TypeScript, I typically use the bindToController property to bind parameters to the controller for easy access. export class MyDirective implements IDirective { controller = MyController; controllerA ...

angularjstypescriptbinding

Creating TypeScript Classes - Defining a Collection of Objects as a Class Property

I'm trying to figure out the best approach for declaring an array of objects as a property in TypeScript when defining a class. I need this for a form that will contain an unspecified number of checkboxes in an Angular Template-Driven form. Should I ...

javascriptangulartypescriptoop

What causes Enum[Enum.member] to be undefined in the TypeScript playground on codepen.io?

My intention was to test out some type settings on TypeScript playground at codepen.io, but I encountered an unexpected issue: enum Order { Asc = 'asc', Desc = 'desc' } console.log(Order[Order.Asc]); // undefined in codepen.io ...

typescriptcodepen

Discovering the permissible array values from numerous arrays inside an object using TypeScript

I have an object with multiple arrays of strings (hardcoded). I want to specify that only strings from that object are allowed in another empty array. In a simple non-nested scenario, I'm achieving this with typeof someArray[number][]. So, I hoped to ...

typescript

The command "ng test" threw an error due to an unexpected token 'const' being encountered

Any assistance with this matter would be greatly appreciated. I am in the process of constructing an Angular 5 project using angular/cli. The majority of the project has been built without any issues regarding the build or serve commands. However, when a ...

angulartypescriptphantomjsangular-clikarma-jasmine

Preventing text from wrapping in a TypeScript-generated form: Tips and tricks

I’m currently working on a ReactJS project and my objective is simple: I want all three <FormItem> components to be displayed in a single line without wrapping. However, I am facing the following output: https://i.stack.imgur.com/mxiIE.png Within ...

javascripthtmlcssreactjstypescript