Add TimingObject example (#4064)

Dash-Industry-Forum · Oct 18, 2022 · f588e59 · f588e59
1 parent 82d0778
commit f588e59
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 0 deletions.
diff --git a/samples/advanced/timing-object.html b/samples/advanced/timing-object.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Synchronization with a TimingObject</title>
+
+    <script src="../../dist/dash.all.debug.js"></script>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
+    <link href="../lib/main.css" rel="stylesheet">
+
+    <style>
+        video {
+            width: 640px;
+            height: 360px;
+        }
+    </style>
+
+    <script class="code" type="module">
+        window.init = () => {
+            const player = dashjs.MediaPlayer().create();
+            const url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
+            const video = document.querySelector("video");
+
+            player.initialize(video, url, false);
+
+            const pauseButton = document.getElementById("pause");
+            const playButton = document.getElementById("play");
+
+            Promise.all([
+                import('https://jspm.dev/npm:timing-object'),
+                import('https://jspm.dev/npm:timing-provider'),
+                import('https://jspm.dev/npm:timingsrc')
+            ]).then(([{ TimingObject }, { TimingProvider }, { setTimingsrc }]) => {
+                const timingObject = new TimingObject(new TimingProvider('V7X4LuPQMgtuspLtLy4i'));
+
+                pauseButton.addEventListener('click', () => {
+                    pauseButton.disabled = true;
+                    playButton.disabled = false;
+                    timingObject.update({ velocity: 0 });
+                });
+
+                playButton.addEventListener('click', () => {
+                    playButton.disabled = true;
+                    pauseButton.disabled = false;
+                    timingObject.update({ velocity: 1 });
+                });
+
+                timingObject.addEventListener('change', () => {
+                    const { velocity } = timingObject.query();
+
+                    if (velocity === 0) {
+                        pauseButton.disabled = true;
+                        playButton.disabled = false;
+                    } else {
+                        playButton.disabled = true;
+                        pauseButton.disabled = false;
+                    }
+                });
+
+                timingObject.addEventListener('readystatechange', () => {
+                    if (timingObject.readyState === 'open') {
+                        playButton.disabled = false;
+
+                        setTimingsrc(video, timingObject);
+                    }
+                });
+
+                video.addEventListener('ended', () => {
+                    pauseButton.disabled = true;
+                    playButton.disabled = false;
+                    timingObject.update({ position: 0 });
+                });
+            });
+        }
+    </script>
+</head>
+<body>
+
+<main>
+    <div class="container py-4">
+        <header class="pb-3 mb-4 border-bottom">
+            <img class=""
+                 src="../lib/img/dashjs-logo.png"
+                 width="200">
+        </header>
+        <div class="row">
+            <div class="col-md-4">
+                <div class="h-100 p-5 bg-light border rounded-3">
+                    <h3>Synchronization with a TimingObject</h3>
+                    <p>An example which shows how to connect a TimingObject (as defined in the <a href="https://webtiming.github.io/timingobject/">Timing Object specification</a>) to a dash.js player to synchronize playback across devices.</p>
+                    <p>When opening this page in multiple tabs or browsers the playback should be in sync.</p>
+                </div>
+            </div>
+            <div class="col-md-8">
+                <video></video>
+                <br>
+                <button id="play" disabled type="button">play</button>
+                <button id="pause" disabled type="button">pause</button>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12">
+                <div id="code-output"></div>
+            </div>
+        </div>
+        <footer class="pt-3 mt-4 text-muted border-top">
+            &copy; DASH-IF
+        </footer>
+    </div>
+</main>
+
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        init();
+    });
+</script>
+<script src="../highlighter.js"></script>
+</body>
+</html>
diff --git a/samples/samples.json b/samples/samples.json
@@ -705,6 +705,17 @@
                     "Video",
                     "Audio"
                 ]
+            },
+            {
+                "title": "Synchronization with a TimingObject",
+                "description": "An example which shows how to connect a TimingObject to a dash.js player to synchronize playback across devices.",
+                "href": "advanced/timing-object.html",
+                "image": "lib/img/bbb-2.jpg",
+                "labels": [
+                    "VoD",
+                    "Video",
+                    "Audio"
+                ]
             }
         ]
     },