【videoタグ】サイトへ埋め込んだ動画を簡単に保存させないようにしたい

2022.01.04

videoタグで自分のHPに動画を埋め込んだけど、実際見てみたら右クリックや長押し等の動作で動画を保存できてしまう。

サイト上の画像や動画を勝手に保存＆使用されては困るので、右クリックでの保存を禁止したい、なんてことがありますよね。
今回はvideoタグで実装した動画を簡単に保存できないようにするための設定をご紹介いたします。

動画を設置する

videoタグでの動画の設置方法はこちらの記事で紹介しておりますので、
まずは設置から、という方はこちらから先にお読みください。

動画上での右クリックからの保存を無効化するためには、下記のコードをvideoタグに追加します。

oncontextmenu="return false;"

<video src="mp4/zawazawa.mp4" controls oncontextmenu="return false;"></video>

これでそもそも動画上で右クリックを行っても「名前を付けて保存する」などのメニューがでなくなります。

もしくはCSSでvideoへpointer-events:none;を指定してあげると動画に対してのタッチイベントが無効になり、右クリックからの保存ができなくなります。

video{ pointer-events: none; }

動画の保存方法は右クリックだけではありません。
下記のスクリーンショットをご確認いただければわかりますが、コントロール部分のメニューからもダウンロードボタンを消す必要がありますので、そちらの設定も行います。

controlsList="nodownload"

下記を同じようにvideoタグに追加します。

<video src="mp4/zawazawa.mp4" controls oncontextmenu="return false;" controlsList="nodownload"></video>

これで、右クリックからの保存、動画コントローラーからの保存が無効化されました。
念のため、デモで確認してみます。

いかがでしょうか？

一つ、注意点として、上記の措置によってネット上に上げた動画を保存させないことが100％保証されるわけではありません。

(実際私どものようにソースを触り慣れている人間ですと少しの手間で保存にもっていけてしまいます...)

あくまでも簡単に、一般的な方法で保存される可能性を下げているだけですので、
データの取り扱いには充分にご注意ください！