Android Webview Video Hide Download Button

issue

Reference

1. https://stackoverflow.com/questions/39602852/disable-download-button-for-google-chrome
2. https://www.quora.com/How-do-I-disable-the-download-button-from-the-controls-in-HTML5-video-for-Google-Chrome

摘要

查看 video 的 shadow dom 发现下载按钮的样式类为 video::-internal-media-controls-download-button

但是如下的 css 却无法覆盖该默认样式。

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

只能用以下组合，将下载按钮挤出屏幕外来起到隐藏下载按钮的效果。

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

但在低版本安卓中，video 本身就没有下载按钮，以上样式又回造成全屏按钮的丢失。

目前想到的解决方法是，根据 chrome 内核版本来动态插入以上样式表。

chrome version 与 video download button

以下为目前测试的四款手机 chrome 内核版本 与 video download button 的关系

有下载按钮

• Chrome/56.0.2924.87
• Chrome/55.0.2883.91

无下载按钮

• Chrome/33.0.0.0
• Chrome/37.0.0.0