HTML5 视频播放（）不播放 ionic 3“ios 和 android

Question

我已经搜索了很长时间并尝试了很多方法，但似乎没有任何效果。我有一个视频标签，当我点击它时我想播放它。我正在研究 Ionic 3 和 Angular。代码如下所示。如果我错过了什么，请帮助我或指导我。

HTML：

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

.ts 文件

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

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

它没有显示任何问题，但根本不起作用。

更新：

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

我添加了这个，然后在 .ts 文件中我的 videoPath 为：

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

更新： 我能够使它适用于相册中的文件 我必须安装“DomSanitizer”，然后在我的视频标签中添加 _DomSanitizationService.bypassSecurityTrustUrl(yourFilePath)。

Answer 1

试试这个。对我来说效果很好。

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%;
  }