【问题标题】:YouTube iframe API - onReady and onStateChanged events not firing in IE9YouTube iframe API - onReady 和 onStateChanged 事件未在 IE9 中触发
【发布时间】:2013-02-20 05:40:31
【问题描述】:

我已经解决了几个小时并寻找答案,但无济于事。正在逐字使用 API 文档中的示例代码。其他人发布并说适用于 IE9 的示例代码不适合我。我已经确认在 html 中正确设置了 doctype,我没有在 CSS 中使用 display=none 隐藏 iframe,浏览器模式是 IE9,文档模式是 IE9 标准。我的安全设置配置为中高。在我的 IE9 浏览器中,即使是 google 的示例页面也不适合我。

https://developers.google.com/youtube/youtube_player_demo

当我单击“播放”尝试播放电影时(在上面的链接中),我在 IE 的脚本调试控制台中收到各种错误。第一个错误如下所示:

SCRIPT5009:“视频”未定义

请帮忙!我的示例代码如下。电影加载,我看到“API 准备就绪”警报,但在 IE9 中不会触发任何其他事件。我只是不知道我错过了什么!如果我不能很快解决这个问题,我将不得不放弃在我的项目中使用 YouTube 播放 html5 视频。

<!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>

【问题讨论】:

    标签: api events iframe youtube internet-explorer-9


    【解决方案1】:

    好吧,在同事的机器上进行测试并意识到问题是特定于我系统上的 IE 后,我开始再次查看浏览器设置。一时兴起,我禁用了我的 Flash 播放器(在 Internet 选项、程序、管理加载项下)和中提琴,视频代码就像一个魅力。我还注意到我的 Flash 播放器已经过时(9.0.45.0),安装最新版本的播放器后它仍然可以工作。

    不知道为什么旧的 Flash 播放器会干扰 YouTube API 和事件 - 但显然这是罪魁祸首。

    【讨论】:

    • 我没有足够的声誉来投票或发表评论,但我想说声谢谢,因为这解决了我一整天的头痛!如果我找到让他们一起工作的方法,我会回复。编辑:如果它对其他人有帮助;我们通过使用定位来显示和隐藏 youtube 容器而不是使用“显示:无”或“可见性:隐藏”来解决此问题。
    • 甚至不使用visibility:hidden 代替display:none 的部分是我的可取之处。谢谢。
    猜你喜欢
    • 2015-01-28
    • 1970-01-01
    • 2014-04-09
    • 2011-12-07
    • 1970-01-01
    • 1970-01-01
    • 2016-07-28
    • 2016-04-08
    • 2021-01-03
    相关资源
    最近更新 更多