Reputation: 3199
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
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
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
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
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