How to remove HTML5 video player navigation button

Question

I am using HTML5 video player to play video constantly.Every thing is fine except the video navigation button displaying at the last of the video screen as soon as the mouse cursor moves over the video. I want to remove or hide it but not getting how to do it .. Here is the HTML for the Video used..

<video id='video-player' autoplay="autoplay" loop  preload='metadata' controls>
<source src="Video/1.MP4" type="video/mp4">
</video>

Please help me to remove the navigation bar from the last ..Thanks..

Solution

You can disabled controls via Javascript:

document.getElementById('video-player').controls = false

Or simply remove controls attribute:

<video id='video-player' autoplay="autoplay" loop preload="metadata">
    <source src="Video/1.MP4" type="video/mp4">
</video>