HTML5 видео с бесшовной петлей внутри видео

Question

Я программирую интерактивное видео (вид игры), в котором пользователь делает действия на боковой панели и действия, происходит в видео.

Для части, видео ждет действий пользователя на панели, поэтому он должен циклически, пока действие не будет запускаться пользователем.

Так что через 15 секунд я вернусь до 11 секунд, пока пользователь не сделал действие, видео предназначено для идеальной петли.

Мой петля работает, но проблема в том, что это не бесшовные.Через 15 секунд он останавливается на секунду, а затем начинается назад через 11 секунд.Есть ли способ сделать это работать бесшовные?

Я использую VideoJS.Вот мой код:

var video_decor = _V_("video_decor");
video_decor.addEvent("timeupdate", function(){
    var whereYouAt = video_decor.currentTime();
    console.log(whereYouAt);
    if(whereYouAt > 15){
        video_decor.currentTime(11);
    }
});

.

Answer 1

The easiest way to do a seamless loop is by using a full length video and waiting for the 'ended' event to go back to the beginning. That tends to be pretty smooth, so if you can make that happen some how that'd be best.

Taking a sub-section of the video and looping it is difficult, because browsers don't trigger the 'timeupdate' event every millisecond, and it would be really inefficient to do so. They instead trigger timeupdate every 15 (Chrome/Safari) or 250 (Firefox) milliseconds, so that's your margin of error. You could potentially create your own timer (setInterval) for a smaller interval and check the time manually, but that could put a heavy load on the browser.