javascript - 如何防止用户在嵌入的 YouTube 视频中快进/擦洗/跳过？

Question

我想向用户展示一个嵌入的 HTML YouTube 视频，并防止他们快进或跳到视频的末尾。我可以通过使用 YouTube 的 API 删除播放器控件(请参阅代码片段)来获得大部分内容，但是在 iOS 上，仍然可以通过捏合让视频在 native 播放器(连同它的擦洗控件)中运行-飞涨。有什么简单的方法可以做到这一点吗？

我应该注意，我也尝试使用 .m4v 视频作为文件，而不是在 HTML5 中提供更多选项，但这对我来说现在不是一个理想的解决方案(带宽和下载问题)。

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', {
          height: '390',
          width: '640',
          videoId: 'KjLYjf4B7xQ',
          events: {
            'onReady': onPlayerReady
          },
         playerVars: {rel: 0, 
                      showinfo: 0, 
                      controls: 0, 
                      disablekb: 1,
                      modestbranding: 1,
                      cc_load_policy: 1,
                      playsinline: 1}
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }

<div id="player"></div>

(我试图让它作为一个片段运行，但存在跨域错误。)

任何帮助表示赞赏。谢谢!

编辑:除了毛里西奥的回答，我还必须添加一个按钮来启动视频，因为用户无法在视频内部单击来启动它。像这样的东西:

  function onPlayerReady(event) {
    event.target.playVideo();

    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
       player.playVideo();
    });
  }

对于按钮:

<button id="play-button">Play Video</button>

Answer 1

如果您需要禁用用户与视频的交互，您可以向包含 iframe 的 div 添加 css 样式。

在这种情况下，添加以下 css 样式:

pointer-events: none

因此，CSS 将如下所示:

#player {
  pointer-events: none;
}