chore: add a sandbox page for testing autoplay values. (#5933)

2025-11-06 09:19:15 +02:00 · 2019-04-29 14:45:02 -04:00
parent e1afa3e181
commit 1eb47f0690
2 changed files with 147 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -23,6 +23,7 @@
    <li><a href="sandbox/vertical-volume.html">Vertical Volume Demo</a></li>
    <li><a href="sandbox/language.html">Laungage Demo</a></li>
    <li><a href="sandbox/hls.html">Hls Demo</a></li>
+    <li><a href="sandbox/autoplay-tests.html">Autoplay Tests</a></li>
  </ul>

  <h2>Simple Demo (in an iframe)</h2>
--- a/sandbox/autoplay-tests.html.example
+++ b/sandbox/autoplay-tests.html.example
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Video.js Sandbox</title>
+  <link href="../dist/video-js.css" rel="stylesheet" type="text/css">
+  <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
+  <script src="../dist/video.js"></script>
+<style>p{margin: 0; padding:0}</style>
+</head>
+<body>
+  <div id="fixture">
+  </div>
+  <div id="start-test">
+    <video id='start-test-video' height=264 width=640 src="http://vjs.zencdn.net/v/oceans.mp4" controls></video>
+    <p>Press play on the video to start tests. (as we need user permission to autoplay)</p>
+  </div>
+  <script>
+    /* globals */
+    var startTestEl = document.getElementById('start-test')
+    var startTestVideo = document.getElementById('start-test-video')
+    var testSrc = {src: startTestVideo.src, type: 'video/mp4'};
+    var baseTests = [];
+    var setFirstFail = function(player) {
+      var oldPlay = player.tech_.play;
+      var fail = true;
+
+      player.tech_.play = function() {
+        if (fail) {
+          fail = false;
+          return window.Promise.reject();
+        }
+
+        return oldPlay.call(player.tech_);
+      };
+    };
+    var noop = function() {};
+    ['any-first-fail', 'any', 'play', 'muted', true].forEach(function(name) {
+      var val = (name === 'any-first-fail') ? 'any' : name;
+      var firstFail = (name === 'any-first-fail') ? setFirstFail : noop;
+
+      var fn = function(player) {
+        player.autoplay(val);
+      };
+
+      baseTests.push({name: 'option-' + name, beforeSrc: firstFail, options: {autoplay: val}});
+      baseTests.push({name: 'before-src-' + name, beforeSrc: function(player) {
+        firstFail(player);
+        fn(player);
+      }});
+      baseTests.push({name: 'after-src-' + name, beforeSrc: firstFail, afterSrc: fn});
+      baseTests.push({name: 'on-ready-' + name, beforeSrc: firstFail, onReady: fn});
+    });
+
+    var appendLine = function(line) {
+      var el = document.createElement('p');
+
+      el.innerText = line;
+      console.log(line);
+      fixture.appendChild(el);
+    };
+
+    var runTests;
+
+    startTestVideo.addEventListener('play', function() {
+      startTestVideo.load();
+      startTestVideo.src = testSrc.src;
+      startTestEl.style.display = 'none';
+      runTests();
+    });
+
+    runTests = function() {
+      var fixture = document.getElementById('fixture');
+
+      while(fixture.firstChild) {
+        fixture.removeChild(fixture.firstChild);
+      }
+
+      var tests = baseTests.slice(0);
+      var failure = 0;
+      var success = 0;
+      var total = tests.length;
+      var runTest;
+
+      var finishTest = function(name, pass) {
+        if (pass) {
+          success++;
+        } else {
+          failure++;
+        }
+        appendLine((pass ? 'success' : 'failure') + ' - ' + name);
+
+        if ((success + failure) === total) {
+          startTestEl.style.display = '';
+          appendLine(success + ' of ' + total + ' succeeded');
+        } else {
+          runTest();
+        }
+      }
+
+      runTest = function() {
+        var test = tests.shift();
+        var video = document.createElement('video');
+
+        video.setAttribute('class', 'video-js');
+        video.setAttribute('id', test.name);
+        video.setAttribute('controls', true);
+
+        fixture.appendChild(video);
+
+        var player = window.player = videojs(video, test.options);
+
+        if (test.onReady) {
+          test.onReady(player);
+        }
+
+        if (test.beforeSrc) {
+          test.beforeSrc(player);
+        }
+
+        player.src(testSrc);
+
+        if (test.afterSrc) {
+          test.afterSrc(player);
+        }
+        player.setTimeout(function() {
+          player.dispose();
+          window.player = null;
+          finishTest(test.name, false);
+        }, 5000);
+
+        player.on('timeupdate', function() {
+          if (player.currentTime() > 0) {
+            player.dispose();
+            window.player = null;
+            finishTest(test.name, true);
+          }
+        });
+      };
+      runTest();
+    };
+
+  </script>
+
+</body>
+</html>