2012-05-27 9 views
20

私はイメージをクリックした後にyoutubeビデオを再生する簡単なhtmlコードを持っています。youtube video finishedイベント

<body> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<div id="ytapiplayer2" style="display:none;"> 
<object width="1280" height="745"> 
<param name="movie" value="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1"></param> 
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param> 
<embed src="http://www.youtube.com/v/kCfP003Btjw?fs=1&hl=en_US&rel=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="745"></embed> 
</object> 

</div> 


<img src="https://i.qmyimage.com/mgen/global/zGetImageNew.ms?args=%22shpimg4198.jpg%22,425,96,1" id="imageID" /> 
<script type="text/javascript"> 
$('#imageID').click(function() { 
$('#ytapiplayer2').show(); 
$('#imageID').hide(); 
}); 
</script> 
</body> 

動画の再生が終了した後、動画を非表示にして画像を表示する必要があります。どのように実装することが可能ですか?

答えて

30

YouTubeのは、JavaScriptのAPIを持っている:あなたが必要なものhttps://developers.google.com/youtube/js_api_reference

が終了したときに0を与えるonStateChangeイベントです。

player.addEventListener("onStateChange", function(state){ 
    if(state === 0){ 
     // the video is end, do something here. 
    } 
}); 
+0

HM、私は私のコード、player.addEventListener( "にOnStateChange" 機能(状態){;} 場合(状態=== 0){ アラート( '末端')})に加え; しかし、イベントは発生しません! – ihorko

+1

おそらく、動画を埋め込む方法を変更する必要があります。ここの例:https://developers.google.com/youtube/js_api_reference#Examplesを参照してください。 – wong2

+2

状態はオブジェクトです。あなたはstate.data === 0(iframe urlで&enablejsapi = 1&version = 3を使用しました)を確認する必要があります –

関連する問題