example.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>OpenPlayer example</title>
	<link rel="stylesheet" href="player.css">
</head>

<body>
	<main>
		<h1>OpenPlayer</h1>
		<p>A reusable HTML5 video player with a footer toolbar.</p>

		<section>
			<video poster="thumb.png" preload="none" id="open-player-video" playsinline
				aria-label="OpenPlayer test video">
				<source src="test-video.mp4" type="video/mp4">
				Your browser does not support HTML5 video.
			</video>
			<div class="op-controls op-controls-overlay" aria-label="Video controls"></div>
		</section>
	</main>
	<script src="player.js"></script>
	<script>
new OpenPlayer(document.querySelector('#open-player-video'), {
	controlsPosition: 'overlay',
	label: 'OpenPlayer test video',
	azyLoad: true
});
</script>
</body>

</html>