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

Comments

3 comments

  • Avatar
    Justin Linn

    Here is the sample code I have 

    <Video cloudName="governmentcio"publicId={videoID} controls="true">
          <Transformation startOffset="1.0" />
    0
    Comment actions Permalink
  • Avatar
    Justin Linn

    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
    Comment actions Permalink
  • Avatar
    Eyal Katz Talmon

    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
    Comment actions Permalink

Please sign in to leave a comment.