如何在 youtube embed api 中收听 seek 事件答案

【问题标题】：How to listen to seek event in youtube embed api如何在 youtube embed api 中收听 seek 事件
【发布时间】：2015-03-27 05:27:40
【问题描述】：

您好，我正在使用 youtube iframe 嵌入 API。我想按用户跟踪搜索视频事件。请帮助我如何跟踪。

【问题讨论】：

我已经调查了 youtube api 事件，但 API 中没有可用的 seek 事件。当用户寻找视频时，我需要运行我的回调函数。
根据documentation没有办法跟踪此类事件，唯一的方法是每隔一段时间跟踪player.getCurrentTime()并检查视频时间是否与间隔

标签： youtube-api

【解决方案1】：

没有简单的方法可以单独使用 api 来跟踪事件。

您可以在间隔中运行一个 javascript 函数并检查测量的时间差是否与预期的不同

这是一个示例代码：

<html>
    <body>
        <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("ready");
                player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    videoId: 'cRmNPE0HwE8',
                    events: {
                        'onReady': onPlayerReady,
                            'onStateChange': onPlayerStateChange
                    }
                });
                //console.log(player);
            }

            function onPlayerReady(event) {
                event.target.playVideo();

                /// Time tracking starting here

                var lastTime = -1;
                var interval = 1000;

                var checkPlayerTime = function () {
                    if (lastTime != -1) {
                        if(player.getPlayerState() == YT.PlayerState.PLAYING ) {
                            var t = player.getCurrentTime();

                            //console.log(Math.abs(t - lastTime -1));

                            ///expecting 1 second interval , with 500 ms margin
                            if (Math.abs(t - lastTime - 1) > 0.5) {
                                // there was a seek occuring
                                console.log("seek"); /// fire your event here !
                            }
                        }
                    }
                    lastTime = player.getCurrentTime();
                    setTimeout(checkPlayerTime, interval); /// repeat function call in 1 second
                }
                setTimeout(checkPlayerTime, interval); /// initial call delayed 
            }
            function onPlayerStateChange(event) {

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

【讨论】：

我会使用 window.requestAnimationFrame 以获得更好的结果。
@KirillReznikov 我会避免在 window.requestAnimationFrame 回调中添加与重绘数据无关的额外计算，因为它会降低用户体验，您不需要在帧级别检测搜索跨度>

【解决方案2】：

你可以简单一点（没有计时器）：

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

   let previousAction;
   let previousTime;

   function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        events: {
          'onStateChange': onPlayerStateChange
        }
      });
   }

   function onPlayerStateChange({target, data}) {
     if(data != 3) { // we don't need to detect buffering
       return;
     }

     const currentTime = target.getCurrentTime();
     // detect existing action and previous action which is not paused
     if (!previousAction || previousAction != 2 ) {
        // return existing youtube api data (-1 || 0 || 1 || 5 )
        return data;
     } else if (Math.abs(previousTime - currentTime) > 1 ) {
        // we have Seek event and we have time when it was started(previousTime). Also we have finish time of Seek event(currentTime).
        return 'Seek'
     }

     previousTime = currentTime;
     previousAction = data
   }
</script>

【讨论】：