Tip: play video file from Directory.data on iOS

[ArneTN]

This is more a tip, rather than an issue. I struggled a bit with playing video file from Directory.data on iOS, but it turned out it was related to the iOS Simulator.

In my app, I download video files to Directory.data (for offline use). The following code gave me the message "filePath not implemented" in the iOS Simulator. However, it worked perfectly on a real device.

import { Directory, Filesystem,  StatOptions} from '@capacitor/filesystem';
import { Video } from 'src/assets/ts/video';

playVideo(){ 
      //First, check if file exists:
      this.checkIfFileExists("video.mp4", success, error);
  
      function success(uri:string, status:string){      
        let videoPlayer = new Video(uri);//This works on a real device, but does NOT work in the iOS Simulator in XCode.
      }
  
      function error(message:string){
        alert(message);
      }
}

async checkIfFileExists(path:string, success:any, error:any){
    try {
      const options:StatOptions​ = {
        path:path,
        directory: Directory.Data 
      }
  
      await Filesystem.stat(options).then(result => {      
        success(result.uri, result.type + ", " + (result.size/1000) + "kB");
     });

    } catch (e) {
      error(e);
    }
}

Video.ts:

import { CapacitorVideoPlayer, capVideoPlayerIdOptions, capVideoPlayerOptions } from "capacitor-video-player";
import { Capacitor } from '@capacitor/core';

export const setVideoPlayer = async (): Promise<any>=> {
    const platform = Capacitor.getPlatform();
    return {plugin:CapacitorVideoPlayer, platform};
};

export class Video{

    constructor(uri:string){
        this.loadVideo(uri);
    }

    async loadVideo(uri:string){
        let options:capVideoPlayerOptions = {
            mode:"fullscreen",
            url:uri,
            playerId: 'videoPlayerDiv',
            pipEnabled:false,
            displayMode:"sensor",
            chromecast:false
        }

        await CapacitorVideoPlayer.initPlayer(options);

        let playOptions:capVideoPlayerIdOptions = {
            playerId:"videoPlayerDiv"
        }

        await CapacitorVideoPlayer.play(playOptions);
    }

}

[jepiqueau]

@ArneTN i will have a look to implemented but i am travelling to end next week so not before

[ArneTN]

Thanks. I don't consider it to be a big issue as it works on a real device. However, it would be great if this issue was identified in the docs/readme. I also saw that it was mentioned in a closed issue, but I missed that at first. Thanks for a great plugin!

Regards,
ArneTN

[jepiqueau]

@ArneTN i come back to you as i start looking at it Can you explain me the displayMode:"sensor" i do not understand "sensor" for me it can be "landscape", "portrait"

[PhantomPainX]

@ArneTN i come back to you as i start looking at it Can you explain me the displayMode:"sensor" i do not understand "sensor" for me it can be "landscape", "portrait"

Maybe he refers to unlocked display mode, basically it can be achieved by not setting the displayMode

[ArneTN]

Sorry, the intention here was orientation based on device orientation (sensor). The documentation says "default: 'portrait'", so my parameter ("sensor") is a leftover from a series of trial-and-error. As PhantomPainX suggests, the correct behavior would probably be achieved by not setting the displayMode at all. I reckon the "sensor" parameter is just ignored in my case.

[jepiqueau]

@ArneTN @PhantomPainX thanks for the clarification. I will fix this 2 issues in the next release

[jepiqueau]

@ArneTN @PhantomPainX This has been fixed in 5.0.4-1. Can you check and close the issue after tests

[jepiqueau]

@ArneTN No reply from you so i assume it works so i close the issue