Chromeのhtml5のvideoでダウンロードボタンを無効(非表示)

2017.02.03 15:02 ブログ

Chromeのhtml5のvideoでダウンロードボタンを無効(非表示)の画像

サムネイル画像のようにChromeでダウンロードボタンが必要ないのに出てしまう と困っている方が多いのではないでしょうか?
そこでダウンロードボタンを消す(非表示)方法を2種類ご紹介!

1つ目の方法
videoタグにcontrolsListのnodownloadと記述するだけで非表示が可能です!(Chrome58以降のみ)


最新のChromeのみ対応している(Chrome58以降)との事なので、ここに記載している2種類の方法どちらも入れた方が良さそうです。

2つ目の方法
「CSSでダウンロードボタンをはみ出させて、はみ出た部分は非表示」という方法です。
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

※ブラウザ(Chrome、FireFox、IEなど...)によってプレイヤーのデザインが変わる可能性があります。
さらに、両方を入れた場合は、Chrome58で崩れてしまう可能性があります。

プレイヤーのデザインを統一したい場合は、VIDEOタグのコントローラを非表示にし、HTML、CSSでコントローラを作成しJavaScriptで制御しないといけません。


参考サイト
https://developers.google.com/web/updates/2017/03/chrome-58-media-updates
http://qa.atmarkit.co.jp/q/10143