HTML5视频播放（）不播放离子3“ios和android [英] HTML5 video play() not playing ionic 3 "ios and android

问题描述

我一直在寻找很长一段时间并尝试了很多方法，但似乎没有任何工作。我有一个视频标签，当我点击它时，我想要播放它。我正在研究Ionic 3和棱角分明。代码如下所示。如果我遗漏了任何内容，请帮帮我或指导我。

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.

更新：

    <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视频播放（）不播放离子3“ios和android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！