Originally posted by **colbyfayock** November 13, 2023
CldVideoPlayer is the recommended way to embed Cloudinary videos in a Next.js, Svelte, or Nuxt application. It's a wrapper of the [Cloudinary Video Player](https://cloudinary.com/documentation/cloudinary_video_player) which works in two ways: by dropping in a Script with CSS or by importing a node module.
CldVideoPlayer currently utilizes the Script installation method, which is a bit beyond the scope of this, but ultimately it requires a group of options to be passed into it in order to initialize and make use of the wide variety of features available to the Video Player.
In order to provide as much parity as possible between the libraries maintaining a CldVideoPlayer component, the maintainers and contributors must rewrite or copy and paste similar code within each of their frameworks, which is slow and prone to creating implementation differences. To help alleviate this, we can abstract some of the work to a utility library, much like we're currently doing for building URLs with CldImage.
## The Challenge
Unlike CldImage, CldVideoPlayer doesn't take a URL as the primary input, and instead takes an object alongside the public ID which is composed of the different options available. This means there's not a single interface that can compose the entirety of CldVideoPlayer.
Additionally, some of the initialization and work needed to manage the component is different depending on the framework, leaving no point to try to deduplicate that work.
## Proposed Solution
While we can't fully abstract the component into a single function, we can think about how we can compose different parts in a reusable fashion.
This proposal suggests to abstract out the options that are passed into the player upon initialization as well as the Types that are used, both from the Cloudinary Player itself, but also the props that are passed in as part of the options configuration.
### getVideoPlayerOptions
The getVideoPlayerOptions function will compose the options that need to be passed into the Cloudinary Video Player videoPlayer method upon initialization.
Usage would look like the following:
```
const options = getVideoPlayerOptions(props);
cloudinary.videoPlayer(ref, options)
```
This will simplify the ability to support all Player features while looking forward to creating different API surfaces for a better Video Player developer experience.
### Types
There are two Types that are needed to be maintained for the Player:
Cloudinary Video Player (which are not publicly available)
getVideoPlayerOptions
**Cloudinary Video Player** types can be maintained in a new utility package of @cloudinary-util such as @cloudinary-util/types, which will make it easy to import these types into any project, though with this abstract, may possibly be no longer needed in the framework layer.
**getVideoPlayerOptions** will be the primary interface that the frameworks interact with, which can be used as the foundational interface that creates the component's Types, for instance
```
interface CldVideoPlayer extends GetVideoPlayerOptions {
…
}
```
## Issues
* https://github.com/colbyfayock/cloudinary-util/issues/122
* https://github.com/colbyfayock/cloudinary-util/issues/123
colbyfayock
commented
6 months ago
Discussed in https://github.com/cloudinary-community/cloudinary-util/discussions/86