我得到这个下载按钮与<视频>标签在Chrome 55,但不是在Chrome 54:
我如何删除这个,所以没有人可以看到下载按钮在Chrome 55?
我已经使用<video>标签将这个视频嵌入到我的网页上。所以,我想要一些代码来删除这个下载选项。
这是我当前的代码:
<video width="512" height="380" controls>
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
我得到这个下载按钮与<视频>标签在Chrome 55,但不是在Chrome 54:
我如何删除这个,所以没有人可以看到下载按钮在Chrome 55?
我已经使用<video>标签将这个视频嵌入到我的网页上。所以,我想要一些代码来删除这个下载选项。
这是我当前的代码:
<video width="512" height="380" controls>
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
当前回答
至于当前的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你可能想要自定义图标,因为它只是举例而已。
其他回答
至于当前的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你可能想要自定义图标,因为它只是举例而已。
当使用HTML5音频时,这可以隐藏Chrome上的下载按钮。
#aPlayer > audio { width: 100% } /* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { /* HIDE DOWNLOAD AUDIO BUTTON */ #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } } /* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { #aPlayer { overflow: hidden;width: 390px; } #aPlayer > audio { width: 420px; } } <div id="aPlayer"> <audio autoplay="autoplay" controls="controls"> <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" /> </audio> </div>
从Chrome58开始,你可以使用controlsList删除你不想显示的控件。这可用于<audio>和<video>标签。
如果你想删除控件中的下载按钮,请这样做:
<audio controls controlsList="nodownload">
谷歌增加了一个新功能,因为上次的答案张贴在这里。 你现在可以添加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
也许利用“下载”按钮的最好方法是使用JavaScript播放器,如Videojs (http://docs.videojs.com/)或MediaElement.js (http://www.mediaelementjs.com/)
它们没有默认的下载按钮作为规则,而且允许您自定义播放器的可见控制按钮。