QA@IT

Chromeの<video>タグ動画プレーヤーのダウンロードボタンのみ非表示にする方法

13439 PV

Chromeのタグ動画プレーヤーのダウンロードボタンのみ非表示にしたいのですが、何か知っている方はいらっしゃいますか?

_____.PNG

下記CSSのような感じで、CSSでChromeのみボタンを非表示にできるといいのですが、ダウンロードボタンにあたるCSSの名前がわかりませんでした。

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {
    display: none;
}
video::-webkit-media-controls-timeline {
    display: none;  
}
video::-webkit-media-controls-current-time-display{
    display: none;    
}
video::-webkit-media-controls-mute-button {
      display: none;    
}

Chromeのエンジンはblinkだったので、chromiumですがblinkソースをのぞいてみたのですが、
更新が1年4か月前と古かったため、欲しい情報がのっていませんでした。
https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/mediaControls.css

どこかに情報がありそう、といった内容でもありがたいです。
よろしくお願いします。

回答

自己解決できました。
下記cssでwindows chromeは対応できたけど、問題点も残っています。

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

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

// media-controlsを30px大きくして、はみ出た所を非表示(結果、最右のダウンロードボタンが非表示)

2017-01-07時点のchrome55で下記は機能しませんでした。下記CSSだけで非表示になってほしいですね。
video::-internal-media-controls-download-button {display:none;}

問題点

chromiumのissueにも改善要求があがっていたので、次期アップデートとか様子を見た方がよさそうです。

サンプル

http://jsfiddle.net/6ebLs316/

参考

chromiumのissueで改善要求が上がってました
https://bugs.chromium.org/p/chromium/issues/detail?id=675596&can=2&q=media%20download&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

編集 履歴 (4)
ウォッチ

この質問への回答やコメントをメールでお知らせします。