在带有离子幻灯片的iOS 13中，HTML5音频控件消失

Question

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

音频播放器在我们测试过的所有安卓系统和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>并在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);
 }

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

(我会留下这篇评论，但没有代表)