m3u8 format file not playing - CORS issue

Question

When attempting to play an M3U8 file and some other formats using the Streamit live Player, the video content does not load properly.

Instead, we receive an error message indicating that the content cannot be played. I have attempted to use different M3U8 files, but the issue persists with each attempt.

We had a movie list in AWS bucket.

And we created url to add movie in our website. We used cloudfront domain and key of the video to create url.

For your reference some of the url's is mentioned below

https://d2vkl8k9v6nxyr.cloudfront.net/Movies/MOV_UHD_H264.m3u8

https://d2vkl8k9v6nxyr.cloudfront.net/Movies/Encoded_video/88074.m3u8

If we tried to play the movie in our streamit live streaming video player

We have faced CORS issue in player.

Please solve those issues and do needful.

Answer

First, you need to [configure CORS](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html) (cross-origin resource sharing) on your S3 bucket to allow requests to your bucket coming from the website.
For S3 to then return the correct CORS response headers, you need to enable those headers on CloudFront. For this, check out the Amazon S3 section on [this link](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-web-cors) or simply apply the [managed CORS-S3Origin policy](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-managed-origin-request-policies.html#managed-origin-request-policy-cors-s3) to your distribution.

m3u8 format file not playing - CORS issue

Relevant content