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() {

    var videoElem = document.getElementsByTagName("VIDEO");

    for (x in videoElem) {

        if (isNaN(x) == true) {

            continue;

        }

        videoElem[x].setAttribute("controlsList", "nodownload");

    }

}

noDownload();

video {

  width: 200px;

}

<video controls>

  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />

</video>

<video controls>

  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />

</video>

<video controls>

  <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />

</video>

<video controls>

  <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 是一个包含所有视频元素的数组，我遍历数组并将属性添加到每个项