我有一个网站,我在 iframe 中嵌入了 YouTube 视频。我的问题是,我不希望用户获取 videoID 或视频链接(至少不打开控制台,因为这可能是不可能的)。
我已经设法禁用 YouTube Logo ,单击该 Logo 即可在新标签页中打开视频。但是,如果您右键单击视频,则会出现上下文菜单,可以将视频网址复制到剪贴板等。
经过大量研究后发现,不可能以某种方式禁用上下文菜单,因为这将是跨站点脚本。
另一种可能的方法是不断检查用户剪贴板中是否有包含 videoID 的字符串。这也不起作用(我猜除了在 IE 中),因为访问剪贴板有一些限制,所以我无法找出用户在其中保存的内容(即使使用 Flash)。
仅检查剪贴板内容是否发生更改以检测用户可能尝试获取 videoURL 就足够了(只要我知道,他找到视频 URL 就没有问题)。
完全禁用剪贴板或用其他东西向其发送垃圾邮件似乎也是不可能的。
希望能解决我的问题,谢谢。
编辑:
这是使用的 HTML,包括一些脚本(以及一些不起作用的脚本)
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log("READY");
event.target.playVideo();
}
function onPlayerStateChange() {
console.log("STATE CHANGED");
}
</script>
<body>
<div class="all">
<?php
include "parts/header.php";
?>
<div class="player-bg">
<div class="player">
<iframe
id="player"
width="640"
height="390"
frameborder="0"
sandbox="allow-forms allow-scripts allow-pointer-lock allow-same-origin allow-top-navigation"
src="<?=$embedURL?>">
</iframe>
</div>
</div>
<div class="usercontrols-container">
<form id="form" method="post" action="./views.php" autocomplete="off">
<input class="textfield" type="text" min="0" name="guessViews"/>
<a class="button" href="#" onclick="document.getElementById('form').submit();">Guess</a>
</form>
</div>
</div>
</body>
<script>
function copy() {
console.log("copy detected 2");
}
document.addEventListener("copy", function() {
console.log("copy detected 1");
});
</script>
布莱克
最佳答案
您可以为复制和剪切事件添加事件监听器。
You can't copy any text.
<br/>
<textarea>You can't copy any text.</textarea>
<script>
document.body.addEventListener("copy", function(e){
e.preventDefault();
e.stopPropagation();
});
document.body.addEventListener("cut", function(e){
e.preventDefault();
e.stopPropagation();
});
</script>
您还可以将视频放入不带控件的标签内,并通过按钮添加控件。
<video width="320" height="240" id="vid">
<source src="https://www.w3schools.com/htmL/movie.mp4" type="video/mp4">
</video>
<button onClick="document.getElementById('vid').play()">Play</button>
<br/>
<button onClick="document.getElementById('vid').pause()">Pause</button>
您还可以使用 div 覆盖层覆盖 iframe 并阻止 contextmenu 事件。
#frame{
position: absolute;
top: 10px;
left: 10px;
width: 150px;
height: 150px;
}
#overlay{
position: fixed;
top: 10px;
left: 10px;
width: 155px;
height: 155px;
background-color: transparent;
z-index: 1000;
}
<iframe width="150" height="150" id="frame">
</iframe>
<div id="overlay"></div>
<script>
document.getElementById("overlay").addEventListener("contextmenu", function(event){
event.preventDefault();
event.stopPropagation();
});
</script>
关于javascript - 防止用户从嵌入的 YouTube 视频获取 url/禁用剪贴板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51451312/