YouTube的iframe的API - onReady和onStateChanged事件IE9不触发 [英] YouTube iframe API - onReady and onStateChanged events not firing in IE9
问题描述
我一直在排除故障和寻找一个答案了几个小时，但没有成功。从API文档样本$ C $ C被逐字使用。示例code，其他人在IE9发布，并说工作不适合我。我已经证实了DOCTYPE在HTML设置正确，我没有隐瞒使用显示器=无在CSS的iframe和浏览器模式是IE9和文档模式是IE9标准。我的安全设置配置为中高。即使谷歌的样本页面不为我在我的IE9浏览器的工作。
https://developers.google.com/youtube/youtube_player_demo
当我点击播放，力图使影片播放（在上面的链接），我得到的各种错误的脚本调试IE浏览器的控制台。第一个错误是这样的：
SCRIPT5009：视频未定义
请帮帮忙！我的示例code如下。电影加载和我看到API准备好警报，但没有任何其他活动将在IE9中闪光。我只是不知道我错过了什么！如果我不知道这一点很快我将不得不放弃在我的项目对HTML5视频播放使用的YouTube。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;＆LT;标题＆GT;＆LT; /标题＆GT;＆LT; /头＆GT;
＆LT;身体GT;
＆所述;！ - 1的＆lt; iframe的＆GT; （和视频播放器）将取代该＆lt; DIV＆GT;标签。 - ＆GT;
＆LT; DIV ID =玩家＆GT;＆LT; / DIV＆GT; ＆LT;脚本类型=文/ JavaScript的＆GT;
// 2.本code加载的iFrame播放器API code异步。
var标记=使用document.createElement（'脚本'）; //这是这里所描述的协议相对网址：
// http://paulirish.com/2010/the-protocol-relative-url/
//如果你正在测试通过文件访问的本地页：/// URL，请设置为tag.src
//https://www.youtube.com/iframe_api代替。
//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（'脚本'）[0];
firstScriptTag.parentNode.insertBefore（标签，firstScriptTag）; // 3.本函数创建一个＆LT; IFRAME＆GT; （和YouTube播放器）
// API的code下载后。
VAR的球员;
功能onYouTubeIframeAPIReady（）{
警报（API是准备好了！）;
玩家=新YT.Player（'球员'，{
高度：'450'，
宽度：'800'，
VIDEOID：mU7aJgvh9K8'，
事件：{
'onReady'：onPlayerReady，
onStateChange'：onPlayerStateChange
}
}）;
} 当视频播放器准备就绪// 4. API会调用这个函数。
功能onPlayerReady（事件）{
event.target.playVideo（）;
警报（玩家准备好了！）;
} // 5. API调用此函数，当球员的状态变化。
//该函数表明播放视频（州= 1）时，
//玩家应该发挥六秒钟，然后停止。
VAR做= FALSE;
功能onPlayerStateChange（事件）{
警报（国家改变了！）;
如果（Event.data中== YT.PlayerState.PLAYING＆放大器;＆安培;！完成）{
的setTimeout（stopVideo，6000）;
做= TRUE;
}
}
功能stopVideo（）{
player.stopVideo（）;
}
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
好了，同事的机器上测试，实现后的问题是具体到IE我的系统上，我开始在浏览器设置再次寻找。心血来潮我停用了Flash播放器（在Internet选项，程序，管理加载项）和中提琴，视频code工作就像一个魅力。我也注意到我的Flash播放器已经过时（9.0.45.0），并安装最新版本的它仍然工作的球员了。
不知道为什么老Flash播放器与YouTube的API和事件的干扰 - 但显然这是罪魁祸首。
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>
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.
这篇关于YouTube的iframe的API - onReady和onStateChanged事件IE9不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
