Comment insérer une image dans une vidéo en utilisant HTML5

Question

Je pense à un moyen d'insérer une image publicitaire dans une vidéo HTML5 en cours de lecture. Je suis nouveau sur HTML5. Donc, ne peut pas vraiment trouver un moyen d'inclure cette fonctionnalité.

Si la vidéo dure 1 minute. Je devrais être en mesure d'arrêter la vidéo à 36 secondes et afficher cette image pendant 5 secondes et passer automatiquement à la vidéo.

Y a-t-il une bibliothèque ou une autre configuration prédéfinie pour cette fonctionnalité?

Answer 1

Ceci est réalisable via l'API vidéo HTML5. Fondamentalement, ce que vous voulez faire est de mettre en pause la vidéo sur la 36e seconde, de la superposer avec une image, puis de supprimer l'image après 5 secondes et de relire la vidéo.

Voici un exemple de la façon dont vous pouvez le faire:

var video; // acquire video 

function PerformCheck() { 
    var curTime = parseInt(video.currentTime, 10); 
    if (curTime < 36) { 
     setTimeout(PerformCheck, 200); 
    } else { 
     video.pause(); 
     PlayCommercial(); 
    } 
} 

function PlayCommercial() { 
    // TODO: Display image overlay 
    setTimeout(ResumeVideo, 5000); 
} 

function ResumeVideo() { 
    // TODO: Remove image overlay 
    video.play(); 
} 

Donc, avec l'exemple ci-dessus vous commencez à effectuer les contrôles une fois que votre vidéo démarre. Si l'utilisateur le fait, abonnez-vous aux événements vidéo.

video.onplay = PerformCheck(); 

Answer 2

Il n'y a pratiquement rien qui ne puisse être fait en utilisant JavaScript.
Quelques suggestions:
Utilisez Javascript pour lancer une temporisation t1 (36Sec) en utilisant setTimeout();. Puis, dans la fonction de rappel,
1) Mettre en pause la vidéo en utilisant document.getElementById('myvideotag').pause(); (OR) Méthodes similaires.
2) Modifier CSS pour afficher l'image, puis lancer une seconde t2 minuterie (5Sec) qui va changer la CSS de l'image à l'affichage/invisible: aucun
3) Lecture/Reprendre la vidéo en utilisant document.getElementById('myvideotag').play();

Ceci est juste un démarreur Kick. Vous devez faire le reste de vos devoirs! StackOverflow vous encourage à recueillir des informations nécessaires et essayer atleast à un point

Answer 3

Je pense à résoudre le problème de la manière suivante (en première tentative):

1. Créer une balise vidéo, puis faites référence à la balise vidéo en utilisant du code javascript.
2. Créez un canevas et dessinez le contenu vidéo dans celui-ci, puis créez un autre canevas qui contiendra l'image publicitaire. Sur le temps désiré, nous allons dessiner le deuxième contenu de toile sur le premier.

Le code devrait ressembler à ceci:

var startTime = Date.now(); 
$(function() { 
    var canvas = document.getElementById('canvas'); 
    var canvas2 = document.createElement('canvas');  
    canvas2.setAttribute('id', 'canvas2'); 
    var ctx = canvas.getContext('2d'); 
    var ctx2 = canvas2.getContext('2d'); 
    var img = new Image(); 
    img.src = "..."; 
    img.onload = function() { 
     ctx2.drawImage(img); 
    } 

    var video = document.getElementById('video'); 

    video.addEventListener('play', function() { 
     var $this = this; //cache 
     (function loop() { 
      var currentTime = Date.now() - startTime; 
      if (!$this.paused && !$this.ended) { 
       if (currentTime > 3600) { 
        ctx.drawImage(canvas2, 0, canvas.height - 100); 
       } else { 
        document.removeElementById('canvas2'); 
       }      

       ctx.drawImage($this, 0, 0); 
       setTimeout(loop, 1000/30); // drawing at 30fps 
      } 
     })(); 
    }, 0); 
}); 
​ 

J'ai trouvé un joli un article bien expliqué à html5doctor sur le processus. Cependant, je n'ai pas vérifié leur solution. La solution proposée n'est pas complète, je dessine seulement l'idée de base comment j'aborderais le problème.