Zapobiec pobieraniu wideo HTML5(kliknij prawym przyciskiem myszy)?

Question

Zapobiec pobieraniu wideo HTML5(kliknij prawym przyciskiem myszy)?

Jak mogę wyłączyć " Zapisz wideo jako..."z menu przeglądarki prawym przyciskiem myszy, aby uniemożliwić klientom pobieranie wideo?

Czy istnieją bardziej kompletne rozwiązania, które uniemożliwiają klientowi bezpośredni dostęp do ścieżki pliku?

128

javascript html5 menu right-click html5-video

Author: Mureinik, 2012-03-18

Source

16 answers

Jest to proste rozwiązanie dla tych, którzy chcą po prostu usunąć prawym przyciskiem myszy opcję "Zapisz" Z FILMÓW html5

$(document).ready(function(){
   $('#videoElementID').bind('contextmenu',function() { return false; });
});

102

Author: Clayton Graul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-06 18:39:32

Prosta odpowiedź,

YOU CAN ' T

Jeśli oglądają Twój film, już go mają

Możesz je spowolnić, ale nie możesz ich powstrzymać.

31

Author: Starx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-12 15:43:34

Najlepszy sposób, który zwykle używam jest bardzo prosty, całkowicie wyłączam menu kontekstowe na całej stronie, czysty html+javascript:

 <body oncontextmenu="return false;">

To jest to! Robię to, ponieważ zawsze możesz zobaczyć źródło po kliknięciu prawym przyciskiem myszy.
Ok, mówisz: "mogę używać bezpośrednio źródła widoku przeglądarki" i to prawda, ale zaczynamy od tego, że nie możesz przestać pobierać html5 Filmy.

21

Author: Daniele Cannova,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-15 09:21:24

Tak, możesz to zrobić w trzech krokach:

Umieść pliki, które chcesz chronić w podkatalogu katalogu, w którym działa twój kod.

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

Zapisz plik w podkatalogu".htaccess " i dodać wiersze poniżej.

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]

Teraz Link źródłowy jest bezużyteczny , ale nadal należy upewnić się, że użytkownik próbujący pobrać plik nie może być bezpośrednio obsługiwany przez plik.

Dla bardziej kompletnego rozwiązania , teraz podawaj wideo za pomocą odtwarzacza flash player (lub HTML canvas) i nigdy nie łącz się bezpośrednio z wideo. Aby po prostu usunąć menu kliknij prawym przyciskiem myszy, Dodaj do swojego HTML:
```
<body oncontextmenu="return false;">
```

Wynik:

Www.foo.com/player.html poprawnie odtworzy wideo , ale jeśli odwiedzisz www.foo.com/videos/video.mp4:

Kod błędu 403: FORBIDDEN

To będzie działać dla bezpośredniego pobierania, cURL, hotlinking, nazwij to.

jest to kompletna odpowiedź na dwa zadane pytania, a nie ODPOWIEDŹ na pytanie: "Czy mogę powstrzymać użytkownika przed pobraniem wideo, które już pobrał."

18

Author: Tzshand,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-28 14:35:22

PHP wysyła znacznik wideo html5 wraz z sesją, w której kluczem jest losowy ciąg znaków, a wartością jest nazwa pliku.

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

Teraz PHP jest proszony o wysłanie filmu. PHP odzyskuje nazwę pliku; usuwa sesję i natychmiast wysyła wideo. Dodatkowo wszystkie nagłówki typu "no cache" i MIME muszą być obecne.

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:

Teraz, jeśli użytkownik skopiuje adres url w nowej karcie lub skorzysta z menu kontekstowego, nie będzie miał szczęścia.

10

Author: B.F.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-12 10:02:27

YES YOU CAN :

Jako programista po stronie klienta polecam użycie adresu blob, adres blob jest adresem URL po stronie klienta, który odnosi się do obiektu binarnego.]}

<video id="id" width="320" height="240"  type='video/mp4' controls  > </video>

W html Zostaw swój film src pusty, a w JS pobierz plik wideo za pomocą AJAX, upewnij się, że typ odpowiedzi to blob

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

9

Author: Sajan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-09 00:30:09

Możesz przynajmniej powstrzymać ludzi znających się na technologii od korzystania z menu kontekstowego prawym przyciskiem myszy, aby pobrać wideo. Możesz wyłączyć menu kontekstowe dla dowolnego elementu za pomocą atrybutu oncontextmenu.

oncontextmenu="return false;"

To działa dla elementu body (cała strona) lub tylko jednego filmu używając go wewnątrz tagu wideo.

<video oncontextmenu="return false;" controls>...</video>

5

Author: TxRegex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-02 15:59:28

+ 1 prosty i między przeglądarkowy sposób: Możesz również umieścić przezroczysty obraz na wideo za pomocą css z-index i krycie. Więc użytkownicy zobaczą "Zapisz obraz jako "zamiast" Zapisz wideo " w menu kontekstowym.

3

Author: Alex Babak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-07-31 22:24:52

Korzystanie z usługi takiej jak Vimeo: Zaloguj się Vimeo > Goto Video > Settings > Privacy > Mark as Secured, a także wybierz osadzone domeny. Po ustawieniu osadzonych domen nie pozwoli nikomu osadzać wideo ani wyświetlać go z przeglądarki, chyba że połączy się z podanymi domenami. Tak więc, jeśli masz stronę zabezpieczoną na serwerze, która ładuje odtwarzacz Vimeo w iframe, to sprawia, że jest to dość trudne do obejścia.

1

Author: CommentUser,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-05 12:15:39

Skończyło się na użyciu AWS CloudFront z wygasającymi adresami URL. Film zostanie załadowany, ale zanim użytkownik kliknie prawym przyciskiem myszy i wybierze opcję Zapisz jako adres URL filmu, który początkowo otrzymał, wygasł. Wykonaj wyszukiwanie tożsamości CloudFront Origin Access.

Tworzenie adresu URL wideo wymaga pary kluczy, które można utworzyć w AWS CLI. FYI to nie jest mój kod, ale działa świetnie!

$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>';

1

Author: prophoto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-28 18:32:28

Po pierwsze zdaj sobie sprawę nie można całkowicie zapobiec pobieraniu wideo, wszystko, co możesz zrobić, to utrudnić to. Czyli ukrywasz źródło nagrania.

Przeglądarka internetowa tymczasowo pobiera wideo w buforze, więc jeśli może zapobiec pobieraniu, również uniemożliwia oglądanie wideo.

Powinieneś także wiedzieć, że powinieneś.

Powinieneś nie wyłączyć kliknięcie prawym przyciskiem myszy, a jeszcze mniej powinieneś wyświetlić komunikat o treści "You cannot save this video for copyright reasons. Sorry about that.". Jak sugerowano w tej odpowiedzi .

Może to być bardzo irytujące i mylące dla użytkownika. Poza tym; jeśli wyłączą JavaScript w swojej przeglądarce będzie być w stanie kliknąć prawym przyciskiem myszy i zapisać tak.

Oto sztuczka CSS możesz użyć:

video {
    pointer-events: none;
}

CSS nie może być wyłączony w przeglądarce, chroniąc wideo bez wyłączania kliknięcia prawym przyciskiem myszy. Jednak jeden problem polega na tym, że controls również nie mogą być włączone, innymi słowy muszą być ustawione na false. Jeśli zamierzasz wdrożyć własną funkcję odtwarzania / pauzy lub użyć interfejsu API, który ma przyciski oddzielone od tagu video, jest to wykonalna opcja.

controls ma również przycisk pobierania, więc korzystanie z niego nie jest zbyt dobrym pomysłem.

Oto a jsfiddle przykład.

Jeśli masz zamiar wyłączyć kliknij prawym przyciskiem myszy przy użyciu JavaScript następnie również przechowywać źródło wideo w JavaScript, jak również. W ten sposób, jeśli użytkownik wyłączy JavaScript (zezwalając na kliknięcie prawym przyciskiem myszy) wideo nie zostanie załadowane(ukrywa również źródło wideo trochę lepiej).

From TxRegex odpowiedź :

<video oncontextmenu="return false;" controls>
    <source type="video/mp4" id="video">
</video>

Teraz dodaj film przez JavaScript:

document.getElementById("video").src = "https://www.w3schools.com/html/mov_bbb.mp4";

Functional JSFiddle

Inny sposób na zapobieganie kliknięciu prawym przyciskiem myszy polega na użyciu tagu embed. Jest to jednak nie zapewnia kontrolek do uruchomienia wideo, więc musiałyby być wbudowane w JavaScript:

<embed src="https://www.w3schools.com/html/mov_bbb.mp4"></embed>

1

Author: Simon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-17 00:14:15

The

<body oncontextmenu="return false;">

Już nie działa. Chrome i Opera od czerwca 2018 r. mają podmenu na osi czasu, aby umożliwić proste pobieranie, więc użytkownik nie musi klikać prawym przyciskiem myszy, aby pobrać ten film. Co ciekawe Firefox i Edge tego nie mają ...

1

Author: kendolew,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-18 10:45:38

Wygląda na to, że streamowanie wideo przez websocket jest realną opcją, jak w streamowaniu ramek i rysowaniu ich na płótnie.

Streaming wideo przez websockets przy użyciu JavaScript

Myślę, że zapewniłoby to inny poziom ochrony, utrudniając klientowi nabycie wideo i oczywiście rozwiązanie problemu z "zapisz wideo jako"..."kliknij prawym przyciskiem myszy opcję menu kontekstowego (overkill ?! ).

0

Author: Guy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:41

Oto co zrobiłem:

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>

Działa to również w przypadku obrazów, tekstu i prawie wszystkiego. Jednak nadal możesz uzyskać dostęp do Narzędzia "Inspect" i "View source" za pomocą skrótów klawiaturowych. (Jak mówi odpowiedź na górze, nie można go całkowicie zatrzymać.), Ale można próbować stawiać bariery, aby je powstrzymać.

0

Author: Calum Childs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-09 16:37:04

@Clayton-Graul miał to, czego szukałem, tyle że potrzebowałem wersji CoffeeScript dla strony używającej AngularJS. Na wszelki wypadek, gdybyś też tego potrzebował, oto, co umieściłeś w kontrolerze AngularJS:

    # This is how to we do JQuery ready() dom stuff
    $ ->
        # let's hide those annoying download video options.
        # of course anyone who knows how can still download
        # the video, but hey... more power to 'em.
        $('#my-video').bind 'contextmenu', -> 
            false

"dziwne rzeczy są w kręgu k" (to prawda)

-1

Author: Ryan Crews,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-04 05:01:53

score 176 · Accepted Answer

W rzeczywistości, nie możesz . Ale możesz utrudnić pobieranie.

Przeglądarki sprawiają, że chwytanie jest zbyt łatwe

Ponieważ do tego właśnie zostały zaprojektowane przeglądarki: serwują zawartość - czyli przekazują zawartość użytkownikowi. Aby pokazać, jak łatwo to jest, oto jak zwykle chwytam filmy na praktycznie dowolnej stronie strumieniowej wideo :

Przygotuj kartę Sieć preferowanego debugera przeglądarki i pozwól, aby Wideo się załadowało. Następnie poszukaj go w załadowanych zasobach. Filmy są zazwyczaj przesyłane strumieniowo .flv lub. mp4, a audio w. mp3. gdy zauważysz adres url, otwórz nową kartę / okno i otwórz tam link. Następnie przeglądarka pobierze plik.

Utrudnia

Oto metody na utrudnianie życia grabberowi. Jak powiedziałem wcześniej, nie są to metody niezawodne, ale mogą przynajmniej odstraszyć poślizgi.

Wideo do techniki Canvas

Ostatnio natknąłem się na to artykuł z HTML5Doctor podczas badania detekcji ruchu w JS. Polega to na strumieniowaniu wideo przez <video>, a następnie za pomocą JS, dosłownie skopiuj wideo do <canvas>. oto przykład gdzie wideo jest z przodu, podczas gdy płótno z tyłu jest zasilane danymi z tego samego wideo.

Zasadniczo to, co robisz, to:

Predefiniuj HTML lub dynamicznie Wstaw {[2] } do DOM. To jest "gracz", który widzi użytkownik.
dynamicznie Utwórz tag wideo za pomocą JS, dołącz go do ukrytego DOM i nadaj mu adres url do przesyłania strumieniowego. To będzie źródło wideo dla płótna.
następnie za pomocą JS okresowo pobierasz dane z <video>, które właśnie stworzyłeś i rysujesz je do <canvas>. W tym kroku wideo jest przesyłane na płótno.

To podstawa całej rutyny. Ponieważ twój odtwarzacz jest teraz kanwą i ukrytym prawdziwym filmem, możesz spróbować kliknąć prawym przyciskiem myszy i zapisać. Ponieważ płótno działa jak obraz na stronie można zapisać tylko ujęcie klatki, która była wyświetlana na płótnie. Jeśli chodzi o kontrolki, JS ma API do kontrolowania <video> możesz więc tworzyć niestandardowe przyciski i suwaki.

Jednakże, jeśli wiedzą, że to robisz, znajdą Twój ukryty element wideo, a Ty masz przerąbane. To prowadzi nas do kolejnej metody, która uzupełnia tę technikę tylko front-end, z Pomocą ze strony serwera.

Adresy URL zasobów tymczasowych

Jedna rzecz, którą możesz zrobić aby zapobiec tej metodzie, należy zapobiec wielokrotnemu użyciu łącza . Spraw, aby link był jednorazowy, tymczasowy, jednorazowy. Po załadowaniu odtwarzacza za pomocą jednorazowego adresu URL, pozbądź się go. Niech będzie bezużyteczny.

Podobnie jak CSRF prevention , gdy przeglądarka żąda strony z Twoim filmem, Generuj losowy token i przechowuj go w pamięci po stronie serwera w celu późniejszego wykorzystania. W tym samym czasie, dołączyć go do adresu url filmu , coś w rodzaju to:

//we load some video with id 1234324 from your site using this url
//and the token generated on page load is appended as sid

http://yoursite.com/media.php?video_id=1234324&sid=a0s9d8a98a0d98asd09809wq0e9

Teraz, gdy twój odtwarzacz ładuje wideo, użyje tego adresu URL, który zawiera token. Niech serwer potwierdzi token.

Jeśli jest dobry, streamuj wideo i zniszcz token z serwera, aby uniknąć ponownego użycia. To zasadniczo sprawia, że adres url jest "jednorazowy". Jeśli używany jest nieprawidłowy token, zwróci odpowiednie nagłówki jako odpowiedź, Jak być może 403.

Aby dodać trochę więcej bezpieczeństwa, nałożyć wygaśnięcie adresu url, przechowując go znacznik czasu wraz z tokenem. Następnie porównaj znacznik czasu żądania z zapisanym znacznikiem czasu, jeśli nadal znajduje się w "oknie użyj". Zrób to" okno użycia " wystarczająco krótkie, aby być używane przez gracza na stronie, ale nie wystarczająco długie, aby skiddie chwycił ten adres url i wkleił go do innej karty / okna / downloadera.