How to use cloudinary-react context for video poster

Bruno Barros

October 06, 2021 14:10 Edited

When using images and videos, the public Id recognizes the context and I don't need to write full paths.

The video poster doesn't have the same logic and I need to add a full image path.

The problem is that I have a prod account and a dev account. I can't hard code the image path.

Is there a solution?

0

• 

  Eyal Katz Talmon

  October 07, 2021 13:43

  Hey Bruno, thanks for reaching out!

  It is possible to create a video poster image without needing to specify the path.
  I have created this example of how to achieve this -
  https://codesandbox.io/s/cloudinary-react-summit-162729-bt009?file=/src/App.js

  Generally, this is done by creating an image component, and specifying the video public ID with "video" resource type, as a JPG (or any other image format).

  In case I didn't understand the desired behavior - Can you kindly clarify what you are trying to achieve?
  Can you elaborate on how are you trying to create the video poster? A code snippet would be helpful.

  0
• 

  Bruno Barros

  October 07, 2021 14:34

  Hey, Eyal! Thanks for your answer.

  If I use this on my code:

  <Video cloudName="demo" publicId="dog" controls poster="dog" />

  I get this result:

  <video controls="" poster="dog">
  <source src="http://res.cloudinary.com/demo/video/upload/dog.webm" type="video/webm">
  <source src="http://res.cloudinary.com/demo/video/upload/dog.mp4" type="video/mp4">
  <source src="http://res.cloudinary.com/demo/video/upload/dog.ogv" type="video/ogg">
  </video>

  If I remove the poster option, I get nothing.
  
  For some reason, if I use your snippet, I get the poster without adding anything:
  https://codesandbox.io/s/cloudinary-react-summit-162729-forked-w6jnw?file=/src/App.js
  
  My questions is, how to achieve the same result as you? An auto poster image for Videos.
  
  For now, I can only make it work with a poster adding a full path, like so:

  <Video

    cloudName="demo"

    publicId="dog"

    controls

    poster="https://res.cloudinary.com/demo/video/upload/dog.jpg"

  />

  0
• 

  Eyal Katz Talmon

  October 12, 2021 12:05

  Hey Bruno,

  Thanks for the clarification. In my previous examples, I've used the Image tag to generate a "poster" of the video using the video public ID. I've now updated the CodeSandbox with an example of adding a poster to a Video tag by just specifying the video public ID (the first example) -
  https://codesandbox.io/s/cloudinary-react-summit-162729-bt009?file=/src/App.js

  This is done using a URL generation method of Cloudinary JS SDK which comes built-in with the React SDK. 
  Notice that I've imported the JS SDK at the top of the file -

  import { Cloudinary } from "cloudinary-core";
  
  const cloudinaryCore = new Cloudinary({ cloud_name: "demo" });

  Additional details of the JS SDK can be found here (some may be irrelevant when using it as part of the React SDK) -
  https://cloudinary.com/documentation/javascript1_integration

  Cheers.

  0
• 

  Bruno Barros

  October 12, 2021 12:09

  Thanks a lot, Eyal.

  I hope you have a great week.

  0

Post is closed for comments.