Control player state via attributes

[Soviut]

The player attribute is good for very precise control from the controller. However, it would be nice to be able to declaratively control the state of the player via attributes. This way, template expressions can toggle playback:

<youtube-video playing="x + y > 10">
<youtube-video playing="playback">

Additionally, playhead position could be two-way bound to get and set playback position.

<youtube-video position="pos">

[brandly]

hmmm the playing thing seems like it would interfere with more standard interfaces. like, what if x + y is NOT greater than 10, but then the play button gets clicked on the player?

currently, you can use player.getCurrentTime and player.seekTo to get and set the playback time respectively. i don't think this would work well as a two-way binding, since the playback time would be naturally updating as the video went along, and it'd be hard to tell the difference between that natural progression and you manually setting the value from a controller or something. the methods on player are more explicit, so i think those should be used, since it should lead to clearer code.

[Soviut]

Yeah, perhaps if it was a 2-way binding for state it would work better. Likewise, a two way binding for seek position. That way if the player state changes due to a play button click, the bound variable will update accordingly. The same would go for seeking.

[brandly]

you can use player.currentState to get the current state. it's just a one-way binding tho, as in, if you click the play button, it will update to playing, but you shouldn't ever be like player.currentState = 'paused' or something. (you should use player.pauseVideo())

i still don't think a two-way binding for seek position is very practical though. this directive is a wrapper around the official YouTube embed library, so there's a fair amount i'm not in full control of. as i mentioned earlier, they provide those nice methods on player for getting/setting the seek position, which i think are appropriate.

since the video is chugging along outside the angular digest cycle, if you constantly want the current seek position, you'd basically want some kind of interval that spins while the state is playing.

$interval(function () {
  $scope.seekPosition = $scope.player.getCurrentTime();
}, 1000);

while i could include an interval like this within the directive, it just feels impractical and unnecessary for those who don't constantly need the current time.

if you're building something specific, i'd be happy to give feedback about how the directive can currently handle your use case :star2:

[Soviut]

You're right. For some reason I thought the YouTube API had a "playing" event that returned the current play head position. I now realize I'm probably confusing it with the HTML5 video API as the YouTube API only has the "playing" state.

[AtomSub]

I use an interval to update the current time when the video is playing. Here's a couple of thoughts:

1. My countdown timer gets pretty rough if I don't set the interval to something tiny. I found out via this link: ( http://stackoverflow.com/questions/24190604/youtube-html5-api-is-it-possible-to-get-better-time-resolution-when-polling-th ) that this may have something to do with the API's own internal interval conforming to HTML5 media standards. The solution posted at the link above checks if the getCurrentTime result is the same as it was 25 ms before and and if so, adds 25 ms (if different, then it just sets it to the result). I want to try this to see if it results in a smoother timer than setting my interval to 1.
2. Intervals must be cancelled when no longer in use, or if the scope is destroyed. I failed to do this and when I moved to the next video, my countdown timer was not happy (flickering).