Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
613 views
in Technique[技术] by (71.8m points)

youtube api - onYouTubeIframeAPIReady called once but multiple videos needed on a page

I am using a server-side method to drop in YouTube videos with playlists and functioning buttons (think of a website widget that can be called anyway on a page, and potentially more than once on the page).

I am using the IFrame API. I can get a single video to render by creating a new instance of YT.Player inside the onYouTubeIframeAPIReady() method. This makes sense to me - waiting for the library to be loaded. However when I want to have more than one video players on a page I don't know how to trigger the launch of the second, third, forth, etc.

I can't define another onYouTubeIframeAPIReady() method because it will overwrite the first. How is it possible to add more players to the page? It seems strange that there isn't a way to create more videos after this initial method has fired...

Documention on the above method is here: https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Thanks in advance.

Edit: (for clarification following the first answer from Miha Lampret)

I can't declare additional players inside the onYouTubeIframeAPIReady() method because this code is introduced via a server side called e.g. a "widget". So rather than:

function onYouTubeIframeAPIReady() {
    ytplayer1 = new YT.Player('player-youtube-1', {
        width: '640',
        height: '480',
        videoId: 'M7lc1UVf-VE'
    });

    ytplayer2 = new YT.Player('player-youtube-2', {
        width: '640',
        height: '480',
        videoId: 'smEqnnklfYs'
    });
}

my code would equivalent to:

function onYouTubeIframeAPIReady() {
    ytplayer1 = new YT.Player('player-youtube-1', {
        width: '640',
        height: '480',
        videoId: 'M7lc1UVf-VE'
    });
}
function onYouTubeIframeAPIReady() {
    ytplayer2 = new YT.Player('player-youtube-2', {
        width: '640',
        height: '480',
        videoId: 'smEqnnklfYs'
    });
}

The onYouTubeIframeAPIReady() is only executed once. What I need to check is the whether is has already been executed once.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

onYouTubeIframeAPIReady() is executed after YouTube API is ready to be used, that is after API's Javascript file http://www.youtube.com/iframe_api is loaded.

You can create more players inside onYouTubeIframeAPIReady()

var ytplayer1 = undef;
var ytplayer2 = undef;

function onYouTubeIframeAPIReady() {
    ytplayer1 = new YT.Player('player-youtube-1', {
        width: '640',
        height: '480',
        videoId: 'M7lc1UVf-VE'
    });

    ytplayer2 = new YT.Player('player-youtube-2', {
        width: '640',
        height: '480',
        videoId: 'smEqnnklfYs'
    });
}

Note that you need to declare ytplayer1 and ytplayer2 outside of onYouTubeIframeAPIReady() so you can use them later:

ytplayer1.pauseVideo();
ytplayer2.playVideo();

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...