如何防止用户在嵌入的 YouTube 视频中领先 fast-forwarding/scrubbing/skipping？

Question

我想向用户展示嵌入的 HTML YouTube 视频，并防止他们快进或跳到视频末尾。我可以通过使用 YouTube 的 API 删除播放器控件（参见代码片段）来完成大部分工作，但是在 iOS 上，仍然可以将视频播放到运行的原生格式播放器（连同其滑动控件）通过捏合缩放。有没有简单的方法可以做到这一点？

我应该注意，我也尝试过使用 .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>

（我尝试将其作为片段发送至运行，但存在跨域错误。）

感谢任何帮助。谢谢！

编辑：除了 Mauricio 的回答之外，我还必须添加一个按钮来启动视频，因为用户无法在视频内部单击以启动它。像这样：

  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

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

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

pointer-events: none

因此，CSS 将如下所示：

#player {
  pointer-events: none;
}

如何防止用户在嵌入的 YouTube 视频中领先 fast-forwarding/scrubbing/skipping？

How can I prevent a user from fast-forwarding/scrubbing/skipping ahead in an embedded YouTube video?

javascript

youtube

youtube-api

html5-video