<script>
document.addEventListener("keypress", event => {
	console.log(event);

	if (event.key === "v") {
		document.getElementById("fullscreen").appendChild(document.createElement("video")).id = "video1";
	}

	if (event.key === "s") {
		let source = document.getElementById("video1").appendChild(document.createElement("source"));
		source.type = "video/mp4";
		source.src = "stream_of_water.mp4?1";
	}

	if (event.key === "t") {
		let track = document.getElementById("video1").appendChild(document.createElement("track"));
		track.kind = "subtitles";
		track.srclang = "en";
		track.default = true;
		track.src = "stream_of_water.vtt?1";
	}

	if (event.key === "p") {
		document.getElementById("video1").poster = "stream_of_water.png?1";
	}

	if (event.key === "f") {
		document.getElementById("video1").webkitRequestFullscreen();
	}
});

document.addEventListener("webkitfullscreenchange", event => console.log(event));
document.addEventListener("webkitfullscreenerror", event => console.log(event));
</script>

<div id="fullscreen">
	<button onclick="document.getElementById('fullscreen').webkitRequestFullscreen()">Fullscreen</button>
</div>

<video id="video2" muted playsinline controls>
    <source src="stream_of_water.mp4?2" type="video/mp4">
    <track label="English" kind="subtitles" srclang="en" src="stream_of_water.vtt?2" default>
</video>
<video id="video3" poster="stream_of_water.png?3" src="stream_of_water.mp4?3" muted playsinline controls></video>