2012-03-20 12 views
7

मैं एक कंपनी की वेबसाइट पर यूट्यूब वीडियो जोड़ रहा हूं और उन्हें गैर-फ्लैश डिवाइस पर प्रदर्शित करना चाहता हूं। मैं यूट्यूब आईफ्रेम एपीआई के साथ खेल रहा हूं और उपयोगकर्ता को आईफ्रेम में वीडियो बदलने के लिंक पर क्लिक करने के लिए उनके उदाहरणों में से एक अपडेट किया है। संपादित कोड है:यूट्यूब iframe api loadVideoById() त्रुटि

<!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> 

केवल एक चीज मैं जोड़ा था:

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

यह सफारी, क्रोम और फ़ायरफ़ॉक्स में ठीक काम करता है लेकिन IE7, 8 या 9 में काम नहीं करता IE7 और 8 में यह एक त्रुटि देता है "ऑब्जेक्ट इस संपत्ति या विधि का समर्थन नहीं करता है"।

क्या यह एपीआई के साथ कोई समस्या है या क्या मैं कुछ गलत कर रहा हूं?

उत्तर

5

मैं एक ऐसी ही समस्या थी, और यह पता चला कि आप (loadVideoById सहित) YT.Player वस्तु पर किसी भी विधि का नहीं बुलाना चाहिए जब तक onPlayerReady बुलाया नहीं गया है।

चेक करना if(player) {...} पर्याप्त नहीं है, Player ऑब्जेक्ट बनाया जाएगा और कुछ गुण पहले से उपलब्ध विधियों के बिना उपलब्ध होंगे।

+4

इसे हल किया गया। '... घटनाओं: {'onReady': फ़ंक्शन() {...}' – Xeoncross

3

आपको ऑन प्लेयर रीडी ईवेंट से लोड वीडियो फ़ंक्शन को कॉल करने की आवश्यकता होगी।

उदाहरण के लिए, यदि आप जब क्लिक करने थम्बनेल ऐसा करने के लिए एक वीडियो लोड करना चाहते हैं (यह 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

अरे, मुझे एक ही समस्या का सामना करना पड़ रहा था। मुझे यकीन है कि लोडवेडियो() को कॉल करने से पहले प्लेयररडी को कॉल किया गया है। मैं ऑनप्लेयर रीडी फ़ंक्शन में लोडविडियो को कॉल नहीं कर रहा हूं। मैं इसे प्ले प्लेयरस्टेट चेंज फ़ंक्शन में कॉल कर रहा हूं। क्या समस्या हो सकती है? –

0

return false के साथ क्लिक प्रचार को रोकने के बाद player.loadVideoById पर क्लिक करने के बाद मेरे क्लिक ईवेंट हैंडलर ने मेरे लिए चाल बनाई।

संबंधित मुद्दे