Question

当用户在YouTube视频中寻找新位置时，我需要回调。我查看了YouTube Javascript和iframe API，似乎api中没有此类事件。

我错过了什么吗？

由于

迈克尔

Answer 1

好的，我找到了一种不放弃YouTube嵌入式控件的方法。这个想法是监视超时回调中的当前时间，并在时间差为＆＃34;异常＆＃34;时触发事件（直接回调函数）。不是最细粒度的技术，因为检查每秒执行两次，但是当我们需要处理高级别的seekTo事件时它就能完成工作。希望这会有助于其他人，直到Google决定投资更新API。

以下是YouTube iframe API官方文档中提供的示例的修改版本：

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <script>
    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 onYouTubeIframeAPIReady() {
        console.log("YouTube API ready");

        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        console.log("YouTube video ready");
    }

    function onPlayerStateChange(event) {
        switch(event.data) {
            case YT.PlayerState.CUED:
                console.log("YouTube video CUED");
                break;
            case YT.PlayerState.PLAYING:
                console.log("YouTube video PLAYING");
                isPlaying = true;
                checkSeek();
                break;
            case YT.PlayerState.BUFFERING:
                console.log("YouTube video BUFFERING");
                isPlaying = false;
                break;
            case YT.PlayerState.PAUSED:
                console.log("YouTube video PAUSED");
                isPlaying = false;
                break;
            case YT.PlayerState.ENDED:
                console.log("YouTube video ENDED");
                isPlaying = false;
                break;
        }
    }

    //  A hack to work around the missing seek event 
    var checkSeekPeriod = 500;
    var checkSeekMargin = 500;
    var prevCurrentTime = 0;
    var isPlaying = false;
    function checkSeek() 
    {
        if (!isPlaying) {
            prevCurrentTime = -1;
            return;
        }

        var currentTime= player.getCurrentTime();
        if(prevCurrentTime > 0)
        {
            var diff = (currentTime - prevCurrentTime) * 1000;
            if(Math.abs(diff - checkSeekPeriod) > checkSeekMargin)
            {
                console.log("checkSeek diff = " + diff.toFixed(0) + "ms");
                onPlayerSeekTo(currentTime);
            }
        }
        prevCurrentTime = currentTime;

        setTimeout(function() {
                return checkSeek();
            }, checkSeekPeriod);
    };

    function onPlayerSeekTo(t) {
        console.log("YouTube player seek: " + t + "s");
    }

    </script>
  </body>
</html>

在YouTube播放器api中没有onSeekTo活动？

1 个答案: