记录用户键入暂停按钮的视频多远

Question

我开始编写一个Web应用程序，该应用程序将允许用户注释带有某些事件的嵌入式YouTube视频。我希望用户能够暂停视频，提起候选事件菜单(例如，作为模态(，并保存所选事件以及该事件发生在数据库中的视频中的相关时间。

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

我假设YouTube API将是这样做的地方，但是我花了大约两个小时的时间探索并找不到潜在客户。有什么建议吗？适合初学者的良好访问教程/示例？

Answer 1

您可以使用youtube iframe 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" />

javaScript：

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PAUSED) {
    console.log(player.getCurrentTime());
  }
}
function onPlayerReady(event) {
  document.getElementById("pause").addEventListener("click", function() {
    player.pauseVideo();
  });
  document.getElementById("play").addEventListener("click", function() {
    player.playVideo();
  });
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

您可以在此处找到一个工作的JSFIDDLE

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

javaScript：

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

检查此小提琴