ユーザーが一時停止ボタンを押したときのビデオの長さを記録します。

Question

私は、埋め込まれたYouTubeビデオに特定のイベントで注釈を付けることができるWebアプリケーションを作成し始めています。私は、ユーザーがビデオを一時停止し、候補イベントのメニューを（モーダルとして）プルアップし、イベントがデータベースに発生したビデオ内の関連する時間とともに選択されたイベントを保存できるようにしたい。

一時停止ボタンが押された時間を取得する方法がわかりません。

私は、YouTube APIがこのための場所であると仮定していますが、私は約2時間を探索してリードを見つけていません。アプローチのアドバイスはありますか？初心者に適した使いやすいチュートリアル/例

Answer 1

あなたはplayer.getCurrentTime()を使用して状態PAUSEDの現在の時刻を取得するためにYoutube iframe APIを使用することができます。

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

あなたはhere

作業jsfiddleを見つけることができます

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