Javascript Girl
  1. Javascript Girl
  3. Bouclée sans fil vidéo HTML5
Intereting Posts
Google Maps V3 Circle & Circle que j'ai créé ne correspond pas Enregistrement d'un javascript asynchrone, déclaratif (statique) vs dynamique Erreur CORS sur le même domaine? Comportement d'attributs interne ] étrange IE8 Placez une image sur une image dans un marqueur API google maps Événement Javascript pour "Ouvrir dans une nouvelle onglet" Lecture automatique après saut à currentTime dans la vidéo html5 VIM + JSLint? Changement automatique à la prochaine chanson après la fin React-Native: Impossible d'accéder aux valeurs d'état ou aux méthodes déclarées de renderRow Comment utiliser le filtre Underscore.js avec un objet? Javascript XMLHttpRequest issue Select2 multiselect double valeurs Grande liste de performances avec React Webpack -p ne parvient pas à ugliser le code es2015

Bouclée sans fil vidéo HTML5

Je sais que cette question a été posée à plusieurs reprises, et j'ai examiné chacune d'entre elles ici sur StackOverflow.

J'essaie simplement de boucler une vidéo MP4 de 5 secondes dans un lecteur HTML5 et de le faire sans interruption. J'ai essayé à la fois jwplayer et video.js, tant sur le plan local que sur l'espace web, et je ne fais pas non plus l'affaire. J'ai essayé d'utiliser les événements "finis"; J'ai essayé de précharger / prebouffer; J'ai essayé d'écouter la dernière seconde d'une vidéo et je cherchais au début à contourner complètement les événements stop / play. Je vois toujours la gigue, et je vois toujours l'icône de chargement (dernier Chrome et Firefox).

Pour référence, voici quelques-unes de mon dernier code pour video.js: 

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="480" data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'> <source src="video/loop_me.mp4" type="video/mp4" /> </video> <script type="text/javascript"> var myPlayer = videojs("loop_me"); videojs("loop_me").ready(function(){ this.on("timeupdate", function(){ var whereYouAt = myPlayer.currentTime(); if (whereYouAt > 4) { myPlayer.currentTime(1); } }); }); </script>

Quelqu'un at-il réussi à le faire avec succès? Et, dans l'affirmative, pourriez-vous publier une solution complète? Je ne demande pas normalement ou je ne le veux pas, mais je pense que cela pourrait être nécessaire cette fois-ci.

Vous n'avez besoin de scripts supplémentaires pour ce genre de choses.

La balise "vidéo" a été construite dans un attribut de boucle, utilisez-la et votre vidéo sera en boucle. 

 <video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="480" controls autoplay loop> <source src="video/loop_me.mp4" type="video/mp4" /> </video>

Vous pouvez également ajouter un attribut de précharge si vous le souhaitez. Si vous le souhaitez, vous pouvez trouver plus d'informations sur la balise vidéo ici: HTML Video Tag

Edit: Oops. Vous n'avez pas remarqué les commentaires de Offbeatmammals sous votre question. 🙂

Essaye ça:
1) éditez votre vidéo de cette façon:
[1s] [2s] [3s] [4s] [5s]
Coupe le premier bloc de la vidéo et ajoutez-le 2 fois à la fin comme ceci:
[2s] [3s] [4s] [5s] [1s] [1s]

2) Code d'utilisation: 

 <video id="vid" width="100" height="50" loop autoplay preload="true"> <source src="something.mp4" type="video/mp4"> </video> <!-- Goes to end of body of course --> <script> var vid = document.getElementById("vid"); vid.addEventListener("timeupdate", function () { if(this.currentTime >= 5.0) { this.currentTime = 0.0; } }); </script>

L'idée derrière cela est de rendre la vidéo transparente (la fin de la vidéo est le début de la vidéo). De plus, vous devez vous assurer que la vidéo ne se termine jamais. L'attribut de la boucle fonctionne avec des fichiers vidéo plus petits, mais vous voyez une image noire à la fin de la vidéo si trop grande (avant la prochaine itération en boucle). Essentiellement avant la fin de la vidéo, vous recherchez le retour à 0.0s.

J'espère que cela vous aidera.

  1. Doozerman et Offbeatmammal sont corrects: aucun Javascript n'est nécessaire pour boucler la vidéo en HTML5.

  2. À propos de cette pause avant chaque itération: dans certains navigateurs, nous pouvons également observer une pause en fin de boucle dans nos tests. Par exemple, en ligne, une vidéo de démonstration de 22 secondes à … http://www.externaldesign.com/Marlin-Ouverson.html

… sous OS X, on voit ~ 0,5 sec. Pause avant que la boucle ne se répète – uniquement dans Firefox et Safari; Chrome et Opera jouent tous deux la boucle sans remarquer une pause. Mais notez: pour les navigateurs de bureau / ordinateur portable, la page ci-dessus fournit une vidéo d'arrière-plan ajoutée à l'écran qui semble boucler sans pause dans les quatre navigateurs ci-dessus.

Vous devriez vérifier si vous n'avez pas fait votre vidéo en utilisant l'un de ces sites de conversion de flash vers vidéo – un comme celui-ci a ajouté un cadre vierge dans mes vidéos, qui fait le scintillement, pas n'importe quoi HTML5 / navigateur associé – il ne devrait pas y avoir de scintillement avec Boucle vidéo HTML5 normale