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.

@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:

• No more console errors, while playing a video in a mobile view
• 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

@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: