2012-03-20 27 views
7

私は会社のウェブサイトにYouTubeビデオを追加していて、非フラッシュデバイスで表示したいと考えています。私はYouTubeのiframe APIを使って遊んでいて、ユーザーがリンクをクリックしてiframe内の動画を変更できるようにその例を更新しました。編集したコードは次のとおりです。youtube iframe api loadVideoById()エラー

function loadVideo(videoID) { 
    if(player) { player.loadVideoById(videoID); } 
} 

これは、サファリ、ChromeとFirefoxで正常に動作しますが、IE7と8ではIE7、8または9で動作しません:私は追加

<!DOCTYPE HTML> 
<html> 
<body> 
<div id="player"></div> 
<script> 
var tag = document.createElement('script'); 
tag.src = "http://www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var done = false; 
var player; 
function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'JW5meKfy3fY', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
} 
function onPlayerReady(evt) { 
    evt.target.playVideo(); 
} 
function onPlayerStateChange(evt) { 
    if (evt.data == YT.PlayerState.PLAYING && !done) { 
     setTimeout(stopVideo, 6000); 
     done = true; 
    } 
} 
function stopVideo() { 
    player.stopVideo(); 
} 

function loadVideo(videoID) { 
    if(player) { player.loadVideoById(videoID); } 
} 

</script> 

<a href="javascript:loadVideo('kGIjetX6TBk');">Click me to change video</a> 

</body> 
</html> 

唯一のものでした「オブジェクトはこのプロパティまたはメソッドをサポートしていません」というエラーを返します。

これはAPIの問題ですか?何か問題がありますか?

答えて

5

同様の問題があり、onPlayerReadyが呼び出されていない限り、YT.Playerオブジェクト(loadVideoByIdを含む)のメソッドを呼び出さないでください。

チェックを行うと、Playerオブジェクトが作成され、利用可能なメソッドがなくても一部のプロパティが既に利用可能になります。

+4

解決しました。 '... events:{'onReady':function(){...}' – Xeoncross

3

load video関数をonPlayerReadyイベントから呼び出す必要があります。あなたはサムネイルがこれを行うをクリックしたときにビデオをロードする場合

例えば、(これはjqueryのを必要とするが、それは全体のポイントを取得する必要があります):

function onPlayerReady(evt) { 

    evt.target.playVideo(); 

    //declare the click even function you want 
    $('#thumbs a).click(function(){ 

    //get a data-video-id attr from the <a data-video-id="XXXXXX"> 
    var myvideo = $(this).attr('data-video-id'); 

    //call your custom function 
    loadVideo(myvideo); 

    //prevent click propagation 
    return false; 
    }); 
} 

あなたはプレイヤーがあることを確認することができます。この道をロードされる。

+0

ねえ、私は同じ問題に直面していました。私はloadVideo()を呼び出す前にonPlayerReadyが呼び出されていると確信しています。私はonPlayerReady関数でloadVideoを呼び出すのではありません。私はonPlayerStateChange関数で呼び出しています。何が問題なの? –

0

クリックイベントのハンドラーでplayer.loadVideoByIdを呼び出した後、クリックの伝播をreturn falseで防止すると、私のトリックが起こりました。

関連する問題