Question

我正在尝试使用ionic 3和HTML5视频标签的供稿视频列表来构建应用程序，并在屏幕上看到视频后自动播放视频，在IOS上一切正常，但是我在android上遇到了视频启动问题2-4秒后播放，我认为preload ='auto'属性在android上无法正常工作。

我尝试使用所有本机离子插件（https://ionicframework.com/docs/native/streaming-media/，https://ionicframework.com/docs/native/video-player/，https://ionicframework.com/docs/native/android-exoplayer/）而不是html video标签，但是这些插件正在全屏播放视频，无法播放屏幕上带有离子本机插件的视频。

我试图构建自己的cordova插件，但这需要学习本机语言和平台，并学习如何在html中覆盖本机视图，这并不容易。

我想从3个月前开始解决此问题，但是没有运气。

这是一个简单的ionic 3应用，其中列出了6个视频，在Android上存在相同的问题：https://github.com/osa-aq/ionic-videos-android。

主页：

<video-box *ngFor=“let video of virtualScroller.viewPortItems” [video]=“video” no-padding>

视频框组件的html视图：

<video #videoE id="{{video.id}}" loop preload=“auto" webkit-playsinline=“webkit-playsinline” class=“videoPlayer”>

视频框组件的代码：

playVideo(video) {
   this.videoEl.nativeElement.classList.add("open");
   this.videoEl.nativeElement.play();
}

Answer 1

我在your home.ts中看不到您的代码，试试这个：

playVideo(video) {
   this.videoEl.nativeElement.classList.add("open");
   this.videoEl.nativeElement.addEventListener("canplay", () => {
     this.videoEl.nativeElement.play();
   }, true);
}

Answer 2

最后，我通过删除人行横道解决了我的问题，在Android上播放之前的视频延迟是由人行横道引起的，希望这会对其他人有所帮助

HTML 5视频标签，视频在2-4秒后使用Ionic 3在Android上开始播放

2 个答案: