BUG: iOS cannot load dependencies when their link starts with //, it uses ionic: protocol instead of http:

[nmiticlevi9]

Bug Report

[x] 4.x
Current behavior:
iOS Smartphones cannot lazily load jwplayer dependencies, because their links start with two slashes "//". The error code displayed in JWPlayer is (Error Code: 101104), which indicate that the dependencies were unable to load.
Expected behavior:
By default, http or https protocols should be used to load dependencies from the internet.
Steps to reproduce:
Here is a bug repro: https://github.com/nmiticlevi9/jwplayer-cordova-ionic4-http-issue
It is an empty Ionic4 project, with JWPlayer added.
JWPlayer tries to load it's dependencies using links such as this one: //ssl.p.jwpcdn.com/player/v/8.11.1/jwpsrv.js.
Notice that the link starts with //..... This makes the app use the default ionic: protocol, instead of https or http. This means that the request URL becomes ionic://ssl.p.jwpcdn.com/player/v/8.11.1/jwpsrv.js. Of course, those requests fail and the player is unable to load it's dependencies.

The dependencies that are causing the problem are being constructed here (this snippet is from the prettified version of the https://ssl.p.jwpcdn.com/player/v/8.11.10/jwplayer.js)

function O(t) {
    var e = "file:" === window.location.protocol ? "https:" : "", n = {
      jwpsrv: "//ssl.p.jwpcdn.com/player/v/8.11.10/jwpsrv.js",
      dai: "//ssl.p.jwpcdn.com/player/plugins/dai/v/0.4.9/dai.js",
      vast: "//ssl.p.jwpcdn.com/player/plugins/vast/v/8.7.9/vast.js",
      googima: "//ssl.p.jwpcdn.com/player/plugins/googima/v/8.7.9/googima.js",
      freewheel: "//ssl.p.jwpcdn.com/player/plugins/freewheel/v/2.2.7/freewheel.js",
      gapro: "//ssl.p.jwpcdn.com/player/plugins/gapro/v/2.1.5/gapro.js"
    }[t];
    return n ? e + n : ""
  }

All the url's that are starting with "//" are failing to load because of the problem described above.

Ionic info:

$ ionic info
Ionic:
   Ionic CLI : 5.4.9
Utility:
   cordova-res : not installed
   native-run  : 0.2.9 (update available: 0.3.0)
System:
   NodeJS : v12.13.0
   npm    : 6.12.0
   OS     : macOS 10.15

Thank you JWPlayer team for all the work you've done,
Hopefully we will be able to resolve this issue as well!

[waxidiotic]

Hi @nmiticlevi9. Thanks for the bug report. Let me take a look at this and I'll let you know what I find.

Thanks again!

[waxidiotic]

Hi @nmiticlevi9. First, I should inform you that we do not officially support the use of the player within some mobile frameworks, such as Ionic.

I did, however, take a look at the repo you sent over and found that you can resolve the issue by adding a base configuration option to the player config in tab2.page.ts.

    jwplayer('jwplayerid').setup({
      // autostart: this.autoPlay,
      autostart: false,
      base: "https://ssl.p.jwpcdn.com/player/v/8.11.10/",
      controls: true,
      file: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
      width: 400,
      stretching: 'uniform',
      aspectratio: '16:9',
      sdkplatform: 'true',
    });

Now, you would have to manually change the version number in the URL every time the player is updated so it's a bit of a hack, but it should work.

Also, I noticed you were embedding the player by linking directly to the CDN. Please do not do this! You should embed the URL of a cloud-hosted player from your JW Player account.

[nmiticlevi9]

Thank you for a very fast response and for taking the time to actually look into the problem more in depth.

I've tried using the base parameter but, when i do, then it fails to load jwpsrv.js, because it still tries to load it from ionic://ssl.p.jwpcdn.com/player/v/8.11.10/jwpsrv.js. Even though this jwpsrv.js file is not loaded the player still works correctly and plays the video. Is there any way to force the jwplayer to load jwpsrv from the provided base path from the configuration?

And as for loading the jwplayer directly from CDN, yes in our actual app, we are using the url provided in our JWPlayer account, I just loaded the script directly from cdn because of example purposes. :)

Thank you once again

[waxidiotic]

Sorry about that! I forgot that the base option doesn't include jwpsrv.js. The reason for that is that it is our analytics plugin and is updated independently of the player.

You can workaround this by adding the following to your configuration:

analytics: {
  client: 'https://ssl.p.jwpcdn.com/player/v/8.11.10/jwpsrv.js'
}

As for loading the player from the CDN - understood. Just wanted to make sure!

[ghost]

Thanks a lot @waxidiotic, this really helped us out!

[nmiticlevi9]

I'll have to interfere here a bit more :D

After loading the analytics client from predefined url, then it tries to fetch the ionic://prd.jwpltx.com/v1/jwplayer6/ping.gif, and guess what, it has ionic:// prefix in it and fails to load :)

Thank you once again for getting this close to fixing this

[waxidiotic]

I double-checked with an Engineer that is more familiar with the analytics plugin than I am and it looks like there wouldn't be a way to change the request for ping.gif.

So this means two things:

1. You won't get any analytics for JW Player for views/plays within your Ionic app.
2. You can remove the analytics block from the configuration since it's probably better to have one failed request for jwpsrv.js than numerous for ping.gif.

[nmiticlevi9]

You are completely right that it's better to have 1 failing request than to have a multiple ping.gif errors. We will go with this for now.
Would be even better to know whether in the future you will support these kind of platforms such as ionic, so that it's window.location.protocol does not interfere with JWPlayer's external dependencies loading process.

Thank you very much for helping us get this as resolved as possible. Wish you all the best!