Poster of MP4: Get the first frame of video

Itamar Higani

June 06, 2021 14:38 Edited

Hey,

poster parameter are take the middle frame of the video,

How can i get the first frame of the video?

Thanks :)

from docs:

********

• poster: a URI to an image to be shown while the video is downloading or until the user hits the play button. The URI can be one of the following:
  • The URL to an image.
  • A struct including the transformations to apply to the default image (you can include the public_id of an uploaded image to use instead of the default image).
  • Set to nil or false to use no poster.
  • Default: the middle frame of the source video in jpg format.

*********

0

• 

  Loic Verger Del Bove

  June 07, 2021 10:13

  Hi Itamar,

  Raw URLs are not yet supported by our Video Player but there is a workaround.

  You can first generate a video thumbnail of the video. If you want the first frame, you can use the start_offset parameter and set it to 0 e.g https://res.cloudinary.com/demo/video/upload/so_0/dog.jpg. Then you can use this URL as the poster URL without forgetting to doubling the extension i.e:

  var demoplayer = cld.videoPlayer('doc-player', {
                      publicId: 'dog',
                      controls: true,
                      posterOptions: { publicId: 'https://res.cloudinary.com/demo/video/upload/so_0/dog.jpg.jpg'}
                  }).width(500);

  You can find below 2 examples of the video player with and without the poster:

  • https://codepen.io/VdeubCloudinary/pen/qBRwZRd - without the poster hence using the middle frame.
  • https://codepen.io/VdeubCloudinary/pen/NWpzbbo - with the poster hence using the first frame.

  Hope that helps.

  Best,

  Loic

  0
• 

  Deepak Tomar

  August 09, 2022 05:52

  How to generate first frame thumbnail of video. We are using video on mobile app there we can't use video tab as you suggested.

  We have admin panel where we are managing video and deliver to APP. So we need to generate first frame thumbnail of video. 

  There is any api or transformation to get or get first frame image as a image.

  0
• 

  Wissam Khalili

  August 28, 2022 14:02

  Hi there,

  Sorry for the late response.

  In order to create an image thumbnail, please follow this straight forward instruction:
  https://cloudinary.com/documentation/video_effects_and_enhancements#video_thumbnails

  Hope you find it useful

  Thanks,

  Wissam

  0

Post is closed for comments.