Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="video" src="gizmo.mp4" loop></video>
<script type="text/javascript">
const video = document.getElementById("video");
const w = window.opener || window.parent;
window.onmessage = async event => {
if (event.data == "fullscreen") {
video.requestFullscreen();
video.onfullscreenchange = () => {
video.onfullscreenchange = null;
video.onfullscreenerror = null;
w.postMessage("entered-fullscreen", "*");
}
video.onfullscreenerror = () => {
// Retry until the element successfully enters fullscreen.
video.requestFullscreen();
}
} else if (event.data == "check-playing") {
if (!video.paused) {
w.postMessage("checked-playing", "*");
} else {
video.onplaying = () => {
video.onplaying = null;
w.postMessage("checked-playing", "*");
}
}
} else if (event.data == "check-pause") {
if (video.paused) {
w.postMessage("checked-pause", "*");
} else {
video.onpause = () => {
video.onpause = null;
w.postMessage("checked-pause", "*");
}
}
} else if (event.data == "play") {
await video.play();
w.postMessage("played", "*");
} else if (event.data == "pause") {
video.pause();
w.postMessage("paused", "*");
} else if (event.data == "setMetadata") {
const metadata = {
title: document.title,
artist: document.title,
album: document.title,
artwork: [{ src: document.title, sizes: "128x128", type: "image/jpeg" }],
};
navigator.mediaSession.metadata = new window.MediaMetadata(metadata);
w.postMessage(metadata, "*");
} else if (event.data == "setPositionState") {
navigator.mediaSession.setPositionState({
duration: 60, // The value doesn't matter
});
} else if (event.data.cmd == "setActionHandler") {
if (window.triggeredActionHandler === undefined) {
window.triggeredActionHandler = {};
}
const action = event.data.action;
window.triggeredActionHandler[action] = new Promise(r => {
navigator.mediaSession.setActionHandler(action, async () => {
if (action == "stop" || action == "pause") {
video.pause();
} else if (action == "play") {
await video.play();
}
r();
});
});
w.postMessage("setActionHandler-done", "*");
} else if (event.data.cmd == "checkActionHandler") {
const action = event.data.action;
if (!window.triggeredActionHandler[action]) {
w.postMessage("checkActionHandler-fail", "*");
} else {
await window.triggeredActionHandler[action];
w.postMessage("checkActionHandler-done", "*");
}
} else if (event.data == "create-media-session") {
// simply calling a media session would create an instance.
navigator.mediaSession;
w.postMessage("created-media-session", "*");
}
}
</script>
</body>
</html>