Wie kann ich "Video speichern unter ..." im Kontextmenü eines Browsers deaktivieren, um zu verhindern, dass Clients ein Video herunterladen?
Gibt es umfassendere Lösungen, die den Client daran hindern, direkt auf einen Dateipfad zuzugreifen?
Sie können nicht . Das liegt daran, dass Browser dafür entwickelt wurden: Inhalt bereitstellen. Aber Sie können das Herunterladen erschweren.
Als Erstes können Sie könnte das contextmenu
-Ereignis deaktivieren, auch bekannt als "Rechtsklick". Das würde verhindern, dass Ihr normaler Skiddie Ihr Video durch Klicken mit der rechten Maustaste und Speichern unter krass zerreißt. Aber dann könnten sie einfach JS deaktivieren und dies umgehen oder die Videoquelle über den Debugger des Browsers finden. Plus das ist schlecht UX. Es gibt viele legitime Dinge in einem Kontextmenü als nur Speichern unter.
Sie können auch benutzerdefinierte Videoplayer-Bibliotheken verwenden. Die meisten von ihnen implementieren Video-Player, die das Kontextmenü nach Ihren Wünschen anpassen. Sie erhalten also nicht das Standard-Browser-Kontextmenü. Und wenn sie jemals ein Menüelement wie Speichern unter bereitstellen, können Sie es deaktivieren. Aber auch dies ist eine JS-Problemumgehung. Schwächen sind ähnlich wie bei der vorherigen Option.
Eine andere Möglichkeit besteht darin, das Video mit HTTP Live Streaming bereitzustellen. Im Wesentlichen wird das Video in Stücke geschnitten und nacheinander bereitgestellt. Auf diese Weise werden auf den meisten Streaming-Sites Videos bereitgestellt. Selbst wenn Sie es also schaffen, zu speichern, speichern Sie nur einen Teil, nicht das gesamte Video. Es würde etwas mehr Mühe erfordern, alle Stücke zu sammeln und sie mit einer speziellen Software zusammenzufügen.
Eine andere Technik besteht darin, <video>
auf <canvas>
zu malen . In dieser Technik sehen Sie mit etwas JavaScript auf der Seite ein <canvas>
Element, das Frames aus einem versteckten <video>
rendert. Und weil es ein <canvas>
ist, verwendet das Kontextmenü das Menü eines <img>
, nicht eines <video>
. Sie erhalten ein Bild speichern unter anstelle eines Videos speichern unter.
Sie können auch CSRF-Token zu Ihrem Vorteil verwenden. Sie würden Ihren Server ein Token auf die Seite schicken lassen. Mit diesem Token holst du dann dein Video. Ihr Server überprüft, ob es sich um ein gültiges Token handelt, bevor er das Video liefert, oder erhält ein HTTP 401 . Die Idee ist, dass Sie ein Video immer nur mit einem Token erhalten können, das Sie nur erhalten können, wenn Sie von der Seite kommen und nicht direkt die Video-URL besuchen.
Letztendlich würde ich mein Video einfach auf eine Video-Site eines Drittanbieters wie YouTube oder Vimeo hochladen. Sie verfügen über gute Videoverwaltungs-Tools, optimieren die Wiedergabe auf dem Gerät und verhindern, dass Ihre Videos ohne großen Aufwand kopiert werden.
Dies ist eine einfache Lösung für alle, die einfach die Rechtsklick-Option "Speichern" aus den HTML5-Videos entfernen möchten
$(document).ready(function(){
$('#videoElementID').bind('contextmenu',function() { return false; });
});
Einfache antwort,
Wenn sie Ihr Video ansehen, haben sie haben es schon
Sie können sie verlangsamen, aber nicht aufhalten.
Die beste Methode, die ich normalerweise verwende, ist sehr einfach. Ich deaktiviere das Kontextmenü auf der gesamten Seite vollständig. Reines HTML + Javascript:
<body oncontextmenu="return false;">
Das ist es! Ich mache das, weil Sie die Quelle immer durch Rechtsklick sehen können.
Ok, Sie sagen: "Ich kann die Browser-Ansichtsquelle direkt verwenden", und es stimmt, aber wir gehen davon aus, dass Sie KANN NICHT html5
-Videos herunterladen.
www.foo.com/player.html
www.foo.com/videos/video.mp4
Speichern Sie eine Datei in diesem Unterverzeichnis mit dem Namen ".htaccess" und fügen Sie die folgenden Zeilen hinzu.
www.foo.com/videos/.htaccess
#Contents of .htaccess
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http://foo.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.foo.com/.*$ [NC]
RewriteRule .(mp4|mp3|avi)$ - [F]
Jetzt ist der Quelllink unbrauchbar , aber wir müssen trotzdem sicherstellen, dass jeder Benutzer, der versucht, die Datei herunterzuladen, die Datei nicht direkt bedienen kann .
Für eine vollständigere Lösung , servieren Sie das Video jetzt mit einem Flash-Player (oder HTML-Canvas) und verknüpfen Sie es niemals direkt mit dem Video. Um nur das Rechtsklick-Menü zu entfernen, fügen Sie es Ihrem HTML-Code hinzu:
<body oncontextmenu="return false;">
www.foo.com/player.html spielt das Video korrekt ab , aber wenn Sie www.foo.com/videos/video.mp4 besuchen:
Fehlercode 403: VERBOTEN
Dies ist eine vollständige Antwort auf die beiden gestellten Fragen und keine Antwort auf die Frage: "Kann ich verhindern, dass ein Nutzer ein bereits heruntergeladenes Video herunterlädt?"
JA, DU KANNST :
Als Client-seitiger Entwickler empfehle ich die Verwendung der Blob-URL Blob-URL ist eine clientseitige URL, die auf ein binäres Objekt verweist
<video id="id" width="320" height="240" type='video/mp4' controls > </video>
in HTML lassen Sie Ihr Video src
leer, und in JS rufen Sie die Videodatei mit AJAX ab. Stellen Sie sicher, dass der Antworttyp blob ist
window.onload = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'mov_bbb.mp4', true);
xhr.responseType = 'blob'; //important
xhr.onload = function(e) {
if (this.status == 200) {
console.log("loaded");
var blob = this.response;
var video = document.getElementById('id');
video.oncanplaythrough = function() {
console.log("Can play through video without stopping");
URL.revokeObjectURL(this.src);
};
video.src = URL.createObjectURL(blob);
video.load();
}
};
xhr.send();
}
PHP sendet das html5-Video-Tag zusammen mit einer Sitzung, in der der Schlüssel eine zufällige Zeichenfolge und der Wert der Dateiname ist.
ini_set('session.use_cookies',1);
session_start();
$ogv=uniqid();
$_SESSION[$ogv]='myVideo.ogv';
$webm=uniqid();
$_SESSION[$webm]='myVideo.webm';
echo '<video autoplay="autoplay">'
.'<source src="video.php?video='.$ogv.' type="video/ogg">'
.'<source src="video.php?video='.$webm.' type="video/webm">'
.'</video>';
Nun wird PHP aufgefordert, das Video zu senden. PHP stellt den Dateinamen wieder her; löscht die Sitzung und sendet das Video sofort. Darüber hinaus müssen alle Header "no cache" und "mime-type" vorhanden sein.
ini_set('session.use_cookies',1);
session_start();
$file='myhiddenvideos/'.$_SESSION[$_GET['video']];
$_SESSION=array();
$params = session_get_cookie_params();
setcookie(session_name(),'', time()-42000,$params["path"],$params["domain"],
$params["secure"], $params["httponly"]);
if(!file_exists($file) or $file==='' or !is_readable($file)){
header('HTTP/1.1 404 File not found',true);
exit;
}
readfile($file);
exit:
Wenn der Benutzer nun die URL in eine neue Registerkarte kopiert oder das Kontextmenü verwendet, hat er kein Glück.
Sie können zumindest die nicht technisch versierten Leute davon abhalten, das Kontextmenü zum Herunterladen Ihres Videos zu verwenden. Sie können das Kontextmenü für jedes Element mit dem Attribut oncontextmenu deaktivieren.
oncontextmenu="return false;"
Dies funktioniert für das Body-Element (ganze Seite) oder nur für ein einzelnes Video, das es innerhalb des Video-Tags verwendet.
<video oncontextmenu="return false;" controls>...</video>
+1 Einfacher und browserübergreifender Weg: Sie können mit css z-index und Deckkraft auch ein transparentes Bild über das Video legen . So sehen Benutzer im Kontextmenü "Bild speichern unter" anstatt "Video speichern" .
Wir haben AWS CloudFront mit auslaufenden URLs verwendet. Das Video wird geladen, aber bis der Benutzer mit der rechten Maustaste klickt und "Speichern unter" wählt, ist die ursprünglich erhaltene Video-URL abgelaufen. Suchen Sie nach CloudFront Origin Access Identity.
Die Erstellung der Video-URL erfordert ein Schlüsselpaar, das in der AWS-CLI erstellt werden kann. Zu Ihrer Information, das ist nicht mein Code, aber es funktioniert super!
$resource = 'http://cdn.yourwebsite.com/videos/yourvideourl.mp4';
$timeout = 4;
//This comes from key pair you generated for cloudfront
$keyPairId = "AKAJSDHFKASWERASDF";
$expires = time() + $timeout; //Time out in seconds
$json = '{"Statement":[{"Resource":"'.$resource.'","Condition" {"DateLessThan":{"AWS:EpochTime":'.$expires.'}}}]}';
//Read Cloudfront Private Key Pair
$fp=fopen("/absolute/path/to/your/cloudfront_privatekey.pem","r");
$priv_key=fread($fp,8192);
fclose($fp);
//Create the private key
$key = openssl_get_privatekey($priv_key);
if(!$key)
{
echo "<p>Failed to load private key!</p>";
return;
}
//Sign the policy with the private key
if(!openssl_sign($json, $signed_policy, $key, OPENSSL_ALGO_SHA1))
{
echo '<p>Failed to sign policy: '.openssl_error_string().'</p>';
return;
}
//Create url safe signed policy
$base64_signed_policy = base64_encode($signed_policy);
$signature = str_replace(array('+','=','/'), array('-','_','~'), $base64_signed_policy);
//Construct the URL
$url = $resource.'?Expires='.$expires.'&Signature='.$signature.'&Key-Pair-Id='.$keyPairId;
return '<div class="videowrapper" ><video autoplay controls style="width:100%!important;height:auto!important;"><source src="'.$url.'" type="video/mp4">Your browser does not support the video tag.</video></div>';
Das
<body oncontextmenu="return false;">
funktioniert nicht mehr. Chrome und Opera (Stand Juni 2018) enthält ein Untermenü in der Timeline, um den direkten Download zu ermöglichen. Der Benutzer muss daher nicht mit der rechten Maustaste klicken, um das Video herunterzuladen. Interessanterweise haben Firefox und Edge dies nicht ...
Verwenden eines Dienstes wie Vimeo: Melden Sie sich in Vimeo > Goto Video > Settings > Privacy > Mark as Secured
an und wählen Sie auch Einbettungsdomänen aus. Sobald die eingebetteten Domänen festgelegt sind, kann niemand das Video einbetten oder über den Browser anzeigen, es sei denn, es wird eine Verbindung mit den angegebenen Domänen hergestellt. Wenn Sie also über eine Seite verfügen, die auf Ihrem Server gesichert ist und den Vimeo-Player in iframe lädt, ist dies sehr schwierig.
Zunächst einmal ist klar , dass es unmöglich ist, das Herunterladen eines Videos vollständig zu verhindern. Alles, was Sie tun können, ist es schwieriger zu machen . Das heißt Sie verstecken die Quelle des Videos.
Ein Webbrowser lädt das Video vorübergehend in einen Puffer herunter. Wenn Sie also das Herunterladen verhindern könnten, würden Sie auch verhindern, dass das Video ebenfalls angezeigt wird.
Sie sollten auch wissen, dass <1% der Gesamtbevölkerung der Welt in der Lage sein wird, den Quellcode zu verstehen, was ihn sowieso ziemlich sicher macht. Das bedeutet nicht, dass Sie es nicht auch in der Quelle verstecken sollten - sollten Sie .
Sie sollten nicht den Rechtsklick deaktivieren , und noch weniger sollten Sie eine Meldung anzeigen, die "You cannot save this video for copyright reasons. Sorry about that."
. Wie in diese Antwort vorgeschlagen.
Dies kann für den Benutzer sehr störend und verwirrend sein. Abgesehen davon; Wenn sie JavaScript in ihrem Browser deaktivieren, können sie trotzdem mit der rechten Maustaste klicken und speichern.
Hier ist ein CSS-Trick, den Sie verwenden könnten:
video {
pointer-events: none;
}
CSS kann im Browser nicht deaktiviert werden, um Ihr Video zu schützen, ohne den Rechtsklick zu deaktivieren. Ein Problem ist jedoch, dass controls
ebenfalls nicht aktiviert werden kann, dh, sie müssen auf false
gesetzt werden. Wenn Sie Ihre eigene Play/Pause-Funktion implementieren oder eine API verwenden, deren Schaltflächen vom Tag video
getrennt sind, ist dies eine mögliche Option.
controls
hat auch einen Download-Button, daher ist es auch keine so gute Idee, ihn zu benutzen.
Hier ist ein JSFiddle Beispiel.
Wenn Sie Rechtsklick mit JavaScript deaktivieren möchten, speichern Sie auch die Quelle des Videos in JavaScript. Wenn der Benutzer JavaScript deaktiviert (Rechtsklick zulässt), wird das Video nicht geladen (es verbirgt auch die Videoquelle ein wenig besser).
Von TxRegex-Antwort :
<video oncontextmenu="return false;" controls>
<source type="video/mp4" id="video">
</video>
Fügen Sie nun das Video über JavaScript hinzu:
document.getElementById("video").src = "https://www.w3schools.com/html/mov_bbb.mp4";
Functional JSFiddle
Eine andere Möglichkeit, einen Rechtsklick zu verhindern, besteht in der Verwendung des Tags embed
. Dies stellt jedoch nicht die Steuerelemente zum Ausführen des Videos bereit, sodass diese in JavaScript implementiert werden müssten:
<embed src="https://www.w3schools.com/html/mov_bbb.mp4"></embed>
Kurze Antwort: Verschlüsseln Sie den Link wie youtube, wissen Sie nicht wie, fragen Sie youtube/google, wie sie das machen. (Nur für den Fall, dass Sie direkt auf den Punkt eingehen möchten.)
Ich möchte jeden darauf hinweisen, dass dies möglich ist, weil youtube dies tut und wenn es möglich ist, dass eine andere Website auch nicht vom Browser heruntergeladen werden kann, weil ich es auf einigen Browsern wie Microsoft Edge und Internet Explorer getestet habe Es gibt also einen Weg, es zu deaktivieren und zu sehen, dass die Leute es immer noch sagen ... Ich versuche, nach einer Antwort zu suchen, denn wenn Youtube es kann, dann muss es einen Weg geben und der einzige Weg, um zu sehen, wie sie es tun, ist, wenn jemand nachgesehen hat die Skripte von youtube, die ich jetzt mache. Ich habe auch geprüft, ob es sich auch um ein benutzerdefiniertes Kontextmenü handelt. Dies ist nicht darauf zurückzuführen, dass das Kontextmenü das zu überwachende Element überfließt und ich meine, als wäre es darüber und ich schaute und es erstellt niemals eine neue Klasse und auch es Es ist unmöglich, auf das inspect-Element tatsächlich mit Javascript zuzugreifen, sodass dies nicht möglich ist. Sie können erkennen, wenn Sie mit der rechten Maustaste auf ein Youtube-Video doppelklicken, dass das Kontextmenü für Chrome angezeigt wird. Außerdem ... youtube würde diese Funktion nicht hinzufügen. Ich recherchiere und schaue durch die Quelle von youtube, also bin ich zurück, wenn ich die Antwort finde. Ich forsche wie ich. Die einzige Möglichkeit, YouTube-Videos herunterzuladen, ist das Herunterladen von Videos.
Okay ... Ich habe recherchiert und meine Forschung bleibt, dass Sie es deaktivieren können, außer es gibt kein Javascript ... Sie müssen in der Lage sein, die Links zu dem Video zu verschlüsseln, damit Sie es deaktivieren können, weil ich denke, dass es nicht möglich ist Browser zeigt es nicht an, wenn es nicht gefunden wird, und als ich einen Youtube-Video-Link öffnete, zeigte es Folgendes an: "Blob: https://www.youtube.com/e5c4808e-297e-451f-80da-3e838caa1275 "ohne Anführungszeichen, so dass es verschlüsselt wird, damit es nicht gespeichert werden kann ... Sie müssen php dafür wissen. Aber wie die Antwort, die Sie daraus gemacht haben, um es schwerer zu machen, macht youtube es am schwersten, es stark zu verschlüsseln ein fortgeschrittener php-programmierer, aber wenn Sie das nicht wissen, dann nehmen Sie die Person, die Sie ausgewählt haben, als beste Antwort, weil es schwierig ist, sie herunterzuladen. Wenn Sie jedoch wissen, dass PHP stark ist, verschlüsseln Sie den Videolink so, dass er nur gelesen werden kann Ich weiß nicht, wie ich es erklären soll, aber sie haben es getan und es gibt einen Weg. Die Art und Weise, wie youtube Videos verschlüsselt, ist ziemlich klug. Wenn Sie also wissen möchten, wie Sie youtube/google danach fragen, wie sie das machen, hoffe ich, dass dies für Sie hilfreich ist, obwohl Sie bereits eine beste Antwort ausgewählt haben. Daher ist das Verschlüsseln des Links auf kurze Sicht am besten.
Es scheint, als wäre das Streamen des Videos durch Websocket eine praktikable Option, da beim Streamen die Frames angezeigt und auf eine Art Leinwand gezeichnet werden.
Video-Streaming über Websockets mit JavaScript
Ich denke, das würde eine weitere Schutzstufe bieten, die es dem Kunden erschwert, das Video abzurufen, und kann Ihr Problem natürlich mit "Kontextmenü" (Video speichern unter ...) lösen.
Folgendes habe ich getan:
function noRightClick() {
alert("You cannot save this video for copyright reasons. Sorry about that.");
}
<body oncontextmenu="noRightClick();">
<video>
<source src="http://calumchilds.com/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</body>
Wir könnten das nicht so einfach machen, indem wir das Kontextmenü wie folgt ausblenden:
<video oncontextmenu="return false;" controls>
<source src="https://yoursite.com/yourvideo.mp4" >
</video>