Question

我有一个iframe可以在开始和结束时间之间播放视频。到达结束时间（case 0）时，我想加载几乎相同的网址（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>

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

刷新iframe后OnStateChange无法正常工作

1 个答案: