Disable HTML5 Video Download Button

Question

After updating Opera and Chrome, using the tag video started to appear the video download option, as below:

Does anyone know how to disable this? I am using the following code:

     <video width="800" height="600" controls>
          <source src="movie.mp4" type="video/mp4">
          Your browser does not support the video tag.
     </video>

Answer 1

Hiding the button with a Blob

By making a blob video and then a parse to 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 CSS button

That button belongs to the shadow gift of the element <video> in HTML5. When looking at your element tree and its respective styles, using Google Devtools (after enabling the option to "Show user agent shadow DOM"), we have that the download button has by default, 32pxwide:

We also see two div: -webkit-media-controls-panel and -webkit-media-controls-enclosure. The second being Parent of the first.

Therefore, it is enough that we assign the ...-enclosure one overflow: hidden:

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

And the ...-panel one width: calc(100% + 32px):

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

Example

With this, simply assign the above styles to a specific class and use when necessary:

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>

Note: Of course, who really want to download the video, besides having the option of context menu (right click), you can change the style in Devtools, but for a first impression this is it.

Answer 2

You can tag video html controlsList="nodownload" and make sure that the mp4 download option does not appear!