刷新iframe后，OnStateChange不工作

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

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

同样，我在Stack Overflow上看过这个问题，但是我不能从中做出任何不幸的事情-尽管解决方案可能在那里?

(也许这看起来像一个奇怪的事情，但目前这是我需要的解决方案。)

Also -一个有点不相关的问题;我有一些麻烦重命名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>

更新 -我也尝试了下面的代码，从这里开始，但没有更好的运气。

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

我想出了一个可行的解决方案，如果有人需要类似的解决方案，我将把解决方案贴出来。

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

相关内容

最新更新

热门标签：