Autoplay video & click for sound, play video from phone storage

Hello!

I’m trying to implement the following things:

(1) Being able to play a local video from the phones storage after you’ve chosen it (iPhone is what I tried this on)
(2) Autoplay inline-video when certain percentage of the videoplayer is on screen and being able to turn on sound when you click on the video

(1) Regarding the first question I am able to retrieve the videoUrl but it’s not playing. I read on another post that you have to remove /private/ part of the string to be able to play a video from local phone storage. I tried this without any success. However I hope the solution is close because I have the videoURL.

(2) Regarding my second question the video is autoplaying but it plays immediately and I am not able to turn on the videosound by clicking the video. The tutorial I’ve been following to implement this is this one. https://medium.com/@JordanBenge/ionic-4-autoplay-videos-on-scroll-6eb00213cdb4. However the part where you can decide when the video should get played [inViewportOptions]="{ threshold: [0, 0.65], partial: true }" gives me an error when I’m trying to implement it in my HTML-file.

(1) This is my html.file:

<div tappable (tap)="changeVideoAudio(video?.id)">
    <video [hidden]="hideChosenVideo"
           inViewport
           (inViewportAction)="onIntersection($event)"   
           playsinline loop
           [muted]="'muted'" preload="auto" muted="muted"
           poster="{{chosenVideoHolder}}"    
           id="video1" class="video-media">
       <source src="{{chosenVideoHolder}}" type="video/mp4" src="">
    </video> 
</div>

TS file to unmute:

public changeVideoAudio(id: string) {
    let vid: any = document.getElementById('media-' + id);
    vid.muted = !vid.muted;
}

(2)

To get video from local phone storage:

his.camera.getPicture(cameraOptions).then(async (videoUrl) => {
    f (videoUrl){
       let stringConv = String(videoUrl);
       let test123 = stringConv.replace('/private/', '');
       this.chosenVideoHolder = test123;
    }
});

HTML file

<video [hidden]="hideChosenVideo"
       inViewport
       (inViewportAction)="onIntersection($event)"   
       playsinline loop
       [muted]="'muted'" preload="auto" muted="muted"
       poster="{{chosenVideoHolder}}"    
       [id]="'media-' + video?.id">
    <source src="{{chosenVideoHolder}}" type="video/mp4" src="">
</video> 

To summarize, what I am hoping to get help with is what I have to change to play my local chosen video from the phone storage. I’m not sure if the problem is in the HTML-file or the TS-file when retrieving the videoURL.

For the other problem it seems that I’m using the inViewportOptions in a wrong way. Is there a way I can readjust or is there another way of implementing this kind of solution?

Is there anyone who who have an idea of a solution regarding my two questions?

Thank you in advance.