Dans Chrome 55, empêcher l'affichage du bouton de téléchargement pour la vidéo HTML 5

Question

Je reçois ce bouton de téléchargement avec les balises dans Chrome 55, mais pas sur Chrome 54:

Comment puis-je supprimer cela pour que personne ne puisse voir le bouton de téléchargement dans Chrome 55?

J'ai utilisé la balise pour intégrer cette vidéo sur ma page web. Donc, je veux un genre de code pour supprimer cette option de téléchargement.

Voici mon code actuel:

Answer 1

Google a ajouté une nouvelle fonctionnalité depuis la dernière réponse postée ici. Vous pouvez maintenant ajouter l'attribut controlList comme indiqué ici :

Vous pouvez trouver toutes les options de l'attribut controllist ici :

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

Answer 2

Ceci est la solution (de cet article)

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

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

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Ajustez au besoin */
}

Mise à jour 2 : Nouvelle solution par @Remo

Answer 3

À partir de Chrome58, vous pouvez maintenant utiliser controlsList pour supprimer les contrôles que vous ne souhaitez pas afficher. Ceci est disponible pour les baliseset .

Si vous souhaitez supprimer le bouton de téléchargement dans les contrôles, faites ceci :

Answer 4

Cela peut masquer le bouton de téléchargement sur Chrome lorsque l'audio HTML5 est utilisé.

 #aPlayer > audio { width: 100% }
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
     /* MASQUER LE BOUTON DE TÉLÉCHARGEMENT AUDIO */
     #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; }
}

Answer 5

Hey j'ai trouvé une solution permanente qui devrait fonctionner dans tous les cas!

Pour le développement web normal

$("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 

Vidéos HTML5 avec preload sur false

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

$ non défini ? --> Mode de débogage!

jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 

Vidéos HTML5 avec preload sur false

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

Dis-moi si ça t'a aidé!