Firefox and Chrome browsers are not able to play .m3u8 videos unless CORS (Cross-Origin Resource Sharing) is enabled on the video hosting server.
When m3u8 videos are hosted on a server, then the response of the videos should be allowed to be consumed on other web domains (MAZ's sub-domain in our case). If the videos are not allowed to be consumed on other web domains, m3u8 videos can’t be played by the Chrome & Firefox browsers.
To allow other domains to consume m3u8 videos, the server that hosts those videos needs to allow cross-origin requests.
What is CORS
Cross-origin resource sharing (CORS) is a browser mechanism that enables controlled access to resources located outside of a given domain. CORS allows servers to specify who (i.e., which origins) can access the assets on the server, among many other things.
How to fix the m3u8 problem on Chrome and Firefox
This problem can be fixed by enabling CORS on the server that hosts the m3u8 videos.
How to Enable Cross-Origin Resource Sharing (CORS)
By default, web browsers do not allow websites to make cross-origin requests in certain security-sensitive situations. To tell browsers to allow cross-origin requests to a site that belongs to you, you can use cross-origin resource sharing (CORS).
Cross-origin requests, also known as cross-site requests, occur when a web page on one domain makes requests to URLs on a different domain.
You can enable sending CORS headers from your app by adding the following in a .htaccess file in your app's web root directory (public):
Header always set Access-Control-Allow-Origin "https://example.com"