JS onload - 控制列表 - chrome 中多个视频的 nodownload

Question

在 wordpress 网站上，尝试加载一些视频，它们受版权保护，不希望用户只下载它们。

这些方法适用于各种浏览器，但 chrome 添加了一项功能，允许您下载 html5 视频并将按钮嵌入其播放的视频中

您可以使用 controlist = nodownload 禁用此功能。

每个页面可能包含大约 20 个视频，而创建和更新视频的人对 html 并不精通，因此手动添加 html 并不是一个真正的选择。

有人建议使用 JS 来设置控件列表，这似乎有效，但仅适用于页面中的第一个视频。所有其他视频都显示下载图标，我不知道为什么它只适用于加载的第一个视频。

<script> window.onload = function() { video = document.querySelector('video'); if (video) { video.setAttribute("controlsList", "nodownload"); } }; </script>

另一种解决方法是使用 CSS 隐藏按钮，但这不是最好的方法，仍然可以点击。我喜欢 JS 版本，因为它很干净。谁能明白为什么这只适用于第一个视频？

CSS 方法是：

video::-webkit-media-controls {

    overflow: hidden !important

}

video::-internal-media-controls-download-button {

    display:none;

}

video::-webkit-media-controls-enclosure {

    width: calc(100% + 32px);

    margin-left: auto;

}

例子：

Answer 1

var noDownload = function() {&nbsp; &nbsp; var videoElem = document.getElementsByTagName("VIDEO");&nbsp; &nbsp; for (x in videoElem) {&nbsp; &nbsp; &nbsp; &nbsp; if (isNaN(x) == true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; videoElem[x].setAttribute("controlsList", "nodownload");&nbsp; &nbsp; }}noDownload();video {&nbsp; width: 200px;}<video controls>&nbsp; <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video><video controls>&nbsp; <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video><video controls>&nbsp; <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video><video controls>&nbsp; <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /></video>https://jsfiddle.net/t5g78cje/您需要的只是 javascript 代码，我全局调用该函数，因为这就是我让该函数在 JsFiddle 中运行的方式，但是如果您愿意，可以使用 window.onload。如果您想知道您的代码仅更改第一个视频的原因，那是因为 querySelectors 将返回它找到的 DOM 中的第一个元素，而您只是向该元素添加了属性。在答案中，videoElem 是一个包含所有视频元素的数组，我遍历数组并将属性添加到每个项