Javascript 记录用户点击暂停按钮的距离

我开始编写一个web应用程序，允许用户在嵌入的YouTube视频中添加特定事件的注释。我希望用户能够暂停视频，调出候选事件的菜单（例如，作为模式），并将所选事件以及视频中事件发生的相关时间保存到数据库中

我不知道如何检索按下暂停按钮的时间

我假设YouTube API将是实现这一目标的最佳途径，但我花了大约两个小时进行探索，却没有找到任何线索。有什么建议吗？适合初学者的好的可访问教程/示例？

您可以使用

player.getCurrentTime（）

获取状态的当前时间

PAUSED

：

HTML:

<iframe id="video" src="https://www.youtube.com/embed/CaksNlNniis?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe>
<input id="pause" type="submit" value="pause" />
<input id="play" type="submit" value="play" />

您可以找到一个工作的JSFIDLE

由于

PAUSED

状态也可以独立于按钮单击触发，因此您还可以在调用

player.pauseVideo（）之前存储当前时间：

HTML:

<iframe id="video" src="https://www.youtube.com/embed/CaksNlNniis?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe>
<input id="pause" type="submit" value="pause" />
<input id="play" type="submit" value="play" />
<ul id="timing"></ul>

检查一下
谢谢，@Bertrand Martel。我收到以下错误：“找不到名称‘YT’”。有什么建议吗？@Atticus29你有没有一把小提琴能解释这个错误？您是否包括
https://www.youtube.com/player_api
就像在小提琴中指定的一样。我只是将您的html复制到我的angular组件的html文件中，将您的js复制到我的组件的typescript文件中。顺便说一句，我看不出你的小提琴中包含了什么。不过，小提琴还是很新的；也许我找的地方不对？我站着，更正。我现在看到了。但是是的，它也在我的代码中。问题是“player=new YT.player（'video'，{…”这一行我应该导入什么吗？
<iframe id="video" src="https://www.youtube.com/embed/CaksNlNniis?enablejsapi=1&html5=1&" frameborder="0" allowfullscreen="0"></iframe>
<input id="pause" type="submit" value="pause" />
<input id="play" type="submit" value="play" />
<ul id="timing"></ul>

var player;
var timeList;
var count = 0;

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

function onPlayerStateChange(event) {}

function onPlayerReady(event) {
  document.getElementById("pause").addEventListener("click", function() {
    logTime();
    player.pauseVideo();
  });
  document.getElementById("play").addEventListener("click", function() {
    player.playVideo();
  });
}

document.addEventListener("DOMContentLoaded", function(event) {
  timeList = document.getElementById("timing");
});

function logTime() {
  count++;
  var time = player.getCurrentTime();
  var newTime = document.createElement('li');
  var textNode = document.createTextNode('pause ' + count + ' - ' + time + " ");
  var buttonNode = document.createElement('button');
  buttonNode.addEventListener("click", function() {
    console.log("go to " + time);
    player.seekTo(time);
    player.playVideo();
  });
  var btnText = document.createTextNode("go back");
  buttonNode.appendChild(btnText);
  newTime.appendChild(textNode);
  newTime.appendChild(buttonNode);
  buttonNode.appendChild(btnText);
  timeList.appendChild(newTime);
}

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