dom/media/mediasource/test/test_PlayEvents.html
author Jean-Yves Avenard <jyavenard@mozilla.com>
Wed, 16 Dec 2015 17:34:10 +1100
changeset 657164 ec29b0d44aab
parent 657138 35adbecc4ea8
permissions -rw-r--r--
try: -b d -p win32,win64 -u mochitest-1,mochitest-e10s-1,mochitest-o -t none --try-test-paths chrome:dom/media/test mochitest:dom/media/mediasource/test

<!DOCTYPE HTML>
<html>
<head>
  <title>MSE: basic functionality</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="mediasource.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<pre id="test">
<script class="testbody" type="text/javascript">

SimpleTest.waitForExplicitFinish();

// This test checks that readyState is properly set and the appropriate events are being fired accordingly:
// 1. Load 1.6s of data and ensure that canplay event is fired.
// 2. Load data to have a complete buffered range from 0 to duration and ensure that canplaythrough is fired.
// 3. Seek to an area with no buffered data, and ensure that readyState goes back to HAVE_METADATA
// 4. Load 1.6s of data at the seek position and ensure that canplay is fired and that readyState is now HAVE_FUTURE_DATA
// 5. Start playing video and check that once it reaches a position with no data, readyState goes back to HAVE_CURRENT_DATA and waiting event is fired.
// 6. Add 1.6s of data once video element fired waiting, that canplay is fired once readyState is HAVE_FUTURE_DATA.
// 7. Finally load data to the end and ensure that canplaythrough is fired and that readyState is now HAVE_ENOUGH_DATA

runWithMSE(function(ms, el) {
  el.controls = true;
  once(ms, 'sourceopen').then(function() {

    function waitUntilTime(targetTime) {
      return new Promise(function(resolve, reject) {
        el.addEventListener("waiting", function onwaiting() {
          info("Got a waiting event at " + el.currentTime);
          if (el.currentTime >= targetTime) {
            ok(true, "Reached target time of: " + targetTime);
            el.removeEventListener("waiting", onwaiting);
            resolve();
          }
        });
      });
    }

    // Log events for debugging.
    var events = ["suspend", "play", "canplay", "canplaythrough", "loadstart", "loadedmetadata",
                  "loadeddata", "playing", "ended", "error", "stalled", "emptied", "abort",
                  "waiting", "pause", "durationchange", "seeking", "seeked"];
    function logEvent(e) {
      var v = e.target;
      info("got " + e.type + " event");
    }
    events.forEach(function(e) {
      el.addEventListener(e, logEvent, false);
    });

    ok(true, "Receive a sourceopen event");
    var videosb = ms.addSourceBuffer("video/mp4");
    el.addEventListener("error", function(e) {
      ok(false, "should not fire '" + e + "' event");
    });
    is(el.readyState, el.HAVE_NOTHING, "readyState is HAVE_NOTHING");
    fetchAndLoad(videosb, 'bipbop/bipbop_video', ['init'], '.mp4')
    .then(once.bind(null, el, 'loadedmetadata'))
    .then(function() {
       ok(true, "got loadedmetadata event");
       var promises = [];
       promises.push(once(el, 'loadeddata'));
       promises.push(once(el, 'canplay'));
       promises.push(fetchAndLoad(videosb, 'bipbop/bipbop_video', range(1, 3), '.m4s'));
       return Promise.all(promises);
    })
    .then(function() {
      ok(true, "got canplay event");
      // set element duration to 3.203333s. We do so in order to guarantee that
      // the end of the buffered range will be equal to duration, causing
      // canplaythrough to be fired later.
      ms.duration = 3.203333;
      return once(el, 'durationchange');
    })
    .then(function() {
      ok(true, "got durationchange event");
      var promises = [];
      promises.push(once(el, 'canplaythrough'));
      // Load [0.801666, 3.203333]
      promises.push(fetchAndLoad(videosb, 'bipbop/bipbop_video', range(3, 5), '.m4s'));
      return Promise.all(promises);
    })
    .then(function() {
      ok(true, "got canplaythrough event");
     // set element duration to 9.203333s, this value is set to coincide with
     // data added later (we now have an empty range from 6s to 9.203333s).
     ms.duration = 9.203333;
     return once(el, 'durationchange');
    })
    .then(function() {
      ok(true, "got durationchange event");
      // An arbitrary value, so we are guaranteed to be in a range with no data.
      el.currentTime = 6;
      videosb.timestampOffset = 6;
      ok(el.seeking, "seeking started");
      return once(el, 'seeking');
    })
    .then(function() {
      ok(true, "got seeking event");
      is(el.readyState, el.HAVE_METADATA, "readyState is HAVE_METADATA");
      var promises = [];
      promises.push(once(el, 'seeked'));
      promises.push(once(el, 'canplay'));
      // Load [6+0, 6+1.601666)
      promises.push(fetchAndLoad(videosb, 'bipbop/bipbop_video', range(1, 3), '.m4s'));
      return Promise.all(promises);
    })
    .then(function() {
      ok(true, "got seeked and canplay event");
      is(el.currentTime, 6, "seeked to 6s");
      is(el.readyState, el.HAVE_FUTURE_DATA, "readyState is HAVE_FUTURE_DATA");
      var promises = [];
      promises.push(once(el, 'canplaythrough'));
      // Load [6+1.60166, 6+3.203333]
      promises.push(fetchAndLoad(videosb, 'bipbop/bipbop_video', range(3, 5), '.m4s'));
      return Promise.all(promises);
    })
    .then(function() {
      ok(true, "got canplaythrough event");
      // set element duration to 19.805s, this value is set to coincide with
      // data added later (we now have an empty range from 15 to 19.805).
      ms.duration = 19.805;
      return once(el, 'durationchange');
    })
    .then(function() {
      ok(true, "got durationchange event");
      el.currentTime = 15;
      videosb.timestampOffset = 15;
      ok(el.seeking, "seeking started");
      return once(el, 'seeking');
    })
    .then(function() {
      ok(true, "got seeking event");
      var promises = [];
      promises.push(once(el, 'seeked'));
      // Load [15+0, 15+1.601666)
      promises.push(fetchAndLoad(videosb, 'bipbop/bipbop_video', range(1, 3), '.m4s'));
      return Promise.all(promises);
    })
    .then(function() {
      ok(true, "got seeked event");
      // Load [15+1.60166, 15+3.203333]
      return fetchAndLoad(videosb, 'bipbop/bipbop_video', range(3, 5), '.m4s');
    })
    .then(function() {
      ok(true, "data loaded");
      // Playback we play for a little while then stall.
      var promises = [];
      promises.push(once(el, 'playing'));
      // 18.17 is the time of the last video sample +- 40ms.
      promises.push(waitUntilTime(18.17-0.04));
      el.play();
      return Promise.all(promises);
    })
    .then(function() {
      ok(true, "got playing and waiting event");
      // Playback has stalled, readyState is back to HAVE_CURRENT_DATA.
      is(el.readyState, el.HAVE_CURRENT_DATA, "readyState is HAVE_CURRENT_DATA");
      var promises = [];
      promises.push(once(el, 'playing'));
      promises.push(once(el, 'canplay'));
      promises.push(once(el, 'canplaythrough'));
      // Load [15+3.203333, 15+4.805)
      // Our final buffered range will now be [0, 3.203333)[6, 9.203333)[15, 19.805)
      promises.push(fetchAndLoad(videosb, 'bipbop/bipbop_video', range(5, 7), '.m4s'));
      return Promise.all(promises);
    })
    .then(function() {
      ok(true, "got playing, canplay and canplaythrough event");
      SimpleTest.finish();
    })
  });
});

</script>
</pre>
</body>
</html>