Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Add customPosterOptions #243

Closed
billnbell3 opened this issue Oct 11, 2024 · 6 comments · Fixed by #246
Closed

Add customPosterOptions #243

billnbell3 opened this issue Oct 11, 2024 · 6 comments · Fixed by #246

Comments

@billnbell3
Copy link

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch @nuxtjs/cloudinary@3.1.0 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
Copy link
Collaborator

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
Copy link
Author

Bringin in Tony Nebera.

@tony-nebera
Copy link

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
Copy link
Collaborator

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
Copy link
Collaborator

@colbyfayock

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

@colbyfayock
Copy link
Collaborator

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

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants