Question

我有一个网站，我将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>

布拉克

Answer 1

您可以为副本添加事件侦听器，并剪切事件。

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>

Answer 2

提示：您可以在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>

防止用户从嵌入式YouTube视频/禁用剪贴板获取网址

2 个答案: