2010-01-17 6 views
16

Из того, что я читал, это, как я должен настроить YouTube API:YouTube API - не стрелять 'onYouTubePlayerReady()'

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta content='text/html;charset=UTF-8' http-equiv='content-type' /> 
    <title>Youtube Player</title> 
    <script src="jquery.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script> 
    <script type="text/javascript" charset="utf-8"> 
     function onYouTubePlayerReady(id) { 
     console.log("onYouTubePlayerReady() Fired!"); 
     var player = $("#youtube_player").get(0); 
     } 

     var params = { allowScriptAccess: "always" }; 
     var atts = { id: "youtube_player" }; 
     swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1", 
         "youtube", "425", "356", "8", null, null, params, atts); 

    </script> 
    </head> 
    <body> 
    <div id="youtube"></div> 
    </body> 
</html> 

Однако 'onYouTubePlayerReady() не срабатывает вовсе , и если я вручную получаю ссылку на игрока, многие методы не определены; например, cueVideoById() работает, но playVideo() этого не делает.

Как исправить эту проблему?

+0

Это, вероятно, не так, но вы можете попробовать давая документ в HTML 4 доктайп вместо HTML 5 один? Просто чтобы исключить эту возможность. –

+3

И вы на веб-сервере с этим, как указано в документах? http://code.google.com/apis/youtube/js_api_reference.html –

+0

@Pekka: Нет, я не был, просто заметил, что на странице документов API. Думаю, мне нужно больше читать в будущем. Спасибо :) –

ответ

29

Вы должны быть на веб-сервере с вашим тестовым скриптом, как указано в documentation:

Примечание: Для того, чтобы протестировать любой из этих вызовов, вы должны иметь свой файл, запущенный на веб-сервере, так как Flash Player ограничивает вызовы между локальными файлами и Интернетом.

1
<!DOCTYPE html> 

пришлось вести страницу для того, чтобы html5 вещи работать для меня в FF4

4

У меня есть ответ, выделить эту часть сценария и поместить его в голову в его собственный тег скрипта. OMG, наконец

<script type="text/javascript" language="javascript"> 
function onYouTubePlayerReady(playerid) { 
    ytp = document.getElementById('ytplayer'); 
    ytp.mute(); 
}; 
</script> 
+0

OMG благодарит много! – Stpn

0

Просто была та же проблема, но по другой причине. Он работал в Chrome, но не в Firefox, и причина в том, что у меня был заголовок http «Content-type: text/xml» вместо «Content-type: text/html». Теперь, работая с HTML, запускается событие onYouTubePlayerReady в Firefox.

Просто опубликуйте это, если кто-то наткнется на этот ответ от Google (например, я просто пытался найти решение).

4

Я считаю это лучшим способом добавить видео на YouTube с помощью javascript. Это дает вам очень четкий способ борьбы с событиями. Он работает на локальной машине, и насколько я знаю, он работает на яблочных устройствах. Вы можете использовать все события и функции, описанные в документации javascript для youtube api.

<div id="player"></div> 
<script> 
//Load player api asynchronously. 
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(); 
} 
</script> 

Источник: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

5

эта функция:

function onYouTubePlayerReady(playerid) { 
    console.log('readyIn'); 
}; 

не должны быть непосредственно в голове в отдельном тэгом.

Только правило, которое вы должны соблюдать: не помещайте эту функцию внутри события domready - ее нужно определить раньше.

Например, в MooTools Я использую это так:

function onYouTubePlayerReady(playerid) { 
    echo('readyIn'); 
}; 

document.addEvent('domready', function() { 
    ... 
}); 
+0

Этот ответ лучший для меня – Macumbaomuerte

1

Если вы встраивание YouTube видео, как так:

<iframe src="http://www.youtube.com/embed/VIDEO_ID?jsapi=1" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 

, то вы должны поместить

<script src="http://www.youtube.com/player_api"></script> 

после </iframe >. По крайней мере, так я получил его на работу.

Кроме того, если вы динамически меняете атрибут [src] iframe через jQuery или что-то другое, чтобы загрузить новое видео, вам необходимо позвонить onYouTubePlayerAPIReady() после его загрузки.

Я предпочитаю, чтобы изменить [SRC] атрибут, а затем: setTimeout(onYouTubePlayerAPIReady, 500);

 Смежные вопросы

  • Нет связанных вопросов^_^