When HLS.js need to load m3u8 URL redirecting to the different URL (302 Redirection)

HLS.js, a JavaScript library used for streaming HLS (HTTP Live Streaming) video, typically supports video playback by fetching segments from a specified URL. However, it might encounter issues when dealing with URLs that use HTTP 302 redirection.

Why HLS.js Might Struggle with 302 Redirects:

1. Security Restrictions: Browsers impose strict cross-origin restrictions for media content to prevent unauthorized access. When a URL is redirected (via a 302 status), the final URL might point to a different domain, potentially triggering cross-origin resource sharing (CORS) issues.
2. Incorrect Handling of Redirects: If the 302 redirection is not handled correctly by the server or the HLS.js implementation, the library may fail to retrieve the video segments. HLS.js expects a straightforward URL that it can repeatedly request for segments, but redirection can introduce complexity.
3. Caching and Segment Fetching: Redirection might interfere with how segments are cached and fetched. HLS.js expects certain timing and consistency from segment URLs, and redirections can disrupt this flow.

Example Solution:

<video id="video1" controls preload="auto" width="320" height="180"></video><br>
<script type="text/javascript">
function load_video( streaming_url )
{
	var video1 = document.getElementById("video1");
	if (Hls.isSupported())
	{
		var _hlsOptions =
		{
			xhrSetup: function(xhr, url)
			{
			},
			fetchSetup: (url, headers) => {
				return fetch(url, { headers }).then(response => {
					// Ensure the response is followed correctly
					return response;
				});
			}
		};
		var hlsvideo1 = new Hls(_hlsOptions);
		hlsvideo1.loadSource( streaming_url );
		hlsvideo1.attachMedia(video1);
		hlsvideo1.on(
			Hls.Events.ERROR,
			function(event, data)
			{
				if (data.type === Hls.ErrorTypes.NETWORK_ERROR)
				{
					console.error('Network error:', data);
					if (data.details === Hls.ErrorDetails.MANIFEST_LOAD_ERROR || 
						data.details === Hls.ErrorDetails.FRAG_LOAD_ERROR)
					{
						console.error('CORS error: Unable to load the manifest due to cross-origin restrictions:', data);
						alert( 'CORS error: Unable to load the manifest due to cross-origin restrictions at ' + streaming_url);
					}
					else
					{
						console.error( 'Unknown error: ', data);
					}
				}
			}
		);
	}
}
load_video( "{$url}" );
</script>

Summary:

• HTML Video Element: A video element (<video>) with the ID video1 is defined to display the video with controls and a specified size.
• JavaScript Function (load_video):
  • Purpose: Loads a video stream from a given URL using HLS.
  • Process:
    • The function checks if HLS is supported by the browser.
    • If supported, it sets up options for HLS, including custom header handling through xhrSetup and fetchSetup.
    • An HLS object (hlsvideo1) is created with these options.
    • The video stream is loaded from the provided URL (streaming_url) and attached to the video element (video1).
    • Error handling is implemented to catch network-related errors, particularly focusing on CORS (Cross-Origin Resource Sharing) issues. If a CORS error is detected, an alert is displayed with details about the issue.

The code is designed to robustly handle potential errors, especially those related to network and CORS issues, ensuring a more reliable video streaming experience.

This should help mitigate the issues related to 302 redirects when using HLS.js.

If the client still face the CORS error, you should change the server settings like below:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization