it-swarm.com.de

Download-Schaltfläche für Google Chrome deaktivieren?

Google Chrome wird jetzt mit einer Download-Schaltfläche für Videos geliefert, bei denen es sich nur um eingebettete Videos handelt (d. H. Nicht um MSE):

Canary Controls

Es fällt mir schwer, Dokumentation für die Implementierung des <video>-Tags von Chrome zu finden. Weiß jemand, ob es eine Möglichkeit gibt, die "Steuerelemente" zu deaktivieren und eigene Videoplayer-Steuerelemente zu erstellen, um diese Funktion zu deaktivieren?

Mir ist klar, dass das Video bereits heruntergeladen werden kann, wenn dies angezeigt wird. Ich möchte nur, dass diese Funktion nicht als Teil der Steuerelemente angezeigt wird. 

Vielen Dank! 

47
ranvel

oder Sie können einfach nodownload in controlsList hinzufügen

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

Sie können die Steuerelemente des nativen Chrome Video Players überprüfen, indem Sie das Schatten-DOM in Settings|Preferences -> Elements -> Show user agent shadow DOM aktivieren.

 shadow dom

Danach können Sie die Schaltflächen der Spieler überprüfen. 

 Player DOM

Das Problem ist nun, dass der Download-Button aus irgendeinem Grund nicht über CSS zugänglich ist.

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

funktioniert nicht .. Auch das Auswählen der vorhergehenden Schaltfläche und das Anvisieren des Nachbarn mit + oder ~ funktioniert nicht.

Der einzige Weg, den wir bisher gefunden hatten, bestand darin, die Schaltfläche aus dem sichtbaren Bereich herauszudrücken, indem dem Bedienfeld eine größere Breite verliehen wurde und das Gehäuse overflow: hidden

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

Ich hoffe, Google wird dieses Problem bald beheben, da die meisten Anbieter von Inhalten damit nicht zufrieden sind ...

46
Demnogonis

Die Demmongonis-Lösung funktioniert zwar, kann jedoch zu unerwünschten Ergebnissen führen. 

Android/Chrome hängt in manchen Fällen von dem Video ab, das ich schätze, und fügt Schaltflächen rechts vom Download-Button hinzu. die Casting-Taste (es gibt keine Möglichkeit, sie auszuwählen). Der Download-Button bleibt sichtbar und der letzte Button wird ausgeblendet (Casting-Button).

 casting button in Android 4.4 Chrome 55

Update

Es ist jetzt möglich, die Download-Schaltfläche mit dem Attribut controlsList auszublenden: 

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

Ja, das ist jetzt möglich, zumindest zum Zeitpunkt des Schreibens können Sie das controlsList-Attribut verwenden:

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

Es scheint, dass dies in Chrome 58 eingeführt wurde, und die Dokumentation dazu ist hier zu finden: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

Entwickler können nun die Mediensteuerelemente wie Download, Vollbild und Remoteplayback-Schaltflächen anpassen. Verwendung in HTML:

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

Es gibt sogar eine offizielle Beispielseite: https://googlechrome.github.io/samples/media/controlslist.html

9
bg17aw

Ein weiteres Kontrollelement, das ich deaktivieren wollte, zusätzlich zu 'download' - ist 'picture-in-picture'.

Leider gibt es keine Eigenschaft, die in die controlsList aufgenommen werden kann. Es gibt jedoch ein Attribut - disablePictureInPicture, das Sie zum Element hinzufügen können, um pip zu deaktivieren.

Beispiel zum Deaktivieren von Download und Bild-in-Bild:

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

Details: https://wicg.github.io/picture-in-picture/#disable-pip

3

Hey, ich habe eine dauerhafte Lösung gefunden, die in jedem Fall funktionieren sollte!

Für normale Webentwicklung

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

HTML5-Videos, die auf false vorab geladen werden

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

$ unberechenbar? -> Debug-Modus!

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

HTML5-Videos, die auf false vorab geladen werden

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

Lass es mich wissen, wenn es dir geholfen hat!

1
Chris Kroon

Zusätzlich zu den obigen Antworten müssen Sie folgenden Code hinzufügen, um das Kontextmenü zu deaktivieren:

index.html: (global)

<body oncontextmenu="return false;">

ODER Sie können das Kontextmenü für einige element deaktivieren:

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

Fügen Sie diesen CSS-Code hinzu. 

  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

Um es einfach zu halten .. Sie müssen ein Attribut namens Steuerelementliste (LOWERCASE, direkt nach Steuerelementen) hinzufügen und dessen Wert auf = "nodownload" setzen. Stellen Sie außerdem sicher, dass Ihre SRC-Datei (Typ) und der Wert Ihres Attributtyps übereinstimmen, im Gegensatz zu einigen der obigen Beispiele. Mein Link bezieht sich auf eine Datei namens "sunrise over water.mp4" auf meinem Google Drive. Wie ich es sehe, sieht es so aus:

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

ODER 

<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

Nur Javascript, um den "Download" -Button von einem Video auf Ihrer Seite zu deaktivieren:

<script>
    window.onload = function() {
        video = document.querySelector('video');
        if (video) {
           video.setAttribute("controlsList", "nodownload");
        }
    };
</script>

Wenn Sie möchten, können Sie auch querySelectorAll und jedes Video entfernen. In meinem Beispiel habe ich nur ein Video pro Seite.

0
Simon Berton

Die obige Antwort bietet eine gute Lösung. Als ich jedoch in meinem Projekt daran arbeitete, gab es zwei Probleme.

  1. Der Download erfolgt (als ob der Download-Button gedrückt wurde), wenn der rechte Randbereich des Vollbild-Buttons auf Android (Handy oder Tablet) berührt wird. Das Anwenden von Z-Index hat es nicht behoben.

  2. Aufgrund von Überlauf: ausgeblendet ist der Download-Button nicht sichtbar, er befindet sich jedoch rechts neben dem Vollbild-Button. Wenn Sie also mehrmals auf "Tab" drücken, nachdem Sie auf eine der Steuerungsschaltflächen oder Leisten am PC geklickt haben, können Sie immer noch auf die Download-Schaltfläche zugreifen.

Seien Sie außerdem vorsichtig - einige Geräte mit geringer Breite (z. B. Mobiltelefone) sind klein genug, um die Suchleiste auszublenden. Es würde viel mehr Pixel benötigen, um die Download-Schaltfläche auszublenden.

Ich hoffe, Google bietet die Möglichkeit, diesen ASAP anzupassen.

0
Meow Kim