2020年11月12日

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

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

こんにちは!SeekNextの佐藤です。
更新が滞っていましたが、また、定期的に更新していきたいと思います。

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

実際の案件での経緯

先日、弊社の案件で、公的機関のホームページを制作する案件がありました。その際、「一般の方の顔などが動画内に映っているので、簡単にダウンロードできないようにできますか?」との要望がありました。

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

基本は以下のように使用します。

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

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

<video>タグの「controlslist属性」を利用してダウンロードできないようにする!

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

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

https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

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

https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
<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>

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

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