yuw27b’s blog

技術メモと雑記

videoタグのダウンロードオプション

HTMLのvideoタグで動画を表示すると、Chromeで右下のメニューをクリックすると「ダウンロード」という項目があります。(他のブラウザでは確認できませんでした。)
これは、controlslist属性に"nodownload"というパラメータを指定すると非表示になります。

controlslist属性には他にも様々な値が指定できますが、HTML標準にはなってないようです。
<video>: 動画埋め込み要素 - HTML: HyperText Markup Language | MDN
[HTMLMediaElement] Add a controlsList/controlslist attribute. by avayvod · Pull Request #2426 · whatwg/html · GitHub
(MDNのページには実験段階を示すアイコンがついているし、WHATWGの提案はマージされていない様子。)

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

これでChromeでも「ダウンロード」というメニューは表示されなくなりますが、動画の上で右クリックするとコンテキストメニューに「名前をつけて動画を保存」という項目は表示されたままです。できれば保存されたくない、という要望があった場合、やはり右クリックも無効化するしかなさそうです。

document.querySelector('.mediaWrapper').addEventListener('contextmenu', function(e) {
  e.preventDefault();
  return false;
});

ユーザビリティの面からは、コンテキストメニューの非表示はあまりやりたくないので、せめて動画の部分(ここではmediaWrapperクラス)だけを無効化。)


もちろんソースコード上では動画のURLが見えていてダウンロードできてしまうので、厳密にやるのであればストリーミング配信するしかないですが、「なるべくなら保存されたくない」というような場合は、現状はこれがベターでしょうか。