使用H5的video標簽可以直接插入視頻,一般在瀏覽器效果如下圖顯示:
但有時在谷歌瀏覽器上顯示,會遇到右下角有下載按鈕。如果項目要求去掉這個下載按鈕,怎么辦呢?如下圖顯示:
分析: 經本人測試,是谷歌瀏覽器版本問題(低版本的右下角沒有下載按鈕,比如53.0版本,我的谷歌瀏覽器是53.0版本) 。用同事電腦上的58.0版本測試有下載按鈕
只測試了53.0和58.0版本,如果你的谷歌瀏覽器版本是54.0-57.0之間,並且也出現了視頻右下角有按鈕的情況都可以使用下面的代碼。
解決方法:使用CSS hack,代碼如下:
video::-internal-media-controls-download-button { display:none; } video::-webkit-media-controls-enclosure { overflow:hidden; } video::-webkit-media-controls-panel { width: calc(100% + 30px); }