How to customize HTML5 video player with JavaScript
Article Metadata
This article explains how to customize the HTML5 video player with JavaScript
Contents |
Introduction
Example code
HTML file - index.html
<body>
<section id="custom">
<video id="customMovie" width="800" height="600">
<source src="myvids/first.mp4>
</video>
<nav>
<div id="controls">
<button type="button" id="playVideo">
</div>
<div id="initialBar">
<div id="videoProgressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
<section>
</body>
</html>
CSS file - main.css
body{
text-align: center;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
#custom{
width: 700px;
margin: 10px auto;
padding: 5x;
background: red;
border: 4px solid black;
border-radius: 10px;
}
nav{
margin: 5px 0px;
}
#buttons {
JavaScript file - main.js
function doFirst() {
barSize=600;
customMovie = document.getElementById('customMovie');
playButton = document.getElementById('playButton');
bar = document.getElementById('defaultBar');
progressBar = document.getElementById('progressBar');
}
