Get time from the playing video

[respectYourNeighbour]

How can I get the current time of the youtube video that is playing?

[Diego Aguilar]

@respectYourNeighbour that's in the docs, so if you assigned the player directive to a youtubePlayer object, in your controller you would do:

$scope.youtubePlayer.getCurrentTime()

[Matt Brandly]

did you get it working, @respectYourNeighbour?

[Jan Kondratowicz]

Seems like it's only updated on player events like play or pause. In the example below, DOM is only updated with current seeker position if I play/pause the video using standard controls. Any suggestions how to deal with that? I understand it has to do with Angular digest loop, but can't figure out how to fix it in an elegant way.

<youtube-video video-id="'dQw4w9WgXcQ'" player="rickPlayer"></youtube-video>
<p>Time is <strong>{{ rickPlayer.getCurrentTime() }}</strong></p>

Edit: JSFiddle for reference: https://jsfiddle.net/jkondratowicz/dv4osvtp/

[Matt Brandly]

there was discussion here of using setInterval to repeatedly ask for rickPlayer.getCurrentTime(). something like

var intervalId = setInterval(function () {
  $scope.currentTime = rickPlayer.getCurrentTime()
}, 1000)

and then you'd update your markup to

<youtube-video video-id="'dQw4w9WgXcQ'" player="rickPlayer"></youtube-video>
<p>Time is <strong>{{ currentTime }}</strong></p>

i'm not sure of a more elegant way...

also, assuming you're doing this in a controller, you'd want something like

$scope.$on('$destroy', function () {
  window.clearInterval(intervalId)
})

so that the interval doesn't live past the controller

[Jan Kondratowicz]

Well, yeah, I don't even need to use scope variable like currentTime, as long as digest loop works - it's simply enough to run an "empty" $interval:
https://jsfiddle.net/jkondratowicz/dv4osvtp/2/

I don't know much about Angular internals, but I'm pretty sure there must be a better way of doing this ;)

[Matt Brandly]

oh yeah, that makes sense. to be honest, i haven't touched angular in quite a while, so i'm really not sure what's best here. good luck with your app!

[Diego Aguilar]

@brandly make react-youtube 😀

[Matt Brandly]

@diegoaguilar there's already a nice one out there!