web-dev-qa-db-ja.com

Google Chromeのダウンロードボタンを無効にしますか？

Google Chromeは、埋め込みビデオ（つまり、MSEではない）のみのビデオのダウンロードボタンとともに出荷されます。

Canary Controls

Chromeの<video>タグの実装に関するドキュメントを見つけるのに苦労しています。 「コントロール」を無効にして独自のビデオプレーヤーコントロールを作成する以外に、この機能を無効にする方法があるかどうかは誰にもわかりますか？

これが表示されている場合、ビデオをダウンロードするのは簡単です。その機能がコントロールの一部として表示されないようにするだけです。

ありがとうございました！

google-chromehtml5-video
48
ranvel

または、単純にnodownloadをcontrolsListに追加できます

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>
72
Elyor

Settings|Preferences -> Elements -> Show user agent shadow DOMでシャドウDOMを有効にすることで、ネイティブChrome Video Playerのコントロールを検査できます

shadow dom

その後、プレイヤーのボタンを調べることができます。

Player DOM

問題は、ダウンロードボタンが何らかの理由でCSSを介してアクセスできないことです。

video::-internal-media-controls-download-button {
    display:none;
}

動作しません。前のボタンを選択し、+または~を使用して隣のボタンをターゲットにすることもできません。

私たちがまだ見つけた唯一の方法は、コントロールパネルの幅を広くし、エンクロージャをoverflow: hiddenにすることで、ボタンを表示可能領域から外すことです。

video::-webkit-media-controls {
    overflow: hidden !important
}
video::-webkit-media-controls-Enclosure {
    width: calc(100% + 32px);
    margin-left: auto;
}

ほとんどのコンテンツプロバイダーがこれに満足しないため、Googleがこの問題をすぐに解決することを願っています...

47
Demnogonis

Demmongonisソリューションは機能しますが、望ましくない結果につながる可能性があることに注意してください。

Android/Chromeは、時々、私が推測するビデオやその他の要因に依存して、ダウンロードボタンの右側にボタンを追加します。つまり、キャスティングボタン（選択する方法はありません）。ダウンロードボタンを表示したままにし、最後のボタンを非表示にします（キャストボタン）。

casting button in Android 4.4 Chrome 55

更新

ControlsList属性を使用してダウンロードボタンを非表示にすることが可能になりました。

<video controlsList="nodownload" ... />
14
jonalvarezz

はい、これは現在可能です。少なくとも執筆時点では、controlsList属性を使用できます。

<video controls controlsList="nodownload">
  <source data-src="movie.mp4">
</video>

これはChrome 58で導入されたようで、そのドキュメントはここにあります： https://developers.google.com/web/updates/2017/03/chrome-58- media-updates＃controlslist

開発者は、ダウンロード、フルスクリーン、リモート再生ボタンなどのメディアコントロールをカスタマイズできるようになりました。 HTMLでの使用：

<video controls controlsList="nofullscreen nodownload noremote foobar"></video>

公式のサンプルページもあります： https://googlechrome.github.io/samples/media/controlslist.html

9
bg17aw

私が無効にしようとしていたもう1つの制御項目は、 'download'に加えて- 'picture-in-picture '。

悲しいことに、controlsListに追加するためのプロパティはありません。ただし、属性があります-disablePictureInPicture要素に追加してpipを無効にできます。

ダウンロードとピクチャーインピクチャーの両方を無効にする例：

<video disablepictureinpicture controlslist="nodownload">...</video>

詳細： https://wicg.github.io/picture-in-picture/#disable-pip

3
Andrii Bogachenko

ねえ、私はすべてのケースで動作する永続的なソリューションを見つけました！

通常のWeb開発の場合

<script type="text/javascript"> 
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

FalseでプリロードされているHTML5ビデオ

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

$未開発？->デバッグ方法！

<script type="text/javascript"> 
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

FalseでプリロードされているHTML5ビデオ

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

それがあなたを助けたかどうか教えてください！

1
Chris Kroon

上記の回答に加えて、コンテキストメニューを無効にするには次のコードを追加する必要があります。

index.html：（グローバル）

<body oncontextmenu="return false;">

または、一部のelementのコンテキストメニューを無効にできます。

element.oncontextmenu = function (e) {
    e.preventDefault();
};
1
Ukr

このCSSコードを追加します。

  audio::-internal-media-controls-download-button {
    display:none;
}

audio::-webkit-media-controls-Enclosure {
    overflow:hidden;
}

audio::-webkit-media-controls-panel {
    width: calc(100% + 30px); /* Adjust as needed */
}
1
Toufiq

シンプルにするために、controlslistという属性（LOWERCASE、コントロールの直後）を追加し、その値を= "nodownload"に設定する必要があります。また、上記の例の一部とは異なり、srcファイル（タイプ）と属性タイプの値が一致していることを確認してください。私のリンクは、Googleドライブの「sunrise over water.mp4」という名前のファイルへのリンクです。私のやり方は次のようになります。

<video src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" title="sunrise over water" width="420" height="300" controls controlslist="nodownload" type="video/mp4"> Video Not Supported By Your Browser... </video>

OR

<video width="440" height="320" title="sunrise over water" controls controlslist="nodownload"> <source src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" type="video/mp4"> Video Could Not Be Played In Your Browser... Sorry. </video>

0
Sean Tank Garvey

ページ内の動画から「ダウンロード」ボタンを無効にするためのプレーンJavaScript：

<script>
    window.onload = function() {
        video = document.querySelector('video');
        if (video) {
           video.setAttribute("controlsList", "nodownload");
        }
    };
</script>

必要に応じて、querySelectorAllを使用して各ビデオを削除することもできます。私の例では、1ページに1つのビデオしかありません。

0
Simon Berton

上記の答えは良い解決策を提供します。しかし、プロジェクトでこれに取り組んでいたとき、2つの問題がありました。

  1. Android（モバイルまたはタブレット）でフルスクリーンボタンの右マージン領域をタッチすると、ダウンロードが発生します（ダウンロードボタンが押されたかのように）。 z-indexを適用しても修正されませんでした。

  2. Overflow：hiddenのため、ダウンロードボタンは表示されませんが、フルスクリーンボタンの右側に存在します。つまり、PCのコントロールボタンまたはバーをクリックした後に「タブ」を数回押すと、ダウンロードボタンに到達できるということです。

さらに、注意してください-一部の幅の狭いデバイス（携帯電話など）は、シークバーを隠すのに十分なほど小さいです。ダウンロードボタンを非表示にするには、さらに多くのピクセルが必要です。

Googleがこのできるだけ早く調整するオプションを提供してくれることを願っています。

0
Meow Kim