94 lines
2.9 KiB
HTML
94 lines
2.9 KiB
HTML
<!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>
|