FROM CACHE - jp_header

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

解決済

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

Mizica0391
Shopify Partner
10 0 1

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

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

宜しくお願い致します。

2 件の受理された解決策
福水正太
Shopify Partner
63 24 23

成功

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

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

 

動画のHTML部分に、

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

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

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

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

 

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/

元の投稿で解決策を見る

福水正太
Shopify Partner
63 24 23

成功

よかったです。

 

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

 

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

 

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/

元の投稿で解決策を見る

13件の返信13

福水正太
Shopify Partner
63 24 23

はじめまして。

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

 

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

 

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

 

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
Mizica0391
Shopify Partner
10 0 1

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

 

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

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

福水正太
Shopify Partner
63 24 23

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

 

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

 

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
Mizica0391
Shopify Partner
10 0 1

福水さま 

ご連絡、ありがとうございます。
こちらはテスト環境での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

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

福水正太
Shopify Partner
63 24 23

ありがとうございます。

 

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

 

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

https://gyazo.com/8114bec3d702693cf55112fb72232a34

 

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

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

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

 

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

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
Mizica0391
Shopify Partner
10 0 1

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

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

限定動画.png

福水正太
Shopify Partner
63 24 23

ありがとうございます。

 

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
Mizica0391
Shopify Partner
10 0 1

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


 

Mizica0391
Shopify Partner
10 0 1

福水さま 

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

福水正太
Shopify Partner
63 24 23

成功

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

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

 

動画のHTML部分に、

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

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

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

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

 

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
Mizica0391
Shopify Partner
10 0 1

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

福水正太
Shopify Partner
63 24 23

成功

よかったです。

 

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

 

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

 

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

国内5番目の個人Shopifyエキスパート|Shopifyストア構築100以上|Shopifyアプリ開発5個|Shopify専門メディア運営|自社ECをShopifyで立ち上げ~運用|法人2社経営|Shopify漬けの日々|主にShopify関連の役立つ情報を発信します

https://5-bit.jp/
Mizica0391
Shopify Partner
10 0 1

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

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

本当に助かりました。😊