Загрузка видео HTML5 в Ionic LoadingController

Question

У меня есть элемент видео HTML5, который показывает видео mp4 в LoadingController (Ionic framework). Моя проблема в том, что видео не сразу загружается после показа загрузчика, я вижу миниатюру / плакат по умолчанию для элемента видео html5 в течение 0,2 с, и сразу после этого показывается видео. Проблема возникает только на устройстве Android, устройства iOS воспроизводят видео мгновенно.

Код инициализации загрузчика:

var preloaderOptions: object ={
  spinner: 'hide',
  duration: 2500,
  message: `
      <div class="custom-spinner-container">
        <div class="custom-spinner-box">
          <video id="videoPlayer" autoplay muted loop playsinline webkit-playsinline preload="metadata">
              <source src="./assets/videos/loader.mp4" type="video/mp4" />
          </video>
          <p>`+loaderMessages[Math.floor(Math.random()*loaderMessages.length)]+`</p>
        </div>
      </div>`,
  cssClass: 'custom-loading'
};

this.preloaderController.create({...preloaderOptions}).then((preloader) => {
    this.preloader = preloader;
    preloader.present().then(el => {
      let video = this.preloader.getElementsByTagName('video')[0];
      video.autoplay= true;
      video.playsInline = true;
      video.muted = true;
      video.loop = true;
      video.preload="metadata";
      video.webkitPlaysInline = true;
      video.play();
    });
  });

Iтакже пытался поместить изображение плаката в видео разметку и машинописный текст, но не помогло избавиться от эскиза по умолчанию. Preload = "auto" тоже не работал.

Спасибо за помощь.

Answer 1

Хорошо, поэтому я исправил это, добавив белый постер в формате jpg, но ключом является показ видео непосредственно перед вызовом метода play ().

this.preloaderController.create({...preloaderOptions}).then((preloader) => {
        this.preloader = preloader;
        let video = this.preloader.getElementsByTagName('video')[0];
        video.style.display = "none";
        preloader.present().then(el => {
          video.autoplay= true;
          video.playsInline = true;
          video.muted = true;
          video.loop = true;
          video.preload="auto";
          video.poster = "./assets/images/loader_poster.jpg";
          video.style.display = "inline-block";
          video.webkitPlaysInline = true;
          video.play();
        });
      });