HTML5 видео плеер не позволяет искать

Question

Я создаю серию видеоуроков и хотел бы запретить пользователям переходить вперед и пропускать разделы. Я буду использовать видеоплеер HTML5, который будет использоваться для браузеров на ПК и iPad. В идеале мне бы хотелось, чтобы это работало и на iPhone, но я понимаю, что вы не можете контролировать видео на телефоне, поскольку он использует видеоплеер iPhone.

Как я могу запретить пользователям переходить вперед на видеоплеере HTML5?

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;
  });
});

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);

Answer 3

Если вы действительно хотите сделать это удивительно враждебно для пользователя, то вы можете использовать атрибут controls .Вам придется реализовать любые элементы управления, которые вы хотите разрешить использовать JS.

Конечно, пользователь всегда может просто просмотреть> исходный код , чтобы получить URI видео и загрузить его.

Answer 4

Спасибо за ваш ответ, Рик.

Я заметил, что пользователь может перетаскивать искатель и удерживать его, что позволило ему продолжить, поэтому я добавил, где не выполняется поиск, в функции 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;
  }
}

Answer 5

Почему не так?

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;
  }
});

Answer 6

Я согласен с @Bart Kiers, что это не очень хорошая идея, но если вы должны это сделать, я могу придумать один способ: скрыть элементы управления и предоставить собственную кнопку воспроизведения, которая запускает видео с использованием JavaScript.