Question

当onStateChange的值为YT.PlayerState.ENDED（0）或YT.PlayerState.CUED（5）时，我试图每10秒重新加载一次文档。

如果YT.PlayerState不是YT.PlayerState.ENDED（0）或YT.PlayerState.CUED（5），那么文档不应重新加载。

问题是即使YT.PlayerState未结束（0）或CUED（5），文档也会重新加载。

以下代码从以下列表中显示来自Youtube的随机Metallica视频：

Metallica - 直到它睡觉（Youtube视频ID = F3WIHtOmkBg）
Metallica - unforgiven（Youtube视频ID = TUHFfR8hWcA）
Metallica - 没什么重要的（Youtube视频ID = Tj75Arhq5ho）

我发现YT.PlayerState.PLAYING（1）正在触发并且'正在播放'被记录到控制台但似乎“clearTimeout（）”和“refresh = undefined”没有效果，因此文档将是即使正在播放视频也会重新加载（状态为YT.PlayerState.PLAYING（1））。

我使用YouTube Player API Reference for iframe Embeds作为参考。

目前我的代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
// Youtube, F3WIHtOmkBg - Metallica - Until it sleeps
// Youtube, TUHFfR8hWcA - Metallica - The unforgiven
// Youtube, Tj75Arhq5ho - Metallica - Nothing else matters

var videoArray = [
    'F3WIHtOmkBg',
    'TUHFfR8hWcA',
    'Tj75Arhq5ho'];

var randomIndex = Math.floor(Math.random() * videoArray.length);
var randomVideoId = videoArray[randomIndex];

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function refresh() { setTimeout(function() {

    window.location = window.location.pathname;

    player = new YT.Player('player', {
        width: '550',
        height: '331',
        videoId: randomVideoId,
        events: {
            'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
        }
    });

}, 10000);
}

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        width: '550',
        height: '331',
        videoId: randomVideoId,
        events: {
            'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.stopVideo();
}

function onPlayerStateChange(event) {

    if (event.data == YT.PlayerState.ENDED) {
        refresh();
    console.log('Ended');
    }

    if (event.data == YT.PlayerState.PLAYING) {
        clearTimeout();
        refresh = undefined;
    console.log('Playing');
    }

    if (event.data == YT.PlayerState.PAUSED) {
        clearTimeout();
        refresh = undefined;
    console.log('Paused');
    }

    if (event.data == YT.PlayerState.BUFFERING) {
        clearTimeout();
        refresh = undefined;
    console.log('Buffering');
    }

    if (event.data == YT.PlayerState.CUED) {
        refresh();
    console.log('Cued');
    }

}

function stopVideo() {
    player.stopVideo();
}
</script>
</head>
<boby>
<div id="youtubetest">
    <div id="player"></div>
</div>
<div id="currenttime">
<script>
var now = new Date();
var datetime = now.getFullYear()+'/'+(now.getMonth()+1)+'/'+now.getDate();
datetime += ' '+now.getHours()+':'+now.getMinutes()+':'+now.getSeconds();
document.write('Current time is: ' + now);
</script>
</div>
</html>

重新加载包含Youtube Iframe播放器API的div

0 个答案: