video-persistence.html | Explore in Territory

<!DOCTYPE html>
<html>
<style>
:-webkit-full-screen #controls {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: red;
}
:-webkit-full-screen #container {
  width: 100%;
  background-color: red;
  padding-top: 100px;
  padding-bottom: 100px;
}

:-webkit-full-screen #container > video {
  width: 100%;
}

</style>
<div id='player'>
  <div id='container'>
    <video preload="auto"></video>
  </div>
  <div id='controls'>
    <button>foo</button><button>bar</button>
  </div>
</div>
<div id='fs'>fullscreen</div>
<script>
  function waitForVideoPresentation(video) {
    return new Promise(resolve => {
      video.requestVideoFrameCallback(resolve);
    });
  }
  var video = document.querySelector('video');
  video.src = 'content/test.ogv';
  let videoPresentation = waitForVideoPresentation(video);

  document.querySelector('#fs').addEventListener('click', e => {
    document.querySelector('#player').webkitRequestFullscreen();
  });

  if (window.testRunner && window.eventSender && window.internals) {
    testRunner.waitUntilDone();

    video.addEventListener('canplaythrough', e => {
      var bounding = document.querySelector('#fs').getBoundingClientRect();
      eventSender.mouseMoveTo(bounding.left + bounding.width / 2,
                              bounding.top + bounding.height / 2);
      eventSender.mouseDown();
      eventSender.mouseUp();
    });

    document.addEventListener('webkitfullscreenchange', e => {
      internals.setPersistent(video, true);
      videoPresentation.then(() => {
        testRunner.notifyDone();
      });
    });
  }
</script>
</html>
chromium/third_party/blink/web_tests/media/video-persistence.html
