HTML5 video play() not playing ionic 3 "ios and an

Question

I have been searching for a long time and have tried a lot of approaches but nothing seems to be working. I have a video tag which I want to be played when I tap over it. I am working on Ionic 3 and angular. The code is shown below. Please help me out or direct me if I missed anything.

HTML:

    <video id="edit-video-element"
     width="100%"
     [src]="videoPath"
     webkit-playsinline
     poster="{{thumbnailPath}}" controls autobuffer >
    </video>

.ts file

    this.video = document.getElementsByTagName('video')[0];

    onVideoClick(e) {
     (this.video.paused) ? this.video.play() : this.video.pause();
    }

Its not displaying any issues, but not working at all.

Update:

    <video *ngIf="hasVideo" width="100%" controls autoplay>
     <source [src]="videoPath" type="video/mp4">
    </video>

I added this and then in the .ts file I have the videoPath as:

file:///private/var/mobile/Containers/Data/Application/99091302-995E-40C7-AF66-0E07BCF09220/tmp/trim.E4AE7B29-06BB-4077-A56A-B546A53267DC.MOV

Update: I was able to make it work for the files from photo album I had to install "DomSanitizer" and then add _DomSanitizationService.bypassSecurityTrustUrl(yourFilePath) in my video tag.

Answer 1

Try this out. It's working fine for me.

Html

 <video #videoPlayer class="video-player" controls></video>

TS

 @ViewChild('videoPlayer') mVideoPlayer: any;

  ionViewDidLoad() {
    let video = this.mVideoPlayer.nativeElement;
    video.src = 'http://techslides.com/demos/sample-videos/small.mp4';
    video.play();
  }

sass

 .video-player {
    width: 100%;
    height: 100%;
  }