w3schools - video tag html5 remove download




No Chrome 55, evite exibir o botão Download do vídeo HTML 5 (6)

A melhor maneira de utilizar o botão "download" é ​​usar players JavaScript, como Videojs ( http://docs.videojs.com/ ) ou MediaElement.js ( http://www.mediaelementjs.com/ )

Por padrão, eles não têm o botão de download por padrão e, além disso, permitem personalizar os botões de controle visíveis do player.

Esta pergunta já tem uma resposta aqui:

Estou recebendo este botão de download com tags <video> no Chrome 55, mas não no Chrome 54:

Como posso remover isso para que ninguém veja o botão de download no Chrome 55?

Eu usei a tag <video> para incorporar este vídeo na minha página da web. Então, eu quero algum tipo de código para remover esta opção de download.

Aqui está meu código atual:

<video width="512" height="380"  controls>
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

A partir do Chrome58, agora você pode usar controlsList para remover os controles que não deseja que sejam mostrados. Está disponível para as tags <audio> e <video> .

Se você deseja remover o botão de download nos controles, faça o seguinte:

<audio controls controlsList="nodownload">

Esta é a solução ( deste post )

video::-internal-media-controls-download-button {
    display:none;
}

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

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}

Atualização 2: Nova solução por @Remo

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

Isso pode ocultar o botão de download no Chrome quando o áudio HTML5 é usado.

 #aPlayer > audio { width: 100% }
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
     /* HIDE DOWNLOAD AUDIO BUTTON */
     #aPlayer {
           overflow: hidden;width: 390px; 
    }

    #aPlayer > audio { 
      width: 420px; 
    }
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
    
      #aPlayer {
           overflow: hidden;width: 390px; 
        }

    #aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
 <audio autoplay="autoplay" controls="controls">
  <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
 </audio>
</div>


Quanto à versão atual do Chrome (56), você ainda não pode removê-la. A solução fornecida em outras postagens leva ao transbordamento de parte do vídeo.

Encontrei outra solução - você pode fazer com que o botão anterior se sobreponha ao botão de download e simplesmente cubra-o, usando esta técnica:

video::-webkit-media-controls-fullscreen-button {
   margin-right: -48px;
   z-index: 10;
   position: relative;
   background: #fafafa;
   background-image: url(https://image.flaticon.com/icons/svg/151/151926.svg);
   background-size: 35%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

Exemplo: https://jsfiddle.net/dk4q6hh2/

PS Você pode personalizar o ícone, pois é apenas por exemplo.


Resolvi o problema, cobrindo o botão de download de um controlador de áudio com uma div transparente que altera o símbolo do cursor do mouse para "não permitido".

O div bloqueia a ativação do botão de download.

Altura: 50px, Largura: 35px, Esquerda: (documento-direito -60), Parte superior: (igual ao controlador de áudio).

Você deve definir o estilo de índice z da div acima do índice z do controlador de áudio.

Veja sapplic.com/jive66 para um exemplo que funciona no chrome no win7 e no win8.





html5-video