Add customPosterOptions

[billnbell3]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @nuxtjs/[email protected] for the project I'm working on.

Here is the diff that solved my problem:

--- a/node_modules/@nuxtjs/cloudinary/dist/runtime/components/CldVideoPlayer.vue
+++ b/node_modules/@nuxtjs/cloudinary/dist/runtime/components/CldVideoPlayer.vue
@@ -89,6 +89,7 @@ export type CldVideoPlayerProps = Pick<
   chapters?: Record<string | number, string> | boolean
   chaptersButton?: boolean
   disableRemotePlayback?: boolean
+  customPosterOptions?: object
 }
 
 const props = withDefaults(defineProps<CldVideoPlayerProps>(), {
@@ -118,7 +119,6 @@ const {
   width,
   config,
 } = props as CldVideoPlayerProps
-
 const playerTransformations = Array.isArray(transformation)
   ? transformation
   : [transformation]
@@ -202,6 +202,10 @@ const handleOnLoad = () => {
       playerOptions,
     )
 
+    if (props?.customPosterOptions) {
+      playerRef.value.posterOptions(props.customPosterOptions);
+    }
+
     Object.keys(events).forEach((key) => {
       if (typeof events[key] === 'function') {
         playerRef.value?.on(key, handleEvent)
@@ -247,6 +251,7 @@ useHead({
       :width="width"
       :height="height"
       :disableRemotePlayback="disableRemotePlayback"
+      :autoplay="Boolean(autoPlay)"
     />
   </div>
 </template>

This issue body was partially generated by patch-package.

[Baroshem]

Hey buddy, thanks for creating it but not sure what we should do from the module side: Could you elaborate what you would expect? :)

[billnbell3]

Bringin in Tony Nebera.

[tony-nebera]

Hey Guys. Cloudinary automatically creates a poster image for videos. And also it has some specific options. In our case we had to pass transformation to create an imagr from the first video slide to prevent jumpy effect and make video play as smooth as it can be. Like this: posterOptions: { transformation: { startOffset: "0" } }

[colbyfayock]

hey all - in Next Cloudinary, the Next.js equivalent, we support passing an object into the poster prop which will then allow you to use the same API as CldImage/getCldImageUrl to transform an image

https://next.cloudinary.dev/cldvideoplayer/examples#poster-transformations

i dont think it suports startOffset yet, might need to add that, or you can add it as a raw transformation in the meantime, but what do you think about that as an API?

it probably makes sense to expose all Video Player features in an escape hatch for when something isn't suitable, but the goal of the Poster object is to bring consistency between the different APIs

wdyt?

[Baroshem]

@colbyfayock

Do you think that we should have poster prop in the CldVideoPlayer.vue component as well?

[colbyfayock]

yeah! im surprised it didnt work already, i thought it was coming from getVideoPlayerOptions