web-dev-qa-db-fra.com

Dans Chrome 55, ne pas afficher le bouton de téléchargement pour la vidéo HTML 5

Je reçois ce bouton de téléchargement avec les balises <video> dans Chrome 55, mais pas sur Chrome 54: enter image description here

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

J'ai utilisé la balise <video> pour intégrer cette vidéo à ma page Web. Donc, je veux une sorte de code pour supprimer cette option de téléchargement.

Voici mon code actuel:

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

C'est la solution (de this post )

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

Mise à jour 2: Nouvelle solution par @Remo

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

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

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

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

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

279
Remo

À partir de Chrome58, vous pouvez maintenant utiliser controlsList pour supprimer les contrôles que vous ne souhaitez pas afficher. Ceci est disponible pour les balises <audio> et <video>.

Si vous souhaitez supprimer le bouton de téléchargement dans les contrôles, procédez comme suit:

<audio controls controlsList="nodownload">
63
Nithin Girish

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

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

Click here to see the screenshot

12
Alper Ebicoglu

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();
  });
});

$ undevinded? -> Modus 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é!

3
Chris Kroon

En ce qui concerne la version actuelle de Chrome (56), vous ne pouvez pas la supprimer pour le moment. La solution fournie dans d'autres publications entraîne le débordement d'une partie de la vidéo.

J'ai trouvé une autre solution - vous pouvez faire en sorte que le bouton précédent chevauche le bouton de téléchargement et le recouvre simplement, en utilisant cette technique:

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;
}

Exemple: https://jsfiddle.net/dk4q6hh2/

PS Vous voudrez peut-être personnaliser l’icône, car c’est seulement à titre d’exemple.

2
pwkc

Le meilleur moyen d’utiliser le bouton "Télécharger" est d’utiliser des lecteurs JavaScript, tels que Videojs ( http://docs.videojs.com/ ) ou MediaElement.js ( http: //www.mediaelementjs.com/ )

En règle générale, ils ne possèdent pas de bouton de téléchargement et vous permettent en outre de personnaliser les boutons de contrôle visibles du lecteur.

0
Andrey Tzar