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

【问题标题】：HTML 5 video tag, Video start playing after 2-4 seconds on android using Ionic 3HTML 5 视频标签，使用 Ionic 3 在 android 上 2-4 秒后开始播放视频
【发布时间】：2019-01-10 19:52:47
【问题描述】：

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

我尝试使用所有本机 ionic 插件（https://ionicframework.com/docs/native/streaming-media/、https://ionicframework.com/docs/native/video-player/、https://ionicframework.com/docs/native/android-exoplayer/）而不是 html 视频标签，但这些插件正在全屏播放视频，它不可能在屏幕内使用 ionic 播放视频原生插件。

我尝试构建自己的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”>

视频框组件ts代码：

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

【问题讨论】：

标签： android html ionic-framework ionic3

【解决方案1】：

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

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

【讨论】：

这不会播放视频，当用户完成移动/跳到视频中的新位置时会发生搜索事件
“canplay”活动怎么样？就您的代码而言，没有事件侦听器。

【解决方案2】：

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

【讨论】：