Geek Answers Handbook

Seamless HTML5 video circle

I searched extensively to find a solution to this, but failed. I created a 4 second video clip that loops easily in the editor. However, when a clip works on a page through Safari, Chrome, or Firefox, there is a slight but noticeable pause in playback from end to start.

I tried to use the loop and preload attributes both together and independently.

I also tried the following javascript:

loopVid.play();
loopVid.addEventListener("timeupdate", function() {
    if (loopVid.currentTime >= 4) {
        loopVid.currentTime = 0;
        loopVid.play();
    }
}

But in all cases, a pause remains and spoils the effect. Am I open to any ideas?

+4
source share
2 answers

Google, "" , , , . , : jQuery.

, - , html5 . , , , . , :

javascript , , . - :

var $video = $("video");
var $clone = $video.clone();
$video.after($clone);

var video = $video[0];
var clone = $clone[0];

clone.hidden = true;
clone.pause();
clone.currentTime = 0;

, clone.hidden = true $clone.hide(). .

, , , , . , DOM , , , , . , , . , , , .. .

:

video.ontimeupdate = function() {
    if (video.currentTime >= video.duration - .5) {
        clone.play();
        video.hidden = true;
        clone.hidden = false;
        video.pause();
        video.currentTime = 0;
    }
}

clone.ontimeupdate = function() {
    if (clone.currentTime >= clone.duration - .5) {
        video.play();
        clone.hidden = true;
        video.hidden = false;
        clone.pause();
        clone.currentTime = 0;
    }
}

- .5 , currentTime , duration . , . , .5 .

, , :

!function($){
$(document).ready(function() {

$("video").each(function($index) {
    var $video = $(this);
    var $clone = $video.clone();
    $video.after($clone);

    var video = $video[0];
    var clone = $clone[0];

    clone.hidden = true;
    clone.pause();
    clone.currentTime = 0;

    video.ontimeupdate = function() {
        if (video.currentTime >= video.duration - .5) {
            clone.play();
            video.hidden = true;
            clone.hidden = false;
            video.pause();
            video.currentTime = 0;
        }
    }

    clone.ontimeupdate = function() {
        if (clone.currentTime >= clone.duration - .5) {
            video.play();
            clone.hidden = true;
            video.hidden = false;
            clone.pause();
            clone.currentTime = 0;
        }
    }

});

});
}(jQuery);

, -. . , .5, , - , , , .

+3

, Firefox , mp4 ogv. , webm, , , , , . , , webm .

0

More articles:


All Articles