Video support NextJS 14 on Firebase

[Ahmed-UPEC]

[REQUIRED] Environment info

firebase-tools: latest firebase

Platform: next 14.0.4

[REQUIRED] Test case

Video upload on firebase using a Next framework

[REQUIRED] Steps to reproduce

Init NextJS 14 project Add any video (should be hosted on the local machine) inside the public folder Build the project (you should have a "out") directory, this will contain the video run firebase deploy

[REQUIRED] Expected behavior

The video should be hosted and be accessible on the website

[REQUIRED] Actual behavior

images are uploaded not the videos

[aalej]

Hi @Ahmed-UPEC, thanks for reaching out. Just to verify, are you using the webframeworks experimental feature? I’m guessing that you’re not using this feature. You can check this by running firebase experiments:describe webframeworks on the terminal.

Also, could you please share your firebase.json and next.config.js file, along with code snippets showing how you’re loading the video? By any chance, if you can provide a minimal reproducible example, please share it so that we can replicate the issue on our end.

[Ahmed-UPEC]

Hello there,

I am using this experimental feature. The website is the following : https://sea-lab.web.app/

I can provide you with the full code of my project (as it's juste design for now) Along with the video issue I am facing another issue related to the NextJS

component you can test it by clicking on "team" you will see that the page is loading for 4-5 min before rendering it. sea-lab.zip Le mar. 2 janv. 2024 à 12:43, aalej ***@***.***> a écrit : > Hi @Ahmed-UPEC , thanks for reaching out. > Just to verify, are you using the webframeworks experimental feature? I’m > guessing that you’re not using this feature. You can check this by running firebase > experiments:describe webframeworks on the terminal. > > Also, could you please share your firebase.json and next.config.js file, > along with code snippets showing how you’re loading the video? By any > chance, if you can provide a minimal reproducible example > , please > share it so that we can replicate the issue on our end. > > — > Reply to this email directly, view it on GitHub > , > or unsubscribe > > . > You are receiving this because you were mentioned.Message ID: > ***@***.***> >

[aalej]

Thanks for the clarification. Regarding the code, I can’t seem to access the drive link you shared, could you change the permission so that it can be accessed and downloaded. Alternatively, you could upload the code to a GitHub repo so that we can clone it.

[Ahmed-UPEC]

https://github.com/Ahmed-UPEC/sea-lab

Here you go you should be able to clone it

• Ahmed

Le mar. 2 janv. 2024 à 14:29, aalej @.***> a écrit :

Thanks for the clarification. Regarding the code, I can’t seem to access the drive link you shared, could you change the permission so that it can be accessed and downloaded. Alternatively, you could upload the code to a GitHub repo so that we can clone it.

— Reply to this email directly, view it on GitHub https://github.com/firebase/firebase-tools/issues/6657#issuecomment-1874027227, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANSVDSTHHXPWG34JZ7K3BEDYMQDSTAVCNFSM6AAAAABBJF6OSWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNZUGAZDOMRSG4 . You are receiving this because you were mentioned.Message ID: @.***>

[leoortizz]

Hey @Ahmed-UPEC. I was investigating your issue but couldn't understand what exactly is the issue. The video is available and visible in the homepage as you can see here: https://sea-lab.web.app/

The video running on this section is being sourced from https://sea-lab.web.app/video/Gemini_Era.mp4, which is the video uploaded to Firebase Hosting:

can you clarify what exactly is the problem you see?

[Ahmed-UPEC]

Thanks for your message,

This is my view :

This is because I am using the Avast Browser. If you can fix this "bug" that would be great but it works great on Edge or Chrome.

Thanks,

• Ahmed

[leoortizz]

Hey @Ahmed-UPEC thanks for replying.

I also tried the latest version of the Avast Browser and it worked for me, I can see the video without issues:

I suppose your browser might be blocking the video or the version you're using doesn't support it. In this case there's nothing we can do. The video is correctly being uploaded to Firebase Hosting, that's all we can do. You would need to handle videos for unsupported browsers in your app code.

[Ahmed-UPEC]

Okay Thanks,

I guess it was on my side, in the mean time I will try to update my browser but thanks for your time and the Firebase support team.

• Ahmed