qualabs · sebastianpiq · Nov 7, 2024 · Nov 19, 2024 · Nov 19, 2024 · Nov 20, 2024
diff --git a/samples/overlays/lib/img/dashjs-logo.png b/samples/overlays/lib/img/dashjs-logo.png
diff --git a/samples/overlays/overlays.html b/samples/overlays/overlays.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Dash.js Rocks</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    </head>
+    <body>
+        <div class="container py-4">
+            <header class="pb-3 mb-4 border-bottom">
+                <img src="./lib/img/dashjs-logo.png" width="200">
+            </header>
+
+            <div class="btn-group mb-2">
+                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    Select Case
+                </button>
+                <div class="dropdown-menu" id="assetDropdown">
+                    <a class="dropdown-item" href="#" data-url="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/Overlay/case8-b/case0.mpd">Case 0: Video</a>
+                    <a class="dropdown-item" href="#" data-url="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/Overlay/case8-b/case1.mpd">Case 1: Iframe</a>
+                    <a class="dropdown-item" href="#" data-url="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/Overlay/case8-b/case2.mpd">Case 2: Preloading</a>
+                    <a class="dropdown-item" href="#" data-url="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/Overlay/case8-b/case3.mpd">Case 3: L shaped</a>
+                    <a class="dropdown-item" href="#" data-url="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/Overlay/case8-b/case4.mpd">Case 4: Looped</a>
+                    <a class="dropdown-item" href="#" data-url="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/Overlay/case8-b/case5.mpd">Case 5: Logo</a>
+                    <a class="dropdown-item" href="#" data-url="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/Overlay/case8-b/case6.mpd">Case 6: Extend</a>
+                    <a class="dropdown-item" href="#" data-url="https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/Overlay/case8-b/case8.mpd">Case 7: Out bounds</a>
+                </div>
+            </div>
+
+            <div class="dash-video-player">
+                <div class="videoContainer" id="videoContainer">
+                    <video id="main-video" preload="auto"></video>
+                    <div id="overlay"></div>
+                </div>
+            </div>
+
+            <div class="py-2">
+                <button id="playButton" type="button" class="btn btn-primary">Play/Pause</button>
+            </div>
+        </div>
+
+        <script src="../../dist/dash.all.debug.js"></script>
+        <script>
+            (function () {
+                const video = document.querySelector("video");
+                const overlay = document.getElementById("overlay");
+                const playButton = document.getElementById("playButton");
+                const assetDropdown = document.getElementById("assetDropdown");
+
+                const player = dashjs.MediaPlayer().create();
+                player.initialize();
+                player.updateSettings({
+                    debug: {
+                        logLevel: dashjs.Debug.LOG_LEVEL_DEBUG,
+                    },
+                });
+                player.setAutoPlay(false);
+                player.attachView(video);
+                player.attachOverlayRenderingDiv(overlay);
+
+                let currentAsset = "https://comcast-dash-6-assets.s3.us-east-2.amazonaws.com/Overlay/case8-b/case0.mpd";
+                player.attachSource(currentAsset);
+
+                playButton.addEventListener("click", () => {
+                    if (video.paused) {
+                        video.play();
+                    } else {
+                        video.pause();
+                    }
+                });
+
+                assetDropdown.addEventListener("click", (event) => {
+                    const target = event.target;
+                    if (target.tagName === "A" && target.dataset.url) {
+                        currentAsset = target.dataset.url;
+                        player.attachSource(currentAsset);
+                    }
+                });
+            })();
+        </script>
+    </body>
+</html>
diff --git a/src/dash/constants/DashConstants.js b/src/dash/constants/DashConstants.js
@@ -122,6 +122,7 @@ export default {
     MPD: 'MPD',
     ORIGINAL_MPD_ID: 'mpdId',
     ORIGINAL_PUBLISH_TIME: 'originalPublishTime',
+    OVERLAY: 'OverlayEvent',
     PATCH_LOCATION: 'PatchLocation',
     PERIOD: 'Period',
     PRESENTATION_TIME: 'presentationTime',

diff --git a/src/dash/models/DashManifestModel.js b/src/dash/models/DashManifestModel.js
@@ -1061,6 +1061,12 @@ function DashManifestModel() {
                     } else {
                         event.id = null;
                     }
+                    if (currentMpdEvent.hasOwnProperty(DashConstants.OVERLAY)) {
+                        event.overlay = currentMpdEvent.OverlayEvent;
+                        if (event.overlay.earliestResolutionTime) {
+                            event.calculatedPresentationTime -= event.overlay.earliestResolutionTime / eventStream.timescale;
+                        }
+                    }
 
                     if (currentMpdEvent.Signal && currentMpdEvent.Signal.Binary) {
                         // toString is used to manage both regular and namespaced tags

diff --git a/src/streaming/MediaPlayer.js b/src/streaming/MediaPlayer.js
@@ -39,6 +39,7 @@ import CatchupController from './controllers/CatchupController.js';
 import ServiceDescriptionController from '../dash/controllers/ServiceDescriptionController.js';
 import ContentSteeringController from '../dash/controllers/ContentSteeringController.js';
 import MediaController from './controllers/MediaController.js';
+import OverlayController from './controllers/OverlayController.js';
 import BaseURLController from './controllers/BaseURLController.js';
 import ManifestLoader from './ManifestLoader.js';
 import ErrorHandler from './utils/ErrorHandler.js';
@@ -144,6 +145,7 @@ function MediaPlayer() {
         schemeLoaderFactory,
         timelineConverter,
         mediaController,
+        overlayController,
         protectionController,
         metricsReportingController,
         mssHandler,
@@ -257,6 +259,9 @@ function MediaPlayer() {
         if (config.mediaController) {
             mediaController = config.mediaController;
         }
+        if (config.overlayController) {
+            overlayController = config.overlayController;
+        }
         if (config.settings) {
             settings = config.settings;
         }
@@ -328,6 +333,10 @@ function MediaPlayer() {
                 mediaController = MediaController(context).getInstance();
             }
 
+            if (!overlayController) {
+                overlayController = OverlayController(context).getInstance();
+            }
+
             if (!streamController) {
                 streamController = StreamController(context).getInstance();
             }
@@ -413,6 +422,10 @@ function MediaPlayer() {
                 videoModel
             });
 
+            overlayController.setConfig({
+                videoModel
+            });
+
             mediaPlayerModel.setConfig({
                 playbackController,
                 serviceDescriptionController
@@ -472,6 +485,9 @@ function MediaPlayer() {
         if (customParametersModel) {
             customParametersModel.reset();
         }
+        if (overlayController) {
+            overlayController.reset()
+        }
 
         settings.reset();
 
@@ -1468,6 +1484,16 @@ function MediaPlayer() {
         return videoModel ? videoModel.getTTMLRenderingDiv() : null;
     }
 
+    /**
+     * Returns instance of Div that was attached by calling attachOverlayRenderingDiv()
+     * @returns {Object}
+     * @memberof module:MediaPlayer
+     * @instance
+     */
+    function getOverlayRenderingDiv() {
+        return videoModel ? videoModel.getOverlayRenderingDiv() : null;
+    }
+
     /**
      * Use this method to attach an HTML5 div for dash.js to render rich TTML subtitles.
      *
@@ -1490,6 +1516,18 @@ function MediaPlayer() {
         videoModel.setVttRenderingDiv(div);
     }
 
+    function attachOverlayRenderingDiv(overlayDiv) {
+        const videoElement = videoModel.getElement();
+        if (!videoElement) {
+            throw ELEMENT_NOT_ATTACHED_ERROR;
+        }
+
+        overlayController.configureVideoElementForOverlay();
+        videoModel.setOverlayRenderingDiv(overlayDiv);
+
+        overlayController.setupOverlayEvents();
+    }
+
     /*
     ---------------------------------------------------------------------------
 
@@ -2088,6 +2126,12 @@ function MediaPlayer() {
             _resetPlaybackControllers();
         }
 
+        const overlayDiv = videoModel.getOverlayRenderingDiv() 
+
+        if (overlayDiv) {
+            overlayController.reset();
+        }
+
         if (isReady()) {
             _initializePlayback(providedStartTime);
         }
@@ -2740,6 +2784,7 @@ function MediaPlayer() {
         attachProtectionController,
         attachSource,
         attachTTMLRenderingDiv,
+        attachOverlayRenderingDiv,
         attachView,
         attachVttRenderingDiv,
         clearDefaultUTCTimingSources,
@@ -2778,6 +2823,7 @@ function MediaPlayer() {
         getSource,
         getStreamsFromManifest,
         getTTMLRenderingDiv,
+        getOverlayRenderingDiv,
         getTargetLiveDelay,
         getTracksFor,
         getTracksForTypeFromManifest,

diff --git a/src/streaming/constants/Constants.js b/src/streaming/constants/Constants.js
@@ -341,5 +341,14 @@ export default {
         DTSC: 'dtsc',
         AVC: 'avc',
         HEVC: 'hevc'
+    },
+
+    OVERLAY: {
+        SCHEME_ID: 'urn:scte:dash:scte214-events',
+        START_MODE: 'start',
+        STOP_MODE: 'stop',
+        EXTEND_MODE: 'extend',
+        VIDEO_MIMETYPE: 'video/mp4',
+        IFRMAE_MIMETYPE: 'text/html'
     }
 }