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

[Mizica0391]

◼︎ご質問内容
動画のセクション内にmp4やYouTube動画を入れておりますが、その動画をダウンロードできないようにすることは可能でしょうか？

◼︎実施したいこと
会員限定にページが見れるようにし、そこで動画を貼り付けて、会員様限定に見れるようにしたいと考えております。ダウンロードができてしまうと、他で拡散されてしまうので防止できないかと考えてます。

宜しくお願い致します。

[福水正太 · Accepted solution]

なるほど、ありがとうございます。

こちらこそ、要点を理解できておらず申し訳ございませんでした。

動画のHTML部分に、

<video controls="contorols" style="max-width:100%; height:auto">

という箇所がありますがが、こちらを

<video controls="controls" controlsList="nodownload" oncontextmenu="return false;" style="max-width:100%; height:auto">

 ↑このようになるように書き換えてもらってもよろしいでしょうか？

※書き換える前に、該当の箇所はメモ帳などにバックアップをお願いします

[福水正太]

はじめまして。

株式会社ファイブビットの福水と申します。

最もシンプルな方法は、該当ページに、下記のコードを読み込ませることだと思います。

<script>
document.addEventListener('contextmenu', function(event) { event.preventDefault(); });
</script>

このコードは、ユーザーの右クリック(PC)、長押し(スマホ)操作を無効にするものです。

[Mizica0391]

株式会社ファイブビット 福水さま

早速のご回答、ありがとうございます。

実際、やってみましたが、設置する場所が不明でして、どのあたりにこちらのコードを入れたらよろしいでしょうか？
お手数をお掛けしますが、宜しくお願いします。

[福水正太]

ご返信ありがとうございます。

設置する場所に関して、質問で返してしまい大変恐縮なのですが、対象となる会員限定ページのURLをご教示いただくことは可能でしょうか？

開示が難しい場合は、ドメイン部分は〇〇みたいな感じで隠していただいても大丈夫です。

[Mizica0391]

福水さま　

ご連絡、ありがとうございます。
こちらはテスト環境でのURLですが2パターンを検討してます。

色々URLに名前も入ってましたので、下記をコピーしました。
こちらの内容でもわかりますでしょうか。

1. ページの埋め込みのパターン

editor?previewPath=%2Fpages%2F%25E9%2599%2590%25E5%25AE%259A%25E5%258B%2595%25E7%2594%25BB&section=template--19684533797146__main&customCss=true

2.ページの中にセクション『動画』として入れるパターン

editor?previewPath=%2Fpages%2F%25E9%2599%2590%25E5%25AE%259A%25E5%258B%2595%25E7%2594%25BB&section=template--19684533797146__b55f6035-4876-4e35-aa3d-fb7c59b6987b

すみませんが、ご確認宜しくお願いします。

[福水正太]

ありがとうございます。

いただいた内容を拝見する限りでは、管理画面の「ページ」から作成しているページかと認識しました。

下記動画のようにすれば、いけると思います。

https://gyazo.com/8114bec3d702693cf55112fb72232a34

↑この動画の13秒あたりで、

<style>
 p {
  color: red;
}
</style>

↑こんなコードがペーストされていますが、これを先ほど私がお伝えした

<script>
document.addEventListener('contextmenu', function(event) { event.preventDefault(); });
</script>

↑こちらのコードに置き換えてください。

[Mizica0391]

わざわざ、動画の添付を入れていただき、ありがとうございます。

テキストに指定のコードを入れましたが、以前とダウンロードできる状態です💦

[福水正太]

ありがとうございます。

すみません、いただいた画像は、私が提供したコードがどこに貼ってあるかがわからないため、再度スクショなどで共有いただけますでしょうか？

[Mizica0391]

分かりにくくてすみません。
もしかしたら、問題点が違うかもしれないです。
先ほど教えて頂いたコードを入れた際に、しっかり右クリックが効かないようになってるように思います。
コードの貼り付け写真と課題であるダウンロード出来てしまう動画を添付致します。

[Mizica0391]

福水さま　

動画も共有致します。
先ほどの写真と合わせて、アドバイスいただけると幸いです。
何度もすみません。

[福水正太 · Accepted solution]

なるほど、ありがとうございます。

こちらこそ、要点を理解できておらず申し訳ございませんでした。

動画のHTML部分に、

<video controls="contorols" style="max-width:100%; height:auto">

という箇所がありますがが、こちらを

<video controls="controls" controlsList="nodownload" oncontextmenu="return false;" style="max-width:100%; height:auto">

 ↑このようになるように書き換えてもらってもよろしいでしょうか？

※書き換える前に、該当の箇所はメモ帳などにバックアップをお願いします

[Mizica0391]

ありがとうございます！！！
無事にページの方でのダウンロードのセレクトが消えました。
もし、可能でしたら、セクションでのダウンロード出来ないように設定ができたりしますでしょうか？🙇
カスタムCSSを入れるところはあります。

[福水正太 · Accepted solution]

よかったです。

CSSで制御できるものではないので、セクションのカスタムCSSに記述する方法は基本的には使えないですね・・・

クリティカルな方法としては、videoタグから出力される動画の縦横比率をCSSで固定して、ダウンロードボタンを表示するための三点リーダーが表示される右下あたりを擬似要素で覆ってしまう、などすれば、押せないようにはできそうです。

ここまでくると、テキスト上でのやりとりだけだと少し難しいので、コードでのお伝えが難しくなってしまい申し訳ないのですが・・・

[Mizica0391]

そういう方法を取るのですね！

教えていただき、ありがとうございました。

本当に助かりました。😊