在 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;}例子：
1 回答
繁星淼淼
TA貢獻1775條經驗 獲得超11個贊
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 是一個包含所有視頻元素的數組，我遍歷數組并將屬性添加到每個項
- 1 回答
- 0 關注
- 296 瀏覽
添加回答
舉報
0/150
提交
取消