Youtube api 如何在youtube嵌入api中侦听seek事件_Youtube Api

Youtube api 如何在youtube嵌入api中侦听seek事件

youtube-api

Youtube api 如何在youtube嵌入api中侦听seek事件,youtube-api,Youtube Api,嗨，我正在使用youtube iframe嵌入API。我想按用户跟踪seek视频事件。请帮助我如何跟踪此事件。单凭api无法跟踪事件您所能做的是在间隔内运行javascript函数，并检查测量的时差是否与预期的时差不同下面是一个示例代码： var tag=document.createElement（'script'）； tag.src=”https://www.youtube.com/iframe_api"; var firstScriptTag=document.getElement

嗨，我正在使用youtube iframe嵌入API。我想按用户跟踪seek视频事件。请帮助我如何跟踪此事件。

单凭api无法跟踪事件

您所能做的是在间隔内运行javascript函数，并检查测量的时差是否与预期的时差不同

下面是一个示例代码：


var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onyoutubeiframeapiredy（）{
控制台日志（“就绪”）；
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'cRmNPE0HwE8'，
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
//控制台日志（播放器）；
}
函数onPlayerReady（事件）{
event.target.playVideo（）；
///时间追踪从这里开始
var lastTime=-1；
var区间=1000；
var checkPlayerTime=函数（）{
如果（上次！=-1）{
if（player.getPlayerState（）==YT.PlayerState.PLAYING）{
var t=player.getCurrentTime（）；
//log（Math.abs（t-lastTime-1））；
///预期间隔1秒，有500毫秒的余量
如果（数学绝对值（t-lastTime-1）>0.5）{
//发生了一次寻觅
console.log（“seek”）；///在此处触发事件！
}
}
}
lastTime=player.getCurrentTime（）；
setTimeout（checkPlayerTime，interval）；///在1秒内重复函数调用
}
setTimeout（checkPlayerTime，interval）；///初始调用延迟
}
函数onPlayerStateChange（事件）{
}

您可以简单地做一点（无需定时器）：


const tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
const firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
让我们先发制人；
让过去的时间；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
活动：{
“onStateChange”：onPlayerStateChange
}
});
}
函数onPlayerStateChange（{target，data}）{
如果（data！=3）{//我们不需要检测缓冲
返回；
}
const currentTime=target.getCurrentTime（）；
//检测未暂停的现有操作和以前的操作
如果（！previousAction | | previousAction！=2）{
//返回现有youtube api数据（-1 | 0 | 1 | 5）
返回数据；
}else if（Math.abs（先前时间-当前时间）>1）{
//我们有Seek事件，我们有它开始的时间（previousTime）。我们还有Seek事件的完成时间（currentTime）。
返回“Seek”
}
previousTime=当前时间；
前一个动作=数据
}

我已经调查了youtube api事件，但api中没有seek事件。当用户搜索视频时，我需要运行回调函数。根据说明，无法跟踪此类事件，唯一的方法是跟踪自己的

player.getCurrentTime（）

每隔一段时间检查视频时间是否与间隔一致，我会使用window.requestAnimationFrame获得更好的结果。@KirillReznikov我会避免在window.requestAnimationFrame回调中添加额外的计算，因为这会降低用户体验，您不需要在帧级别检测seek

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

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