【问题标题】:youtube api does not fire ENDED event when video ends (using iframe)视频结束时,youtube api 不会触发 ENDED 事件(使用 iframe)
【发布时间】:2012-12-05 14:42:14
【问题描述】:

我正在尝试捕捉一个事件,以便当 youtube 播放器结束时,我可以重定向到另一个网页。但它不起作用。任何人都可以发现任何问题吗? javascript 似乎确实可以编译。

这是整个页面的代码(我实际上是从下面浏览器的查看源页面粘贴的。
它相当简单,事件列在 onYouTubePlayerAPIReady() 函数中,我认为它应该在代码结束时触发。我已经设置了“警报”,看看是否有。好像没有:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">  
        $(document).ready(function () {
            var tag = document.createElement('script');
            tag.src = "http://www.youtube.com/player_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.
     function onYouTubePlayerAPIReady() {
         player = new YT.Player('iframeid', {
             events: {   
                 'onReady': onPlayerReady,          
                 'onStateChange': onPlayerStateChange
             }
         });
     }

     function onPlayerReady(event) {

     }
     function onPlayerStateChange(event) {

         if (event.data == YT.PlayerState.ENDED) {
             alert("video is over");
             location.href= 'k_Origins.aspx';
         }
         else if (event.data == YT.PlayerState.PAUSED) {

         }
         else if (event.data == YT.PlayerState.PLAYING) {

         }
         else if (event.data == YT.PlayerState.BUFFERING) {

         }
         else if (event.data == YT.PlayerState.CUED) {

         }
         else {

         }

     }

</script>

</head>
<body>
    <form method="post" action="dostuff.aspx" id="form1">

<div id="ContainPlayer">

    <iframe id="iframeid" width="420" height="315"
    src="http://www.youtube.com/embed/8X0ZkN_EtTE?hl=en&fs=1&autoplay=1&autohide=0&enablejsapi=1&modestbranding=1&playerapiid=ourvideoid&rel=0" 
    frameborder="0" ></iframe>
    </div>

    </div>

    </form>
</body>
</html>

【问题讨论】:

    标签: jquery html youtube-api


    【解决方案1】:

    您在上面粘贴的内容中有错字;您在 行:

    $(document).ready(function () {
    

    所以浏览器永远不会解释 javascript。当我获取您的代码并将其添加到其中时,它会按照您的要求运行。

    【讨论】:

    • 错字不是问题。问题是我的 url 有 origin 属性。换句话说,www.youtube.com/...origin=mysite.com。这显然会干扰 youtube api。我应该把它放在我的样本中,但我不想放弃我的网站。它只是告诉你,你必须把所有东西都放进去,不管你认为它是否相关。
    猜你喜欢
    • 1970-01-01
    • 2012-06-02
    • 2017-12-03
    • 1970-01-01
    • 1970-01-01
    • 2015-09-07
    • 2021-01-03
    • 2015-07-09
    • 2013-11-05
    相关资源
    最近更新 更多