ブラウザの右クリックメニューの「名前を付けてビデオを保存」を無効にして、クライアントがビデオをダウンロードできないようにするにはどうすればよいですか?
クライアントがファイルパスに直接アクセスできないようにする、より完全な解決策はありますか?
できません。それはブラウザがそのように設計されているからです:*コンテンツを提供すること。しかし、ダウンロードしにくくすることはできます。
まず最初に、あなたはcontextmenu
イベントを無効にすることができます。そうすれば、右クリックして「名前を付けて保存」することで、あなたのビデオをあからさまにリッピングする常習犯を防ぐことができる。しかし、そうすれば、JSを無効にしてこれを回避するか、ブラウザのデバッガを使ってビデオのソースを見つけることができる。それに、これは悪いUXだ。コンテキストメニューには、「名前を付けて保存」以外にも正当なものがたくさんある。
また、カスタムビデオプレーヤーライブラリを使用することもできます。それらのほとんどは、コンテキストメニューを好みに合わせてカスタマイズするビデオプレーヤーを実装しています。そのため、デフォルトのブラウザのコンテキストメニューが表示されることはありません。また、もし「名前を付けて保存」と同じようなメニューが表示されたとしても、それを無効にすることができます。しかし、これもJSの回避策である。弱点は前のオプションと同様です。
もう1つの方法は、HTTPライブストリーミングを使用して動画を配信することです。HTTPライブ・ストリーミング]2を使って動画を配信する方法もあります。これは、ほとんどのストリーミング・サイトが動画を配信する方法です。そのため、「名前を付けて保存」できたとしても、保存されるのはチャンクだけで、動画全体ではない。すべてのチャンクを集めて、専用のソフトウェアを使ってつなぎ合わせるには、もう少し手間がかかるだろう。
もう1つのテクニックは、<canvas>
に<video>
をペイントするというものだ。この手法では、JavaScriptを少し使うことで、ページ上に表示されるのは、非表示の<video>
からフレームをレンダリングしている<canvas>
要素です。そして、これは <canvas>
なので、コンテキストメニューは <video>
'ではなく
'
のメニューを使用します。名前を付けてビデオを保存」ではなく「名前を付けて画像を保存」が表示されます。
また、CSRFトークンを利用することもできます。ページ上でサーバにトークンを送信させます。そのトークンを使って動画を取得します。サーバーは、ビデオを提供する前に、それが有効なトークンであるかどうかをチェックします。このアイデアは、あなたが唯一のあなたが直接ビデオのURLにアクセスするのではなく、ページから来た場合にのみ得ることができるトークンを持っていることによってビデオを取得することができるということです。
一日の終わりに、私はちょうどYouTubeやVimeoのようなサードパーティのビデオサイトに自分のビデオをアップロードします。YouTubeやVimeoには優れた動画管理ツールがあり、デバイスに最適化された再生が可能である。
はい、これは3つのステップで実行できます。 ====================================。
---。
1。 保護するファイルを、コードが実行されているディレクトリのサブディレクトリに配置します。
www.foo.com/player.html
www.foo.com/videos/video.mp4。
。 2。 「.htaccess」という名前のサブディレクトリにファイルを保存し、以下の行を追加します。 www.foo.com/videos/.htaccess。
#.htaccessの内容。
RewriteEngine on。
RewriteCond%{HTTP_REFERER}。 !^ http://foo.com/。* $ [NC]。
RewriteCond%{HTTP_REFERER}。 !^ http://www.foo.com/。* $ [NC]。
RewriteRule。 .(mp4 | mp3 | avi)$-[F]。
これでソースリンクは役に立たなくなりましたが、ファイルをダウンロードしようとするユーザーがファイルに直接サービスを提供できないようにする必要があります。
。
3。 より完全なソリューションの場合、フラッシュプレーヤー(またはhtmlキャンバス)を使用してビデオを提供し、ビデオに直接リンクしないでください。 右クリックメニューを削除するには、HTMLに追加します。
< body oncontextmenu = "return false;">。
。
www.foo.com/player.html 正しくビデオを再生しますが、www.foo.com/videos/video.mp4にアクセスすると、
エラーコード403:FORBIDDEN。
。
これは直接ダウンロード、cURL、ホットリンクで機能します。
これは、尋ねられた2つの質問に対する完全な回答であり、質問への回答ではありません。「ユーザーが既にダウンロードしたビデオをダウンロードできないようにできますか。"。
私が通常使用する最良の方法は非常に簡単です。ページ全体のコンテキストメニューを完全に無効にします。純粋なhtml + javascript:です。
<body oncontextmenu="return false;">
それでおしまい。! これは、右クリックでいつでもソースを表示できるためです。 わかりました。「ブラウザのビューソースを直接使用できます」とおっしゃっていますが、これは事実ですが、「html5」ビデオのダウンロードを CAN'T 停止するという事実から始めます。
クライアント側の開発者として、blob URLを使用することをお勧めします。 blob URLは、バイナリオブジェクトを参照するクライアント側の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();
}
注:この方法は、大きなファイルにはお勧めしません。
編集。
-直接ダウンロードを回避するには、クロスオリジンブロッキングを使用します。
-ビデオがAPIによって配信される場合「GET」の代わりに別の方法(PUT / POST)を使用します。
PHPは、キーがランダム文字列で値がファイル名であるセッションとともにhtml5ビデオタグを送信します。
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はファイル名を復元します。セッションを削除し、ビデオを即座に送信します。 さらに、すべての「キャッシュなし」およびmimeタイプのヘッダーが存在する必要があります。
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をコピーしたり、コンテキストメニューを使用したりすると、運がなくなります。
期限切れの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>';
まず最初に、ビデオのダウンロードを完全に防ぐことは不可能です。できることは、ビデオをより困難にすることです。 つまり. ビデオのソースを非表示にします。
Webブラウザーは一時的にビデオをバッファーにダウンロードするため、ダウンロードが妨げられる可能性がある場合は、ビデオの視聴も妨げられます。
また、世界の総人口の< 1%がソースコードを理解して、とにかく安全であることを知っておく必要があります。 だからといって、ソースに隠してはいけないという意味ではありません。
右クリックを無効にしないでください。さらに、「著作権上の理由からこのビデオを保存することはできません。 申し訳ありません。"`。 この回答で提案されているように。
これは、ユーザーにとって非常に迷惑で混乱を招く可能性があります。 それとは別に;ブラウザでJavaScriptを無効にすると、右クリックして保存できます。
使用できるCSSトリックは次のとおりです。
video {
pointer-events: none;
}
ブラウザでCSSをオフにすることはできません。実際に右クリックを無効にすることなくビデオを保護します。 ただし、1つの問題は、「コントロール」も有効にできないことです。つまり、「false」に設定する必要があります。 独自の再生/一時停止機能を埋め込むか、「ビデオ」タグに分離されたボタンがあるAPIを使用する場合、これは実行可能なオプションです。
controls
にはダウンロードボタンもあるので、それを使用することもあまり良い考えではありません。
[JSFiddle][2]の例を次に示します。
JavaScriptを使用して右クリックを無効にする場合は、ビデオのソースもJavaScriptに保存します。 そうすれば、ユーザーがJavaScriptを無効にする(右クリックを許可する)と、ビデオがロードされません(ビデオソースも少し非表示になります)。
<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][4]。
---。
右クリックを防ぐ別の方法には、「embed」タグの使用が含まれます。 ただし、これはビデオを実行するためのコントロールを提供しないため、JavaScriptでそれらを説明する必要があります。
<embed src="https://www.w3schools.com/html/mov_bbb.mp4"></embed>
短い回答: YouTubeのようにリンクを暗号化します。YouTube/ googleにどのように実行するかを尋ねる方法がわかりません。 (あなたが要点を直視したい場合に備えて。)。
YouTubeがそれを行うのでこれが可能であり、他のWebサイトもそうすることができればそれが可能であるので、誰にでも指摘したいと思います'。;ブラウザからtは、microsoft EdgeやInternet Explorerなどのいくつかのブラウザでテストしたため、それを無効にする方法があり、人々がまだそれを言っていることがわかりました。.youtubeができるよりも方法が必要であり、それがどのように行われるかを確認する唯一の方法は、誰かが現在行っているyoutubeのスクリプトを調べた場合であるため、私は答えを探してみます。 また、カスタムコンテキストメニューであるかどうかを確認しました。これは'です。;tコンテキストメニューが検査要素を流しすぎているため、それが終わって見たように、新しいクラスを作成することはなく、JavaScriptで検査要素に実際にアクセスして'にできないためです。;t be。 YouTubeビデオをダブルクリックすると、Chromeのコンテキストメニューがポップアップ表示されます。 その上。..youtubeはその機能を追加しません。 私は調査を行っており、YouTubeのソースを調べているので、答えを見つけたら戻ってきます。..誰かがあなたができないと言ったら、まあ彼らは私と同じように研究をしなかった。 YouTube動画をダウンロードする唯一の方法は、動画をダウンロードすることです。
はい。.。私は研究をしました、そして私の研究はそれにJavaScriptがないことを除いてあなたがそれを無効にすることができるというままです。..任意のブラウザが勝ったと思うので、ビデオへのリンクを暗号化して無効にできるようにする必要があります'。;可能であれば表示'。;tそれを見つけて、YouTubeビデオリンクを開いたとき、それはこの"として表示されました。;blob:
引用符がないため、暗号化されているため、保存できません。.あなたはそのためにphpを知る必要がありますが、あなたがそれを難しくすることから選んだ答えが好きです。, YouTubeは、それを暗号化するのが最も難しくなります。, あなたは事前のphpプログラマーである必要がありますが、そうする場合は'です。;ダウンロードを難しくするという最良の答えとして、選択した人を連れて行くよりも知っています。..but phpを知っている場合は、ビデオリンクを暗号化して、自分のものしか読み取れないようにします。.。私は彼らがそれをどのように行うかを説明する方法を知りませんが、彼らはそうしました、そして方法があります。 YouTubeがビデオを暗号化する方法は非常に賢いので、YouTube / googleにビデオのしくみを尋ねるだけでなく、その方法を知りたい場合は。..hopeこれはあなたがすでに最良の答えを選んだとしてもあなたのために役立つと思います。 したがって、リンクを暗号化するのが短期的に最適です。フレームをストリーミングしてキャンバスのようなものに描画する場合のように、ウェブソケットを介してビデオをストリーミングすることは実行可能なオプションのようです。
https://stackoverflow.com/questions/4241992/video-streaming-over-websockets-using-javascript。
これにより、クライアントがビデオを取得することがより困難になり、もちろん「ビデオを名前を付けて保存」で問題を解決することがさらに困難になると思います。.."コンテキストメニューオプションを右クリック(オーバーキル。 ?! )。
これが私がしたことです。
<。!-スニペットを開始:js hide:false console:true babel:false -->。
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>
<。!-終了スニペット-->。 これは、画像、テキスト、その他ほとんど何でも機能します。 ただし、キーボードショートカットから「検査」および「ソースの表示」ツールにアクセスできます。 (上の答えが言うように、あなたはそれを完全に止めることはできません。)しかし、あなたはそれらを止めるために障壁を立てようとすることができます。
@ Clayton-Graulには、AngularJSを使用するサイトにCoffeeScriptバージョンが必要だったことを除いて、私が探していたものがありました。それが必要な場合に備えて、問題の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
「奇妙なことが円kで始まっている」(それは本当です)。