ビデオdivの前にimg divがロードされていることを確認してください

Question

ボタンのセットから1つをクリックすると、ビデオが再生されるときに画像がポップアップしてからフェードします。問題はそれが最初のクリックで動作することですが、2番目の場合、画像があるdivはの後に、ビデオがロードされた後にになります。動画が読み込まれる前に表示されるようにするにはどうすればよいですか？スクリプト（簡体字）が遊びに

$('li, .thumbs').on('click', function() { 
    myVideo.load(); 
    myVideo.play(); 
    $('#myVid').bind("loadstart", function() { 
     $('#MyT').fadeIn(0); 
    }); 
    $('#myVid').bind("playing", function() { 
     $('#MyT').fadeOut(500); 
    }); 
});​ 

Answer 1

画像のためのonload関数を使用してみてください。これにより、何かが起こる前に画像が確実にロードされます。

I wrote a blog post, how to do that。ビデオロードやその他の機能は、ブログに記載されているonImgLoad関数の中に置くことができます。これにより、画像が読み込まれ、動画が再生される前に表示されます。

Answer 2

セットタイムアウトです：

$('li, .thumbs').on('click', function() { 
    setTimeout(function(){ 
     myVideo.load(); 
     myVideo.play(); 
    }, 200); // 200 ms, you can custom it as you wish. 

    $('#myVid').bind("loadstart", function() { 
     $('#MyT').fadeIn(0); 
    }); 
    $('#myVid').bind("playing", function() { 
     $('#MyT').fadeOut(500); 
    }); 
});​