test_seamless_looping_cancel_looping_future_frames.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

<title>Seamless looping test cancel looping - no future frame</title>

<script src="/tests/SimpleTest/SimpleTest.js"></script>

<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>

<script type="text/javascript" src="manifest.js"></script>

</head>

<script type="application/javascript">

/**

 * This test aims to check whether the future frames, which are the frames

 * beyond EOS and will be played in the next round of looping, would be discared

 * correctly if we cancel looping in the first looping round.

*/

add_task(async function testSeamlessLoopingVideoCancelLoopingDiscardFutureFrames() {

  info(`create video and play it`);

  let video = document.createElement('video');

  video.loop = true;

  video.src = "gizmo.mp4";

  document.body.appendChild(video);

  // speed up the test.

  video.playbackRate = 2;

  await video.play();

  info(`wait until the video reaches to near end`);

  let checkPoint1, checkPoint2;

  await new Promise(r => {

    video.ontimeupdate = _ => {

      // When media almost reaches to the end, the audio track should already

      // reach to the end before and started storing some future frames for next

      // round of looping.

      if (video.currentTime > video.duration - 1.5) {

        info(`cancel looping`);

        video.loop = false;

        video.ontimeupdate = null;

        checkPoint1 = new Date();

        r();

});

  // Because we've canceled looping, playback should reach to the end soon

  // (less than 0.5 seconds, but we use 1 second as a threshold to avoid

  // intermittent failure) But if we didn't discard future frames correctly,

  // that would cause that the video plays more audio frames and requires more

  // time to reach the end. Note, in the error case I encountered, the playback

  // didn't discard future frames and kept decoding since then, which causes

  // playing extra a whole audio track again.

  info(`wait until video reaches to the end within correct remaining time`);

  await once(video, "ended");

  checkPoint2 = new Date();

  const diffInSeconds = Math.abs(checkPoint1 - checkPoint2) / 1000;

  ok(diffInSeconds < 2,

    `finished playing within ${diffInSeconds} without incorrectly playing any future frame`);

});

</script>

<body>

</body>

</html>