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?