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

<section class="skin">
    <video id="myMovie">
        <source src="video_url"/>
    </video>
    <nav>
        <button id="playButton">Play</button>
    </nav>
</section>

The js

function loadVideo(){
    myMovie=document.getElementById('myMovie');
    playButton=document.getElementById('playButton');
    playButton.addEventListener('click', playOrPause, false);
}

function playOrPause() {
    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: 5px 0px;
    margin: 0 auto;
}

(nav tag and css only included to add some styling)

Solution 3:

video::-webkit-media-controls-timeline {
    display: none;
}