HLS.js options to support subtitle

To configure HLS.js to support subtitles, you need to include specific options in your HLS.js setup. Here’s how you can do it:

1. Include HLS.js in Your Project

Ensure you have HLS.js included in your project, either via a CDN or by installing it using npm/yarn.

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

Or if using npm/yarn:

npm install hls.js

2. Basic HLS.js Setup with Subtitle Support

<video id="video1" controls preload="auto" width="720" height="420"></video><br>
<style>
video::cue {
	font-size: var(--cue-font-size, 16px); /* Default to 16px */
	font-family: Arial, sans-serif;
}
</style>
<script type="text/javascript">
function adjustCueFontSize() {
	const video = document.getElementById('video1');
	const videoWidth = video.clientWidth;
	const fontSize = videoWidth * 0.03; // Adjust this multiplier as needed
	video.style.setProperty('--cue-font-size', fontSize + 'px');
	console.log( "adjustCueFontSize", fontSize);
}

// Adjust font size when the video size changes
document.getElementById('video1').addEventListener('loadedmetadata', adjustCueFontSize);
document.getElementById('video1').addEventListener('resize', adjustCueFontSize);

// Monitor resizing using ResizeObserver for dynamic content
const resizeObserver = new ResizeObserver(() => adjustCueFontSize());
resizeObserver.observe(document.getElementById('video1'));

adjustCueFontSize(); // Initial adjustment


function load_video( streaming_url )
{
	var video1 = document.getElementById("video1");
	if (Hls.isSupported())
	{
		var _hlsOptions =
		{
			"debug": false,
			xhrSetup: function(xhr, url)
			{
			},
			fetchSetup: (url, headers) => {
				return fetch(url, { headers }).then(response => {
					return response;
				});
			}
		};
		
		var hlsvideo1 = new Hls(_hlsOptions);
		hlsvideo1.loadSource( streaming_url );
		hlsvideo1.attachMedia(video1);

		// Enable subtitle support
		hlsvideo1.subtitleDisplay = true;

		// Set up event listeners for subtitle tracks
		hlsvideo1.on(
			Hls.Events.SUBTITLE_TRACKS_UPDATED,
			function (event, data) {
				const subtitleTracks = data.subtitleTracks;
				console.log('Available subtitle tracks:', subtitleTracks);

				// Set the default subtitle track, if desired
				if (subtitleTracks.length > 0) {
					hlsvideo1.subtitleTrack = 0; // Select the first subtitle track by default
				}
			}
		);

		// Listen for subtitle track changes
		hlsvideo1.on(
			Hls.Events.SUBTITLE_TRACK_SWITCH,
			function (event, data)
			{
				console.log('Subtitle track switched to:', data.id);
			}
		);

		hlsvideo1.on(Hls.Events.SUBTITLE_TRACK_LOADED, function () {
			console.log('Subtitle track loaded');
		});
	}
}
load_video( "{$url}" );

</script>

This HTML and JavaScript code is designed to load and play a video with dynamically adjustable subtitle (cue) font size based on the video's width. Here's a summary of the key functionalities:

1. Video Setup:
   • A <video> element is defined with controls and a specified width and height.
   • The video's subtitle (cue) font size is set via CSS and dynamically adjusted using a CSS variable (--cue-font-size).
2. Dynamic Subtitle Font Size:
   • The adjustCueFontSize function calculates the font size based on the video's width (3% of the width by default) and applies this size to the subtitles.
   • This function is triggered when the video's metadata is loaded, or the video is resized.
   • A ResizeObserver is used to monitor the video element for any resizing and to adjust the font size dynamically.
3. HLS Video Streaming:
   • The load_video function initializes the video player with support for HLS (HTTP Live Streaming).
   • If HLS is supported, the video stream is loaded from a given URL, and the video is attached to the video element.
   • Subtitle support is enabled, with event listeners to handle and log subtitle tracks and changes, such as when tracks are updated or switched.
4. Subtitle Management:
   • The script manages subtitle tracks, setting the first track as the default and handling events when subtitle tracks are loaded or switched.

3. Switching Subtitle Tracks

If you want to switch between subtitle tracks programmatically, you can do so by setting the hls.subtitleTrack property:

// Switch to the second subtitle track (index starts from 0)
hls.subtitleTrack = 1;