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

Posted 2023-03-05

【中文标题】HTML5 视频播放（）不播放 ionic 3“ios 和 android

【英文标题】：HTML5 video play() not playing ionic 3 "ios and android

【发布时间】：2017-11-21 05:20:01

【问题描述】：

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

html：

    <video id="edit-video-element"
     
     [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"  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)。

【问题讨论】：

您可能需要处理用户手势才能在移动设备中呼叫MediaElement.play()。

@kaiido - 我以前做过，但那也行不通。甚至在那之前我也看不到视频。

【参考方案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%;
  

【讨论】：

感谢您的回答，因为这是权限问题，所以我能够使其正常工作。由于应用程序不知道系统级文件并且无法访问，除非提供它不知道该文件。我必须给它允许访问的权限，然后给它“_DomSanitizationService.bypassSecurityTrustUrl”让它出现在屏幕上。

我遇到的问题是来自画廊的本地网址。它正在使用 http 链接