video控制条在部分浏览器禁止显示“下载”-解决方法

╰+攻爆jí腚メ 2022-04-16 03:49 1272阅读 0赞

1. 搜狗浏览器视频播放器会显示向下箭头的下载按钮：如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70][]

解决方法：只需加入下面的样式

video::-internal-media-controls-download-button {
        display:none;
    }
    
    video::-webkit-media-controls-enclosure {
        overflow:hidden;
    }
    
    video::-webkit-media-controls-panel {
        width: calc(100% + 30px); 
    }

2. 但是以上向下箭头的下载不显示了，在谷歌浏览器打开控制条上还是会显示：如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70 1][]

解决方法：video中添加属性：controlsList="nodownload"

目前测试，添加controlsList="nodownload"这个属性在每个浏览器都已经隐藏掉了

<video id="video5" poster="image/4.jpg" controlsList="nodownload">
         <source src="xx.mp4" type="video/mp4">
    </video>

所以，只需加入该属性即可。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70]: /images/20220416/42a9ba7f8506419084e6a3fdcf8130ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwNTQ4Njk_size_16_color_FFFFFF_t_70 1]: /images/20220416/c0abf53c34d24a389a1c33c41d351255.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1272人围观）

还没有评论，来说两句吧...

相关阅读

相关 video 播放视频禁止拖动进度条

<video id="my-video" class="video-js vjs-big-play-centered" controls="controls" post

忘是亡心i/ 2024年03月22日 17:37/ 0 赞/ 97 阅读

相关 vue 在浏览器顶部显示进度条

主要借助于 NProgress 插件 > [NProgress][]是页面跳转是出现在浏览器顶部的进度条 > 官网：[http://ricostacruz.com/npr

╰半橙微兮°/ 2023年06月23日 13:00/ 0 赞/ 12 阅读

相关 CSS_控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）

当 video 标签添加上 controls 属性时，页面上会显示出所有的控制组件。若有些组件不需要只需要在css中设置相关属性把它隐藏掉即可。 <video con

曾经终败给现在/ 2022年12月16日 13:09/ 0 赞/ 1022 阅读

相关 js控制video控件禁止快进但是可以后退完美解决

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

Dear 丶/ 2022年11月25日 04:09/ 0 赞/ 96 阅读

相关禁止浏览器中双击选中元素的解决方法

问题情况：项目购物车列表点击加减号修改购买数量时，会选中旁边的元素，显示一个蓝色块，体验感觉很不好解决方法：IE和Chrome浏览器的方法相同，在相应的元素中添加 o

古城微笑少年丶/ 2022年08月02日 11:44/ 0 赞/ 364 阅读

相关 PHPExcel下载进度显示条

下载大量数据到Excel表格时，无法查看下载的实时进度。效果展示： 1、统计数据数量： ![Center][] 2、显示数量： ![Center 1][]

桃扇骨/ 2022年07月12日 02:47/ 0 赞/ 292 阅读

相关 video在谷歌chrome浏览器中点击进度条就重新播放问题

chrome浏览器中video中视频可以正常播放，但拖动进度条到新位置player.currentTime一直为0，进度条无法拖动，点击进度条会从0开始播放。无论是原生vi

向右看齐/ 2022年05月15日 10:36/ 0 赞/ 949 阅读

相关文件下载直接在浏览器显示内容

最近做一个文件上传下载的功能，其中出了一些小问题，记录一下：问题：下载功能做好了，我点击下载，然后页面上直接就把文件打开了，而不是在页面底部弹出一个下载提示框： ![20

妖狐艹你老母/ 2022年04月22日 17:20/ 0 赞/ 402 阅读

相关 video控制条在部分浏览器禁止显示“下载”-解决方法

1. 搜狗浏览器视频播放器会显示向下箭头的下载按钮：如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

╰+攻爆jí腚メ/ 2022年04月16日 03:49/ 0 赞/ 1273 阅读

相关解决Vue中根据字符串的长度控制显示数字部分显示省略号

解决Vue中根据字符串的长度控制显示数字部分显示省略号问题： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

阳光穿透心脏的1/2处/ 2021年09月07日 06:12/ 0 赞/ 1022 阅读