在iOS 13中，HTML5音频控件与Ion幻灯片消失了。

Question

我们有一个Ionic 4应用，我们创建了一个使用离子幻灯片的应用。 每张幻灯片包含一张照片、一个HTML5音频播放器和一些文本。 然而，播放暂停按钮仍然呈现，播放器本身会播放正确的音频流。 幻灯片的其他部分看起来很好，只是音频播放器不完整。

音频播放器在我们测试过的所有Android实例上都能正常工作，也能在iOS 12设备上工作。 我们只在iOS 13上看到这个问题。 我们曾考虑过使用另一个音频播放器，但我们的应用程序目前正处于测试阶段，并且严重依赖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

很晚才回复，但我有一个 类似问题与Ionic 5应用程序.

我通过在变化事件中重新加载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);
 }

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

(我本来想把这个作为评论留下，但没有代表)