6

現在のビデオが終了したら、HTML5 ビデオと jQuery bind 関数を使用してフェードインし、次のビデオを再生する単純な php ページを作成しています。

関数を終了イベントにバインドするとうまくいきますが、ビデオが終了する 20 秒前にフェードイン & 再生関数 (たとえば) を起動したいと思います。

しかし、私はこの魔法を実現する方法を理解できないようです. これは可能ですか？

私のHTML：

<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

<video controls preload="auto">
<source src="sequence01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

私のjQuery：

$('video').bind("ended", function(){
   $(this).fadeOut(20000).next().fadeIn(20000).get(0).play(); 
});

解決しました！

$('video').on('timeupdate', function(event) {
  var current = Math.round(event.target.currentTime * 1000);
  var total = Math.round(event.target.duration * 1000);

  if ( ( total - current ) < 20000 ) {
    $(this).fadeOut(2000).next().fadeIn(2000).get(0).play();
  } 
});

助けてくれてありがとう、私はあなたの素晴らしいコメントを使って答えをまとめることができました、そしてこの他の一見無関係なSO投稿：

キャッチされていない TypeError: オブジェクト [オブジェクト オブジェクト] にメソッド 'addEventlistner' がありません

誰かがこれをまとめるためのよりクリーンな方法を持っているなら、それは素晴らしいことですが、これは私の目的にはかなりうまく機能しているようです.

4

2 に答える 2

1

私が与えた最初の答えにはいくつかの問題がありました。正しいように修正しました

var myVid = document.getElementById("video1");

myVid.addEventListener('timeupdate', function() {
    if( (myVid.duration - myVid.currentTime ) < 20000 ) {
        console.log("less than 20 seconds left"); 
    }
});

これには、ビデオ タグに id を指定する必要があり、console.log は関数内で実行したいものに置き換える必要があります。ただし、これをテストしたところ、うまく機能します。

あなたの場合、ループを実行してイベントを各ビデオにバインドする必要がありますが、長さやアイテムなどのプロパティではなく、実際のビデオを参照していることを確認してください。

このコードをコピーして<script>、この例の「試してみる」セクションのタグに貼り付けると、機能します。

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_event_progress

ビデオ オブジェクトのプロパティとイベントのリファレンスは次のとおりです。

http://www.w3schools.com/tags/ref_av_dom.asp

于 2013-02-01T19:28:03.370 に答える
0

次のいずれかを使用できます。

$('video').currentTime;
$('video').duration;

コードは書きませんが、確認してください。

if ( ( this.duration - this.currentTime ) < 20000 )

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/をチェックしてください。

于 2013-02-01T19:14:10.487 に答える