问题描述

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

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 文件

    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.

更新:

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

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

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

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

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

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.

推荐答案

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

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

这篇关于HTML5 视频播放()不播放 ionic 3“ios 和 android"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！