Jouer plein de vidéo HTML5 et puis la boucle d'une section de celui-ci
Je suis en train de jouer un 8.6 deuxième vidéo, une fois complètement, et ensuite en boucle une petite section de la vidéo, infiniment, pour garder l'illusion d'un sans fin de la vidéo. Jusqu'à présent, j'ai regardé dans le les médias fragments de URI, et la terminé cas de la vidéo. Réglage de la currentTime attribut dans le clos de l'écouteur d'événement fonctionne, mais il rend la vidéo "blink".
À l'heure actuelle, je suis en utilisant un timeupdate écouteur d'événement à modifier le moment où la vidéo se rapproche de la fin [illustré ci-dessous]
elem.addEventListener('timeupdate', function () {
if (elem.currentTime >= 8.5) {
elem.currentTime = 5;
elem.play();
}
}, false);
JSFiddle ici
Cela fonctionne aussi bien, mais la vidéo est mise en pause, visiblement, avant de redémarrer en 5 secondes. Est-il plus aisément, de lecture de la vidéo une fois et puis la boucle à un segment de celui-ci?
Vous devez vous connecter pour publier un commentaire.
Essayez ce qui suit, à "revenir en arrière" dès qu'elle se termine:
Mis à jour le violon: http://jsfiddle.net/Lt4n7/1/
$(function(){ var vidElem = $("#bgvid>VIDEO")[0]; vidElem.addEventListener("ended", function () { vidElem.currentTime = 21; vidElem.play(); }, false); });
currentTime
et jouer instantanément, de sorte que vous aurez un délai entre chaque boucle. à l'Aide de deux vidéos c'est (malheureusement) plus fiables.J'ai juste eu à traiter avec le même problème et a remarqué le même problème avec le scintillement. C'était ma solution:
Puis il suffit de capturer le clos de l'événement et swap d'état de l'écran (exemple utilise jquery mais vous pouvez utiliser le style.display="none/block"' tout aussi facilement:
Votre code est correct, le problème est avec votre fichier MP4! Essayez d'utiliser un beaucoup plus petit vidéo comme celle-ci ( http://www.w3schools.com/tags/movie.mp4 ) pour confirmer le problème n'est pas avec votre code.
Alors, comment pouvez-vous atteindre le même résultat, mais avec de gros fichiers vidéos?
Vous aurez besoin de deux fichiers vidéo:
Rappelez-vous: la vidéo HTML5 n'a pas de problème à jouer et à regarder la vidéo de gros fichiers nous allons donc utiliser cette méthode pour lire les vidéos.
Dans l'exemple ci-dessous nous permettra de jouer la première vidéo et quand il se termine, nous allons exécuter une fonction pour cacher video1 puis afficher/jouer video2. (Vidéo 2 est déjà fixée à la boucle)
N'oubliez pas de charger JQuery dans votre tête, sinon cela ne fonctionnera pas.
Vous ne pouvez pas résoudre ce problème en javascript. Ce délai dépend à la compression de la vidéo et le matériel.
Pour démarrer la lecture à un moment qui n'est pas 0, le décodeur vidéo a revenir en arrière et trouver un image clé et puis de construire l'image actuelle par la lecture de tout ce qui est entre la dernière image clé et de votre temps choisi.
Je ne suis pas un expert en compression vidéo, mais peut-être qu'il y a un moyen pour ramasser ces images clés et de les placer exactement où vous en avez besoin. Je ne pense pas que ce sera facile et en douceur, bien que.
Si vous êtes à la recherche d'une solution plus facile, utiliser @Aléatoire de l', mais il utilise deux
<video>
balises pour contourner cette limite.JS:
HTML:
//Veuillez noter que la boucle attribut ne doit pas être là, dans la vidéo de l'élément dans l'ordre de la "terminé" évènement pour travailler dans ie et firefox