YouTube onPlayerStateChange event not firing in Internet Explorer on reloaded page

Question

We have a Facebook Tab application (probably not relevant) that contains a YouTube video.

Everything works fine on the first occasion the page is loaded from an empty cache. On subsequent page loads, however, once the video stops loading, the onStateChange handler simply isn't firing in Internet Explorer.

Everything works fine in Chrome and Firefox, this problem only seems to affect IE and, weirdly, only occurs from a non-empty cache. It looks very similar to gdata-issues #2942, except that issue has Status: Fixed.

The relevant chunks of our code are as follows:

Page

<!DOCTYPE html>

...

<div class="player-surround">
   <div id="ytplayer">
       You need Flash player 9+ and JavaScript enabled to view this video.
   </div>
</div>

...

<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
var atts = { id: "ytplayer" };
// YouTube video ID redacted here
swfobject.embedSWF("http://www.youtube.com/v/XXXXXXXXXXXXXX?enablejsapi=1&playerapiid=ytplayer&version=3",
   "ytplayer", "587", "330", "8", null, null, params, atts);
</script>
<script src="//www.youtube.com/player_api"></script>

Included JavaScript

MFA.onPlayerStateChange = function(evt) {
    var state = this.getPlayerState();
    log('158: STATE CHANGED: ' + state);

    // Then do some stuff, but the `log` call above doesn't fire
}

MFA.getPlayerState = function() {
    var playerState;

    if (this.ytplayer) {
        playerState = this.ytplayer.getPlayerState();
        
        switch (playerState) {
            case 5:  return 'video cued';
            case 3:  return 'buffering';
            case 2:  return 'paused';
            case 1:  return 'playing';
            case 0:  return 'ended';
            case -1: return 'unstarted';
            default: return 'Status uncertain';
        }
    }
};

(Obviously, I've missed a bunch of unrelated code out from this issue.)

Does anyone have any ideas why everything would work fine, unless IE has seen the page before? I could understand if it never worked in IE, but it works ok when the cache is empty, but fails when you reload the page.

All ideas gratefully received.

Edit

Greg Schechter pointed out that my code sample uses the swfobject.embedSWF code, rather than the iframe embed code.

We did originally use the iframe embed code:

var s = {
   playerHeight: '330',
   playerWidth: '587',
   playerVars: { 'rel': 0 },
   videos: {
      stage1: 'XXXXXXXXXXXXXX', // ...
   }
};

window.onYouTubePlayerAPIReady = function() {
   MFA.ytplayer = new YT.Player('ytplayer', {
      height: s.playerHeight,
      width: s.playerWidth,
      videoId: s.videos.stage1,
      playerVars: s.playerVars,
      events: {
         'onReady': $.proxy(MFA.onPlayerReady, MFA),
         'onStateChange': $.proxy(MFA.onPlayerStateChange, MFA),
         'onError': $.proxy(MFA.onPlayerError, MFA)
      }
   });
}

, but this was exhibiting the same problem. The swfobject.embedSWF code was added in subsequently as an attempt to fix the problem, as we have previously seen problems with IE being over-paranoid with API access across domains from iframes.

score 0 · Answer 1 · answered Oct 30 '12 at 20:38

0

Your code sample looks a little off. It looks like you're using swfobject.embedSwf with //www.youtube.com/player_api. The //www.youtube.com/player_api script is only for the iframe embed. If you use the iframe embed it should solve your issue.

Details can be found here. https://developers.google.com/youtube/iframe_api_reference

answered Oct 30 '12 at 20:38

Greg Schechter

2,291
15
16

We were using the iframe embed and that didn't work, which is why we were looking at the `swfobject.embedSWF` code. I'll update the question appropriately. – Owen Blacker Oct 31 '12 at 10:17
As described in the question — in IE, the `onYouTubePlayerAPIReady` event doesn't fire if we use the iframe embed. If we use the SWF Object embed, the `onYouTubePlayerAPIReady` event fires, but the `onStateChange` event doesn't fire (at the end of the video). – Owen Blacker Oct 31 '12 at 17:20

score 0 · Accepted Answer · edited May 23 '17 at 12:24

So I had to put this down and get back to another project, but one of my colleagues has managed to find a solution. The rest of this answer is taken directly from his email to me.

So here’s the long version of how we fixed this (very annoying!) IE issue… It turns out it was a case of changing the way the YouTube Player API gets called in the default.aspx page.

We replaced this:

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

With the following JavaScript in a <script> tag:

 var tag = document.createElement('script');
 tag.src = "//www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

(that’s how it’s specified in the API reference).

Also I noticed that Google specify iframe_api but we were using player_api. That may have compounded the problem, but just changing that didn’t fix it.

The way [our tech director] explained it to me, was that the original way was fine the first time the page loads, as everything is loaded fresh, and the YouTube API has enough time to load before init.js initialises.

But then when you reload the page, init.js was cached and probably loading too quickly, before the API was ready, hence failing when it tried to fire onYouTubePlayerReady. Doing it the above way still starts off init.js, but also starts loading the iframe_api at the same time (by effectively inserting it as the first script tag in the list). It may also be slightly connected to a known issue with IE9 where AJAX calls can create a memory leak, but not sure.

I am seeing the same error (very) intermittently on other browsers, which I imagine is down to fluctuating RTDs between here and whatever data centre the Google API is connecting to. If it’s out of sync by enough for init.js to get there before the API is ready, onYouTubePlayerReady will fail. But then a simple refresh will fix it.

What was interesting is that just putting the YouTube API as the first script tag doesn’t make a difference!

So I guess the lesson is, that when we are dealing with third party APIs, iframes, and Internet Explorer, we need to make sure we use asynchronous loading for all the third party APIs, especially if YouTube and Facebook are both involved.

YouTube onPlayerStateChange event not firing in Internet Explorer on reloaded page

Page

Included JavaScript

Edit

2 Answers2