JustAnotherDeveloper
JustAnotherDeveloper

Reputation: 3199

"Object doesn't support this property or method" in IE 8. Executes fine in debug

I don't know if i'm being stupid and missing something obvious but:

I have a page that has this following script:

$(document).ready(function() {
    $('.fsBtn').click(function(e) {
        $("#fullscreenVideo").show();
        player.stopVideo();
        playerFS.playVideo();
    });
});

In every browser bar IE8 this will load ok. However in IE8 the debugger will come up with: Object doesn't support this property or method Line 144 which is the playerFS.playVideo()

I checked that it has been declared -it has. and the odd thing is, if i go into IE's script debugger and run playerFS.playVideo() it will be accepted by IE.

Why would this script not execute in code, yet allow me to execute it fine in debug?

Here are the steps I've taken so far: - Places the script in a doc ready to ensure that its ok. - Place the script in the page instead of external JS file. - IE Debug mode to run script manually.

Any help would be appreciated, this really does have me stumped. Can provide more info if necessary.

Edit: Player and playerFS are both defined with this:

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '360',
        width: '640',
        videoId: V_ID,
        playerVars: playerParams,
        events: {
            // 'onReady': onPlayerReady,
            // 'onStateChange': onPlayerStateChange
        }
    });
    //exact Same code again but for playerFS instead of player
}

With the parts where it says "player" being "playerFS" in another .

HTML Page and JS for player: http://pastebin.com/ZbBwKg9a

Upvotes: 2

Views: 5327

Answers (4)

SJN
SJN

Reputation: 1

This is caused by the document element tag not set for HTML5. IE 9+ automatically back steps the browser to HTML4 for !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"... etc for IE 9+. HTML5 works on IE 9+ document element tag has to be to !DOCTYPE HTML.

I added the note to stackoverflow.com because MS dev network is clueless why .play does not work on IE 9 for their browser IE 9.

I like HTML5 but using section, nav, header, footer instead of div brings back tons of browser incompatibilities again! Google's html5shiv is not a solution.

Upvotes: 0

Jon Taylor
Jon Taylor

Reputation: 7905

The youtube API struggles to be embedd in a hidden div using the JSAPI.

Try to add in a piece of code that initialises the video before hiding it to ensure that it's been created properly.

Upvotes: 2

gion_13
gion_13

Reputation: 41533

Try executing your code when the player is ready inatead of the dom.
You provided an evemtHandler for the players onReady event, so, all you have to do is wrap all your code into a function called " onPlayerReady" .

Upvotes: 1

Hogan
Hogan

Reputation: 70523

Your code has a whole bunch of stuff that only runs in IE versions less than 9. I would look there for the problem:

    <!--[if IE lt 9]>
    <script>
    if($.browser.msie){

        var params = { allowScriptAccess: "always" };
        var atts = { id: "player" };
        swfobject.embedSWF("http://www.youtube.com/v/_4nFh0CRNgo&enablejsapi=1&playerapiid=ytplayer&version=3&cc_load_policy=1&controls=0&modestbranding=0&rel=0&showinfo=0",
                           "player", "640", "360", "8", null, null, params, atts);
        }

        var paramsfs = { allowScriptAccess: "always" };
        var attsfs = { id: "playerFS" };
swfobject.embedSWF("http://www.youtube.com/v/_4nFh0CRNgo&enablejsapi=1&playerapiid=ytplayerFS&version=3&cc_load_policy=1&controls=0&modestbranding=0&rel=0&showinfo=0",
                       "playerFS", "940", "660", "8", null, null, paramsfs, attsfs);

        legacyCode = true;
        subtitlesFromTranscript = true; 
    </script>
    <![endif]-->

Upvotes: 0

Related Questions