javascript - 记录用户在视频中按下暂停按钮的时间

Question

我开始编写一个网络应用程序，允许用户使用某些事件注释嵌入的 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 here

由于 PAUSED 状态也可以独立于按钮点击而触发，因此您还可以在调用 player.pauseVideo() 之前存储 currentTime :

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

检查this fiddle