web-dev-qa-db-ja.com

HTML5ビデオがダウンロードされるのを防ぎます（右クリックで保存されます）。

クライアントがビデオをダウンロードできないようにするには、ブラウザの右クリックメニューから[名前を付けてビデオを保存...]を無効にする方法を教えてください。

クライアントがファイルパスに直接アクセスするのを妨げる、より完全な解決策はありますか？

javascripthtml5menuhtml5-videoright-click
145
python

できません。それは、それがブラウザが行うために設計されたものだからです：コンテンツを提供します。ただし、ダウンロードを難しくすることができます。

まず最初に、あなたはcouldを無効にします contextmenu event 、別名「右クリック」。これにより、通常のスキッドが右クリックして[名前を付けて保存]することでビデオを露骨にリッピングするのを防ぐことができます。ただし、JSを無効にしてこれを回避するか、ブラウザーのデバッガーを介してビデオソースを見つけることができます。さらに、これは悪いUXです。コンテキストメニューには、単に名前を付けて保存するだけでなく、正当なものがたくさんあります。

カスタムビデオプレーヤーライブラリを使用することもできます。それらのほとんどは、好みに応じてコンテキストメニューをカスタマイズするビデオプレーヤーを実装しています。したがって、デフォルトのブラウザコンテキストメニューは表示されません。また、名前を付けて保存に似たメニュー項目を提供する場合は、無効にすることができます。しかし、これもJSの回避策です。弱点は前のオプションに似ています。

別の方法は、 HTTP Live Streaming を使用してビデオを配信することです。本質的には、ビデオをチャンクに分割し、次々に配信します。これは、ほとんどのストリーミングサイトがビデオを配信する方法です。そのため、名前を付けて保存しても、ビデオ全体ではなく、チャンクのみを保存します。すべてのチャンクを収集し、専用ソフトウェアを使用してそれらをつなぐには、もう少し手間がかかります。

別の方法は、 Paint <video> on <canvas> です。この手法では、少しのJavaScriptを使用して、ページに表示されるのは、非表示の<canvas>からフレームをレンダリングする<video>要素です。また、<canvas>であるため、コンテキストメニューは<img>ではなく<video>のメニューを使用します。名前を付けてビデオを保存するのではなく、名前を付けて画像を保存します。

CSRFトークン を使用することもできます。サーバーにページ上のトークンを送信してもらう必要があります。次に、そのトークンを使用してビデオを取得します。サーバーは、動画を配信する前に有効なトークンであるかどうかを確認するか、 HTTP 401 を取得します。アイデアは、ビデオのURLに直接アクセスするのではなく、ページから来た場合にのみ取得できるトークンを持つことによってのみ、ビデオを取得できるということです。

結局、YouTubeやVimeoなどのサードパーティのビデオサイトにビデオをアップロードするだけでした。彼らは優れたビデオ管理ツールを備えており、デバイスへの再生を最適化し、あなたの側で労力をかけずにビデオがリッピングされないように努力しています。

201
Joseph

これは、html5ビデオから右クリックして「保存」オプションを単に削除したい人のための簡単な解決策です。

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

簡単な答え、

できない

彼らがあなたのビデオを見ているのであれば、彼らはすでに持っています

あなたはそれらを遅くすることはできますが、それらを止めることはできません。

34
Starx

はい、3つのステップでこれを実行できます。

  1. 保護したいファイルを、コードが実行されているディレクトリのサブディレクトリに配置します。

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

  2. そのサブディレクトリに ".htaccess"という名前のファイルを保存し、以下の行を追加します。

    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]

今はソースリンクは無用ですしかし、ファイルをダウンロードしようとしているユーザーに直接ファイルを提供できないようにする必要があります。

  1. より完全な解決策の場合は、動画をフラッシュプレーヤー（またはHTMLキャンバス）で配信し、動画に直接リンクしないでください。右クリックメニューを削除するだけの場合は、HTMLに追加します。

    <body oncontextmenu="return false;">


結果：

www.foo.com/player.html 正しくビデオを再生しますしかし、あなたがwww.foo.com/videos/video.mp4にアクセスした場合：

エラーコード403：禁じられています


これは直接ダウンロード、cURL、ホットリンクには有効です。

これは、2つの質問に対する完全な回答であり、質問に対する回答ではありません。「ユーザーが既にダウンロードしたビデオをダウンロードできないようにすることはできますか？」

23
Tzshand

私が普段使う最も良い方法は非常に簡単です、私は完全にページ全体のコンテキストメニューを完全に無効にします、純粋なhtml + javascript：

 <body oncontextmenu="return false;">

それでおしまい！あなたはいつも右クリックでソースを見ることができるので私はそうします。
わかりました、「ブラウザの表示ソースを直接使用することができます」というのは事実ですが、私たちはあなたから出発しますCAN'Thtml5ビデオのダウンロードを中止することができます。

22
Daniele Cannova

クライアントサイド開発者として、BLOB URLを使用することをお勧めします。BLOBURLは、バイナリオブジェクトを参照するクライアントサイドURLです。

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

hTMLでは、ビデオのsrcを空白のままにし、JSではAJAXを使用してビデオファイルを取得し、応答タイプが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();
}

注意：この方法は大きなファイルにはお勧めできません。

EDIT

  • 直接ダウンロードを避けるためにクロスオリジンブロックを使用する

  • 動画がAPIで配信されている場合「GET」ではなく別の方法（PUT/POST）を使用してください。

12
Sajan

PHPは、キーがランダムな文字列で値がファイル名のセッションと共にhtml5 videoタグを送信します。

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

これでPHPはビデオの送信を求められました。 PHPはファイル名を回復します。セッションを削除してビデオを即座に送信します。さらにすべての 'no cache'とmime-typeヘッダが存在しなければなりません。

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:

ユーザーが新しいタブにURLをコピーするか、またはコンテキストメニューを使用する場合、今彼は運がありません。

10
B.F.

あなたは少なくともあなたのビデオをダウンロードするために右クリックのコンテキストメニューを使用することから非技術に精通した人々を止めることができます。 oncontextmenu属性を使用して、任意の要素のコンテキストメニューを無効にすることができます。

oncontextmenu="return false;"

これは、body要素（ページ全体）、またはvideoタグ内でそれを使用している単一のビデオに対して機能します。

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

期限切れのURLでAWS CloudFrontを使用しました。ビデオはロードされますが、ユーザーが最初に受け取ったビデオURLが右クリックして[名前を付けて保存]を選択するまでに期限が切れています。 CloudFront Origin Access Identityを検索してください。

ビデオのURLを作成するには、AWS CLIで作成できるキーペアが必要です。参考までに、これは私のコードではありませんが、うまく機能します。

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

+ 1シンプルでクロスブラウザの方法：あなたはまた、css zインデックスと不透明度でビデオの上に透明な絵を置くことができます。そのため、ユーザーはコンテキストメニューに「ビデオを保存」ではなく「画像を名前を付けて保存」と表示されます。

3
Alex Babak

の

<body oncontextmenu="return false;">

もう動作しません。 2018年6月のChromeとOperaは、直接ダウンロードできるようにタイムライン上にサブメニューを持っているので、ユーザーはそのビデオをダウンロードするために右クリックする必要はありません。興味深いことに、FirefoxとEdgeにはこれがありません...

2
kendolew

Vimeoなどのサービスを使用する場合：Vimeo > Goto Video > Settings > Privacy > Mark as Securedにサインインし、さらに埋め込みドメインを選択します。埋め込みドメインが設定されると、指定されたドメインから接続しない限り、だれにもビデオの埋め込みやブラウザからの表示を許可しません。そのため、Vimeoプレーヤーをiframeにロードするサーバー上で保護されているページがある場合、これを回避するのはかなり困難になります。

2
CommentUser

まず第一に気づいてくださいダウンロード中のビデオを完全に防ぐことは不可能です。あなたができることはそれをより困難にすることだけです。すなわちあなたはビデオのソースを隠します。

Webブラウザは一時的にバッファ内のビデオをダウンロードするため、ダウンロードを妨げる可能性がある場合は、ビデオの視聴も妨げられます。

また、世界の総人口の1％未満が、ソースコードを理解して、どちらにしてもそれをかなり安全にできることを知っておく必要があります。それはあなたがそれをソースの中に隠してはいけないという意味でもありません - あなたがすべきです。

あなたはnot右クリックを無効にすべきであり、さらに"You cannot save this video for copyright reasons. Sorry about that."というメッセージを表示すべきではありません。 この答え で示唆されているように。

これはvery厄介でユーザーにとって混乱を招く可能性があります。それとは別に;ブラウザでJavaScriptを無効にしている場合は、{will}を右クリックして保存することができます。

これがCSSトリックです。

video {
    pointer-events: none;
}

ブラウザでCSSをオフにすることはできません。実際には右クリックを無効にせずにビデオを保護してください。ただし、controlsも有効にできない、つまりfalseに設定する必要があるという問題があります。あなたがあなた自身のPlay/Pause機能を書き換えるか、videoタグとは別のボタンを持つAPIを使うつもりなら、これは実行可能なオプションです。

controlsにはダウンロードボタンもありますので、それを使用することもあまりお勧めできません。

これが JSFiddle の例です。

JavaScriptを使用して右クリックを無効にする場合は、ビデオのソースもJavaScriptに保存します。そうすれば、ユーザーがJavaScriptを無効にした場合（右クリックが許可された場合）、ビデオは読み込まれません（ビデオソースが少し隠れます）。

から TxRegex answer ：

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

JavaScriptでビデオを追加しましょう。

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

機能 JSFiddle

右クリックを防ぐもう1つの方法は、embedタグを使用することです。ただし、これはビデオを実行するためのコントロールを提供しないため、JavaScriptに埋め込む必要があります。

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

簡単な答え：youtubeと同じようにリンクを暗号化します。 （念のために、まっすぐに理解したいのです。）

私はMicrosoft EdgeとInternet Explorerのようないくつかのブラウザでテストしたので、youtubeがそうすることが可能であり、他のどのWebサイトでも可能であり、それがブラウザからではない場合、誰でも可能です。だからそれを無効にする方法があり、人々はまだそれを言うのを見た...私はYouTubeができるよりも方法と彼らがそれを行う方法を確認する唯一の方法がなければならないために答えを探してみます私が今やっているYouTubeのスクリプト。それもカスタムコンテキストメニューであるかどうかを確認しました。コンテキストメニューがinspect要素を流し過ぎているためではないことを意味しています。それがすることはできませんので、実際にJavaScriptでinspect要素にアクセスすることは不可能です。 youtubeビデオをダブルクリックすると、chromeのコンテキストメニューがポップアップすることがわかります。それに... youtubeはその機能を追加しないでしょう。私は調査をしていて、youtubeのソースを調べているので答えが見つかれば戻ってきます...誰もがあなたができないと言ったら、まあ彼らはしませんでした私のように研究をするな。 YouTubeの動画をダウンロードする唯一の方法は、動画をダウンロードすることです。

わかりました...私は調査しました、そして私の調査はそれへのjavascriptがないことを除いてあなたがそれを無効にすることができると思います...あなたがそれを無効にすることができるためにあなたへのリンクを暗号化することができる必要がありますそれがそれを見つけることができないならば、ブラウザはそれを見せないで、私がYouTubeビデオリンクを開いたとき、それはこの「blobとして示しました： https://www.youtube.com/e5c4808e-297e-451f-80da- 3e838caa1275 "引用符なしでは暗号化されているため保存できません。そのためにはphpを知っておく必要がありますが、難しくするために選んだ答えのように、youtubeでは暗号化が最も困難です。あなたがそれをダウンロードするのを難しくすることの最良の答えとしてあなたが選んだ人をとるよりそれを知らないならばそれはただそれが可能であるのでビデオリンクを暗号化するあなたの上で読まれるために...私は彼らがそれをする方法を説明する方法を知りませんが、彼らはそうしましたそして方法があります。 youtubeでビデオを暗号化する方法はかなり賢いので、youtube/googleにどうやってそれを実行するかを尋ねる方法を知りたいのであれば...これが役に立つことを願います。したがって、リンクを暗号化することは短期的には最善です。

1
Jonathan J. Pecany

WebSocketを通してビデオをストリーミングすることは実行可能なオプションであるように思えます、フレームを流してキャンバスのようなものにそれらを描くように。

JavaScriptを使用したWebソケットを介したビデオストリーミング

私はそれがクライアントがビデオを取得すること、そしてもちろん「名前を付けてビデオを保存...」右クリックコンテキストメニューオプションであなたの問題を解決することをより困難にするもう一つのレベルの保護を提供すると思います。

0
Guy

これが私がしたことです：

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>
0
Calum Childs

このようにコンテキストメニューを隠すことで、それほど簡単ではないようにすることができます。

<video oncontextmenu="return false;"  controls>
  <source src="https://yoursite.com/yourvideo.mp4" >
</video>
0
Jcyrss