带有 Ion 幻灯片的 iOS 13 中 HTML5 音频控件消失了

Question

我们创建了一个使用 ionic 幻灯片的 Ionic 4 应用程序。每张幻灯片都包含一张照片、一个 HTML5 音频播放器和一些文本。第一张幻灯片上的 HTML5 音频播放器看起来不错，但随后的幻灯片最初会在播放器上显示时间控制 slider 和文本(运行时间数字)，但随后这些都在很短的时间(毫秒)后消失。但是，播放/暂停按钮仍会呈现，播放器本身将播放正确的音频流。幻灯片的其余部分看起来不错；只有音频播放器不完整。

音频播放器在我们测试过的所有 Android 实例以及 iOS 12 设备上都能正常工作。我们只看到 iOS 13 的问题。我们曾考虑使用另一个音频播放器，但我们的应用目前处于 beta 测试阶段，并且严重依赖 HTML5 音频播放器 API。关于我们可以尝试解决问题的任何想法？

尝试使用 Safari 运行 ionic serve 并且效果很好(在运行 Catalina 的 Mac 上)。还将 safari 附加到应用程序的运行实例，并且看不到第一张和第二张幻灯片的 HTML 元素之间有任何区别。

<ion-content>
  <ion-slides #slider :options.prop="slideOpts" [options]="slideOpts">
    <ion-slide>
      <div class="grid-container" [ngClass]="{ 'hide-text': hideContent}">
        <div class="image-area">
          <img src="../../assets/18.jpg" (click)="toggleText()">
        </div>
        <div class="audio-area">
          <audio controls>
            <source src="assets/audio/1.mp3">
          </audio>
        </div>
        <div class="divider-area">
          <hr>
        </div>
        <div class="vert-line"> </div>
        <div class="text-area">
          Text Area
        </div>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="grid-container" [ngClass]="{ 'hide-text': hideContent}">
        <div class="image-area">
          <img src="../../assets/19.jpg" (click)="toggleText()">
        </div>
        <div class="audio-area">
          <audio controls>
            <source src="assets/audio/2.mp3">
          </audio>
        </div>
        <div class="divider-area">
          <hr>
        </div>
        <div class="vert-line"> </div>
        <div class="text-area">
          Text Area
        </div>
      </div>
    </ion-slide>
    <ion-slide>
  </ion-slides>
</ion-content>

我希望每张幻灯片上的音频播放器具有与初始幻灯片相同的控件。

Answer 1

回复很晚，但我有一个 similar problem with an Ionic 5 app .

通过在更改事件上重新加载 HTML，我在最小化问题方面取得了一些有限的成功。

您可以尝试添加 <div class="audio-area" hidden>并使用 (ionSlideDidChange)="tryThis()"在 ion-slides .

tryThis() {
     setTimeout(() => {
       let elems = <NodeList>(
         document.querySelectorAll(".audio-area")
       );
       for (var i = 0; i < elems.length; i++) {
         let elem = <HTMLAnchorElement>elems[i];
         let inner = elem.innerHTML;
         elem.innerHTML = inner;
         elem.children[0].setAttribute("controls", "true");
         elem.children[0].setAttribute("preload", "metadata");
         elem.removeAttribute("hidden");
       }
     }, 300);
 }

这大大减少了我的问题，尽管它似乎最终会弹出，通常是在让应用程序闲置一段时间后。好奇你是否找到了一个好的解决方案。

(我会将此作为评论，但没有代表)