Added native PGS (graphical subtitle) rendering for external streams.

src/plugins/htmlVideoPlayer/plugin.js

@@ -100,7 +100,7 @@ function enableNativeTrackSupport(mediaSource, track) {
 
     if (track) {
         const format = (track.Codec || '').toLowerCase();
-        if (format === 'ssa' || format === 'ass') {
+        if (format === 'ssa' || format === 'ass' || format === 'pgssub') {
             return false;
         }
     }
@@ -213,6 +213,10 @@ export class HtmlVideoPlayer {
      * @type {any | null | undefined}
      */
     #currentAssRenderer;
+    /**
+     * @type {any | null | undefined}
+     */
+    #currentPgsRenderer;
     /**
      * @type {number | undefined}
      */
@@ -1172,6 +1176,12 @@ export class HtmlVideoPlayer {
             octopus.dispose();
         }
         this.#currentAssRenderer = null;
+
+        const pgsRenderer = this.#currentPgsRenderer;
+        if (pgsRenderer) {
+            pgsRenderer.dispose();
+        }
+        this.#currentPgsRenderer = null;
     }
 
     /**
@@ -1316,6 +1326,19 @@ export class HtmlVideoPlayer {
         });
     }
 
+    /**
+     * @private
+     */
+    renderPgs(videoElement, track, item) {
+        import('libpgs').then((libpgs) => {
+            const options = {
+                video: videoElement,
+                subUrl: getTextTrackUrl(track, item)
+            };
+            this.#currentPgsRenderer = new libpgs.PgsRenderer(options);
+        });
+    }
+
     /**
          * @private
          */
@@ -1434,6 +1457,10 @@ export class HtmlVideoPlayer {
                 this.renderSsaAss(videoElement, track, item);
                 return;
             }
+            if (format === 'pgssub') {
+                this.renderPgs(videoElement, track, item);
+                return;
+            }
 
             if (this.requiresCustomSubtitlesElement()) {
                 this.renderSubtitlesWithCustomElement(videoElement, track, item, targetTextTrackIndex);

src/scripts/browserDeviceProfile.js

@@ -48,6 +48,15 @@ function supportsTextTracks() {
     return _supportsTextTracks;
 }
 
+let _supportsCanvas2D;
+function supportsCanvas2D() {
+    if (_supportsCanvas2D == null) {
+        _supportsCanvas2D = document.createElement('canvas').getContext('2d') != null;
+    }
+
+    return _supportsCanvas2D;
+}
+
 let _canPlayHls;
 function canPlayHls() {
     if (_canPlayHls == null) {
@@ -1432,6 +1441,13 @@ export default function (options) {
                 Method: 'External'
             });
         }
+
+        if (supportsCanvas2D()) {
+            profile.SubtitleProfiles.push({
+                Format: 'pgssub',
+                Method: 'External'
+            });
+        }
     }
 
     profile.ResponseProfiles = [];