summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/remote-playback/remote-video-control-seek-manual.html
blob: 56156d987105385dbdb99cb2735e3c413460e2bc (plain)
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
<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="styles.css" />
  <title>Test that seek() on the local video is reflected on the remote device</title>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/common/media.js"></script>
  <script>
    setup({ explicit_timeout: true });
  </script>
  <body>
    <div id="pick-device">
      <p>
        Click the button below to prompt for a remote playback device and select
        one!
      </p>
      <p>
        Wait a few seconds for the video to initialize, play and seek.
      </p>
      <p>
        <button id="prompt-button">Pick device</button>
      </p>
    </div>
    <video src="/media/green-at-15.mp4" id="video"></video>
    <div id="evaluate" style="display: none">
      <p>
        Did the playback on the remote device pause and show the following
        timestamp? (can vary by some frames)
      </p>
      <p id="timestamp" style="font-weight: bold"></p>
      <p>
        <button id="yes">Yes</button>
      </p>
      <p>
        <button id="no">No</button>
      </p>
    </div>
  </body>
  <script>
    let v = document.getElementById("video");

    async_test(t => {
      let button = document.getElementById("prompt-button");
      button.onclick = t.step_func(() => {
        promise_test(() => {
          return v.remote.prompt().then(() => {
            v.play();
          });
        }, "Prompt resolves");
      });

      let timestampLabel = document.getElementById("timestamp");
      v.ontimeupdate = () => {
        let seconds = Math.floor(v.currentTime) + "";
        let frames = Math.ceil((v.currentTime - seconds) * 30) + "";
        timestampLabel.innerText =
          seconds.padStart(2, "0") + ":" + frames.padStart(2, "0");
        if (v.currentTime >= 2 && v.currentTime < 18) {
          v.currentTime = 18;
        }
        if (v.currentTime >= 20) {
          v.pause();
          document.getElementById("evaluate").style.display = "block";
        }
      };

      let evaluate = success =>
        assert_true(success, "Video paused and has correct play position.");

      document.getElementById("yes").onclick = t.step_func_done(() =>
        evaluate(true)
      );
      document.getElementById("no").onclick = t.step_func_done(() =>
        evaluate(false)
      );
    }, "Test that seek() on the local video is reflected on the remote device.");
  </script>
</html>