[解決済み】HTML5動画をダウンロード（右クリック保存）させないようにするには？）

質問

ブラウザの右クリックメニューの "ビデオを別名で保存..." を無効にして、クライアントがビデオをダウンロードするのを防ぐにはどうすればよいですか？

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

どのように解決するのですか？

できない . それは、ブラウザがそのように設計されているからです。 コンテンツを提供する . しかし ダウンロードしにくくすることができます。 .

まず最初に、あなたは かもしれない を無効化します。 contextmenu イベント 別名「右クリック」。そうすれば、通常のスキディが右クリックして「名前を付けて保存」することでビデオをあからさまにリッピングすることを防ぐことができます。しかし、その場合、JSを無効にしてこれを回避するか、ブラウザのデバッガでビデオのソースを見つけることができます。それに、これは悪いUXです。コンテキストメニューには、「名前を付けて保存」以外にも、正当なものがたくさんあるのです。

また、カスタムのビデオプレーヤーライブラリを使用することもできます。それらのほとんどは、あなたの好みに合わせてコンテキストメニューをカスタマイズするビデオプレーヤーを実装しています。そのため、ブラウザのデフォルトのコンテキスト メニューが表示されることはありません。また、「名前を付けて保存」のようなメニュー項目があったとしても、それを無効にすることができます。しかし、これもJSのワークアラウンドです。弱点は、前のオプションと同様です。

もう一つの方法は、動画を HTTPライブストリーミング . これは本質的に、ビデオをチャンクに分割し、それを次々と提供することです。ほとんどのストリーミングサイトは、この方法でビデオを配信しています。そのため、何とかして「名前を付けて保存」しても、動画全体ではなく、チャンクを保存するだけです。すべてのチャンクを集めて、専用のソフトウェアを使ってステッチするのは、もう少し手間がかかると思います。

もう一つのテクニックは ペイント <video> オン <canvas> . この手法では、少しのJavaScriptで、ページ上に表示されるのは <canvas> 要素からフレームをレンダリングし、非表示の <video> . そして、それは <canvas> の場合、コンテキストメニューは <img> のメニューではなく <video> 's. この場合、「名前を付けてビデオを保存」ではなく、「名前を付けて画像を保存」が表示されます。

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

結局のところ、私ならYouTubeやVimeoといったサードパーティの動画サイトに動画をアップロードしますね。彼らは良いビデオ管理ツールを持っており、デバイスに最適化された再生を行い、あなたの側の努力なしにビデオのリッピングを防止する努力をしています。