hls-player-js/hls-player.js

var player = document.getElementById('vid1');

class PlaylistLoader {
	constructor() {
		this.playlist_src = '/list/' + window.location.pathname.slice(6);
		this.last_segment = null;
		this.refresh_interval = null;
		this.new_segments = [];
		this.fetch_playlist();
	}

	fetch_playlist() {
		var xmlHttp = new XMLHttpRequest();
		xmlHttp.onreadystatechange = ( function() {
			if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
				this.parse_playlist(xmlHttp.responseText);
				setTimeout(this.fetch_playlist.bind(this), this.refresh_interval * 1000);
			}
		} ).bind(this)
		xmlHttp.open("GET", this.playlist_src, true);
		xmlHttp.send(null);
	}

	parse_playlist(playlist_content) {
		var lines = playlist_content.split('\n');
		var segments = [];
		var segment_block_flag = this.last_segment === null ? false : true;
		for (var i = 0; i < lines.length; i++) {
			if (lines[i].startsWith("#")) {
				if (lines[i].startsWith("EXT-X-TARGETDURATION", 1)) {
					this.refresh_interval = parseFloat(lines[i].split(':')[1]);
				}
			} else {
				if (segment_block_flag || lines[i] == '') {
					if (lines[i] == this.last_segment) {
						segment_block_flag = false;
					}
				} else {
					segments.push(lines[i]);
				}
			}
		}
		this.new_segments = segments;
		this.last_segment = segments.at(-1);
	}
}

var test = new PlaylistLoader();