1 files changed, 109 insertions, 0 deletions
diff --git a/javascript/videojs/sandbox/debug.html.example b/javascript/videojs/sandbox/debug.html.example
new file mode 100644
index 0000000..b4766ed
--- /dev/null
+++ b/javascript/videojs/sandbox/debug.html.example
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Video.js Sandbox</title>
+  <style type="text/css">
+    #intro {
+      width: 938px;
+      background-color: #eee;
+      border: 1px solid #777;
+      padding: 0 10px;
+      margin-bottom: 20px;
+      line-height: 1.5em;
+    }
+
+    #source-form {
+      width: 938px;
+      padding: 10px 10px 0;
+      border: 1px solid #777;
+      margin: 0 0 20px;
+    }
+
+    #source-form > div {
+      margin: 0 0 12px;
+      overflow: hidden;
+    }
+
+    #source-form label {
+      float: left;
+      width: 200px;
+    }
+
+    #source-form input[type="text"],
+    #source-form select {
+      float: left;
+    }
+
+    #source-form input[type="text"] {
+      width: 700px;
+    }
+  </style>
+  <link href="../dist/video-js.css" rel="stylesheet" type="text/css">
+  <script src="../dist/alt/video.debug.js"></script>
+</head>
+<body>
+  <div id="intro">
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started run `npm start` and open the index.html</p>
+    <pre>npm start</pre>
+    <pre>open http://localhost:9999/sandbox/debug.html</pre>
+  </div>
+
+  <form id="source-form">
+    <div>
+      <label for="source">Set Media Source URL</label>
+      <input type="text" id="source" value="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8">
+    </div>
+    <div>
+      <label for="source-type">Set Media Source Type</label>
+      <select id="source-type">
+        <option value="">None</option>
+        <option value="video/mp4">MP4 (video/mp4)</option>
+        <option selected value="application/x-mpegurl">HLS (application/x-mpegurl)</option>
+        <option value="application/dash+xml">DASH (application/dash+xml)</option>
+      </select>
+    </div>
+    <div>
+      <button type="submit">Set</button>
+    </div>
+  </form>
+
+  <video-js
+    id="debug"
+    controls
+    preload="auto"
+    width="960"
+    height="396">
+  </video-js>
+
+  <script>
+    const vid = document.getElementById('debug');
+    const player = videojs(vid);
+    const form = document.getElementById('source-form');
+    const sourceField = document.getElementById('source');
+    const sourceTypeField = document.getElementById('source-type');
+
+    const setSource = () => {
+      const source = {
+        src: sourceField.value,
+        type: sourceTypeField.value
+      };
+
+      if (!source.type) {
+        delete source.type;
+      }
+
+      player.log('setting source', source);
+      player.src(source);
+    };
+
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      setSource();
+    });
+
+    setSource();
+  </script>
+
+</body>
+</html>