HTML5视频播放器防止快进功能

Question

我正在创建一系列的视频教程，并希望防止用户快进并跳过某些部分。我将使用一个HTML5视频播放器，该播放器将用于桌面和iPad浏览器。理想情况下，我也希望这个播放器在iPhone上可以使用，但我知道你对手机上的视频没有控制权，因为它使用了iPhone的视频播放器。

如何防止用户在HTML5视频播放器上快进？

- jaysonp

---

“防止用户向前寻找”：在我看来不是个好主意。如果用户看了一半，关闭了浏览器，然后想观看后半部分怎么办？他/她将被迫重新观看第一部分。 - Bart Kiers

我打算在视频中设置检查点，当视频播放时将用户的进度保存到数据库中。如果用户返回页面，则从上次检查点开始播放。视频长度为2-5分钟。我意识到禁止快进不是一个好主意，但该项目要求用户在继续下一个教程之前观看整个视频。当然，人们可以查看>源代码并下载它，但本教程旨在教授他们下一个教程所需的先决技能。 - jaysonp

我可以想到一个例子，它强制你观看整个视频 - 在线驾驶课程。即使你已经阅读完文本或观看完视频，他们也会计时，不让你进入下一节。这很糟糕。但是他们必须遵循法律规定的要求。 - netrox

任何需要确保用户真正查看完整个演示的计算机辅助培训系统都必须具备类似的要求。如果您曾在需要进行年度法律培训（如反腐败或反贿赂等）的公司工作过，它们通常会有类似的要求。这可能会是一个“恼人”的事情，如果你正在制作一个类似于YouTube的媒体网站，但肯定存在这种要求至关重要的实际应用场景。没有理由因为你不理解他的用例而拒绝他的问题。 - Carnix

Answer 1

另一个使用Video.js的示例：

videojs('example_video_1').ready(function(){
  var player = this;
  var previousTime = 0;
  var currentTime = 0;
  var seekStart = null;

  player.on('timeupdate', function(){
    previousTime = currentTime;
    currentTime = player.currentTime();
  });

  player.on('seeking', function(){
    if(seekStart === null) {
      seekStart = previousTime;
    }
  });

  player.on('seeked', function() {
    if(currentTime > seekStart) {
      player.currentTime(seekStart);
    }
    seekStart = null;
  });
});

- Radu Dumbrăveanu

---

完美运行！ - Tomjr260

Answer 2

我只想防止快进。我的系统里还有更多的代码可以让用户暂停并稍后回来观看。它会记录当前位置并在加载时设置视频位置。

我正在使用video.js。我尝试使用timechange事件，但它会在快进之前触发。所以，我转而使用间隔每秒抓取当前位置。如果快进位置大于当前位置，则将其设置回去。效果非常好。

var player = null;
var curpos = 0;
videojs('player').ready(function(){
  player = this;
});

player.on('seeking', function () {
  var ct = player.currentTime();
if(ct > curpos) {
  player.currentTime(curpos);
}
});

function getpos() {
  curpos = player.currentTime();
}
onesecond = setInterval(getpos, 1000);

- Rick Cockerham

---

最后，不确定这是否是jQuery的问题，但我必须用setInterval(getpos, 1000)替换setInterval('getpos()', 1000)才能使其正常工作。很棒的代码片段，谢谢！ - jporcenaluk

在 getpos 中，您可以添加一个检查来查看 player.currentTime 是否大于 curpos，以防将进度重置为较早的时间。 - Adriaan Marain

Answer 3

感谢您的回答，Rick。

我注意到用户可以拖动并保持选择器，这使得他们可以继续播放，因此我在getPos函数中添加了不寻找的条件。 这使用了HTML 5和jQuery。

var video = document.getElementsByTagName('video')[0];

function allowMove() {
  $('input[id$="btnNext"]').removeAttr('disabled');
  $('input[id$="videoFlag"]').val("1");
}

function getpos() {
  if (!(video.seeking)) {
    curpos = video.currentTime;
  }
  console.log(curpos)
}
onesecond = setInterval('getpos()', 1000);

function setPos() {
  var ct = video.currentTime;
  if (ct > curpos) {
    video.currentTime = curpos;
  }
}

- user3426396

Answer 4

为什么不用这种方式？

var video = document.getElementById("myVideo");
var counter = 0;

video.on('timeupdate', function() {
  if (video[0].paused == false) {
    counter = video[0].currentTime;
  }
}

video.on('seeking', function(e) {
  if ( parseInt(counter, 10) != parseInt(video[0].currentTime, 10) ) {
    video[0].currentTime = counter;
  }
});

- Bnoss

Answer 5

如果你真的想做这种极其不友好的事情，那么你可以利用controls属性。你将需要使用JS实现任何你想允许的控件。

当然，用户总是可以通过查看源代码来获取视频的URI并下载它。

- Quentin

---

与Casablanca评论中的问题相同。这不是一个有用的答案。 - Carnix

此答案的链接已失效。 - Anthony

信不信由你，有些使用情境下你必须确保用户观看了整个视频。 - Crbreingan

Answer 6

我同意@Bart Kiers的观点，这不是一个很好的想法，但如果你一定要这样做，我可以想到一种方法：隐藏控件并提供自己的播放按钮，使用JavaScript启动视频。

- casablanca

---

我可以想到的一个用途是视频广告预卷片，广告商不喜欢为可以跳过的内容付费。 - SimonGates

他并不是在问这是否是一个“好”主意。有很多情况下用户不应该能够跳过某些步骤，特别是在计算机辅助培训系统中。-1 - Carnix