chromeでvideoのダウンロードリンクを非表示にする

videoのcontrols属性を指定した際にchromeで表示されるダウンロードリンクを非表示にしているサイトを見かけたので、設定方法を調べてみました。

対応ブラウザ

ダウンロードリンクの非表示の設定はcontrolslist属性で行うのですが、主要ブラウザで対応しているのはchromeとedge(Chromium版)のみのようです。
対応ブラウザはこちら

設定方法

controlslist属性の使い方についていくつか試してみます。
まずダウンロードリンクを非表示にするには、controlslistの値にnodownloadを設定すればOKです。

<video src="video.mp4" controls controlslist="nodownload"></video>

デフォルトでは以下のような表示になっています。

設定後は以下のように非表示にできました。

controlslistは他にもnofullscreen、noremoteplaybackが設定でき、nofullscreenの場合はフルスクリーンのリンクを非表示にできます。

<video src="video.mp4" controls controlslist="nofullscreen"></video>

nofullscreenを設定すると、フルスクリーンのリンクがクリックできない状態になります。

ダウンロードリンクの下に表示されるピクチャー イン ピクチャーのリンクを消したい場合、disablePictureInPicture属性を設定することで非表示にできます。

<video src="video.mp4" controls disablePictureInPicture></video>

設定後は以下のように、ピクチャー イン ピクチャーのリンクを非表示にできました。

ダウンロードのリンクとピクチャー イン ピクチャーのリンクを合わせて非表示にもできます。

<video src="video.mp4" controls controlslist="nodownload" disablePictureInPicture></video>

設定後は以下のように、メニューを開くリンク自体が非表示になります。

controlslistの値は半角スペース区切りで複数の指定もできます。

<video src="video.mp4" controls controlslist="nodownload nofullscreen" disablePictureInPicture></video>

controlslistとdisablePictureInPictureの設定のデモページ

注意点として、前述の通り対応しているブラウザがchromeとedgeのみなのと、対応しているブラウザでもvideoを右クリックからダウンロードが可能となっています。