问题
I have been troubleshooting and searching for an answer to this for hours, to no avail. Sample code from the API documentation is being used verbatim. Sample code that others post and say works on IE9 doesn't for me. I've already confirmed the doctype is properly set in the html, I'm NOT hiding the iframe using display=none in the CSS, and the browser mode is IE9 and document mode is IE9 standards. My security settings are configured to medium high. Even google's sample page does not work for me in my IE9 browser.
https://developers.google.com/youtube/youtube_player_demo
When I click "play" to try to make the movie play (in the above link), I get all kinds of errors in the script debugging console for IE. First error looks like this:
SCRIPT5009: 'video' is undefined
Please help! My sample code is below. The movie loads and I see the "API is ready" alert but none of the other events will fire in IE9. I just don't know what I am missing! If I don't figure this out soon I'm going to have to abandon the use of YouTube for html5 video playback in my project.
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script type="text/javascript">
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
// This is a protocol-relative URL as described here:
// http://paulirish.com/2010/the-protocol-relative-url/
// If you're testing a local page accessed via a file:/// URL, please set tag.src to
// "https://www.youtube.com/iframe_api" instead.
//tag.src = "//www.youtube.com/iframe_api";
tag.src = "https://www.youtube.com/iframe_api";
//tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
alert("API is ready!");
player = new YT.Player('player', {
height: '450',
width: '800',
videoId: 'mU7aJgvh9K8',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
alert("Player is ready!");
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
alert("State changed!");
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
回答1:
Well, after testing on a colleague's machine and realizing the problem was specific to IE on MY system, I started looking at the browser settings again. On a whim I disabled my Flash player (under Internet Options, Programs, Manage Add-Ons) and viola, the video code worked like a charm. I also noticed my Flash player was outdated (9.0.45.0) and after installing the latest version of the player it still worked.
No idea why the old Flash player was interfering with the YouTube API and events - but apparently that was the culprit.
来源：https://stackoverflow.com/questions/15230279/youtube-iframe-api-onready-and-onstatechanged-events-not-firing-in-ie9