Escondendo o botão com um Blob
Ao fazer um blob do vídeo e depois um parse para URL (usando URL.createObjectURL), o Google Chrome automaticamente esconde o botão:
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
Escondendo o botão com CSS
Esse botão pertence ao shadow DOM do elemento <video>
no HTML5. Ao olhar sua árvore de elementos e seus respectivos estilos, com o uso do Google DevTools (após habilitar a opção de "Show user agent shadow DOM"), temos que o botão de download tem, por padrão, 32px
de largura:
Vemos também duas div
: -webkit-media-controls-panel
e -webkit-media-controls-enclosure
. Sendo a segunda a parent da primeira.
Logo, basta que atribuamos a ...-enclosure
um overflow: hidden
:
video::-webkit-media-controls-enclosure{
overflow: hidden;
}
E a ...-panel
um width: calc(100% + 32px)
:
video::-webkit-media-controls-panel{
width: calc(100% + 32px); /* + o tamanho do botão */
}
Exemplo
Com isso, basta atribuir os estilos acima a uma classe específica e usar quando necessário:
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>
Obs.: Claro, quem quiser realmente baixar o vídeo, além de ter a opção do context menu (botão direito), pode mudar o estilo no DevTools, mas para uma primeira impressão é isso.