Remove Progress Bar From Html5 Video Player In Full Screen
I have a video element on my page with code below
Solution 2:
Previous approach will only work in some browsers like chrome or safari, but not in firefox or internet explorer I would suggest building your own video player, that way you'll have the control over the control elements
In this case I only needed the Play/Pause button, so the user couldn't fast forward the video
The HTML
<sectionclass="skin"><videoid="myMovie"><sourcesrc="video_url"/></video><nav><buttonid="playButton">Play</button></nav></section>
The js
functionloadVideo(){
myMovie=document.getElementById('myMovie');
playButton=document.getElementById('playButton');
playButton.addEventListener('click', playOrPause, false);
}
functionplayOrPause() {
if (!myMovie.paused && !myMovie.ended){
myMovie.pause();
playButton.innerHTML='Play';
} else {
myMovie.play();
playButton.innerHTML='Pause';
}
}
window.addEventListener('load',loadVideo,false);
The CSS
.skin {
width:640px;
margin:10px auto;
padding:5px;
}
nav {
width:70px;
height:22px;
padding: 5px0px;
margin: 0 auto;
}
(nav tag and css only included to add some styling)
Solution 3:
video::-webkit-media-controls-timeline {
display: none;
}
Post a Comment for "Remove Progress Bar From Html5 Video Player In Full Screen"