HTML 5 видео тег, видео начинает воспроизводиться через 2-4 секунды на Android с помощью Ionic 3

Question

Я пытаюсь создать приложение, используя ionic 3 со списком видео каналов, используя тег HTML5 video, и автоматически воспроизводить видео, как только оно видно на экране, все работает нормально на IOS, но я сталкиваюсь с проблемой запуска Android на 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-тега видео, но эти плагины воспроизводят видео в полноэкранном режиме, невозможно воспроизвести видео внутри экрана с ионными родными плагинами.

Я пытался создать свой собственный плагин 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”>

Компонент Video Box, код:

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

Answer 1

Наконец-то я решил свою проблему, убрав пешеходный переход. Задержка видео перед воспроизведением на андроиде вызвана пешеходным переходом. Надеюсь, это поможет другим

Answer 2

Я не вижу ваш код в вашем home.ts , Попробуйте это:

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