2010-01-17 11 views
16

Từ những gì tôi đã đọc, đây là cách tôi nên thiết lập YouTube API:API YouTube - không bắn '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> 

Tuy nhiên, 'onYouTubePlayerReady()' không cháy ở tất cả các , và nếu tôi tự nhận được một tham chiếu đến người chơi, rất nhiều phương pháp không xác định; ví dụ, cueVideoById() hoạt động, nhưng playVideo() thì không.

Làm cách nào để khắc phục sự cố này?

+0

này có lẽ không phải nó, nhưng bạn có thể thử đưa ra các tài liệu một DOCTYPE HTML 4 thay cho HTML 5 một? Chỉ để loại trừ khả năng đó. –

+3

Và bạn có đang trên một máy chủ web với điều này, như đã nêu trong tài liệu không? http://code.google.com/apis/youtube/js_api_reference.html –

+0

@Pekka: Không, tôi đã không nhận thấy rằng trên trang tài liệu API. Tôi nghĩ tôi cần đọc nhiều thứ hơn trong tương lai. Cảm ơn :) –

Trả lời

29

Bạn cần phải là trên một máy chủ web với kịch bản thử nghiệm của bạn, như đã nêu trong documentation:

Lưu ý: Để kiểm tra bất kỳ các cuộc gọi, bạn phải có tập tin của bạn đang chạy trên một máy chủ web, như Trình phát Flash hạn chế các cuộc gọi giữa các tệp cục bộ và Internet.

1
<!DOCTYPE html> 

phải dẫn trang để cho những thứ html5 thực hiện chức năng đối với tôi trong FF4

4

tôi có câu trả lời, tách ra khỏi phần này của kịch bản và đặt nó vào đầu trong của nó thẻ tập lệnh riêng. OMG, cuối cùng là

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

OMG cảm ơn rất nhiều! – Stpn

0

Chỉ có cùng một vấn đề, nhưng vì một lý do khác. Nó hoạt động trong Chrome chứ không phải Firefox, và lý do là tôi có tiêu đề http "Content-type: text/xml" thay vì "Content-type: text/html". Việc phân phối dưới dạng HTML hiện đang kích hoạt sự kiện trênYouTubePlayerReady trong Firefox.

Chỉ cần đăng điều này trong trường hợp ai đó tình cờ gặp câu trả lời này từ Google (như tôi vừa làm khi cố gắng tìm giải pháp).

4

Tôi xem đây là cách tốt nhất để thêm video youtube vào trang web của bạn bằng javascript. Nó cung cấp cho bạn một cách rất rõ ràng để đối phó với các sự kiện. Nó hoạt động trên một máy tính địa phương, và theo như tôi biết nó hoạt động trên các thiết bị táo. Bạn có thể sử dụng tất cả các sự kiện và chức năng được mô tả trong tài liệu javascript cho api youtube.

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

nguồn: http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

5

chức năng này:

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

không phải là trực tiếp trong đầu trong thẻ script riêng biệt.

Chỉ quy tắc bạn phải giữ là: không đặt hàm này bên trong sự kiện domready - nó phải được xác định sớm hơn.

Ví dụ trong mootools tôi sử dụng nó như thế này:

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

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

Câu trả lời này là tốt nhất cho tôi – Macumbaomuerte

1

Nếu bạn nhúng video youtube như vậy:

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

thì bạn nên đặt

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

sau số </iframe >. Ít nhất đó là cách tôi làm cho nó hoạt động.

Ngoài ra, nếu bạn đang thay đổi động thuộc tính [src] của iframe qua jQuery hoặc bất kỳ thứ gì để tải video mới thì bạn cần gọi onYouTubePlayerAPIReady() sau khi đã tải.

tôi thích thay đổi [src] thuộc tính và sau đó: setTimeout(onYouTubePlayerAPIReady, 500);