How to change video thumbnail before playing video [React SDK]

Justin Linn

October 06, 2020 19:37

I see lots of post on how to create an image thumbnail from a video but I am unsure on how to change the thumbnail on the video before playing using React SDK.

It looks like you are supposed to be able to just add a Transformation Element in the Video component and set a key value paid of startOffset="1.0" or something like that but when I add that it does not let me play the video and does not change the thumbnail...

0

• 

  Justin Linn

  October 06, 2020 19:43

  Here is the sample code I have 
  
  

  <Video cloudName="governmentcio"publicId={videoID} controls="true">

        <Transformation startOffset="1.0" />

  </Video>
  
  Docs where I found an example
  
  https://cloudinary.com/documentation/react_video_manipulation

  0
• 

  Justin Linn

  October 06, 2020 19:57

  I am trying to implement this exactly as described here but does not feel that it is working due to video being disabled on render.
  
  

  0
• 

  Eyal Katz Talmon

  October 07, 2020 16:30 Edited

  Hey Justin, thanks for reaching out!

  It sounds like you're looking for adding a "poster" to the video element.
  This can be easily done by indicating the poster attribute with the desired image URL (a thumbnail of the video) -

  import {Video} from 'cloudinary-react';
  import {Cloudinary} from 'cloudinary-core';

  ...
  render() {
   const cloudinaryCore = new Cloudinary({ cloud_name: 'governmentcio' });
   var poster = cloudinaryCore.video_url(videoID, {format: "jpg", start_offset:4});
   return (
     <Video cloudName="governmentcio" publicId={videoID} controls="true" poster={poster}> 
   )
  }
  ...

  Note that the "cloudinary-core" package is implicitly installed when installing the "cloudinary-react" package.

  Hope this helps!

  0

Post is closed for comments.