7

Após a atualização do Opera e do Chrome, usando a tag video passou a aparecer a opção de download do video, conforme abaixo:

inserir a descrição da imagem aqui

Alguém sabe como desabilitar isso? Estou usando o seguinte código:

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

2 Respostas 2

3

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, 32pxde largura:

inserir a descrição da imagem aqui

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.

-5

Podes colocar na tag video html controlsList="nodownload" e fará que não apareça a opção do download do mp4!

1
  • 4
    Isso é um recurso experimental, não é suportado pelo Firefox e nem pelo Safari e também não é citado no WHATWG
    – Syzoth
    Commented 17/07/2021 às 19:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .