/share/WebKit/media/bipbop-cc-subtitles-chapters.html

<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<style>
video {
	max-width: 100%;
}
	</style>
</head>
<body>
	<video src="bipbop-cc-subtitles-chapters.m4v" controls playsinline muted>
		<track src="bipbop-cc-subtitles-chapters.vtt" kind="chapters" srclang="en" label="Chapters 1"/>
		<track src="bipbop-cc-subtitles-chapters.vtt" kind="chapters" srclang="es" label="Chapters 2"/>
	</video>
	<script>
function log(text) {
	let dateTimeFormat = new Intl.DateTimeFormat("en-US", {hour: "2-digit", hourCycle: "h24", minute: "2-digit", second: "2-digit"}).format;
	document.body.appendChild(document.createElement("pre")).textContent = `[${dateTimeFormat(new Date)}] ${text}`;
}

let video = document.querySelector("video");
video.addEventListener("ratechange", (event) => { log(`ratechange => playbackRate=${video.playbackRate} defaultPlaybackRate=${video.defaultPlaybackRate}`); });
video.addEventListener("webkitbeginfullscreen", (event) => { log(`webkitbeginfullscreen`); });
video.addEventListener("webkitendfullscreen", (event) => { log(`webkitendfullscreen`); });
video.addEventListener("webkitfullscreenchange", (event) => { log(`webkitfullscreenchange => ${video.webkitDisplayingFullscreen}`); });
video.addEventListener("webkitpresentationmodechanged", (event) => { log(`webkitpresentationmodechanged => ${video.webkitPresentationMode}`); });
	</script>
</body>