simple-video-controls
Version:
A simple custom video player.
45 lines • 1.03 kB
HTML
<html>
<head>
<script src="../dist/svControls.js"></script>
<link href="../dist/svControls.css" rel="stylesheet">
<style>
body {
font-family: arial;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
h1 {
text-align: center;
}
#videoContainer {
margin: auto;
height: 440px;
background-color: black;
border-radius: 3px;
position: relative;
display: block;
width: 800px;
overflow: hidden;
}
#videoContainer video {
margin: auto;
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<h1>Simple Video Controls Example</h1>
<div id="videoContainer">
<video id="video" controls preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<script type="text/javascript">
svControls('video', {stop: false, clickPlayPause: true});
</script>
</body>
</html>