記錄用戶點擊暫停按鈕的距離

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狀態也可以獨立從您的按鈕點擊觸發的，你也可以存儲currentTime的調用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