Ionic LoadingController 中的 HTML5 视频加载答案

【问题标题】：HTML5 video loading in Ionic LoadingControllerIonic LoadingController 中的 HTML5 视频加载
【发布时间】：2020-02-04 20:57:44
【问题描述】：

我有一个 HTML5 视频元素，它在 LoadingController（Ionic 框架）中显示 mp4 视频。我的问题是显示加载器后视频没有立即加载，我可以看到 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();
    });
  });

我还尝试将海报图像放入视频标记和打字稿中，但没有帮助摆脱默认缩略图。 Preload="auto" 也不起作用。

感谢您的帮助。

【问题讨论】：

标签： android html typescript ionic-framework video

【解决方案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();
        });
      });

【讨论】：