web-dev-qa-db-fra.com

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

Google Chrome est maintenant livré avec un bouton de téléchargement pour les vidéos qui ne sont que des vidéos incorporées (c'est-à-dire pas MSE):

Canary Controls

J'ai de la difficulté à trouver de la documentation sur la mise en oeuvre de la balise <video> par Google Chrome. Est-ce que quelqu'un sait s'il existe un moyen - à moins de désactiver les "contrôles" et de créer vos propres contrôles de lecteur vidéo - de désactiver cette fonctionnalité?

Je me rends compte que si cela est affiché, 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! 

google-chromehtml5-video
47
ranvel

ou vous pouvez simplement ajouter nodownload dans controlsList 

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

Vous pouvez inspecter les contrôles du lecteur vidéo Google Chrome natif en activant le DOM fantôme dans Settings|Preferences -> Elements -> Show user agent shadow DOM.

 shadow dom

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

 Player 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 fonctionnera pas . Même sélectionner le bouton précédent et cibler son voisin en utilisant + ou ~ ne fonctionnera pas.

La seule solution que nous ayons trouvée à ce jour consiste à déplacer le bouton de la zone visible en donnant au panneau de commande une plus grande largeur et en rendant 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 corrigera bientôt ce problème car la plupart des fournisseurs de contenu ne seront pas satisfaits de cela ...

46
Demnogonis

La solution Demmongonis fonctionne, mais sachez qu'elle peut entraîner des résultats indésirables. 

Android/Chrome parfois, dépend de la vidéo 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). Cela fera en sorte que le bouton de téléchargement reste visible et que le dernier bouton soit caché (bouton de casting)

 casting button in Android 4.4 Chrome 55

Mettre à jour

Il est maintenant possible de cacher le bouton de téléchargement en utilisant l'attribut controlsList: 

<video controlsList="nodownload" ... />
14
jonalvarezz

Oui, cela est possible maintenant, du moins au moment de la rédaction, vous pouvez utiliser l'attribut controlsList:

<video controls controlsList="nodownload">
  <source data-src="movie.mp4">
</video>

Il semble que cela ait été introduit dans Chrome 58 et la documentation correspondante 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édias telles que les boutons de téléchargement, plein écran et de lecture à distance . Utilisation en HTML:

<video controls controlsList="nofullscreen nodownload noremote foobar"></video>

Il existe même un exemple de page officielle: https://googlechrome.github.io/samples/media/controlslist.html

9
bg17aw

Un autre élément de contrôle que je tentais de désactiver, en plus de 'download' - est 'image dans l'image'.

Malheureusement, il n’ya pas de propriété à ajouter dans la controlsList. Mais il existe un attribut - disablePictureInPicture que vous pouvez ajouter à l'élément pour désactiver pip.

Exemple de désactivation du téléchargement et de l'image dans l'image:

<video disablepictureinpicture controlslist="nodownload">...</video>

Détails: https://wicg.github.io/picture-in-picture/#disable-pip

3
Andrii Bogachenko

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

Pour le développement Web normal 

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

Vidéos HTML5 avec précharge sur false

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

$ indéterminé? -> Mode de débogage! 

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

Vidéos HTML5 avec précharge 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é!

1
Chris Kroon

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

index.html: (globalement)

<body oncontextmenu="return false;">

OU vous pouvez désactiver le menu contextuel pour un élément élément :

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

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

Pour rester simple .. Vous devez ajouter un attribut appelé controlslist (LOWERCASE, directement après les contrôles) et définir sa valeur sur = "nodownload". Assurez-vous également que votre fichier src (type) et la valeur de votre type d'attribut correspondent, contrairement à certains des exemples ci-dessus; mon lien est un fichier nommé "sunrise over water.mp4" sur Google Drive. Comment je fais ça ressemble à ça:

<video src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" title="sunrise over water" width="420" height="300" controls controlslist="nodownload" type="video/mp4"> Video Not Supported By Your Browser... </video>

OU 

<video width="440" height="320" title="sunrise over water" controls controlslist="nodownload"> <source src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" type="video/mp4"> Video Could Not Be Played In Your Browser... Sorry. </video>

0
Sean Tank Garvey

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

  1. Le téléchargement a lieu (comme si le bouton de téléchargement avait été enfoncé) lorsque la zone de la marge droite du bouton plein écran est touchée sur Android (mobile ou tablette). L'application de z-index n'a pas résolu le problème.

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

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

J'espère que Google fournira la possibilité de régler ce problème dès que possible.

0
Meow Kim