1

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.

userG
  • 101
  • 1
  • 9
  • You probably need to be handling an user-gesture to be able to call `MediaElement.play()` in mobile devices. – Kaiido Jun 19 '17 at 06:25
  • @kaiido - I did do that before but that is also not working. Even before that I can not see the video as well. – userG Jun 20 '17 at 03:35

1 Answers1

3

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%;
  }
Anoop M Maddasseri
  • 10,213
  • 3
  • 52
  • 73
  • Thank you for the answer I was able to get it working as it was a permissions issue. Since the app is not aware of the system level file and has no access to unless provided it does not know about the file. I had to give it the permissions to allow the access and then "_DomSanitizationService.bypassSecurityTrustUrl" to make it appear on screen. – userG Jun 23 '17 at 04:35
  • The issue I was having was with the local url from the gallery. It was working with the http links – userG Jun 23 '17 at 04:36