Using "capacitor video player" unable to load video in ios (android works fine)

Capacitor
1

Using ionic version 6.17.0 and capacitor version 3.1.2 and have installed the capacitor-video-player plugin

async playVideo() {
console.log(‘>>> playing video’);
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);

this.videoPlayer.addListener(‘jeepCapVideoPlayerExit’, async (data: any) => {
console.log('>>> user exited player: ', data);
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
}, false);

this.videoPlayer.addListener(‘jeepCapVideoPlayerEnded’, async (data: any) => {
console.log('>>> player has finished: ', data);
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
}, false);

let slowwmoPlayer = await this.videoPlayer.initPlayer({
mode: ‘fullscreen’,
url: this.slowwmoPlace.clip,
playerId: ‘slowwmoVideo’
});
}

(this.slowwmoPlace.clip is an external url with an .mp4 file)

In Android I have no problems playing the video (and the screen shifts to landscape while being played as intended), but in ios the video doesn’t load with no obvious error. The console shows:

[Log] native CapacitorVideoPlayer.initPlayer (#77782303) (user-script:2, line 223)
[Log] Object (user-script:2, line 230)
callbackId: “77782303”
methodName: “initPlayer”
options: Object
mode: “fullscreen”
playerId: “slowwmoVideo”
url: “https://corkscrew.slowwmo.com/slowwmo-videos/busy_bees/7535.mp4”
Object Prototype
pluginId: “CapacitorVideoPlayer”
type: “message”
Object Prototype

[Log] Object (user-script:2, line 208)
method: “createVideoPlayerFullScreenView”
result: true
value: true

Then in XCode I see:

:zap: To Native → CapacitorVideoPlayer initPlayer 77782303
2021-08-22 13:50:01.723981+0200 App[24057:323493] <CATransformLayer: 0x600002a9aec0> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.724803+0200 App[24057:323493] <CATransformLayer: 0x600002a9b180> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.729249+0200 App[24057:323493] <CATransformLayer: 0x600002b6c180> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.732586+0200 App[24057:323493] <CATransformLayer: 0x600002b1a520> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.734504+0200 App[24057:323493] <CATransformLayer: 0x600002b14b80> - changing property masksToBounds in transform-only layer, will have no effect
2021-08-22 13:50:01.756149+0200 App[24057:323493] <CATransformLayer: 0x600002b6c180> - changing property allowsGroupBlending in transform-only layer, will have no effect
2021-08-22 13:50:01.756399+0200 App[24057:323493] <CATransformLayer: 0x600002b1a520> - changing property allowsGroupBlending in transform-only layer, will have no effect
:zap: TO JS {“value”:true,“result”:true,“method”:“createVideoPlayerFullScreenView”}
failing to load

I have ticked the Background Modes in XCode of “Audio, Airplay…”

Not really sure how to debug this further. Any help appreciated :grinning:

2

None of the coding examples I’ve found show it, but as when using videojs directly, you need to specify the video type not just its url (or src). So adding type: ‘video/mp4’ got ios working