我目前正在為 youtube 進行 chrome 擴展，我想禁用用戶通過單擊它來暫停/播放視頻的選項。
我看到一些帖子說“video.off('click');” 但它不起作用。
我也試過這個：
video.addEventListener('click', function(event){
console.log("preventing?")
event.preventDefault();
});
但它仍然沒有做任何事情。
如果可能的話，我希望得到一些幫助 - 提前謝謝大家！
編輯：
我看到了評論，我想加強我的問題。我需要一個解決方案來禁用單擊事件以從那里停止播放/暫停。
我還需要將答案寫在 javascript 檔案中，因為我想控制用戶是否可以點擊視頻。
我還查看了：Javascript code for disable mouse click for youtube videos，但我還沒有找到針對我的特殊問題的正確解決方案。我看到一個解決方案建議在視頻元素頂部添加透明覆寫，但我不知道如何這樣做以及如何使其隨著視頻播放器本身調整大小而調整大小
uj5u.com熱心網友回復：
通過指定addEventListener的第三個引數 使用 stopPropagation 在 使用捕獲階段附加一個click監聽器，這樣您的監聽器將成為事件傳播鏈中的第一個目標，即它將在站點的處理程式之前運行，因為站點通常不會使用捕獲階段。windowtrue
window.addEventListener('click', event => {
if (event.target.matches('video')) {
event.stopPropagation();
}
}, true);
請注意，如果一些罕見的站點使用完全相同的技巧，您仍然可以通過使用“run_at”宣告您的內容腳本來覆寫它：“document_start”。
uj5u.com熱心網友回復：
我注意到一些顯示 youtube 視頻的網站在播放器頂部放置了一個透明覆寫層，因此用戶無法單擊“在 YouTube 中打開”圖示。這也可能對您有所幫助，即使它仍然可以使用鍵盤將焦點集中在控制元件上。
uj5u.com熱心網友回復：
您可以在此處檢查這兩種實作：https ://stackblitz.com/edit/web-platform-4oehg4?file=index.html （SO 片段無法嵌入 yt iframe 視頻）
// HTML
<div class="container">
<iframe
id="video2"
width="100%"
height="100%"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
<div class="overlay"></div>
</div>
// CSS
.container {
position: relative;
width: 100%;
height: 50%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
僅使用 CSS：
// HTML
<iframe
width="100%"
height="50%"
id="video"
src="https://www.youtube.com/embed/LcGRpsD6yuk?controls=0?mute=1&autoplay=1"
title="YouTube video player"
frameborder="0"
allow="accelerometer; mute; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;"
></iframe>
// CSS
#video {
pointer-events: none;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/472196.html
標籤：javascript html dom 谷歌浏览器扩展