记录用户点击暂停按钮到视频的多远

Question

我正着手编写一个网络应用程序，允许用户使用特定事件对嵌入的 YouTube 视频进行注释。我希望用户能够暂停视频，拉出候选事件的菜单（例如，作为模态），并将所选事件连同视频中事件发生的相关时间保存到数据库中。

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

我假设 YouTube API 将是进行此操作的地方，但我花了大约两个小时探索并没有找到任何线索。有什么建议吗？好上手tutorials/examples这个适合初学者吗？

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() 之前存储当前时间：

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

记录用户点击暂停按钮到视频的多远

Record how far into a video a user hits the pause button

javascript

youtube

youtube-api

youtube-javascript-api

youtube-data-api