How to embed a local video

[ChristopherHButler]

Hello! I am trying to play a video file on a Nextra page but without luck so far. I followed the video optimization Next.js documentation but still no luck. I'm wondering if anyone has an example snippet they could share how to make this work? Specifically, what format the video should be (I have both .mov and .mp4 I can test with) as well as where the video file should live in the project. My project is using the App router from next.js for regular pages on my website and the pages router for the Nextra content. I tried placing the video both in the same folder as the .mdx page I want to embed the video on and in the public folder, again without success. I am wondering if it's just the path that is incorrect but here is my code snippet for the file being in the same folder:

<video width="1920" height="1080" controls preload="auto">
  <source
    src="./video.mov"
    type="video/mp4"
  />
  Your browser does not support the video tag
</video>

Any help is appreciate and I'm more then willing to help trying to solve this issue.

I am assuming someone might ask why I don't host the video on some cloud provider and the answer is just that I do not have a lot of videos so I thought serving them up with the next app would be easiest but if this is just not possible I will look into a cloud hosting solution.

[eliot-akira]

According to the following article:

• MDN: Media type and format guide: image, audio, and video content > Media container formats (file types) > Common container formats

The most common video formats are mp4 and webm. Supposedly flac and ogg are also supported by all browsers. But I'd go with mp4.

The video files can be placed anywhere in the public folder. They are referenced by URLs starting with /.

<source src="/path/to/video.mp4" type="video/mp4" />