varios - En Chrome 55, evite mostrar el botón Descargar para video HTML 5

reproductor de video html5 gratis

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Deshabilitar el botón de descarga para Google Chrome? 11 respuestas

Recibo este botón de descarga con etiquetas <video> en Chrome 55, pero no en Chrome 54:

¿Cómo puedo eliminar esto para que nadie pueda ver el botón de descarga en Chrome 55?

He usado la etiqueta <video> para insertar este video en mi página web. Entonces, quiero algún tipo de código para eliminar esta opción de descarga.

Aquí está mi código actual:

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

Answer 1

¡Hola, encontré una solución permanente que debería funcionar en todos los casos!

Para desarrollo web normal

<script type="text/javascript"> 
$("video").each(function(){jQuery(this).append(''controlsList="nodownload"'')}); 
</script>

Videos HTML5 que tienen precarga en falso

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr(''controlsList'',''nodownload'');
    $(this).load();
  });
});

$ sin ganas? -> Modo de depuración!

<script type="text/javascript"> 
jQuery("video").each(function(){jQuery(this).append(''controlsList="nodownload"'')}); 
</script>

Videos HTML5 que tienen precarga en falso

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr(''controlsList'',''nodownload'');
    jQuery(this).load();
  });
});

¡Avísame si te ayudó!

Answer 2

A partir de Chrome58, ahora puede usar los controlesLista para eliminar los controles que no desea que se muestren. Está disponible para las etiquetas <audio> y <video> .

Si desea eliminar el botón de descarga en los controles, haga esto:

<audio controls controlsList="nodownload">

Answer 3

En cuanto a la versión actual de Chrome (56), aún no puede eliminarla. La solución provista en otras publicaciones lleva a desbordar alguna parte del video.

He encontrado otra solución: puede hacer que el botón anterior se superponga al botón de descarga y simplemente cubrirlo, utilizando 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;
}

Ejemplo: https://jsfiddle.net/dk4q6hh2/

PD: es posible que desee personalizar el icono, ya que es solo por ejemplo.

Answer 4

Esta es la solución (de esta publicación )

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 */
}

Actualización 2: Nueva solución de @Remo

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

Answer 5

Esto puede ocultar el botón de descarga en Chrome cuando se usa HTML5 Audio.

 #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>

Answer 6

Google ha agregado una nueva función desde que se publicó la última respuesta aquí. Ahora puede agregar el atributo controlList como se muestra aquí:

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

Puede encontrar todas las opciones del atributo controllist aquí:

https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Answer 7

Puede ser la mejor forma de utilizar el botón "descargar" es usar reproductores JavaScript, como Videojs ( http://docs.videojs.com/ ) o MediaElement.js ( http://www.mediaelementjs.com/ )

Por regla general, no tienen un botón de descarga y, además, le permiten personalizar los botones de control visibles del reproductor.

Answer 8

Resolví el problema cubriendo el botón de descarga de un controlador de audio con un div transparente que cambia el símbolo del cursor del mouse a "no permitido".

El div bloquea la activación del botón de descarga.

Altura: 50 px, Ancho: 35 px, Izquierda: (documento-derecha -60), Superior: (igual que el controlador de audio).

Debe establecer el estilo de índice z del div sobre el índice z del controlador de audio.

Consulte sapplic.com/jive66 para ver un ejemplo que funciona para Chrome en win7 y win8.