[Feature] Allow to pass an url as src to CldVideoPlayer

[Baroshem]

Sets up the CldVideoPlayer to allow passing in a valid Cloudinary URL as a src

Example:

src="https://res.cloudinary.com/next-cloudinary/video/upload/v1/videos/mountain-stars.webm"

Similar to CldImage, the URL must include a version number /v1234/

[sccalabr]

Id like to give this a try. I am assuming that the change will need to be in CldVideoPlayer? If not can you send me a code pointer.

[Baroshem]

@sccalabr Yes you are correct.

If you need any additional help, just let me know :)

[sccalabr]

Where does cIdImage do the the version check? I dont see it being checked anywhere. I am also running into this error trying to set things up

@nuxtjs/cloudinary@2.3.4 dev nuxi dev playground

(node:9892) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '.' at Loader.moduleStrategy (internal/modules/esm/translators.js:133:18) at async link (internal/modules/esm/module_job.js:42:21) (node:9892) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:9892) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. c

[colbyfayock]

hey @sccalabr i can answer this one

what i've done in Next Cloudinary (which Nuxt Cloudinary was based on) is use a utility function to parse the URL. this utility function comes from the same library that is used to handle the parsing / trasnformation logic for CldImage

https://github.com/colbyfayock/next-cloudinary/blob/main/next-cloudinary/src/components/CldVideoPlayer/CldVideoPlayer.tsx#L47

i'd recommend just doing the same thing as it's been working well so far over there, but feel free to provide any suggestions on top of that

as far as the playground goes though, i'd defer to @Baroshem

[sccalabr]

Thanks ill go ahead and add it once I get the playground working :)

[Baroshem]

Hey, I dont really know what is this issue you have while running the playground.

You should be able to just run it like this

yarn yarn dev:prepare yarn dev

[sccalabr]

Where do I run that at becuase when I try running those commands I get

ERROR: There are no scenarios; must have at least one. No such file or directory: 'dev:prepare' No such file or directory: 'dev'

[Baroshem]

When you clone the repository in the root folder of the module

[sccalabr]

What do you mean by that? The folder I have is called cloudinary

[Baroshem]

I dont know how to help you.

The process of local development is straightforward:

1. Clone the repo
2. Install the dependencies
3. Prepare types
4. Run

I have no idea where you can encounter the problems you mentioned. Could you try to do this once again and see if it works?

[sccalabr]

@Baroshem no problem. I am not able to get it up and running even after trying it again. I think I should give this back so someone else can work on it

[colbyfayock]

hey @sccalabr i can confirm i was able ot get this up and running, what system are you running?

I deleted the project locally and re-cloned to be sure

i ran:

• yarn install
• yarn dev

and the project was now available for me on http://localhost:3000/

do you have yarn installed? did you install the dependencies from the root with yarn?

i didn't even need to prepare the types like @Baroshem mentioned 🤷

while it's understandable if you want to move on, definitely hope to be able to figure out what the issue is!!

[sccalabr]

Yes I have yarn install and ran from root so not sure what is up. I am using linux mint.

[Baroshem]

@sccalabr have you managed to resolve this issue?

[sccalabr]

I have not :(

[Baroshem]

I dont know how to help you then :(

• The issue has to be related to your device as it is working correctly for other users and the issue does not tell me a thng about its origin.

I will unassign the issue from you for now. If you manage to make it work, please let me onow so that I can assign you again :)

[Baroshem]

Just checked that it is possible to use:

<CldVideoPlayer width="1620" height="1080" src="https://res.cloudinary.com/next-cloudinary/video/upload/v1/videos/mountain-stars.webm" />