wake-up-neo.com

Verhindern Sie in Chrome 55, dass die Download-Schaltfläche für HTML 5-Videos angezeigt wird

Ich erhalte diese Download-Schaltfläche mit <video> Tags in Chrome 55, aber nicht in Chrome 54: enter image description here

Wie kann ich das entfernen, damit niemand die Download-Schaltfläche in Chrome 55 sieht?

Ich habe das Tag <video> verwendet, um dieses Video auf meiner Webseite einzubetten. Ich möchte also eine Art Code, um diese Download-Option zu entfernen.

Hier ist mein aktueller Code:

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

Dies ist die Lösung (von dieser Beitrag )

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

Update 2: Neue Lösung von @Remo

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

Google hat eine neue Funktion hinzugefügt, seit die letzte Antwort hier gepostet wurde. Sie können jetzt das controlList Attribut wie folgt hinzufügen:

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

Hier finden Sie alle Optionen des Controllist-Attributs:

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

279
Remo

Ab Chrome58 können Sie jetzt controlsList verwenden, um Steuerelemente zu entfernen, die nicht angezeigt werden sollen. Dies ist für die Tags <audio> und <video> verfügbar.

Wenn Sie die Download-Schaltfläche in den Steuerelementen entfernen möchten, gehen Sie folgendermaßen vor:

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

Dadurch kann die Download-Schaltfläche in Chrome ausgeblendet werden, wenn HTML5-Audio verwendet wird.

 #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, ich habe eine dauerhafte Lösung gefunden, die auf jeden Fall funktionieren sollte!

Für normale Webentwicklung

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

HTML5-Videos, bei denen das Preload auf false gesetzt ist

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

$ undevinded? -> Debug-Modus!

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

HTML5-Videos, bei denen das Preload auf false gesetzt ist

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

Lassen Sie mich wissen, ob es Ihnen geholfen hat!

3
Chris Kroon

Die aktuelle Chrome Version (56) kann noch nicht entfernt werden. Die in anderen Beiträgen bereitgestellte Lösung führt zum Überlaufen eines Teils des Videos.

Ich habe eine andere Lösung gefunden - Sie können den vorhergehenden Button so einstellen, dass er den Download-Button überlappt und ihn einfach abdeckt, indem Sie diese Technik anwenden:

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

Beispiel: https://jsfiddle.net/dk4q6hh2/

PS Vielleicht möchten Sie das Symbol anpassen, da es nur als Beispiel dient.

2
pwkc

Möglicherweise ist die Verwendung von JavaScript-Playern wie Videojs ( http://docs.videojs.com/ ) oder MediaElement.js ( http: //www.mediaelementjs.com/ )

Sie haben in der Regel keine Download-Schaltfläche und ermöglichen es Ihnen außerdem, die sichtbaren Steuerungsschaltflächen des Players anzupassen.

0
Andrey Tzar