Désactiver le bouton de téléchargement pour Google Chrome?

Google Chrome est désormais livré avec un bouton de téléchargement pour les vidéos qui ne sont que des vidéos intégrées (c’est-à-dire pas MSE):

Contrôles Canaries

J’ai du mal à trouver de la documentation pour l’implémentation de Chrome de la . Est-ce que quelqu’un sait s’il existe un moyen – à moins de désactiver les “contrôles” et de créer vos propres commandes de lecteur vidéo – de désactiver cette fonctionnalité?

Je me rends compte que si cela est visible, il est déjà facile de télécharger la vidéo, je veux juste désactiver cette fonctionnalité pour qu’elle n’apparaisse pas dans les contrôles.

Je vous remercie!

ou vous pouvez simplement append nodownload dans controlsList

  

Vous pouvez inspecter les commandes du lecteur vidéo Chrome natif en activant le DOM de l’ombre dans Settings|Preferences -> Elements -> Show user agent shadow DOM

dom ombre

Après cela, vous pouvez inspecter les boutons des joueurs.

Joueur DOM

Maintenant, le problème est que le bouton de téléchargement n’est pas accessible via CSS pour une raison quelconque.

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

ne marchera pas Même la sélection du bouton précédent et le ciblage de son voisin à l’aide de + ou de ~ ne fonctionneront pas.

La seule façon dont nous avons trouvé encore était de pousser le bouton hors de la zone visible en donnant au panneau de contrôle une plus grande largeur et en faisant overflow: hidden le boîtier overflow: hidden

 video::-webkit-media-controls { overflow: hidden !important } video::-webkit-media-controls-enclosure { width: calc(100% + 32px); margin-left: auto; } 

J’espère que Google va bientôt résoudre ce problème, car la plupart des fournisseurs de contenu ne seront pas satisfaits de cela …

La solution Demmongonis fonctionne mais sachez que cela peut entraîner des résultats indésirables.

Android / Chrome parfois, dépend de la vidéo, je suppose et d’autres facteurs, ajoute des boutons à droite du bouton de téléchargement. c’est à dire le bouton de casting (il n’y a aucun moyen de le sélectionner). Le bouton de téléchargement restra visible et le dernier bouton sera caché (bouton de casting)

bouton de coulée sous Android 4.4 Chrome 55

Mettre à jour

Il est maintenant possible de masquer le bouton de téléchargement à l’aide de l’atsortingbut controlsList:

  

Oui, c’est possible maintenant, au moins au moment de l’écriture, vous pouvez utiliser l’atsortingbut controlsList :

  

Il semble que cela a été introduit dans Chrome 58, et la documentation de celui-ci se trouve ici: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Les développeurs peuvent désormais personnaliser les commandes multimédia, telles que les boutons de téléchargement, plein écran et lecture à distance. Utilisation en HTML:

Il y a même une page d’échantillon officielle: https://googlechrome.github.io/samples/media/controlslist.html

Ajoutez ce code css.

  audio::-internal-media-controls-download-button { display:none; } audio::-webkit-media-controls-enclosure { overflow:hidden; } audio::-webkit-media-controls-panel { width: calc(100% + 30px); /* Adjust as needed */ } 

En plus des réponses ci-dessus, vous devez append le code suivant pour désactiver le menu contextuel:

index.html: (globalement)

  

OU vous pouvez désactiver le menu contextuel pour certains éléments :

 element.oncontextmenu = function (e) { e.preventDefault(); }; 

La réponse ci-dessus offre une bonne solution. Cependant, lorsque je travaillais à cela dans mon projet, il y avait deux problèmes.

  1. Le téléchargement se produit (comme si le bouton de téléchargement avait été pressé) lorsque la zone de marge droite du bouton plein écran est appuyée sur Android (mobile ou tablette). Appliquer z-index ne l’a pas réparé.

  2. En raison du débordement: masqué, le bouton de téléchargement est invisible mais existe toujours à droite du bouton plein écran. Cela signifie que lorsque vous appuyez sur “tab” plusieurs fois après avoir cliqué sur un bouton ou une barre de contrôle du PC, vous pouvez toujours accéder au bouton de téléchargement.

En outre, soyez prudent – certains périphériques de petite taille (par exemple, les téléphones portables) sont suffisamment petits pour masquer la barre de recherche. Il faudrait beaucoup plus de pixels pour masquer le bouton de téléchargement.

J’espère que Google offre la possibilité d’ajuster cet ASAP.

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

Pour un développement web normal

  

Vidéos HTML5 avec préchargement sur false

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

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

  

Vidéos HTML5 avec préchargement sur false

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

Faites-moi savoir si cela vous a aidé!

Pour restr simple .. Vous devez append un atsortingbut appelé controlslist (LOWERCASE, directement après les contrôles) et vous devez définir sa valeur sur = “nodownload”. Assurez-vous également que votre fichier src (type) et la valeur de votre type d’atsortingbut correspondent, contrairement à certains des exemples ci-dessus. mon lien est un fichier nommé «sunrise over water.mp4» sur mon Google Drive. Comment je le fais ressemble à ceci:

OU