videoタグで動画をダウンロードできないようにする方法

今回は<video>タグで実装した動画をクライアント側でダウンロードできないようにする方法について書いていこうと思います。

「一般の方の顔などが動画内に映っているので、簡単にダウンロードできないようにできますか？」との要望がありました。

<video>タグの基本的な使用方法と属性
「controlslist属性」を利用してダウンロードできないようにする
右クリックも考慮する方法
1. windows.oncontextmenuを使用して右クリックを制御する

<video>タグの基本的な使用方法と属性

<video controls>
 <source src=" video.mp4" type="video/mp4">
 対応するブラウザでお試しください。
</video>

<video>タグの中に実際の動画を<source>タグの中に記載して、動画に対応していないブラウザのために注意文言を書くような使い方になります。（現在で最新の一般的なブラウザではほとんどサポートされていますので、そこまで気にすることもありません。）

「controlslist属性」を利用してダウンロードできないようにする

ここから本題になります。<video>タグには様々な属性を利用することができ、その中の「controlslist属性」を利用してダウンロードを禁止します。

controlslist 属性が指定されていると、ブラウザー自身のコントロールのセットを表示する場合 (例えば controls 属性が設定されている場合)、メディア要素に表示するコントロールを選択するのを補助します。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

以下は<video>タグの詳細な情報になりますので、詳細は以下をご覧ください。

: 動画埋め込み要素 - HTML: ハイパーテキストマークアップ言語 | MDN

はHTMLの要素で、文書中に動画再生に対応するメディアプレイヤーを埋め込みます。を音声コンテンツのために使用することもできますが、要素の方がユーザーにとって使い勝手が良いかもしれません。

<video controls controlsList="nodownload">
 <source src="video.mp4" type="video/mp4">
 対応するブラウザでお試しください。
</video>

以上のように「controlsList=”nodownload”」を埋め込むだけでダウンロードできないようにすることが可能です。

右クリックも考慮する方法

上記の属性を追加するだけでダウンロードのボタンを非表示することは可能です。しかし、PCで右クリックやスマホで長押しするとダウンロードが簡単にできてしまいます。

windows.oncontextmenuを使用して右クリックを制御する

上記の問題を解決するために、JavaScriptを使用して、右クリックを制御することでダウンロードを制御します。

document.oncontextmenu = function () {
 return false;
};

本来の使い方は上記の通りですが、結局、関数の省略を利用して以下の書き方で完結します。

<video controls controlsList="nodownload" oncontextmenu="return false;">
 <source src="video.mp4" type="video/mp4">
 対応するブラウザでお試しください。
</video>

上記まですると基本はダウンロード不可になります。
サイトによってはサイト全体の右クリックを推奨しているサイトもありますが、よっぽどの希望がない限りそこまでは不要かなと思っています。

動画のダウンロードの処理に困っている方はぜひ参考にしてみてください！