<!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>
Codebase Browser
chromium