69106

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

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.

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?

Answer1:

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 :

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

You can find a working jsfiddle here

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 :

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

Check this fiddle

Recommend

  • XML reforming with DOM
  • How to read an integer input from the user in Rust 1.0?
  • how and why sizeof(a)/sizeof(a[0]) in c is used to calculate the number of elements in an array
  • Ios swift - storing uiimage in document directory and path in core data
  • Connecting to SQL Server Database C#-WinForms
  • Haskell: List Created Evaluating List Elements
  • youtube video insert “onBehalfOfContentOwner” parameter value
  • Get entry assembly from ASP.NET application [duplicate]
  • Using Delphi + Jedi, losing USB data when device sends it “too fast”
  • Custom Keyboard or to create own keyboard
  • Browserify and Reactify source maps include full local path names
  • JsonConverter: Get parent object in ReadJson, without $refs
  • Does “internal” visibility modifier in Kotlin work yet?
  • Update varbinary(MAX) field in SQLServer 2012 Lost Last 4 bits
  • Access the state of control in Winforms from another application
  • Mercurial: Identify file name after rename
  • Cannot page through all results using nextPageToken on YouTube search API v3
  • Javascript Array, Object, Date not defined
  • Efficient User-Agent Regex to find Safari in Python
  • Shouldn't else be indented in the below code
  • Is there a way to dynamically embed PDF Files in a JSP pulled from the file system?
  • Facebook iOS SDK Not Calling Completion Handler
  • UWP/C# - Issue with AQS and USB Devices
  • How to make JSON.NET deserialize to Microsoft Date Time?
  • SAVE attribute needed for Fortran variables when only the C_LOC address is returned to a C program?
  • Detect when Facebook like button is clicked
  • one Local Olampyad Questions on Informatic in 2011
  • Record samples being played with OpenAL
  • Typescript - Unable to get 'import' statement to function
  • swift auto completion not working in Xcode6-Beta
  • Finding past revisions of files in StarTeam w/ .NET SDK / C#
  • Javascript + PHP Encryption with pidCrypt
  • PHP: When would you need the self:: keyword?
  • WPF Applying a trigger on binding failure
  • Acquiring multiple attributes from .xml file in c#
  • How to set the response of a form post action to a iframe source?
  • Qt: Run a script BEFORE make
  • reshape alternating columns in less time and using less memory
  • Conditional In-Line CSS for IE and Others?
  • How can I use threading to 'tick' a timer to be accessed by other threads?