web-dev-qa-db-ja.com

html5ビデオの最後で関数を実行する

HTMLビデオがあり、ビデオが終了したときに関数を実行したいです。私は以下を試しましたが、何も得られません：

$(document).ready(function(){

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

        alert('video ended');

    });

});

ビデオの最後でこれがトリガーにならない理由はありますか？または、ここで何かに答えるのに十分な情報を提供していませんか？

注：このプロジェクトではjQuery 1.7が必要なため、on（）ではなくlive（）関数を使用しています。

jqueryhtml5html5-video
30
willdanceforfun

貼り付けてコピーするための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>

'video'-あなたの動画に適したセレクターの一部。

[〜＃〜] edit [〜＃〜]：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>

'video'-あなたの動画に適したセレクターの一部。

55
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

onendedイベントを使用

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

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

HTML5のビデオとオーディオについて知っておくべきことすべて

6
Dipak

動作するように管理した唯一の方法は、次のコードです。

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

試してみてください：

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

あなたはビデオが動的に挿入されると言った 後 DOMがロードされます。このスクリプトでは、DOMでvideo要素を検索し、ended関数でバインドします。

。on（） のドキュメントを次に示します。
SO 動的アイテム の質問です。

これがお役に立てば幸いです！

4
Jason Cidras

ライブの代わりに使用できます。 onメソッドはjqueryでサポートされており、新しいバージョンであり、liveは新しいバージョンでは非推奨です。

コードをこれに置き換えると、問題が解決します。

$(document).ready(function(){

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

    alert('video ended');

});

}）;

1
Tahir Afridi