2012-03-20 42 views
7

Tôi đang thêm video youtube vào trang web của công ty và muốn chúng hiển thị trên thiết bị không flash. Tôi đã chơi với API iframe của youtube và đã cập nhật một trong các ví dụ của họ để cho phép người dùng nhấp vào liên kết để thay đổi video trong iframe. Mã sửa là:youtube iframe api loadVideoById() lỗi

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

Điều duy nhất tôi nói thêm là:

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

này hoạt động tốt trong Safari, Chrome và Firefox nhưng không hoạt động trong IE7, 8 hoặc 9. Trong IE7 và 8 nó trả về lỗi "Đối tượng không hỗ trợ thuộc tính hoặc phương thức này".

Đây có phải là vấn đề với API hoặc tôi đang làm điều gì sai?

Trả lời

5

Tôi gặp vấn đề tương tự, và hóa ra là bạn không nên gọi bất kỳ phương thức nào trên đối tượng YT.Player (bao gồm loadVideoById) miễn là onPlayerReady chưa được gọi.

Thực hiện kiểm tra if(player) {...} không đủ, đối tượng Player sẽ được tạo và một số thuộc tính sẽ khả dụng mà không cần phương thức bạn cần.

+4

Giải quyết. '... sự kiện: {'onReady': function() {...}' – Xeoncross

3

Bạn sẽ cần gọi hàm tải video từ sự kiện onPlayerReady.

Ví dụ, nếu bạn muốn tải một đoạn video khi nhấp chuột vào một hình ảnh thu nhỏ làm điều này (điều này sẽ đòi hỏi jquery nhưng nó nên được những điểm trên):

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; 
    }); 
} 

Bằng cách này bạn có thể chắc chắn các cầu thủ là nạp vào.

+0

Hey, tôi đang đối mặt với cùng một vấn đề. Tôi chắc chắn rằng onPlayerReady đã được gọi trước khi tôi gọi loadVideo(). Tuy nhiên, tôi không gọi hàm loadVideo trong hàm onPlayerReady. Tôi đang gọi nó trong hàm onPlayerStateChange. Những gì có thể là vấn đề? –

0

Ngăn chặn tuyên truyền nhấp chuột với return false sau khi gọi tới số player.loadVideoById trong trình xử lý sự kiện nhấp chuột của tôi đã thực hiện thủ thuật cho tôi.

Các vấn đề liên quan