如何防止用户在嵌入式 YouTube 视频中快进/快速浏览/跳过



我想向用户展示一个嵌入式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>

(我尝试将其作为代码片段运行,但存在跨源错误。

任何帮助,不胜感激。谢谢!

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

  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>

我相信您可以使用同一行代码来定位视频进度条以防止用户清理,这应该允许您在不影响所有其他播放器控件的情况下执行此操作<</p>

div class="one_answers">

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

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

pointer-events: none

因此,CSS 将如下所示:

#player {
  pointer-events: none;
}

相关内容

  • 没有找到相关文章

最新更新