我得到这个下载按钮与<视频>标签在Chrome 55,但不是在Chrome 54:

我如何删除这个,所以没有人可以看到下载按钮在Chrome 55?

我已经使用<video>标签将这个视频嵌入到我的网页上。所以,我想要一些代码来删除这个下载选项。

这是我当前的代码:

<video width="512" height="380"  controls>
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

当前回答

我用一个透明的div覆盖音频控制器的下载按钮,将鼠标光标的符号更改为“不允许”,从而解决了这个问题。

div会阻止下载按钮的激活。

高度:50px,宽度:35px,左:(文档-右-60),上:(与音频控制器相同)。

您必须将div的z-index样式设置在音频控制器的z-index之上。

参见sapplic.com/jive66的例子,适用于win7和win8的chrome浏览器。

其他回答

我用一个透明的div覆盖音频控制器的下载按钮,将鼠标光标的符号更改为“不允许”,从而解决了这个问题。

div会阻止下载按钮的激活。

高度:50px,宽度:35px,左:(文档-右-60),上:(与音频控制器相同)。

您必须将div的z-index样式设置在音频控制器的z-index之上。

参见sapplic.com/jive66的例子,适用于win7和win8的chrome浏览器。

至于当前的Chrome版本(56),你还不能删除它。其他帖子提供的解决方案导致部分视频溢出。

我发现了另一个解决方案-你可以让前面的按钮重叠下载按钮,并简单地覆盖它,通过使用这种技术:

video::-webkit-media-controls-fullscreen-button {
   margin-right: -48px;
   z-index: 10;
   position: relative;
   background: #fafafa;
   background-image: url(https://image.flaticon.com/icons/svg/151/151926.svg);
   background-size: 35%;
   background-position: 50% 50%;
   background-repeat: no-repeat;
}

例如:https://jsfiddle.net/dk4q6hh2/

PS你可能想要自定义图标,因为它只是举例而已。

谷歌增加了一个新功能,因为上次的答案张贴在这里。 你现在可以添加controlList属性,如下所示:

<video width="512" height="380" controls controlsList="nodownload">
    <source data-src="mov_bbb.ogg" type="video/mp4">
</video>

你可以在这里找到controllist属性的所有选项:

https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

嘿,我找到了一个永久的解决方案,应该在任何情况下工作!

对于普通的web开发

<script type="text/javascript"> 
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5视频有预加载错误

$( document ).ready(function() {
  $("video").each(function(){
    $(this).attr('controlsList','nodownload');
    $(this).load();
  });
});

undevinded美元?——>调试模式!

<script type="text/javascript"> 
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')}); 
</script>

HTML5视频有预加载错误

jQuery( document ).ready(function() {
  jQuery("video").each(function(){
    jQuery(this).attr('controlsList','nodownload');
    jQuery(this).load();
  });
});

如果对你有帮助,请告诉我!

从Chrome58开始,你可以使用controlsList删除你不想显示的控件。这可用于<audio>和<video>标签。

如果你想删除控件中的下载按钮,请这样做:

<audio controls controlsList="nodownload">