fix: issues with the demo in ie11 and firefox

index.html

@@ -18,11 +18,11 @@
     }
     label {
       display: block;
+      width: 700px;
+      margin-top: 4px;
     }
-    input, select {
-      min-width: 450px;
-      margin: 0;
-      padding: 0;
+    input[type=url], select {
+      min-width: 600px;
     }
     h3 {
       margin-bottom: 5px;
@@ -57,10 +57,11 @@ <h3>Options</h3>
   </label>
 
   <h3>Load a URL</h3>
-  <form id=load-url>
-    <input id=url type=url value="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8">
-    <button type=submit>Load</button>
-  </form>
+  <label>Url:</label>
+  <input id=url type=url>
+  <label>Type: (uses url extension if blank)</label>
+  <input id=type type=text>
+  <button id=load-url type=submit>Load</button>
   <h3>Load a Source</h3>
   <select id=load-source>
     <optgroup label="hls">
@@ -92,7 +93,6 @@ <h3>Navigation</h3>
   <script>
     window.startDemo(function(player) {
       // do something with setup player
-
     });
   </script>
   </body>

scripts/index.js

@@ -1,16 +1,16 @@
 /* eslint-disable no-var, object-shorthand, no-console */
 (function(window) {
   // all relevant elements
-  var urlForm = document.getElementById('load-url');
+  var urlButton = document.getElementById('load-url');
   var sources = document.getElementById('load-source');
   var stateEls = {};
 
-  ['debug', 'autoplay', 'muted', 'minified', 'partial', 'url'].forEach(function(name) {
+  ['debug', 'autoplay', 'muted', 'minified', 'partial', 'url', 'type'].forEach(function(name) {
     stateEls[name] = document.getElementById(name);
   });
 
   var getInputValue = function(el) {
-    if (el.type === 'url') {
+    if (el.type === 'url' || el.type === 'text') {
       return el.value;
     } else if (el.type === 'checkbox') {
       return el.checked;
@@ -19,6 +19,19 @@
     console.warn('unhandled input type ' + el.type);
   };
 
+  var newEvent = function(name) {
+    var event
+
+    if (typeof window.Event === 'function') {
+      event = new window.Event('submit');
+    } else {
+      event = document.createEvent('Event');
+      event.initEvent(name, true, true);
+    }
+
+    return event;
+  };
+
   // taken from video.js
   var getFileExtension = function(path) {
     var splitPathRe;
@@ -49,7 +62,7 @@
       query += symbol + elName + '=' + getInputValue(stateEls[elName]);
     });
 
-    window.history.replaceState(null, null, query);
+    window.history.replaceState({}, 'vhs demo', query);
   };
 
   var loadState = function() {
@@ -174,7 +187,7 @@
         videoEl.className = 'vjs-default-skin';
         fixture.appendChild(videoEl);
 
-        stateEls.partial.dispatchEvent(new CustomEvent('change'));
+        stateEls.partial.dispatchEvent(newEvent('change'));
 
         player = window.player = window.videojs(videoEl, {
           html5: {
@@ -184,26 +197,40 @@
           }
         });
 
+        player.width(640);
+        player.height(264);
+
         // configure videojs-contrib-eme
         player.eme();
 
-        stateEls.debug.dispatchEvent(new CustomEvent('change'));
-        stateEls.muted.dispatchEvent(new CustomEvent('change'));
-        stateEls.autoplay.dispatchEvent(new CustomEvent('change'));
+        stateEls.debug.dispatchEvent(newEvent('change'));
+        stateEls.muted.dispatchEvent(newEvent('change'));
+        stateEls.autoplay.dispatchEvent(newEvent('change'));
 
         // run the load url handler for the intial source
-        urlForm.dispatchEvent(new CustomEvent('submit'));
+        if (stateEls.url.value) {
+          urlButton.dispatchEvent(newEvent('click'));
+        } else {
+          sources.dispatchEvent(newEvent('change'));
+        }
         cb(player);
       });
     });
 
-    urlForm.addEventListener('submit', function(event) {
-      var type = 'application/x-mpegURL';
+    const urlButtonClick = function(event) {
+      var ext;
+      var type = stateEls.type.value;
 
       event.preventDefault();
 
-      if (getFileExtension(stateEls.url.value) === 'mpd') {
-        type = 'application/dash+xml';
+      if (!type.trim()) {
+        ext = getFileExtension(stateEls.url.value);
+
+        if (ext === 'mpd') {
+          type = 'application/dash+xml';
+        } else if (ext === 'm3u8') {
+          type = 'application/x-mpegURL';
+        }
       }
 
       saveState();
@@ -213,16 +240,23 @@
         type: type
       });
       return false;
-    });
+    };
+
+    urlButton.addEventListener('click', urlButtonClick);
+    urlButton.addEventListener('tap', urlButtonClick);
 
     sources.addEventListener('change', function(event) {
+      var src = sources.options[sources.selectedIndex].value;
+
       event.preventDefault();
-      stateEls.url.value = sources.options[sources.selectedIndex].value;
-      urlForm.dispatchEvent(new CustomEvent('submit'));
+      stateEls.url.value = src;
+      stateEls.type.value = '';
+
+      urlButton.dispatchEvent(newEvent('click'));
       return false;
     });
 
     // run the change handler for the first time
-    stateEls.minified.dispatchEvent(new CustomEvent('change'));
+    stateEls.minified.dispatchEvent(newEvent('change'));
   };
 }(window));