HLS player updates

submodules/TelegramUniversalVideoContent/HlsBundle/index.bundle.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkmyhls=self.webpackChunkmyhls||[]).push([[57],{368:()=>{function t(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var e,s,i,r,n,a={exports:{}};e=/^(?=((?:[a-zA-Z0-9+\-.]+:)?))\1(?=((?:\/\/[^\/?#]*)?))\2(?=((?:(?:[^?#\/]*\/)*[^;?#\/]*)?))\3((?:;[^?#]*)?)(\?[^#]*)?(#[^]*)?$/,s=/^(?=([^\/?#]*))\1([^]*)$/,i=/(?:\/|^)\.(?=\/)/g,r=/(?:\/|^)\.\.\/(?!\.\.\/)[^\/]*(?=\/)/g,a.exports=n={buildAbsoluteURL:function(t,e,i){if(i=i||{},t=t.trim(),!(e=e.trim())){if(!i.alwaysNormalize)return t;var r=n.parseURL(t);if(!r)throw new Error("Error trying to parse base URL.");return r.path=n.normalizePath(r.path),n.buildURLFromParts(r)}var a=n.parseURL(e);if(!a)throw new Error("Error trying to parse relative URL.");if(a.scheme)return i.alwaysNormalize?(a.path=n.normalizePath(a.path),n.buildURLFromParts(a)):e;var o=n.parseURL(t);if(!o)throw new Error("Error trying to parse base URL.");if(!o.netLoc&&o.path&&"/"!==o.path[0]){var l=s.exec(o.path);o.netLoc=l[1],o.path=l[2]}o.netLoc&&!o.path&&(o.path="/");var h={scheme:o.scheme,netLoc:a.netLoc,path:null,params:a.params,query:a.query,fragment:a.fragment};if(!a.netLoc&&(h.netLoc=o.netLoc,"/"!==a.path[0]))if(a.path){var d=o.path,c=d.substring(0,d.lastIndexOf("/")+1)+a.path;h.path=n.normalizePath(c)}else h.path=o.path,a.params||(h.params=o.params,a.query||(h.query=o.query));return null===h.path&&(h.path=i.alwaysNormalize?n.normalizePath(a.path):a.path),n.buildURLFromParts(h)},parseURL:function(t){var s=e.exec(t);return s?{scheme:s[1]||"",netLoc:s[2]||"",path:s[3]||"",params:s[4]||"",query:s[5]||"",fragment:s[6]||""}:null},normalizePath:function(t){for(t=t.split("").reverse().join("").replace(i,"");t.length!==(t=t.replace(r,"")).length;);return t.split("").reverse().join("")},buildURLFromParts:function(t){return t.scheme+t.netLoc+t.path+t.params+t.query+t.fragment}};var o=a.exports;function l(t,e){var s=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),s.push.apply(s,i)}return s}function h(t){for(var e=1;e<arguments.length;e++){var s=null!=arguments[e]?arguments[e]:{};e%2?l(Object(s),!0).forEach((function(e){c(t,e,s[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):l(Object(s)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(s,e))}))}return t}function d(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var s=t[Symbol.toPrimitive];if(void 0!==s){var i=s.call(t,e||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}function c(t,e,s){return(e=d(e))in t?Object.defineProperty(t,e,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[e]=s,t}function u(){return u=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var s=arguments[e];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(t[i]=s[i])}return t},u.apply(this,arguments)}const f=Number.isFinite||function(t){return"number"==typeof t&&isFinite(t)},g=Number.isSafeInteger||function(t){return"number"==typeof t&&Math.abs(t)<=m},m=Number.MAX_SAFE_INTEGER||9007199254740991;let p=function(t){return t.MEDIA_ATTACHING="hlsMediaAttaching",t.MEDIA_ATTACHED="hlsMediaAttached",t.MEDIA_DETACHING="hlsMediaDetaching",t.MEDIA_DETACHED="hlsMediaDetached",t.BUFFER_RESET="hlsBufferReset",t.BUFFER_CODECS="hlsBufferCodecs",t.BUFFER_CREATED="hlsBufferCreated",t.BUFFER_APPENDING="hlsBufferAppending",t.BUFFER_APPENDED="hlsBufferAppended",t.BUFFER_EOS="hlsBufferEos",t.BUFFER_FLUSHING="hlsBufferFlushing",t.BUFFER_FLUSHED="hlsBufferFlushed",t.MANIFEST_LOADING="hlsManifestLoading",t.MANIFEST_LOADED="hlsManifestLoaded",t.MANIFEST_PARSED="hlsManifestParsed",t.LEVEL_SWITCHING="hlsLevelSwitching",t.LEVEL_SWITCHED="hlsLevelSwitched",t.LEVEL_LOADING="hlsLevelLoading",t.LEVEL_LOADED="hlsLevelLoaded",t.LEVEL_UPDATED="hlsLevelUpdated",t.LEVEL_PTS_UPDATED="hlsLevelPtsUpdated",t.LEVELS_UPDATED="hlsLevelsUpdated",t.AUDIO_TRACKS_UPDATED="hlsAudioTracksUpdated",t.AUDIO_TRACK_SWITCHING="hlsAudioTrackSwitching",t.AUDIO_TRACK_SWITCHED="hlsAudioTrackSwitched",t.AUDIO_TRACK_LOADING="hlsAudioTrackLoading",t.AUDIO_TRACK_LOADED="hlsAudioTrackLoaded",t.SUBTITLE_TRACKS_UPDATED="hlsSubtitleTracksUpdated",t.SUBTITLE_TRACKS_CLEARED="hlsSubtitleTracksCleared",t.SUBTITLE_TRACK_SWITCH="hlsSubtitleTrackSwitch",t.SUBTITLE_TRACK_LOADING="hlsSubtitleTrackLoading",t.SUBTITLE_TRACK_LOADED="hlsSubtitleTrackLoaded",t.SUBTITLE_FRAG_PROCESSED="hlsSubtitleFragProcessed",t.CUES_PARSED="hlsCuesParsed",t.NON_NATIVE_TEXT_TRACKS_FOUND="hlsNonNativeTextTracksFound",t.INIT_PTS_FOUND="hlsInitPtsFound",t.FRAG_LOADING="hlsFragLoading",t.FRAG_LOAD_EMERGENCY_ABORTED="hlsFragLoadEmergencyAborted",t.FRAG_LOADED="hlsFragLoaded",t.FRAG_DECRYPTED="hlsFragDecrypted",Line truncated
+"use strict";(self.webpackChunkmyhls=self.webpackChunkmyhls||[]).push([[57],{368:()=>{function t(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var e,s,i,r,n,a={exports:{}};e=/^(?=((?:[a-zA-Z0-9+\-.]+:)?))\1(?=((?:\/\/[^\/?#]*)?))\2(?=((?:(?:[^?#\/]*\/)*[^;?#\/]*)?))\3((?:;[^?#]*)?)(\?[^#]*)?(#[^]*)?$/,s=/^(?=([^\/?#]*))\1([^]*)$/,i=/(?:\/|^)\.(?=\/)/g,r=/(?:\/|^)\.\.\/(?!\.\.\/)[^\/]*(?=\/)/g,a.exports=n={buildAbsoluteURL:function(t,e,i){if(i=i||{},t=t.trim(),!(e=e.trim())){if(!i.alwaysNormalize)return t;var r=n.parseURL(t);if(!r)throw new Error("Error trying to parse base URL.");return r.path=n.normalizePath(r.path),n.buildURLFromParts(r)}var a=n.parseURL(e);if(!a)throw new Error("Error trying to parse relative URL.");if(a.scheme)return i.alwaysNormalize?(a.path=n.normalizePath(a.path),n.buildURLFromParts(a)):e;var o=n.parseURL(t);if(!o)throw new Error("Error trying to parse base URL.");if(!o.netLoc&&o.path&&"/"!==o.path[0]){var l=s.exec(o.path);o.netLoc=l[1],o.path=l[2]}o.netLoc&&!o.path&&(o.path="/");var h={scheme:o.scheme,netLoc:a.netLoc,path:null,params:a.params,query:a.query,fragment:a.fragment};if(!a.netLoc&&(h.netLoc=o.netLoc,"/"!==a.path[0]))if(a.path){var d=o.path,c=d.substring(0,d.lastIndexOf("/")+1)+a.path;h.path=n.normalizePath(c)}else h.path=o.path,a.params||(h.params=o.params,a.query||(h.query=o.query));return null===h.path&&(h.path=i.alwaysNormalize?n.normalizePath(a.path):a.path),n.buildURLFromParts(h)},parseURL:function(t){var s=e.exec(t);return s?{scheme:s[1]||"",netLoc:s[2]||"",path:s[3]||"",params:s[4]||"",query:s[5]||"",fragment:s[6]||""}:null},normalizePath:function(t){for(t=t.split("").reverse().join("").replace(i,"");t.length!==(t=t.replace(r,"")).length;);return t.split("").reverse().join("")},buildURLFromParts:function(t){return t.scheme+t.netLoc+t.path+t.params+t.query+t.fragment}};var o=a.exports;function l(t,e){var s=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),s.push.apply(s,i)}return s}function h(t){for(var e=1;e<arguments.length;e++){var s=null!=arguments[e]?arguments[e]:{};e%2?l(Object(s),!0).forEach((function(e){c(t,e,s[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(s)):l(Object(s)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(s,e))}))}return t}function d(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var s=t[Symbol.toPrimitive];if(void 0!==s){var i=s.call(t,e||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:String(e)}function c(t,e,s){return(e=d(e))in t?Object.defineProperty(t,e,{value:s,enumerable:!0,configurable:!0,writable:!0}):t[e]=s,t}function u(){return u=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var s=arguments[e];for(var i in s)Object.prototype.hasOwnProperty.call(s,i)&&(t[i]=s[i])}return t},u.apply(this,arguments)}const f=Number.isFinite||function(t){return"number"==typeof t&&isFinite(t)},g=Number.isSafeInteger||function(t){return"number"==typeof t&&Math.abs(t)<=m},m=Number.MAX_SAFE_INTEGER||9007199254740991;let p=function(t){return t.MEDIA_ATTACHING="hlsMediaAttaching",t.MEDIA_ATTACHED="hlsMediaAttached",t.MEDIA_DETACHING="hlsMediaDetaching",t.MEDIA_DETACHED="hlsMediaDetached",t.BUFFER_RESET="hlsBufferReset",t.BUFFER_CODECS="hlsBufferCodecs",t.BUFFER_CREATED="hlsBufferCreated",t.BUFFER_APPENDING="hlsBufferAppending",t.BUFFER_APPENDED="hlsBufferAppended",t.BUFFER_EOS="hlsBufferEos",t.BUFFER_FLUSHING="hlsBufferFlushing",t.BUFFER_FLUSHED="hlsBufferFlushed",t.MANIFEST_LOADING="hlsManifestLoading",t.MANIFEST_LOADED="hlsManifestLoaded",t.MANIFEST_PARSED="hlsManifestParsed",t.LEVEL_SWITCHING="hlsLevelSwitching",t.LEVEL_SWITCHED="hlsLevelSwitched",t.LEVEL_LOADING="hlsLevelLoading",t.LEVEL_LOADED="hlsLevelLoaded",t.LEVEL_UPDATED="hlsLevelUpdated",t.LEVEL_PTS_UPDATED="hlsLevelPtsUpdated",t.LEVELS_UPDATED="hlsLevelsUpdated",t.AUDIO_TRACKS_UPDATED="hlsAudioTracksUpdated",t.AUDIO_TRACK_SWITCHING="hlsAudioTrackSwitching",t.AUDIO_TRACK_SWITCHED="hlsAudioTrackSwitched",t.AUDIO_TRACK_LOADING="hlsAudioTrackLoading",t.AUDIO_TRACK_LOADED="hlsAudioTrackLoaded",t.SUBTITLE_TRACKS_UPDATED="hlsSubtitleTracksUpdated",t.SUBTITLE_TRACKS_CLEARED="hlsSubtitleTracksCleared",t.SUBTITLE_TRACK_SWITCH="hlsSubtitleTrackSwitch",t.SUBTITLE_TRACK_LOADING="hlsSubtitleTrackLoading",t.SUBTITLE_TRACK_LOADED="hlsSubtitleTrackLoaded",t.SUBTITLE_FRAG_PROCESSED="hlsSubtitleFragProcessed",t.CUES_PARSED="hlsCuesParsed",t.NON_NATIVE_TEXT_TRACKS_FOUND="hlsNonNativeTextTracksFound",t.INIT_PTS_FOUND="hlsInitPtsFound",t.FRAG_LOADING="hlsFragLoading",t.FRAG_LOAD_EMERGENCY_ABORTED="hlsFragLoadEmergencyAborted",t.FRAG_LOADED="hlsFragLoaded",t.FRAG_DECRYPTED="hlsFragDecrypted",Line truncated

submodules/TelegramUniversalVideoContent/PlayerSource/src/MediaSourceStub.js

@@ -57,6 +57,7 @@ export class SourceBufferStub extends EventTarget {
         window.bridgeObjectMap[this.bridgeId] = this;
 
         window.bridgeInvokeAsync(this.bridgeId, "SourceBuffer", "constructor", {
+            "mediaSourceId": this.mediaSource.bridgeId,
             "mimeType": mimeType
         });
     }
@@ -146,6 +147,7 @@ export class MediaSourceStub extends EventTarget {
         this._duration = NaN;
 
         window.bridgeInvokeAsync(this.bridgeId, "MediaSource", "constructor", {
+            "id": this.internalId
         });
 
         // Simulate asynchronous opening of MediaSource
@@ -167,14 +169,25 @@ export class MediaSourceStub extends EventTarget {
         const sourceBuffer = new SourceBufferStub(this, mimeType);
         this.sourceBuffers._add(sourceBuffer);
         this.activeSourceBuffers._add(sourceBuffer);
+
+        window.bridgeInvokeAsync(this.bridgeId, "MediaSource", "updateSourceBuffers", {
+            "ids": this.sourceBuffers._buffers.map((sb) => sb.bridgeId)
+        }).then((result) => {
+        })
+
         return sourceBuffer;
     }
 
     removeSourceBuffer(sourceBuffer) {
         if (!this.sourceBuffers._remove(sourceBuffer)) {
-        throw new DOMException('SourceBuffer not found', 'NotFoundError');
+            throw new DOMException('SourceBuffer not found', 'NotFoundError');
         }
         this.activeSourceBuffers._remove(sourceBuffer);
+
+        window.bridgeInvokeAsync(this.bridgeId, "MediaSource", "updateSourceBuffers", {
+            "ids": this.sourceBuffers._buffers.map((sb) => sb.bridgeId)
+        }).then((result) => {
+        })
     }
 
     endOfStream(error) {

submodules/TelegramUniversalVideoContent/PlayerSource/src/VideoElementStub.js

@@ -2,9 +2,11 @@ import { TimeRangesStub } from "./TimeRangesStub.js"
 import { TextTrackStub, TextTrackListStub } from "./TextTrackStub.js"
 
 export class VideoElementStub extends EventTarget {
-    constructor() {
+    constructor(id) {
         super();
 
+        this.instanceId = id;
+
         this.bridgeId = window.nextInternalId;
         window.nextInternalId += 1;
         window.bridgeObjectMap[this.bridgeId] = this;
@@ -23,13 +25,14 @@ export class VideoElementStub extends EventTarget {
         this.autoplay = false;
         this.controls = false;
         this.error = null;
-        this.src = '';
+        this._src = '';
         this.videoWidth = 0;
         this.videoHeight = 0;
         this.textTracks = new TextTrackListStub();
         this.isWaiting = false;
 
         window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "constructor", {
+            "instanceId": this.instanceId
         });
 
         setTimeout(() => {
@@ -52,6 +55,7 @@ export class VideoElementStub extends EventTarget {
             this.dispatchEvent(new Event('seeking'));
 
             window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "setCurrentTime", {
+                "instanceId": this.instanceId,
                 "currentTime": value
             }).then((result) => {
                 this.dispatchEvent(new Event('seeked'));
@@ -59,6 +63,33 @@ export class VideoElementStub extends EventTarget {
         }
     }
 
+    get src() {
+        return this._src;
+    }
+
+    set src(value) {
+        this._src = value;
+        var media = window.mediaSourceMap[this._src];
+        if (media) {
+            window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "setMediaSource", {
+                "instanceId": this.instanceId,
+                "mediaSourceId": media.bridgeId
+            }).then((result) => {
+            })
+        }
+    }
+
+    removeAttribute(name) {
+        if (name === "src") {
+            this._src = "";
+        }
+    }
+
+    querySelectorAll(name) {
+        const fragment = document.createDocumentFragment();
+        return fragment.querySelectorAll('*');
+    }
+
     bridgeUpdateBuffered(value) {
         const updatedRanges = value;
         var ranges = [];
@@ -103,6 +134,7 @@ export class VideoElementStub extends EventTarget {
     play() {
         if (this.paused) {
             return window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "play", {
+                "instanceId": this.instanceId,
             }).then((result) => {
                 this.dispatchEvent(new Event('play'));
                 this.dispatchEvent(new Event('playing'));
@@ -118,6 +150,7 @@ export class VideoElementStub extends EventTarget {
             this.dispatchEvent(new Event('pause'));
 
             return window.bridgeInvokeAsync(this.bridgeId, "VideoElement", "pause", {
+                "instanceId": this.instanceId,
             }).then((result) => {
             })
         }
@@ -131,43 +164,12 @@ export class VideoElementStub extends EventTarget {
         return window.mediaSourceMap[this.src];
     }
 
-    /*_simulateTimeUpdate() {
-        if (this._isPlaying) {
-            // Simulate time progression
-            setTimeout(() => {
-                var bufferedEnd = 0.0;
-                
-                const media = this._getMedia();
-                if (media) {
-                    if (media.sourceBuffers.length != 0) {
-                        this.buffered = media.sourceBuffers._buffers[0].buffered;
-                        bufferedEnd = this.buffered.length == 0 ? 0 : this.buffered.end(this.buffered.length - 1);
-                    }
-                }
-
-                // Consume buffered data
-                if (this.currentTime < bufferedEnd) {
-                    // Advance currentTime
-                    this._currentTime += 0.1 * this.playbackRate; // Increment currentTime
-                    this.dispatchEvent(new Event('timeupdate'));
-
-                    // Continue simulation
-                    this._simulateTimeUpdate();
-                } else {
-                    console.log("Buffer underrun");
-                    // Buffer underrun
-                    this._isPlaying = false;
-                    this.paused = true;
-                    this.dispatchEvent(new Event('waiting'));
-                    // The player should react by buffering more data
-                }
-            }, 100);
-        }
-    }*/
-
     addTextTrack(kind, label, language) {
         const textTrack = new TextTrackStub(kind, label, language);
         this.textTracks._add(textTrack);
         return textTrack;
     }
+
+    load() {
+    }
 }

submodules/TelegramUniversalVideoContent/PlayerSource/src/index.js

@@ -40,13 +40,11 @@ export function bridgeInvokeCallback(callbackId, result) {
     }
 }
 
-var useStubs = true;
-
 window.nextInternalId = 0;
 window.mediaSourceMap = {};
 
 // Replace the global MediaSource with our stub
-if (useStubs && typeof window !== 'undefined') {
+if (typeof window !== 'undefined') {
     window.MediaSource = MediaSourceStub;
     window.ManagedMediaSource = MediaSourceStub;
     window.SourceBuffer = SourceBufferStub;
@@ -57,178 +55,171 @@ if (useStubs && typeof window !== 'undefined') {
     };
 }
 
-
-function postPlayerEvent(eventName, eventData) {
+function postPlayerEvent(id, eventName, eventData) {
     if (window.webkit && window.webkit.messageHandlers) {
-        window.webkit.messageHandlers.performAction.postMessage({'event': eventName, 'data': eventData});
-    }
-};
-
-var video;
-var hls;
-
-var isManifestParsed = false;
-var isFirstFrameReady = false;
-
-var currentTimeUpdateTimeout = null;
-
-export function playerInitialize(params) {
-    video.muted = false;
-
-    video.addEventListener('loadeddata', (event) => {
-        if (!isFirstFrameReady) {
-            isFirstFrameReady = true;
-            refreshPlayerStatus();
-        }
-    });
-    video.addEventListener("playing", function() {
-        refreshPlayerStatus();
-    });
-    video.addEventListener("pause", function() { 
-        refreshPlayerStatus();
-    });
-    video.addEventListener("seeking", function() { 
-        refreshPlayerStatus();
-    });
-    video.addEventListener("waiting", function() { 
-        refreshPlayerStatus();
-    });
-
-    hls = new Hls({
-        startLevel: 0,
-        testBandwidth: false,
-        debug: params['debug'] || true,
-        autoStartLoad: false,
-        backBufferLength: 30,
-        maxBufferLength: 60,
-        maxMaxBufferLength: 60,
-        maxFragLookUpTolerance: 0.001,
-        nudgeMaxRetry: 10000
-    });
-    hls.on(Hls.Events.MANIFEST_PARSED, function() {
-        isManifestParsed = true;
-        refreshPlayerStatus();
-    });
-
-    hls.on(Hls.Events.LEVEL_SWITCHED, function() {
-        refreshPlayerStatus();
-    });
-    hls.on(Hls.Events.LEVELS_UPDATED, function() {
-        refreshPlayerStatus();
-    });
-
-    hls.loadSource('master.m3u8');
-    hls.attachMedia(video);
-}
-
-export function playerLoad(initialLevelIndex) {
-    hls.startLevel = initialLevelIndex;
-    hls.startLoad(-1, false);
-}
-
-export function playerPlay() {
-    video.play();
-}
-
-export function playerPause() {
-    video.pause();
-}
-
-export function playerSetBaseRate(value) {
-    video.playbackRate = value;
-}
-
-export function playerSetLevel(level) {
-    if (level >= 0) {
-        hls.currentLevel = level;
-    } else {
-        hls.currentLevel = -1;
+        window.webkit.messageHandlers.performAction.postMessage({'instanceId': id, 'event': eventName, 'data': eventData});
     }
 }
 
-export function playerSeek(value) {
-    video.currentTime = value;
-}
+export class HlsPlayerInstance {
+    constructor(id) {
+        this.id = id;
+        this.isManifestParsed = false;
+        this.currentTimeUpdateTimeout = null;
+        this.video = new VideoElementStub(this.id);
+    }
 
-export function playerSetIsMuted(value) {
-    video.muted = value;
-}
-
-function getLevels() {
-    var levels = [];
-    for (var i = 0; i < hls.levels.length; i++) {
-        var level = hls.levels[i];
-        levels.push({
-            'index': i,
-            'bitrate': level.bitrate || 0,
-            'width': level.width || 0,
-            'height': level.height || 0
+    playerInitialize(params) {
+        this.video.addEventListener("playing", () => {
+            this.refreshPlayerStatus();
         });
-    }
-    return levels;
-}
-
-function refreshPlayerStatus() {
-    var isPlaying = false;
-    if (!video.paused && !video.ended && video.readyState > 2) {
-        isPlaying = true;
+        this.video.addEventListener("pause", () => { 
+            this.refreshPlayerStatus();
+        });
+        this.video.addEventListener("seeking", () => { 
+            this.refreshPlayerStatus();
+        });
+        this.video.addEventListener("waiting", () => { 
+            this.refreshPlayerStatus();
+        });
+    
+        this.hls = new Hls({
+            startLevel: 0,
+            testBandwidth: false,
+            debug: params['debug'] || true,
+            autoStartLoad: false,
+            backBufferLength: 30,
+            maxBufferLength: 60,
+            maxMaxBufferLength: 60,
+            maxFragLookUpTolerance: 0.001,
+            nudgeMaxRetry: 10000
+        });
+        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            this.isManifestParsed = true;
+            this.refreshPlayerStatus();
+        });
+    
+        this.hls.on(Hls.Events.LEVEL_SWITCHED, () => {
+            this.refreshPlayerStatus();
+        });
+        this.hls.on(Hls.Events.LEVELS_UPDATED, () => {
+            this.refreshPlayerStatus();
+        });
+    
+        this.hls.loadSource(params["urlPrefix"] + "master.m3u8");
+        this.hls.attachMedia(this.video);
     }
 
-    postPlayerEvent('playerStatus', {
-        'isReady': isManifestParsed,
-        'isFirstFrameReady': isFirstFrameReady,
-        'isPlaying': !video.paused,
-        'rate': isPlaying ? video.playbackRate : 0.0,
-        'defaultRate': video.playbackRate,
-        'levels': getLevels(),
-        'currentLevel': hls.currentLevel
-    });
+    playerLoad(initialLevelIndex) {
+        this.hls.startLevel = initialLevelIndex;
+        this.hls.startLoad(-1, false);
+    }
 
-    refreshPlayerCurrentTime();
+    playerPlay() {
+        this.video.play();
+    }
 
-    if (isPlaying) {
-        if (currentTimeUpdateTimeout == null) {
-            currentTimeUpdateTimeout = setTimeout(() => {
-                refreshPlayerCurrentTime();
-            }, 200);
+    playerPause() {
+        this.video.pause();
+    }
+
+    playerSetBaseRate(value) {
+        this.video.playbackRate = value;
+    }
+
+    playerSetLevel(level) {
+        if (level >= 0) {
+            this.hls.currentLevel = level;
+        } else {
+            this.hls.currentLevel = -1;
         }
-    } else {
-        if(currentTimeUpdateTimeout != null){
-            clearTimeout(currentTimeUpdateTimeout);
-            currentTimeUpdateTimeout = null;
+    }
+
+    playerSeek(value) {
+        this.video.currentTime = value;
+    }
+
+    playerSetIsMuted(value) {
+        this.video.muted = value;
+    }
+
+    getLevels() {
+        var levels = [];
+        for (var i = 0; i < this.hls.levels.length; i++) {
+            var level = this.hls.levels[i];
+            levels.push({
+                'index': i,
+                'bitrate': level.bitrate || 0,
+                'width': level.width || 0,
+                'height': level.height || 0
+            });
         }
+        return levels;
+    }
+
+    refreshPlayerStatus() {
+        var isPlaying = false;
+        if (!this.video.paused && !this.video.ended && this.video.readyState > 2) {
+            isPlaying = true;
+        }
+    
+        postPlayerEvent(this.id, 'playerStatus', {
+            'isReady': this.isManifestParsed,
+            'isPlaying': !this.video.paused,
+            'rate': isPlaying ? this.video.playbackRate : 0.0,
+            'defaultRate': this.video.playbackRate,
+            'levels': this.getLevels(),
+            'currentLevel': this.hls.currentLevel
+        });
+    
+        this.refreshPlayerCurrentTime();
+    
+        if (isPlaying) {
+            if (this.currentTimeUpdateTimeout == null) {
+                this.currentTimeUpdateTimeout = setTimeout(() => {
+                    this.refreshPlayerCurrentTime();
+                }, 200);
+            }
+        } else {
+            if(this.currentTimeUpdateTimeout != null){
+                clearTimeout(this.currentTimeUpdateTimeout);
+                this.currentTimeUpdateTimeout = null;
+            }
+        }
+    }
+
+    refreshPlayerCurrentTime() {
+        postPlayerEvent(this.id, 'playerCurrentTime', {
+            'value': this.video.currentTime
+        });
+        this.currentTimeUpdateTimeout = setTimeout(() => {
+            this.refreshPlayerCurrentTime()
+        }, 200);
     }
 }
 
-function refreshPlayerCurrentTime() {
-    postPlayerEvent('playerCurrentTime', {
-        'value': video.currentTime
+window.invokeOnLoad = function() {
+    postPlayerEvent(this.id, 'windowOnLoad', {
     });
-    currentTimeUpdateTimeout = setTimeout(() => {
-        refreshPlayerCurrentTime()
-    }, 200);
 }
 
 window.onload = () => {
-    if (useStubs) {
-        video = new VideoElementStub();
-    } else {
-        video = document.createElement('video');
-        video.playsInline = true;
-        video.controls = true;
-        document.body.appendChild(video);
-    }
-
-    postPlayerEvent('windowOnLoad', {
-    });
+    window.invokeOnLoad();
 };
 
-window.playerInitialize = playerInitialize;
-window.playerLoad = playerLoad;
-window.playerPlay = playerPlay;
-window.playerPause = playerPause;
-window.playerSetBaseRate = playerSetBaseRate;
-window.playerSetLevel = playerSetLevel;
-window.playerSeek = playerSeek;
-window.playerSetIsMuted = playerSetIsMuted;
-window.bridgeInvokeCallback = bridgeInvokeCallback;
+window.hlsPlayer_instances = {};
+
+window.hlsPlayer_makeInstance = function(id) {
+    window.hlsPlayer_instances[id] = new HlsPlayerInstance(id);
+}
+
+window.hlsPlayer_destroyInstance = function(id) {
+    const instance = window.hlsPlayer_instances[id];
+    if (instance) {
+        delete window.hlsPlayer_instances[id];
+        instance.video.pause();
+        instance.hls.destroy();
+    }
+}
+
+window.bridgeInvokeCallback = bridgeInvokeCallback;