Disable download button HTML5 Video

Hiding the button with a Blob

When doing a blob of the video and then a parse for URL (using URL.createObjectURL ), Google Chrome automatically hides the button:

var video = document.querySelector('video');

var xml = new XMLHttpRequest(); // Objeto XML
xml.open("GET", '/aqui-seu-video'); // Get do vídeo 

xml.responseType = "blob"; // Mudando o tipo de resposta para Blob

xml.onload = function (){
    if(xml.readyState === 4){
        if(xml.status === 200 || xml.status == 0){
            // Fazer um parse da resposta em url e passar para o source do <video>
            video.src = URL.createObjectURL(xml.response); 
        }
    }
}
xml.send(); // termina a chamada

Hiding the button with CSS

This button belongs to DOM of the <video> element in HTML5 . When looking at your tree of elements and their respective styles, using Google DevTools (after enabling the "Show user agent shadow DOM" option), we have that the download button has, by default, 32px width:

Wealsoseetwodiv:-webkit-media-controls-paneland-webkit-media-controls-enclosure.Thesecondbeingtheparentofthefirst.

Sowejustassign...-enclosureaoverflow:hidden:

video::-webkit-media-controls-enclosure{overflow:hidden;}

Andthe...-panelawidth:calc(100%+32px):

video::-webkit-media-controls-panel{width:calc(100%+32px);/*+otamanhodobotão*/}

Example

Withthis,justassigntheabovestylestoaspecificclassandusewhenneeded:

video.non-downloadable::-webkit-media-controls-enclosure{
 overflow: hidden;
}
video.non-downloadable::-webkit-media-controls-panel{
  width: calc(100% + 32px);
}

<h1>Apparently Non-Downloadable</h1>

<video controls width="500" src="https://www.html5rocks.com/pt/tutorials/video/basics/Chrome_ImF.mp4"class="non-downloadable" >
</video>

<h1>Downloadable</h1>

<video controls width="500" src="https://www.html5rocks.com/pt/tutorials/video/basics/Chrome_ImF.mp4">
</video>