Easily add video to your Next.js app
Vložit
- čas přidán 29. 07. 2024
- next-video is a React component for adding video to your Next application. It handles uploading your video, automatically optimizes your video, has a great out-of-the-box player, provides analytics, and more. #nextjstutorial #nextjsvideo #muxapi
Read the docs: next-video docs: next-video.dev/docs
* Get a $50 Mux credit to build video into your product using the Mux Video API. Sign up for an account (dashboard.mux.com/signup) and then email us at deal+MUXCZcams50@mux.com and mention MUXCZcams50 to get your free credits.
Learn more about building with video: / @muxhq
Connect with Mux (video apis):
Website: www.mux.com/
Twitter: / muxhq
Blog: www.mux.com/blog
00:00 - Why adding video to Next.js is hard
00:49 - Installing next-video
01:26 - Where next-video stores video files
01:52 - Setting up a Mux account
02:21 - Adding video to your app
03:58 - Conclusion
Music:
"Magic Scout" & "Cottages" by Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0
creativecommons.org/licenses/b... - Věda a technologie
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
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
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.
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
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
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.
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'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.
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 :/
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.
This is garbage.
Thanks for the insightful feedback!
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