Remove progress bar from html5 video player in full screen

Question

I have a video element on my page with code below

<video autoplay="" audiovolume="100" src="blob:https%3A//cccxxx.com/ccde5479" class="OT_video-element" style="transform: rotate(0deg); top: -74.4193878173828px; width: 770.440307617188px; height: 577.830230712891px;">Sorry, Web RTC is not available in your browser</video>

I want to remove progress bar for this video element, how can i do it?

Answer 1

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

Answer 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)