custom html5 video player code example

Example 1: custom video player html5 books

var moviecontainer = document.getElementById("customcontrols"),
movie = moviecontainer.querySelector("video"),
controls = moviecontainer.querySelector("figcaption"),
playpause = controls.querySelector("a");
movie.removeAttribute("controls");
controls.style.display = "block";

Example 2: custom video player html5 books

#customcontrols {
	font-size: 0;
}
#customcontrols figcaption { 
	background: rgba(0,0,0,0.6); 
	display: none; padding: .5em; 
	color: #fff;
	position: relative; top: -2.2rem;
	text-align: right;
	margin-bottom: -2.2rem;
}
#customcontrols figcaption a { 
	text-decoration: none; font-size: 1rem; 
	margin-right: .5rem;
	color: #fff;
	border-bottom: none;
}
#customcontrols a:hover { color: red; }
#customcontrols a:visited { color: #770; }