Bouton de téléchargement désactivé pour Google Chrome?
Google Chrome est maintenant Livraison avec un bouton de téléchargement pour les vidéos qui ne sont que des vidéos intégrées (i.e. pas MSE):
J'ai du mal à trouver de la documentation pour la mise en œuvre de la balise <video> par Chrome. Est - ce que quelqu'un sait s'il y a 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 c'est montrer, c'est déjà facile à télécharger la vidéo, je veux juste de désactiver la fonctionnalité d'apparaître dans le cadre des contrôles.
Merci!
9 réponses
ou vous pouvez simplement ajouter nodownload dans controllslist
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
vous pouvez inspecter les commandes du Lecteur vidéo Chrome natif en activant le DOM shadow dans Settings|Preferences -> Elements -> Show user agent shadow DOM
après cela, vous pouvez inspecter les boutons des joueurs.
maintenant le problème est que le bouton de téléchargement ne peut pas être accédé via CSS pour une raison quelconque.
video::-internal-media-controls-download-button {
display:none;
}
ne marchera pas.
Même en sélectionnant le bouton Précédent et en ciblant son voisin en utilisant + ou ~ ne fonctionnera pas.
le seul moyen que nous ayons trouvé jusqu'à présent était de pousser le bouton hors de la zone visible en donnant au panneau de commande une plus grande largeur et en faisant de l'enceinte 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 résoudre ce problème bientôt parce que la plupart des fournisseurs de contenu ne sera pas heureux avec cela...
demmongonis solution ne fonctionne, mais être conscient qu'il peut conduire à des résultats indésirables.
Android / Chrome parfois, dépend dans la vidéo je suppose et d'autres facteurs, ajoute des boutons à la droite du téléchargement-bouton. i.e. le bouton de moulage (il n'y a aucun moyen de le sélectionner). Il rendra le bouton de téléchargement pour rester visible et le dernier bouton pour se cacher (casting-button)
mise à Jour
il est maintenant possible de cacher le bouton de téléchargement en utilisant l'attribut controllslist:
<video controlsList="nodownload" ... />
Oui, c'est possible maintenant, au moins au moment de l'écriture, 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 pour cela se trouve ici: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
les développeurs peuvent maintenant personnaliser les contrôles médias tels que le téléchargement, fullscreen et remoteplayback bouton. Utilisation en HTML:
<video controls controlsList="nofullscreen nodownload noremote foobar"></video>
il y a même une page échantillon officielle: https://googlechrome.github.io/samples/media/controlslist.html
ajouter 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 ajouter le code suivant pour désactiver le menu contextuel:
de l'index.html: (dans le monde)
<body oncontextmenu="return false;">
ou vous pouvez désactiver le menu contextuel pour certains élément :
element.oncontextmenu = function (e) {
e.preventDefault();
};
La réponse ci-dessus offre une bonne solution. Cependant, lorsque je travaillais sur ce sujet dans mon projet, il y avait deux problèmes avec elle.
-
le téléchargement se produit (comme si le bouton Télécharger avait été pressé) lorsque la marge droite du bouton fullscreen est touchée sur Android (mobile ou tablette). L'application z-index n'ont pas le fixer.
-
en raison de débordement: caché, le bouton de téléchargement est invisible mais encore il existe à droite du bouton fullscreen. Cela signifie que lorsque vous appuyez sur "tab" plusieurs fois après avoir cliqué sur un bouton ou une barre de contrôle sur PC, vous pouvez toujours atteindre le bouton de téléchargement.
en outre, soyez prudent -- certains appareils de faible largeur (par exemple les téléphones mobiles) sont assez petits pour cacher la barre de recherche. Il faudrait beaucoup plus de pixels pour cacher le bouton de téléchargement.
J'espère que Google fournit l'option de régler cette ASAP.
Hey j'ai trouvé une solution permanente qui devrait fonctionner dans tous les cas!
normal création web
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 vidéos qui a préchargé sur false
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ non évalué? --> Debug mode!
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 vidéos qui a préchargé sur false
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
dites-moi si ça vous a aidé!
pour rester simple.. Vous devez ajouter un attribut appelé controllslist (LOWERCASE, directement après les contrôles) et vous devez définir sa valeur à ="nodownload". En outre, assurez-vous que votre fichier src(type) et la valeur de votre type d'attribut correspondent, contrairement à certains des exemples ci-dessus; mon lien est vers un fichier nommé 'sunrise over water.mp4 ' sur Google Drive. Comment je fais cela ressemble à ceci:
<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>