From 80eef5e3ca7bbcf9dfb3dbd95892a459afd13162 Mon Sep 17 00:00:00 2001
From: dsilhavy <daniel.silhavy@fokus.fraunhofer.de>
Date: Thu, 9 Dec 2021 11:12:24 +0100
Subject: [PATCH] Add demo page to load stream via query parameters

---
 .../getting-started/load-with-url-params.html | 114 ++++++++++++++++++
 samples/samples.json                          |  11 ++
 2 files changed, 125 insertions(+)
 create mode 100644 samples/getting-started/load-with-url-params.html
diff --git a/samples/getting-started/load-with-url-params.html b/samples/getting-started/load-with-url-params.html
new file mode 100644
index 0000000000..b2f8c3aa27
--- /dev/null
+++ 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
index 6a606aa110..98448c7b0a 100644
--- 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"
+                ]
             }
         ]
     },

Parameter	Description	Default
autoplay	Enables autoplay. Set to "true" or "false"	"true"
url	Specify MPD url	https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd