web-dev-qa-db-fra.com

Fonction d'exécution à la fin de la vidéo html5

J'ai une vidéo html et je souhaite exécuter une fonction à la fin d'une vidéo. J'ai essayé ce qui suit mais je ne reçois rien:

$(document).ready(function(){

    $('video').live('ended',function(){

        alert('video ended');

    });

});

Des idées pour lesquelles cela ne déclenche pas à la fin d'une vidéo? Ou n'ai-je pas fourni assez d'informations pour répondre à quoi que ce soit ici?

Note: J'utilise la fonction live () et non pas sur () car jQuery 1.7 est nécessaire avec ce projet.

jqueryhtml5html5-video
28
willdanceforfun

Pour votre plaisir de coller et copier la solution jQuery:

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>/*<![CDATA[*/
  $(document).ready(function(){
    $('video').on('ended',function(){
      console.log('Video has ended!');
    });
  });
/*]]>*/</script>

Remplacez la partie 'video'- par le sélecteur approprié pour votre vidéo.

EDIT: Voici la solution sans jQuery:

<video width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>
<script>/*<![CDATA[*/
  document.querySelector('video').addEventListener('ended',function(){
    console.log('Video has ended!');
  }, false);
/*]]>*/</script>

Remplacez la partie 'video'- par le sélecteur approprié pour votre vidéo.

54
fboes
<html>
<head>
    <title></title>

    <script>
function videoEnded() {
    alert('video ended');
}


    </script>
</head>
<body>

<video src="video/endscene.mp4" id="video" controls onended="videoEnded()">
    video not supported
</video>
</body>
</html>
12
Ilya Libin

utiliser onended event

var video = document.getElementsByTagName('video')[0];

video.onended = function(e) {
  alert('video ended');
}

Lisez plus sur Tout ce que vous devez savoir sur la vidéo et l'audio HTML5

6
Dipak

Voici quelque chose que vous pouvez essayer:

$(document).on('ended', 'video', function (e) {
    alert('video ended');
});

Vous avez dit que la vidéo est insérée dynamiquement après le DOM est chargé. Dans ce script, vous recherchez l'élément video dans le DOM et vous le lie à la fonction ended.

Voici la documentation pour .on () .
Voici la question SO pour éléments dynamiques .

J'espère que ça aide!

4
Jason Cidras

la seule façon dont j'ai réussi à faire fonctionner est le code suivant:

$('video')[0].on('ended',function(){
    console.log('Video has ended!');
});
4
Yonatan R

Vous pouvez utiliser sur le lieu de vie. Parce que la méthode est supportée par jquery nouvelles versions et live est obsolète dans les nouvelles versions.

Vous pouvez remplacer votre code par ceci et votre problème sera résolu.

$(document).ready(function(){

$('video').on('ended',function(){

    alert('video ended');

});

});

1
Tahir Afridi