youtube iframe events

2020-03-25 06:44发布

I try to catch the events of a youtube iframe: http://lab.joergpfeiffer.de/videofull/youtube.php

So I call first the api

<script type='text/javascript' src='http://www.youtube.com/player_api'></script>

I set the iframe

<iframe id="ytfullplayer" type="text/html" width="640" height="390" src="http://www.youtube.com/p/B93C3D017CB2D65A?enablejsapi=1&origin=lab.domain.de" frameborder="0" ></iframe>

and try to set the events later in

var ytfullplayer;
    function onYouTubePlayerAPIReady() {
        console.log('onYouTubePlayerAPIReady');
        ytfullplayer = new YT.Player('ytfullplayer', {
            events: {
              'onReady': testfunc,
              'onPlaybackQualityChange': testfunc,
              'onStateChange': testfunc,
              'onError': testfunc
            }
        });

    }
    function testfunc(){ alert('hello'); }

Whatever I do, there are no events fired. And I read the iframe api 10 times. it should work actually.

Any idea?

4条回答
放荡不羁爱自由
2楼-- · 2020-03-25 06:51

I did the following.

Started with the example code found at https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

I then replaced:

<div id="player"></div>

with

<iframe id="player" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&origin=http://example.com"
  frameborder="0">
</iframe>

(iframe markup found at the same URL)

Then I got rid of the origin parameter in the above - that seemed to make things work. BTW, I found that step 2 can be replaced by markup:

<script src="https://www.youtube.com/iframe_api"></script>
查看更多
手持菜刀,她持情操
3楼-- · 2020-03-25 07:03

Execute these routines before onYouTubePlayerAPIReady()

// This code loads the IFrame Player API code 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);

if stil have confusion then visit http://code.google.com/apis/youtube/iframe_api_reference.html

查看更多
聊天终结者
4楼-- · 2020-03-25 07:07

Adeel's answer should fix your problem.

Google recommend you load the player API script asynchronously, ie, letting the rest of your page load while the script is simultaneously loading.

Because you're placing the script tag in your markup early on, the rest of the page isn't executed until that script has been loaded. So when the call is made to onYouTubePlayerAPIReady(), your function hasn't yet been defined.

查看更多
霸刀☆藐视天下
5楼-- · 2020-03-25 07:08

I have the same problem. It seems to relate to putting the iframe in manually instead of using the div tag substitution. If I use the div method it works fine, manual iframe, no.

Async load of the API script, or including it in the head manually didn't make any difference.

I have just gone with the div substitution for now, and stopped fighting it.

查看更多
登录 后发表回答