Question Affiche vidéo / fin de vidéo HTML5


<video controls="controls" poster="http://gifs.gifbin.com/1233925271_8be9acc.gif" style="width:800px;">

Avec ce qui précède dans le HTML5 <video> tag, je peux ajouter une affiche; d'une image ou .gif animée très bien et joue / s'exécute avant la lecture de la vidéo réelle.

Maintenant, comment puis-je ajouter une image? spécifiquement un .gif (.gif animé fonctionne avec un poster) qui sera exécuté après la lecture de la vidéo?


22
2018-01-09 20:13


origine


Réponses:


En bref: ce dont vous avez besoin est d'ajouter video.addEventListener('ended',function() {}) et le faire dans votre JavaScript personnalisé.

Voici un article connexe qui redirige après la lecture de la vidéo, vous pouvez le modifier en conséquence - Rediriger la vidéo html5 après la lecture.

Les références pour rechercher des informations détaillées:


2
2018-01-09 20:46



Une manière simple de le faire:

<script>
var video = document.querySelector('video');       
video.addEventListener('ended', function() {
  video.load();     
});
</script>

En effet, lors du changement de src d'une balise vidéo, vous appelez implicitement un load ().

Cette méthode a pour inconvénient de demander à nouveau l'URL du support et, en fonction des paramètres de mise en cache, elle peut télécharger à nouveau la ressource multimédia complète, ce qui entraîne une utilisation inutile du réseau / du processeur pour le client.

Une façon plus appropriée de résoudre ce problème consiste à utiliser une image superposée / div sur le tag vidéo et à la masquer au démarrage de la vidéo. Lorsque l'événement terminé se déclenche, il suffit d'afficher à nouveau l'image de superposition.


23
2018-04-10 06:15



C'est ce que j'ai fini par faire pour voir une affiche après la lecture de la vidéo:

# Show poster at the end of the video
$('video').on('ended',->
  $('video')[0].autoplay=false
  $('video')[0].load()
)

6
2017-08-08 13:52



essaye ça

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v;            
});  

4
2018-04-04 11:16



finally got the solution video will autoplay first-time and at end of video you get poster image show 

`<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
document.observe('dom:loaded', function(evt){
    $$('video').each(function(elm){
        elm.play();
      var wrapper = elm.wrap('span');
      var vid = elm.clone(true);
      elm.observe('ended', function(){
        wrapper.update(vid);
     });
    });
});
</script>
<video id="myvideo" poster="1.png" >
    <source src="1.mp4" type="video/mp4" />
</video>`

1
2018-05-31 09:02



J'avais le même objectif et j'ai trouvé une solution en utilisant jQuery pour réinitialiser la source de la vidéo à la fin. Maintenant, je reçois mon affiche gif animée avant et après le jeu. Voici une simple fonction de lecture javascript et le code jQuery.

function play()
    {
    movie_ID.play(); 

    $(document).ready(function(){
         $("#movie_ID").bind("ended", function() {
        $('#movie_ID').attr('src', 'movie_ID.src');
            });
         });   
     }  

0
2017-08-04 20:45



résolu en ajoutant 1 cadre supplémentaire (poster) à la fin de la vidéo elle-même, car le site Web ne supportait pas l'insertion de javascripts


0
2018-01-06 11:03



Cela fonctionne pour moi.

var video=$('#video_id').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v; 
    video.pause();          
}); 

0
2017-08-02 11:31