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

Если вы действительно хотите сделать это поразительно враждебно для пользователя, то вы можете использовать атрибут элемента управления. Вам нужно будет реализовать любые элементы управления, которые вы хотите разрешить использовать 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.