web-dev-qa-db-fra.com

Vidéo HTML5/Fin d'une affiche vidéo

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

Avec ce qui précède; dans la balise HTML5 <video>, je peux ajouter une affiche; d'une image ou d'une image animée .gif fonctionne correctement et est lu/exécuté avant la lecture de la vidéo.

MAINTENANT, comment puis-je ajouter une image? spécifiquement un .gif (animation .gif fonctionne avec une affiche) qui se déroulera APRÈS que la vidéo ait été jouée?

html5video
23
No-Spex

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

Voici un article associé 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 .

Références pour rechercher des informations détaillées:

2
EL Yusubov

Une façon simple de le faire: 

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

En effet, lorsque vous modifiez le code source d’une balise video, vous appelez implicitement un load () dessus. 

Cette méthode comporte l'avertissement de demander à nouveau l'URL de média et, en fonction des paramètres de mise en cache, il peut être nécessaire de télécharger à nouveau la ressource multimédia pleine longueur, ce qui entraînerait une utilisation inutile du réseau et de la CPU pour le client. 

Un moyen plus approprié de résoudre ce problème consiste à utiliser une image/div superposée en haut de la balise video et à la masquer au démarrage de la vidéo. Lorsque l'événement terminé se déclenche, affichez à nouveau l'image superposée. 

24
Arnaud Leyder

Voici ce que j'ai fini par 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
Hackeron

essaye ça

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

Enfin, j'ai la solution: la vidéo sera lue automatiquement pour la première fois et à la fin de la vidéo, vous verrez l'image de l'affiche: 

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
 document.observe('dom:loaded', function(evt){
    $('#myVideo').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>
2
Niraj patel

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();          
});
1
Viktor Kocev

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

0
player0

J'avais le même objectif et j'ai trouvé une solution en utilisant jQuery pour réinitialiser la source de la vidéo sur elle-même. Maintenant, je reçois mon affiche gif animée avant et après le jeu. Voici une fonction de lecture javascript simple 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
weshen

Si vous voulez une affiche à la fin et que c’est la seule exigence, je dirais qu’il suffit d’ajouter une image de fin dans le fichier vidéo en tant que cette affiche et d’éviter le chargement inutile de JS. Lorsque la vidéo se termine, vous verrez la dernière image qui est maintenant le poster que vous avez ajouté.

Si vous souhaitez afficher l'affiche vidéo à la fin ou, en d'autres termes, recharger la vidéo, utilisez l'événement personnalisé comme indiqué ci-dessus par EL Yusubov.

0
sunnyuff