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

【问题标题】：HTML5 audio controls disappear in iOS 13 with Ion slides带有 Ion 幻灯片的 iOS 13 中 HTML5 音频控件消失了
【发布时间】：2020-02-18 14:04:45
【问题描述】：

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

音频播放器可在我们测试过的所有 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>

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

【问题讨论】：

标签： html ios audio ionic4 ion-slides

【解决方案1】：

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

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

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

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);
 }

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

（我会将此作为评论，但没有代表）

【讨论】：