Video chapters

Seeking video content to a chapter

by Eugene Trounev

HTML

<link rel="stylesheet" href="https://appcdn2.docsie.io/js/manager/staging/css/manager.css">
<main class="pure docsie docsie-blue">
  <div class="docsie-g docsie-g-nowrap">
    <div class="docsie-u-3-4">
      <video id="preview-player_html5_api" controls preload="auto" crossorigin="anonymous" poster="//vjs.zencdn.net/v/oceans.png" src="//vjs.zencdn.net/v/oceans.mp4" width="100%"></video>
    </div>
    <div class="docsie-u-1-4">
      <ul id="toc" class="docsie-menu-list h-box">
        <li class="docsie-menu-item"><a class="docsie-menu-link box box-1-2 docsie-rounded" data-seek="0" href="#start">0:00  - Start</a></li>
        <li class="docsie-menu-item"><a class="docsie-menu-link box box-1-2 docsie-rounded" data-seek="5" href="#middle">0:05  - Fish cluster</a></li>
        <li class="docsie-menu-item"><a class="docsie-menu-link box box-1-2 docsie-rounded" data-seek="11" href="#end">0:11  - Seaguls hunting</a></li>
        <li class="docsie-menu-item"><a class="docsie-menu-link box box-1-2 docsie-rounded" data-seek="33" href="#end">0:33  - Sharks feeding</a></li>
        <li class="docsie-menu-item"><a class="docsie-menu-link box box-1-2 docsie-rounded" data-seek="40" href="#end">0:40  - Wails wailing</a></li>
      </ul>
    </div>
  </div>
</main>
<script>
document.addEventListener("DOMContentLoaded", () => {
	const player = document.getElementById("preview-player_html5_api");
	const toc = document.getElementById("toc");
	toc.addEventListener("click", e => {
		e.preventDefault();
		e.stopPropagation();
		const position = e.target.dataset.seek;
		console.log("player:", player.currentTime);
		console.log("data:", position);
		player.currentTime = position;
	})
});
</script>