Embedding a Video Player in Next.js with Next Cloudinary - Dev Hints
Vložit
- čas přidán 10. 04. 2023
- Play and embed videos in a Next.js app using the CldVideoPlayer from Next Cloudinary.
We'll walk through importing and configuring the CldVideoPlayer to play a video from a Cloudinary account and how to customize the look and feel with custom colors.
📝 Next Cloudinary Docs - CldVideoPlayer
next-cloudinary.spacejelly.de...
💾 Embedding Video with CldVideoPlayer
github.com/colbyfayock/cloudi...
Instructor: Lazar Nikolov ( @nikolovlazar )
--
Cloudinary helps developers build performant experiences for the web with powerful optimization and transformation APIs.
🚀 Get started with a free account!
cld.media/devhintsnextcldvide...
#cloudinary #devhints #nextjs #video #videoplayer #webdevelopment - Věda a technologie
How would you create the play pause functionality + const without running into the "cant render client components into server components"?
hey im not totally sure what you mean by the play pause functionallity + const, but, in order to use the player in a server component, you can either apply the "use client" directive to the top of the page/component or create a light wrapper component that includes that directive and passes all the props through, similar to this example: next.cloudinary.dev/nextjs-14
You saved my job 😅
Thanks ❤❤❤❤❤
glad it helped!!
How to setup autoplay for it? I can't find any documentation regarding the value for autoplay field!
you should be able to pass in autoPlay="always" but there may be a bug per another comment, will work on getting that fixed!
I can’t get my video to auto play. I’ve tried adding autoPlay=“always” but nothing happens. Am I doing something wrong?
mentioned in the other video, might be a bug, would be great if you could file an issue here: github.com/colbyfayock/next-cloudinary/issues
hey actually realizing this is likely not a bug. do you have the `muted` prop also added? most browsers will not autoplay unless the video sound is turned off to avoid interrupting people browsing a site. so if you have it should work for you
not working on v16
Error: (0 , c.useRef) is not a function
you need to add "use client"; to the top of the file where you're using it if you're using React Server Components. to avoid making an entire page a client component, you could wrap this component in a client component first. unfortunately there's not a great way to handle opting individual components in a library as client components right now
@@colbyfayock what would be a "better way"?
@@derusmares9508 on the tooling side i need to figure out how to maintain "use client" in the exported module so that the person trying to use it doesn't have to. ive had trouble trying to get that working with my current build system, but will be exploring other options. The docs here have an example of how you can create your own wrapper: next.cloudinary.dev/nextjs-14
i can use youtube link in src?
i dont think so, though i think you can use direct file links, such as msite.com/file.mp4, but the player is really designed to be used with Cloudinary
local video......
hey can you clarify? are you hitting an issue?