javascript - 防止用户从嵌入的 YouTube 视频获取 url/禁用剪贴板

标签 javascript php html iframe youtube

我有一个网站,我在 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/

相关文章:

javascript - D3 : issue with legend scaling

php - $_FILES 为空,curl 文件上传

php - 将 CSS 存储在数据库中

jquery - 宽度的继承。 slider

javascript - 如何在文本字段中设置焦点

javascript - 通知不可点击一次 "read": error "notification_id is not defined"

php - Google Maps API V3 KML 图层不显示

javascript - onclick 事件中的函数不起作用

java - JQuery 中包含 Java 代码的转义字符

javascript - Google 跟踪代码管理器 (GTM) 错误。预期的主要表达