记录用户点击暂停按钮进入视频的距离 [英] Record how far into a video a user hits the pause button

问题描述

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

I'm beginning to write a web app that will allow users to annotate embedded YouTube videos with certain events. I'd like the user to be able to pause the video, pull up a menu of candidate events (say, as a modal), and save the selected event along with the associated time in the video that the event occurred to a database.

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

I don't know how to retrieve the time at which the pause button was pressed.

我假设 YouTube API 是实现此目的的地方，但我花了大约两个小时探索并没有找到任何线索.对方法有什么建议吗?适合初学者的良好无障碍教程/示例?

I'm assuming that the YouTube API would be the place to go for this, but I've spent about two hours exploring and finding no leads. Any advice for approach? Good accessible tutorials/examples of this suitable for beginners?

推荐答案

您可以使用 Youtube iframe API 使用 player.getCurrentTime() 获取状态 PAUSED 的当前时间:

You can use Youtube iframe API to get the current time on state PAUSED using player.getCurrentTime() :

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:

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

你可以在这里

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

As the PAUSED state can also be triggered independently from your button click, you can also store the currentTime before you call 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:

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

检查这个小提琴

这篇关于记录用户点击暂停按钮进入视频的距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！