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

Question

我正在尝试用HTML5视频标签来构建带有视频列表的离子型3应用程序，并在屏幕上看到视频后自动播放，在IOS上一切正常运行，但我面临一个问题--视频在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视频标签，但是那些插件在全屏上播放视频，不可能在屏幕内使用离子本机插件播放视频。

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

我正试图从3个月前开始解决这个问题，但没有运气。

下面是一个简单的离子型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”>

视频盒组件ts代码：

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

Answer 1

最后，我通过移除人行横道来解决我的问题，在android上播放之前的视频延迟是由人行横道造成的，希望这将对其他人有所帮助。

Answer 2

我无法在你的home.ts中看到您的代码，请尝试如下：

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