How to explicitly set the Duration of the Video

Options
AyazAhmed
AyazAhmed Member Posts: 1 ✭
in Developer APIs

I have A question about the Metadata of the video.

Let me provide you with full details.

Here is what my Code Looks like when I Call the <CloudVideo/>

{

 postFileMeta.cloudData && (

     <CloudVideo publicId={postFileMeta.cloudData.public_id} />

}


and Here is the code for <CloudVideo/>

{

 const cld = useMemo(

  () =>

   new Cloudinary({

    cloud: {cloudName: //mycloudName  }}),[])

 const myVideo = useMemo(() => cld.video(props.publicId), [cld, props.publicId])

 return (

  <div className="cloudVideoDiv">

   <AdvancedVideo

    cldVid={myVideo}

    cloud-video-id={props.publicId}

    onPlay={( ) => {//mycode  }

    cldPoster="auto"

    plugins={[lazyload()]}

    controls

    playsInline

   />

  </div>

 )

The above code is basically the overview of how I am using cld and advanceVideo. 

Now, that we have all the information. Let me tell you my Problem. 

When I upload a big video, I have all the information about the video in " postFileMeta.cloudData" including the public id and duration. 

but sometimes when the video loads in the timeline, the metadata is I guess not loaded and I do not have the duration of the video at the initial load. hence I see Weird behaviour of the Chrome browser progress bar. it goes to the end and then to the start causing this flickering behaviour. 

my guess is that at the initial Load, we do not have the duration of the video. Can I set the duration of the video (which I get in postFileMeta.cloudData) explicitly in the code so that my progress bar doesn't behave weirdly. 

I hope I have made my question clear. 

I am looking forward to your response. Thank you.

Tagged:

Answers

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 100
    Options

    Hi Ayaz,

    You can indeed set the duration of the video explicitly in your code to prevent this issue (and you can do many more transformations on that video)

    Here's how you can set it explicitly:

    // Assuming you have the duration available in postFileMeta.cloudData.duration
const videoDuration = postFileMeta.cloudData.duration; // Replace with your actual duration value

// Set the video duration explicitly
myVideo.duration(videoDuration);

    You can add this code before rendering your <AdvancedVideo> component to ensure that the duration is set correctly. If that didn't solve the problem - can you please create a codesandbox that will demonstrate the issue?

    I hope this helps. Please let me know if you have any further questions.

    Best regards,

    Tamara

Categories