1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127


content / test / data / media / picture_in_picture / one-video.html [blame]

<!DOCTYPE html>
<html>
  <body>
    <video src="../tulip2.webm" loop=true />
  </body>

  <script>
    const video = document.querySelector('video');

    function addPictureInPictureEventListeners() {
      video.addEventListener('enterpictureinpicture', _ => {
        document.title = 'enterpictureinpicture';
      });
      video.addEventListener('leavepictureinpicture', _ => {
        document.title = 'leavepictureinpicture';
      });
    }

    function addPlayEventListener() {
      video.addEventListener('play', _ => {
        document.title = 'play';
      }, { once: true });
    }

    function addPauseEventListener() {
      video.addEventListener('pause', _ => {
        document.title = 'pause';
      }, { once: true });
    }

    async function play() {
      await video.play();
      return true;
    }

    async function playToEnd() {
      video.loop = false;
      await video.play();
      video.currentTime = video.duration;
      await _waitForEnded();
      return true;
    }

    function _waitForEnded() {
      return new Promise(resolve => {
        if (video.ended) {
          resolve();
          return;
        }

        video.addEventListener('ended', _ => {
          resolve();
        }, { once: true });
      });
    }

    async function updateVideoSrcAndPlay() {
      video.src = "../tulip2.webm";
      await video.play();
      return true;
    }

    async function resetVideo() {
      video.src = "";
      await _waitForEmptied();
      return true;
    }

    function _waitForEmptied() {
      return new Promise((resolve, _) => {
        if (video.networkState == HTMLMediaElement.NETWORK_EMPTY) {
          resolve();
          return;
        }

        video.addEventListener('emptied', _ => {
          resolve();
        }, { once: true });
      });
    }

    async function enterPictureInPicture() {
      await _waitForMetadata();
      await video.requestPictureInPicture();
      return true;
    }

    function _waitForMetadata() {
      return new Promise(resolve => {
        if (video.readyState >= HTMLMediaElement.HAVE_METADATA) {
          resolve();
          return;
        }

        video.addEventListener('loadedmetadata', _ => {
          resolve();
        }, { once: true });
      });
    }

    async function enterFullscreen() {
      await video.requestFullscreen();
      return true;
    }

    function setMediaSessionPlayActionHandler() {
      navigator.mediaSession.setActionHandler("play", _ => {
        video.play();
      });
    }

    function setMediaSessionPauseActionHandler() {
      navigator.mediaSession.setActionHandler("pause", _ => {
        video.pause();
      });
    }

    function setMediaSessionNextTrackActionHandler() {
      navigator.mediaSession.setActionHandler("nexttrack", _ => {
        // Simulates a playlist functionality (in this case the playlist has
        // just one item).
        video.src = "../tulip2.webm";
        video.play();
      });
    }
  </script>
</html>