wake-up-neo.com

Verhindern, dass HTML5-Videos herunterladen?

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?

javascripthtml5menuhtml5-videoright-click
139
python

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.

201
Joseph

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; });
});
107
Clayton Graul

Einfache antwort,

DU KANNST NICHT

Wenn sie Ihr Video ansehen, haben sie haben es schon

Sie können sie verlangsamen, aber nicht aufhalten.

32
Starx

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.

22
Daniele Cannova

Ja, das geht in drei Schritten:

  1. Legen Sie die Dateien, die Sie schützen möchten, in einem Unterverzeichnis des Verzeichnisses ab, in dem Ihr Code ausgeführt wird .

    www.foo.com/player.html 
    www.foo.com/videos/video.mp4 

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

  1. 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;">


Das Ergebnis:

www.foo.com/player.html spielt das Video korrekt ab , aber wenn Sie www.foo.com/videos/video.mp4 besuchen: 

Fehlercode 403: VERBOTEN


Dies funktioniert für direkten Download, cURL, Hotlinking, Sie nennen es.

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

20
Tzshand

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

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. 

10
B.F.

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

+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" .

3
Alex Babak

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>';
3
prophoto

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

2
kendolew

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.

2
CommentUser

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

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. 

1
Jonathan J. Pecany

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.

0
Guy

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>
Dies funktioniert auch für Bilder, Text und so ziemlich alles. Sie können jedoch weiterhin über Tastenkombinationen auf das Tool "Inspect" und "View source" zugreifen. (Wie die Antwort oben sagt, können Sie sie nicht vollständig aufhalten.) Sie können jedoch versuchen, Barrieren zu bauen, um sie zu stoppen.

0
Calum Childs

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