I'm pretty sure this is not allowed on next.js 14. I've been on this for a day or two though so don't quote me. A free method is using a host like x10 hosting, setting up a subdomain with them and then hosting videos there. You are going to want to render them client side in next.js. Bandwidth on x10 is seemingly unlimited but disk usage and Inodes are not. The biggest problem is initial lag, which you can partially overcome with setting a background as the first video frame. Make sure you compress your video, as this will help with loading. Although, I am using this method for video backgrounds, not embedding videos as content- although the process would be similar either way. I might make a video about this when I'm done
There's an answer from @muxhq on a similar comment below, but I'm curious where it's implied the providers are free? The project itself is free, and you can configure it to use Mux, Backblaze, S3, or Vercel Blob Storage to host/serve the video content. Each of those providers comes with their own associated costs once you pass their respective free tiers, but that's independent of the project itself.
With mux-player-react, you’re in charge of communicating with the Mux API to upload and get your videos. That’s great if you want that control and flexibility! But if you’re looking for an all-in-one video solution that will manage the API communication for you, or if you want to use a different provider (like Vercel Blob), then you might consider next-video. Next-video is still evolving and becoming more capable, too. As we work towards our 1.0 release, let us know what kind of limitations you run into.
Is there somewhere I can see an example of how to upload using react js and mux uploader? I am reading the Docs but I dont understand, should I create my own api/route and add that in my
Hi! If you're using something like Next specifically, you can use a server component to create an upload url then just render that right along with the uploader (same would go for getServerSideProps). If your API/server-side stuff is separate, yes, you'd want to create a route that returns an upload URL, and you probably also want a route that can get the asset afterward so you can immediately play it back. I can see about putting together a quick example!
How do i do this using an api on my project. I'm using mux and uploadthing and storing muxData on my app. don't know how to explain this as i'm a total beginner tryna do a complex application and i'm halfway through
@@MuxHQ I think he means that he utilizes a platform, referred to as 'uploadthing', to upload videos to an external storage service like S3. He then uses Mux for transcoding and playing videos through the Mux React player by providing a playback ID. In this new library, are we able to pass a Mux playback ID instead of a URL? That's my understanding, as I recall reading a similar question asked by someone else
I checked it a thousand times and did everything according to the manual, why do I have such a problem? npx next-video sync (node:124653) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. (Use `node --trace-deprecation ...` to show where the warning was created) + Found 1 unprocessed video - Processing file: TZ-ACK.mp4 Failed to load next-video config. ✗ An unknown error occurred TypeError: Cannot read properties of undefined (reading 'provider') at createAsset (file:///home/ilya/Projects/tz-ack/node_modules/next-video/dist/assets.js:40:27) at async newFileProcessor (file:///home/ilya/Projects/tz-ack/node_modules/next-video/dist/cli/sync.js:62:24) at async Promise.all (index 0) at async Object.handler (file:///home/ilya/Projects/tz-ack/node_modules/next-video/dist/cli/sync.js:88:24)
can i show video in hero section in auto play mode without showing play button and other controls etc and mute by default? but user can un-mute manually?
npx next-video sync this command returning an error in /node_modules/next-video/dist/assets.js:40:27) const newAssetDetails = { status: "pending", // overwritable ...assetDetails, originalFilePath, provider: videoConfig.provider,👈here its returning an error i have followed everthing you did providerMetadata: {}, createdAt: Date.now(), updatedAt: Date.now() };
Hey there! Sorry you're having trouble with next-video. If you could submit a GitHub issue, the team can work with you to figure it out: github.com/muxinc/next-video/issues
So your video is already online and you just want to play it back in Next? We're talking about just exposing the player itself as its own export you can use directly, but honestly I might suggest just grabbing something like react-player, or use media-chrome + hls-video if you wanted something more custom.
Right now, next-video doesn't support storing metadata in a headless CMS. They're definitely on the radar, though. You can track progress on this issue here github.com/muxinc/next-video/discussions/143 If you're using Mux, you might also consider our Sanity CMS integration and Mux Player, instead of next-video www.sanity.io/plugins/sanity-plugin-mux-input
Right now, next-video doesn't support storing metadata in a headless CMS. They're definitely on the radar, though. You can track progress on this issue here github.com/muxinc/next-video/discussions/143 If you're using Mux, you might also consider one of our CMS integrations and Mux Player, instead of next-video docs.mux.com/integrations/cms
If you're using next-video with Mux, videos will be watermarked and removed after 24 hours. However, once you add a credit card to your Mux account, those limitations will be lifted. And we'll put $20 of credit on your account to get started! While none of them are free, next-video does support other video providers whose pricing might better fit your use case. You can read about them in the docs: next-video.dev/docs#hosting--processing-providers
A COMPLETELY FREE method is using a host like x10 hosting, setting up a subdomain with them and then hosting videos there. You are going to want to render them client side in next.js. Bandwidth on x10 is seemingly unlimited but disk usage is limited to 512MB and Inodes are not unlimited. The biggest problem is the initial serve time, which you can partially overcome with setting a background as the first video frame. Make sure you compress your video, as this will help with loading. Look into lazyloading if applicable for your case for faster serves. I am using this method for video backgrounds, not embedding videos as content- although the process would be similar either way. I might make a video about this when I'm done
Thanks! Can I store videos locally? I mean without any remote storage?
I'm pretty sure this is not allowed on next.js 14. I've been on this for a day or two though so don't quote me. A free method is using a host like x10 hosting, setting up a subdomain with them and then hosting videos there. You are going to want to render them client side in next.js. Bandwidth on x10 is seemingly unlimited but disk usage and Inodes are not. The biggest problem is initial lag, which you can partially overcome with setting a background as the first video frame. Make sure you compress your video, as this will help with loading. Although, I am using this method for video backgrounds, not embedding videos as content- although the process would be similar either way. I might make a video about this when I'm done
@@inteliuz thank you!
it's not fully free
There's an answer from @muxhq on a similar comment below, but I'm curious where it's implied the providers are free? The project itself is free, and you can configure it to use Mux, Backblaze, S3, or Vercel Blob Storage to host/serve the video content. Each of those providers comes with their own associated costs once you pass their respective free tiers, but that's independent of the project itself.
Plus its a shit product that does not work. Mux is a scammer and liar
What are the differences (benefits etc) between next video and the mux react player?
With mux-player-react, you’re in charge of communicating with the Mux API to upload and get your videos. That’s great if you want that control and flexibility! But if you’re looking for an all-in-one video solution that will manage the API communication for you, or if you want to use a different provider (like Vercel Blob), then you might consider next-video. Next-video is still evolving and becoming more capable, too. As we work towards our 1.0 release, let us know what kind of limitations you run into.
local video same shit like others
what do you mean local video???
i thought mux stores all the videos in video folder on their database .
Yeah, not really sure what that means either. All of the provider options store/serve the videos from outside the git repo.
Is there somewhere I can see an example of how to upload using react js and mux uploader? I am reading the Docs but I dont understand, should I create my own api/route and add that in my
Hi! If you're using something like Next specifically, you can use a server component to create an upload url then just render that right along with the uploader (same would go for getServerSideProps). If your API/server-side stuff is separate, yes, you'd want to create a route that returns an upload URL, and you probably also want a route that can get the asset afterward so you can immediately play it back. I can see about putting together a quick example!
How do i do this using an api on my project. I'm using mux and uploadthing and storing muxData on my app. don't know how to explain this as i'm a total beginner tryna do a complex application and i'm halfway through
Hi, might need to know more about where you are getting stuck exactly, but are you asking about how to allow end-user to upload?
@@MuxHQ I think he means that he utilizes a platform, referred to as 'uploadthing', to upload videos to an external storage service like S3. He then uses Mux for transcoding and playing videos through the Mux React player by providing a playback ID. In this new library, are we able to pass a Mux playback ID instead of a URL? That's my understanding, as I recall reading a similar question asked by someone else
I checked it a thousand times and did everything according to the manual, why do I have such a problem?
npx next-video sync
(node:124653) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
+ Found 1 unprocessed video
- Processing file: TZ-ACK.mp4
Failed to load next-video config.
✗ An unknown error occurred TypeError: Cannot read properties of undefined (reading 'provider')
at createAsset (file:///home/ilya/Projects/tz-ack/node_modules/next-video/dist/assets.js:40:27)
at async newFileProcessor (file:///home/ilya/Projects/tz-ack/node_modules/next-video/dist/cli/sync.js:62:24)
at async Promise.all (index 0)
at async Object.handler (file:///home/ilya/Projects/tz-ack/node_modules/next-video/dist/cli/sync.js:88:24)
Same here
to fix it: npm uninstall next-video. run away. never look back.
can i show video in hero section in auto play mode without showing play button and other controls etc and mute by default? but user can un-mute manually?
We have a blog post available for this exact use case here: www.mux.com/blog/how-to-add-a-background-video-in-next-js
npx next-video sync this command returning an error in /node_modules/next-video/dist/assets.js:40:27)
const newAssetDetails = {
status: "pending",
// overwritable
...assetDetails,
originalFilePath,
provider: videoConfig.provider,👈here its returning an error i have followed everthing you did
providerMetadata: {},
createdAt: Date.now(),
updatedAt: Date.now()
};
x2
Hey there! Sorry you're having trouble with next-video. If you could submit a GitHub issue, the team can work with you to figure it out:
github.com/muxinc/next-video/issues
does it support an m3u8 file link or an hls stream link
So your video is already online and you just want to play it back in Next? We're talking about just exposing the player itself as its own export you can use directly, but honestly I might suggest just grabbing something like react-player, or use media-chrome + hls-video if you wanted something more custom.
Anyway to use Sanity CMS video file for it?
Right now, next-video doesn't support storing metadata in a headless CMS. They're definitely on the radar, though. You can track progress on this issue here github.com/muxinc/next-video/discussions/143
If you're using Mux, you might also consider our Sanity CMS integration and Mux Player, instead of next-video www.sanity.io/plugins/sanity-plugin-mux-input
How to use it with headless CMS though?
Right now, next-video doesn't support storing metadata in a headless CMS. They're definitely on the radar, though. You can track progress on this issue here github.com/muxinc/next-video/discussions/143
If you're using Mux, you might also consider one of our CMS integrations and Mux Player, instead of next-video docs.mux.com/integrations/cms
It adds watermarks and removes videos after 24hrs, It is not free option
If you're using next-video with Mux, videos will be watermarked and removed after 24 hours. However, once you add a credit card to your Mux account, those limitations will be lifted. And we'll put $20 of credit on your account to get started!
While none of them are free, next-video does support other video providers whose pricing might better fit your use case. You can read about them in the docs: next-video.dev/docs#hosting--processing-providers
@@MuxHQ why not tell this in the video tutorial or you want to just waste our time then ohh you have to upgrade :/
@@ahmedwalidhq agreed just wasted my time very scummy tactic
Mux is a scammer
A COMPLETELY FREE method is using a host like x10 hosting, setting up a subdomain with them and then hosting videos there. You are going to want to render them client side in next.js. Bandwidth on x10 is seemingly unlimited but disk usage is limited to 512MB and Inodes are not unlimited. The biggest problem is the initial serve time, which you can partially overcome with setting a background as the first video frame. Make sure you compress your video, as this will help with loading. Look into lazyloading if applicable for your case for faster serves. I am using this method for video backgrounds, not embedding videos as content- although the process would be similar either way. I might make a video about this when I'm done
This is garbage.
Thanks for the insightful feedback!
@@MuxHQ the product doesn't work.
@@MuxHQ thanks for wasting our time