0

I'm loading an external (Vimeo) .mp4 into a standard HTML5 Video tag within an Ionic Framework app, which is working fine except on iOS:

Vimeo's external link (e.g. https://player.vimeo.com/external/ ) forwards to an https://gcs-vimeo.akamaized.net address as they describe here.

On iOS the initial load is loaded from Source: Disk Cache. However, when navigating away from this page, or stopping and trying to replay the video, it returns a Status: 304 Not Modified response as it expects the video to be loaded from the cache again I expect. However, within the app the video is not loaded from cache and I just get a broken player (with the source not found).

The video Tag looks Like this: 

<div class="player">
  <video class="player__video viewer toggle" #exerciseVideo [src]="exercise.video | vimeoVideoUrl | safe:'resourceUrl'" [poster]="exercise.images[0] | awsImageUrl:'medium' | safe:'resourceUrl'" controls playsinline loop tappable></video>
</div>

Any help on how to load it from cache on the second play (ideally), or how to force a fresh network request each time would be greatly appreciated.

Taylorsuk
  • 1,419
  • 1
  • 16
  • 51

1 Answers1

0

I've tried everything on this including the following posts:

iOS: bug in AVPlayerItem when receiving `304 Not Modified` response

Embedded HTML 5 video is stored in the cache but is not displayed on iPad 2

However the absolute nuclear option I have had to implement to get this to work on iOS is the appending ?time-in-milliseconds

Done using the following code as an example: 

const currentDate = new Date();
const currentTime = currentDate.getTime();
return `${environment.VIMEO_SRC}${videoInput.video}${environment.VIMEO_SPEC_TRAIL}?${currentTime}`;

Welcome any other feedback.

Taylorsuk
  • 1,419
  • 1
  • 16
  • 51