HTML5 audio and video controls (Ionic 5)

@ebellempire wrote:

I am having a couple issues using the HTML <audio> and <video> tags on iOS devices.

For one, the audio controls only include the play/pause button and volume (and – while playing – the Airplay control). No seek control or duration.

Secondly, the controls occasionally become invisible, though they continue to work. This one also applies to video files.

Below is a screenshot depicting the issue. It may be worth pointing out that both audio and video are presented in a segment, and sometimes switching segments back and forth will fix the issue.

Screen Shot 2020-05-12 at 9.32.50 AM1848×1808 438 KB

Here is the code for this segment…

    <div *ngSwitchCase="'audio'" class="segment-content">
      <div class="padded-list">
        <ion-list-header mode="md"> Audio </ion-list-header>
        <ion-list *ngIf="media && media.audio.length">
          <ion-item *ngFor="let file of media.audio; let i = index">
            <ion-label>
              <h3
                class="ion-text-wrap"
                [innerHTML]="helpers.smarten(file.title)"
              ></h3>
              <p
                [innerHTML]="helpers.smarten(file.description)"
                class="ion-text-wrap"
              ></p>
              <audio controls preload="auto">
                <source type="audio/mpeg" [src]="file.url" />
                [unable to load audio]
              </audio>
            </ion-label>
          </ion-item>
        </ion-list>
      </div>
    </div>

I’m using Capacitor and trying to minimize the use of compatible Cordova plugins, and I’d also like to avoid rolling my own media controls (which I’ve done in previous versions of the app).

Any advice would be appreciated.

Posts: 1

Participants: 1

Read full topic