刷新 iframe 后 OnStateChange 不起作用答案

【问题标题】：OnStateChange not working after refresh of iframe刷新 iframe 后 OnStateChange 不起作用
【发布时间】：2014-08-23 00:47:35
【问题描述】：

我有一个 iframe，可以在开始和结束时间之间播放视频。当到达结束时间（case 0）时，我想加载几乎相同的 URL（不同于 autoplay=0）。

问题是 OnStateChange 在 iframe 的第一次刷新后似乎没有注册任何更改，因此它不会在第二次查看后重新加载并从第三次开始播放视频。到达结束时间时，我该怎么做才能保持视频重新加载？

另外，我查看了this question here on Stack Overflow，但不幸的是，我无法从中做出任何事情——尽管解决方案可能在那里？

（也许这似乎是一件奇怪的事情，但目前这是我需要的解决方案。）

另外——一个有点不相关的问题；我在重命名 id="player" ytplayer 时遇到了一些麻烦。不应该改吗？

<html>
<head>
<script type="text/javascript" src="http://www.youtube.com/player_api"> </script>
<script>
var player;
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        events: {
            'onStateChange': function (event) {
                switch (event.data) {
                    case -1:
                        console.log ('unstarted');
                        break;
                    case 0:
                        console.log ('ended');
                        var iframe = document.getElementById('player');
                            //autoplay=0
                            iframe.src = "http://www.youtube.com/embed/TINASKjjNfw?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=0"
                        console.log ('player reloaded');                        
                        break;
                    case 1:
                        console.log ('playing');
                        break;
                    case 2:
                        console.log ('paused');
                        break;
                    case 3:
                        console.log ('buffering');
                        break;
                    case 5:
                        console.log ('video cued');
                        break;
                }
            }
        }
    });
}
</script>
</head>
<body>

    <iframe class="video-frame" id="player" width="560" height="315" 
    src="http://www.youtube.com/embed/TINASKjjNfw?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=1"
    frameborder="0"></iframe>
</body>
</html>

更新 – 我也尝试了下面的代码，如from here，但没有更好的运气。

<script>
function floaded1() {

player1 = new YT.Player('player1', {
        events: {
            'onStateChange': function (event) {
if (event.data == 0) {
                        var iframe = document.getElementById('player1');
                            iframe.src = "http://www.youtube.com/embed/TINASKjjNfw?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=0" //autoplay=0
};
            }
        }
    });
}    </script>

    </head>
<body>

<iframe onload="floaded1()" id="player1" width="240" height="220" 
src="http://www.youtube.com/embed/0Bmhjf0rKe8
?enablejsapi=1&rel=0&showinfo=2&iv_load_policy=3&modestbranding=1&start=10&end=15&rel=0&autoplay=1" 
frameborder="0" allowfullscreen> </iframe>

【问题讨论】：

标签： javascript iframe youtube youtube-api

【解决方案1】：

我想出了一个可行的解决方案，如果有人需要类似的东西，我会发布解决方案。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://www.youtube.com/player_api"> </script>
</head>
<body>
<script>
function onEndReload() {
    ytplayer = new YT.Player('ytplayer', {
        events: {
            'onStateChange': function (event) {
                if (event.data == 0) {
                        var iframe = document.getElementById('ytplayer');
                            //use iframe.src = iframe.src if you want to reload the url in the iframe, if not – se below;
                            iframe.src = "http://www.youtube.com/embed/M7lc1UVf-VE?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=0"
                            onEndReload();
                            console.log ('player reloaded'); 
                };
            }
        }
    });
}
</script>
<iframe onload="onEndReload()" id="ytplayer" name="ytplayeriframe" width="560" height="315" src="http://www.youtube.com/embed/M7lc1UVf-VE?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>

【讨论】：