Html5 video load vtt caption CORS error in WKWebview in iOS

Ionic Framework ionic-v3
1

Hi,

I have checked 3 similar threads (attached at end), but none is exactly the same issue as I have.

I have a html5 video tag that loads video from the phone local storage and a vtt file from remote AWS S3.
I have added crossorigin attribute in video tag

<video src="a-local-path-mp4-file" crossorigin="anonymous">
<track src="http://s3-path-to-vtt-file">
</video>

If I open the page in iOS (WKWebview plugin installed) for the first 3-4 times, the vtt file was loaded successfully.
Then it starts to give a CORS error Failed to load resource: Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

This issue does not appear in Android.

I have configured CORS in AWS S3 to even AllowedOrigin to http://* and https://*. Issue persists

An example CORS setting in AWS S3:

<CORSRule>
    <AllowedOrigin>http://localhost:8080</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

Any help is appreciated!

Br,
D



2

I opened an issue in github for this repo.

However, I found a walk around. remove crossorigin="anonymous" from video element.
I know it is anti-CORS-best-practice, but it just works…