Add demo page to load stream via query parameters

Dash-Industry-Forum · Dec 9, 2021 · 80eef5e · 80eef5e
1 parent f8c986a
commit 80eef5e
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 0 deletions.
diff --git a/samples/getting-started/load-with-url-params.html b/samples/getting-started/load-with-url-params.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Load with url parameters</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 getUrlVars() {
+            var vars = {};
+            window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
+                vars[key] = value;
+            });
+            return vars;
+        }
+
+        function init() {
+            var video,
+                player;
+            var urlParameter = getUrlVars();
+            var item = {
+                url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+                autoplay: true
+            }
+
+            if (urlParameter) {
+                if (urlParameter.hasOwnProperty('url')) {
+                    item.url = urlParameter.url;
+                }
+                if (urlParameter.hasOwnProperty('autoplay')) {
+                    item.autoplay = (urlParameter.autoplay === 'true');
+                }
+            }
+
+            video = document.querySelector('video');
+            player = dashjs.MediaPlayer().create();
+            player.initialize(video, item.url, item.autoplay);
+        }
+    </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-12">
+                <div class="h-100 p-5 bg-light border rounded-3">
+                    <h3>Load with url parameters</h3>
+                    <p>A demo page that uses url query parameters to configure the playback. The supported paramaters
+                        are:</p>
+                    <table class="table">
+                        <tr>
+                            <th>Parameter</th>
+                            <th>Description</th>
+                            <th>Default</th>
+                        </tr>
+                        <tr>
+                            <td>autoplay</td>
+                            <td>Enables autoplay. Set to "true" or "false"</td>
+                            <td>"true"</td>
+                        </tr>
+                        <tr>
+                            <td>url</td>
+                            <td>Specify MPD url</td>
+                            <td>https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd</td>
+                        </tr>
+                    </table>
+
+                </div>
+            </div>
+            <div class="row margin-top-row">
+                <div class="col-md-8">
+                    <video controls="true"></video>
+                </div>
+            </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,6 +94,17 @@
                     "Video",
                     "Audio"
                 ]
+            },            
+            {
+                "title": "Load with url parameters",
+                "description": "A demo page that uses url query parameters to configure the playback.",
+                "href": "getting-started/load-with-url-params.html",
+                "image": "lib/img/bbb-1.jpg",
+                "labels": [
+                    "VoD",
+                    "Video",
+                    "Audio"
+                ]
             }
         ]
     },