Custom poster image is regenerated lazily when the public id is a URL

[Naybnet]

Context

I eagerly generate a video and an image for its poster. They are then used through their raw URL in the cloudinary player:

const cld = cloudinary.videoPlayer(
  'https://res.cloudinary.com/demo/video/upload/w_260,h_200,c_crop,g_north/sample.mp4',
  {
    posterOptions: {
      publicId:
        'https://res.cloudinary.com/demo/video/upload/a_hflip,w_260,h_200,c_crop,g_north/sample.jpg',
    },
  }
)

Problem

Due to this line (https://github.com/cloudinary/cloudinary-video-player/blob/edge/src/plugins/cloudinary/models/image-source.js#L17), the end suffix of the image is removed. This results in the same image being regenerated lazily which defeats the point of having it done eagerly.

Also it means that the poster for the video will only appear after few seconds which leads to a poor user experience.

This problem occurs solely for images since the constructor of the video source only removes the suffix when the public_id is not a raw url (https://github.com/cloudinary/cloudinary-video-player/blob/edge/src/plugins/cloudinary/models/video-source/video-source.js#L29).

Is this something that could be fixed ?

Cheers,

[PixelCook]

Hey there, typically instead of using a URL, you'll want to use the public_id and add transformations to it as a parameter. A default poster is shown every time a new video loads. It can include transformation settings. By default, every new video that loads will use the middle image of that video (/video/publicId.jpg) and if the player width is set, the poster will be responsive.

vplayer.posterOptions({ publicId: 'sample', transformation: { format: 'jpg' } })

Check out the documentation on poster options:
https://cloudinary.com/documentation/video_player_api_reference#posteroptions

[Naybnet]

Hi @PixelCook, thanks for your message.

For clarification, I do not want to generate the transformation from the client code as I want the video to have been generated before the first call from the client (and so I do not trust the transformation API from the player to reproduce exactly the URL that has been generated eagerly). Maybe I am wrong about this, if you have more info I am open to change my mind.

Also I do not want the middle image for my poster but also a custom transformation that I also have generated beforehand.

[PixelCook]

Hey there Naybnet,

As long as you keep the same order of transformations as your eager transformation it should be the same derived asset (so no additional transformation needed). You can also set the format as a transformation such as f_jpg and the file extension won't matter.