阻止用户从嵌入式YouTube视频获取url /禁用剪贴板
阻止用户从嵌入式YouTube视频获取url /禁用剪贴板
提问于 2018-07-21 06:52:38
我有一个网站，在那里我嵌入了一个YouTube视频的iframe。我的问题是，我不希望用户获得videoID或视频链接(至少在没有打开控制台的情况下，因为这可能是不可能的)。
我已经设法禁用了YouTube徽标，用户可以单击该徽标在新选项卡中打开视频。但是如果你用鼠标右键点击视频，就会出现上下文菜单，用户可以将视频url复制到他的剪贴板上，等等。
经过大量的研究，如果发现没有可能禁用上下文菜单，因为这将是跨站点脚本。
另一种可能的方法是不断检查用户剪贴板中是否有包含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>布莱克
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-21 06:56:44
您可以为复制和剪切事件添加事件侦听器。
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>
Stack Overflow用户
发布于 2018-07-21 07:38:20
提示:您可以添加一个覆盖到iframe，这将防止右击。但是您需要一种方法来使用API来饱和和停止视频。
示例：
<div class="player-bg">
<div class="player">
<div id="overlay" style="
width: 560px;
height: 315px;
background: transparent;
position: absolute;
"></div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/raa5ki4hVp8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51451312
复制相关文章
相似问题