JWPlayer with ionic/vue 6

bradisrad83 · February 14, 2023, 4:29pm

Does anyone have any insight on using JWPlayer with Ionic/Vue 6? In vue / web at my company the way that it was done before me was to create a script element and then set the src attribute to a CDN. Then in our modal if the item has a trailer we use the:
jwplayer('jwplayer).setup({}) method to inject the video into the DOM.
So now Im trying to figure out how I can do this when building a mobile app for the company. They’ve already said that it has to be JWPlayer there is no other option to them. So any resources / guides would be helpful.

Thanks you all so much.

twestrick · February 14, 2023, 10:22pm

It should work just like you are doing now in your web app. An Ionic app is nothing special, just like any other SPA. Are you running into any sort of issues?

I am using plyr.io to embed YouTube videos which adds an iframe in the DOM without any issues. You shouldn’t have any issues with JWPlayer.

bradisrad83 · February 14, 2023, 10:58pm

the video just doesn’t load. I don’t get any errors in the console just no video playing.

twestrick · February 14, 2023, 11:12pm

Can you share a code example of how you are trying to do it?

bradisrad83 · February 14, 2023, 11:19pm

So I stumbled across this:

github.com/jwplayer/jwplayer

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

opened 09:38AM - 26 Dec 19 UTC

closed 11:56AM - 02 Jan 20 UTC

nmiticlevi9

answered

# 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!

and after reading it and adding a base configuration option it does indeed work on the emulators and my iphone.

twestrick · February 14, 2023, 11:22pm

Interesting. I wonder why they are loading external js files instead of packaging them up with the main installation.

bradisrad83 · February 14, 2023, 11:34pm

yea that was why I was curious too. I guess the big thing is that if the version number changes i’ll have to update the app. So now debating the best route for that.