Issues in mobile version of the player

[adzhazhev]

Here's the issues I am having. When using the cloudinary player widget in desktop web app everything works as expected. However, whenever I simulate a mobile device in chrome as soon as I play the video I get the following error:

cld-video-player.min.js:1 VIDEOJS: ERROR: TypeError: Cannot read property 'update' of undefined
    at i.a [as update_] (cld-video-player.min.js:1)
    at i.n [as update] (cld-video-player.min.js:1)
    at d.r (cld-video-player.min.js:1)
    at HTMLDivElement.r (cld-video-player.min.js:1)
    at HTMLDivElement.u.dispatcher (cld-video-player.min.js:1)
    at Ce (cld-video-player.min.js:1)
    at d.Qi [as trigger] (cld-video-player.min.js:1)
    at d.xi.(anonymous function) [as handleTechTimeupdate_] (http://localhost/Framework/Resources/Scripts/src/4_Modules/cld-video-player.min.js:1:427555)
    at f.r (cld-video-player.min.js:1)
    at HTMLVideoElement.r (cld-video-player.min.js:1)

Here's the stack trace for the unminified version:

VIDEOJS: ERROR: TypeError: Cannot read property 'update' of undefined
    at SeekBar.update_ (cld-video-player.js:22932)
    at SeekBar.update (cld-video-player.js:22951)
    at bound (cld-video-player.js:12876)
    at SeekBar.throttled [as update] (cld-video-player.js:12909)
    at Player.bound (cld-video-player.js:12876)
    at HTMLDivElement.bound (cld-video-player.js:12876)
    at HTMLDivElement.data.dispatcher (cld-video-player.js:12499)
    at trigger (cld-video-player.js:12631)
    at Player.trigger$$1 [as trigger] (cld-video-player.js:13492)
    at Player.(anonymous function) [as handleTechTimeupdate_] (http://localhost/Framework/Resources/Scripts/src/4_Modules/cld-video-player.js:33522:17)

I using the same codebase for both desktop and mobile.

[aditimadan-Cloudinary]

Can you please share the code and I will try and reproduce it on my end.

[adzhazhev]

I am using TypeScript. This is how video tags are initialized.

Simple reproduction would be like in the following screenshot: http://prntscr.com/mq98xl

The files are loaded from your CDN.

<link href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css" rel="stylesheet">

<script src="https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js"
        type="text/javascript"></script>

public static initPlayer(accountName, publicId) {
    const cld = cloudinary.Cloudinary.new({ cloud_name: accountName });
    const demoplayer = cld.videoPlayer(publicId);

    demoplayer.source(publicId, {
        sourceTypes: ['hls'], transformation: {
            streaming_profile: 'hd'
        }
    });
}

If that's not enough I can upload my sample PoC ASP. NET project in github for full reproduction, but I believe it should be the same.

[Stevenlee731]

I am also having this issue on mobile -- using the same cdn as the above user.

[adzhazhev]

Did you find anything @aditimadan-Cloudinary ?

[aditimadan-Cloudinary]

I tried reproducing the issue but was unable to do so. Can you please open a support ticket here: https://support.cloudinary.com/hc/en-us/requests/new specifying the param values you are getting for const demoplayer = cld.videoPlayer(publicId); the account's cloud name and the publicId you are using and I will try and reproduce the issue.

[d-mendoza]

We were able to reproduce the issue and have passed it along to our development team. Once we get updates from them, we will notify on this thread.

[vangelov-i]

@aditimadan-Cloudinary, @d-mendoza, I can confirm the issue is fixed in 1.1.3, but now it breaks IE11, while it worked in 1.1.1

[d-mendoza]

@vangelov-i Is it the same error as before or a different error? Can you share the error you are seeing?

[vangelov-i]

@d-mendoza, it's different error. You can see it on your demo page (https://demo.cloudinary.com/video-player/) when you open in IE11. There's an error in the console and the player is missing.

Something unrelated I want to ask is whether I should open a new issue for the following: 1.1.3 on iOS (Safari and Chrome), the videos appear as expected and are working, but if you don't play anything and just wait for about a minute, a console error appears and the players play buttons disappear. The error is TypeError: null is not an object (evaluating 'this.videojs.error().code') In 1.1.1 the behavior is the same, but no console error appears.

[d-mendoza]

@vangelov-i Thank you for reporting this. I am raising it to our dev team.

[ghost]

@adzhazhev @vangelov-i @Stevenlee731 Can you please try using the latest edge version and tell us if the problem is solved? https://unpkg.com/cloudinary-video-player@1.1.4-edge.5/dist/cld-video-player.min.js also make sure you're using the later core (2.6.3)

[vangelov-i]

@maoznir, the initial problem for this issue is resolved:

• [x] No more console errors, while playing a video in a mobile view
• [x] IE11 is working again

But what I've mentioned about iOS (Safari and Chrome) still occurs both for 1.1.4-edge.5 and 1.1.4-edge.7 I don't know whether this is in your scope for this issue, but if it's not, we can create a separate one, right?

Here is a screenshot of the error that's caused after ~1 min (without clicking any play buttons)

Edit: I did some debugging and here I have some interesting findings. The error is being thrown after a minute, because of this snippet. The default timeout is 55000 (55 sec)

`_this.reTryVideo = function (maxNumberOfCalls, timeout) { if (!_this.isVideoReady()) { if (_this.nbCalls < maxNumberOfCalls) { _this.nbCalls++;

      _this.videojs.setTimeout(_this.reTryVideo, timeout);
    } else {
      var e = new Error('Video is not ready please try later');

      _this.videojs.trigger('error', e);
    }
  }
};`

_this.isVideoReady() always returns false. The first time we hit _this.videojs.setTimeout(_this.reTryVideo, timeout); causes the function to be called without parameters, making it go straight to the else statement where it throws the error. Sad thing is I couldn't make it work even if I tweak it runtime to make it make few more tries. For some reason _this.isVideoReady() is never true for Chrome and Safari on iOS, even though the videos can be played if you do it before these 55 secs elapse

[ghost]

@vangelov-i thank you for the update! we'll look into it.

[alvindrakes]

Hello, we are using next-cloudinary video player on

 "next": "14.0.3"
 "next-cloudinary": "5.10.0"

And also experiencing the same error on IOS mobile.

Any pointers on how to fix it?

Here's a screenshot of chrome inspect on iOS:

[tommyg-cld]

@alvindrakes do you have the video URL that is failing or is this happening with any video files? You can also take a look at this sample if it helps: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-cldvideoplayer

[alvindrakes]

@tommyg-cld Hey Tommy thanks for the reply!

The website works fine on desktop so it can't be video url errors.

You can test it out in chrome iOS and verify on your side on mobile.

https://zenno-studio-website-redesigned-2023.vercel.app/en/works

Just want to isolate the issue.

Can it be a performance issue?

Code for the video player:

<CldVideo
              key={result.public_id}
              id={result.public_id}
              width={result.width}
              height={result.height}
              src={result.public_id}
              bigPlayButton={false}
              loop={true}
              autoShowRecommendations={false}
              hideContextMenu={true}
              controls={false}
              autoplay="always"
              muted={true}
              fluid={true}
              playsinline={true}
              analytics={false}
              quality="auto:best"
              preload="metadata"
              allowUsageReport={false}
              sourceTypes={["mp4/h265", "mp4"]}
              className="mb-3 rounded-3xl"
            />

[tommyg-cld]

@alvindrakes it's possible it's because you using h265 codec, if you use h264 for testing does it work on mobile?