Add sample for MPD anchors

Dash-Industry-Forum · Dec 20, 2021 · 46afc17 · 46afc17
1 parent 57c0f0b
commit 46afc17
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 3 deletions.
diff --git a/samples/advanced/mpd-anchors.html b/samples/advanced/mpd-anchors.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>MPD anchors</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">
+        function init() {
+
+            var video,
+                player,
+                url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd#t=60";
+
+            video = document.querySelector("video");
+            player = dashjs.MediaPlayer().create();
+
+            player.initialize(video, url, true);
+        }
+    </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>MPD anchors</h3>
+                    <p>This sample shows how to use MPD anchors to start a presentation at a given time. In this case a "#t=60" anchor is added to the MPD url and playback starts at 60 seconds.</p>
+                </div>
+            </div>
+            <div class="col-md-8">
+                <video controls="true"></video>
+            </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
@@ -94,7 +94,7 @@
                     "Video",
                     "Audio"
                 ]
-            },            
+            },
             {
                 "title": "Load with url parameters",
                 "description": "A demo page that uses url query parameters to configure the playback.",
@@ -426,7 +426,6 @@
                     "Audio"
                 ]
             }
-
         ]
     },
     {
@@ -643,7 +642,7 @@
                     "Video",
                     "Audio"
                 ]
-            },            
+            },
             {
                 "title": "Custom initial track selection example",
                 "description": "This sample shows how to define your own initial track selection function.",
@@ -667,6 +666,17 @@
                     "Video",
                     "Audio"
                 ]
+            },
+            {
+                "title": "MPD anchors",
+                "description": "This sample shows how to use MPD anchors to start a presentation at a given time.",
+                "href": "advanced/mpd-anchors.html",
+                "image": "lib/img/bbb-3.jpg",
+                "labels": [
+                    "VoD",
+                    "Video",
+                    "Audio"
+                ]
             }
         ]
     },