Problems loading and playing video assets [Next 14, React, TypeScript, Cloudinary-React]

stuttskl
stuttskl Member Posts: 1 ✭
edited April 4 in Developer APIs

Hi,

I am using "@cloudinary/react": "^1.13.0", and "@cloudinary/url-gen": "^1.16.1" in my Next.js app, and have received several reports of videos taking a while to buffer, or never load at all. It seems most commonly users are experiencing this while on Chrome Mobile iOS, but we've seen this issue across all browsers, iOS and Android, and on desktop (but this is less common). We have uploaded our video assets to Cloudinary, and here is how we are grabbing the video data. 

const cld = new Cloudinary({ cloud: { cloudName: "CLOUDNAME" } });
 
// we are verifying we have a publicId before this line

const myVideo = cld.video(publicId).resize(scale());

We have tried both the AdvancedVideo component, and the plain html video component. We have had problems with both, but here's how we've implemented each. 

   <AdvancedVideo
      id={id}
      preload="none"
      cldVid={myVideo}
      cldPoster={"auto"}
      muted
      autoPlay
      controls
      playsInline
      style={{ width: "100%", height: "100%" }}
      onPlay={handleOnPlay}
      onPause={handleOnPause}
      onError={e => handleOnError(e)}
      onEnded={handleOnEnded}
      onLoadStart={handleOnLoadStart}
      onLoad={handleOnLoad}
  />

 const deliveryUrl = myVideo.toURL();    

  <video
        id="video"
        preload="none"
        controls
        style={{ width: "100%", height: "100%" }}
        onPlay={handleOnPlay}
        onPause={handleOnPause}
        onError={e => handleOnError(e)}
        onEnded={handleOnEnded}
        onLoadStart={handleOnLoadStart}
        onLoad={handleOnLoad}
        src={deliveryUrl}
    > 

     <source src={deliveryUrl} type="video/webm" />
        <source src={deliveryUrl} type="video/mp4" />
        <p>
            Your browser does not support HTML video. Here is a<a href={deliveryUrl}>link to the video</a>{" "}
            instead.
        </p>
    </video>

I am noticing that the deliveryURL looks like this `https://res.cloudinary.com/dqw5s3atw/video/upload/q_auto:best/c_scale/f_auto/cw-sleep-hacking-7?_a=DATC1RAAZAA0

and appends this _a=DATC….

What does that part of the URL mean? It's hard to follow examples, such as this one:

https://community.cloudinary.com/discussion/296/how-to-generate-video-thumbnail-from-specific-time-index

when the URLs do not look the same, it's not as simple as just appending .jpg onto the url..


We aren't trying to do anything fancy with video transformations, and we have checked our Cloudinary error logs and haven't seen any spike in 4xx or 5xx errors, so really not sure what is going on here. Any advice would be great.

Tagged:

Answers

  • Vdeub
    Vdeub Member, Cloudinary Staff Posts: 78

    Hi @stuttskl,

    This isn't related to the analytics parameter but the toURL method and the fact that f_auto without extension returns an image

    You can have a look at our code example here which shows how to use the video component without using the toURL method. You can look at the videoTransformationsWithReact.js code and the components/Videos.jsx

    If you require the toURL method, you will need to pass the format as part of the public_id e.g.

    const myVideo = cld.video(publicId.mp4).resize(scale()); // note the scale doesn't do anything here
const deliveryUrl = myVideo.toURL();

    Alternatively to this, you can set the format to auto:video to ensure this won't return an image:

    const deliveryUrl = myVideo.format("auto:video").toURL());

    On another note, you can always remove the analytics like this:

    const cld = new Cloudinary({
    cloud: {
      cloudName: "demo",
    },
    url: {
      analytics: false,
    },
  });

    Hope that helps.

    Best,

    Loic

Categories