web-dev-qa-db-fra.com

Boucle vidéo transparente HTML5

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

J'essaie simplement de boucler une vidéo MP4 de 5 secondes dans un lecteur HTML5 et de la rendre transparente. J'ai essayé à la fois jwplayer et video.js, à la fois localement et sur l'espace Web, et ni l'un ni l'autre ne fait l'affaire. J'ai essayé d'utiliser les événements "terminés"; J'ai essayé le préchargement/pré-tampon; J'ai essayé d'écouter la dernière seconde d'une vidéo et de chercher 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 (dernière Chrome & Firefox).

Pour référence, voici quelques-uns de mes derniers codes 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 si oui, pourriez-vous s'il vous plaît poster une solution complète? Normalement, je ne les demande pas ou je ne les veux pas, mais je pense que cela pourrait être nécessaire cette fois.

javascripthtmlvideovideo.js
20
daveycroqet

Essaye ça:
1) éditez votre vidéo de cette façon:
[1s] [2s] [3s] [4s] [5s]
couper le premier bloc de la deuxième seconde de la vidéo et l'ajouter 2x à la fin comme ceci:
[2s] [3s] [4s] [5s] [1s] [1s]

2) Utilisez le code:

<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 boucle fonctionne avec des fichiers vidéo plus petits mais vous voyez une image noire à la fin de la vidéo si elle est trop grande (avant la prochaine itération de boucle). Essentiellement avant la fin de la vidéo, vous cherchez à revenir à 0,0 s.

J'espère que ça aide.

2
Quin

Heureka!

Nous avons trouvé la solution réelle, réelle et sans contournement à ce problème là où je travaille. Il explique également le comportement incohérent de plusieurs développeurs.

La version tl; dr est: Bitrates. Qui aurait deviné? Ce que je suppose, c'est que beaucoup de gens utilisent des valeurs standard pour cela qui sont généralement d'environ 10 Mbit/s pour les vidéos HD si vous utilisez Adobe Media Encoder. Ce n'est pas suffisant. La valeur correcte serait 18 Mbit/s ou peut-être même plus. 16 est encore un peu saccadé. Je ne peux pas exprimer à quel point cela fonctionne. J'ai maintenant essayé les solutions de contournement les plus compliquées pendant environ cinq heures jusqu'à ce que je trouve cela avec notre éditeur vidéo.

J'espère que cela aide tout le monde et vous fait gagner des tonnes de temps!

1
Merritt6616