How to display time of video in Ember.js / Handlebars - ember.js

Question

I am working on an application with HTML5 video where I have to display the current time of the video tag of my page in a seperate label.
I tried to define a property in my view which returns the formatted time of the video, something like
videoCounter: function() {
return App.seconds2String(Math.floor(App.getCurrentVideoTime() + 0.5));
}.property().volatile()
which returns the current time of the video as mm:ss.
The function App.getCurrentVideoTime() gets the current time from the video element in the page (so it is not an Ember property and therefore an not be bound) like this:
getCurrentVideoTime: function() {
var videoElement = document.getElementById('video');
if (videoElement) {
return Math.round(videoElement.currentTime * 10) / 10;
}
else {
return 0;
}
}
The handlebars view contains
<label id="videoCounter">{{view.videoCounter}}</label>
Unfortunately the value is not updated as the video plays, i. e. it displays 00:00 all the time.
How can i trigger an update for the computed property that is only dependent on the current time of the video tag?
I don't need high accuracy, the timer should only show the current time of the video in seconds.
Any ideas?
Thank you so much!
Thomas

Answer 1

It's not obvious from the code you've stated whether you are using a custom view, but I would create a custom Video view and bind to the timeupdate event, see http://jsfiddle.net/pangratz666/fzNMb/:
Handlebars:
<script type="text/x-handlebars" >
{{view App.Video width="400px" controllerBinding="App.videoController"}}
{{App.videoController.currentTimeFormatted}}
</script>​
JavaScript:
App.Video = Ember.View.extend({
srcBinding: 'controller.src',
controls: true,
tagName: 'video',
attributeBindings: 'src controls width height'.w(),
didInsertElement: function() {
this.$().on("timeupdate", {
element: this
}, this.timeupdateDidChange);
},
timeupdateDidChange: function(evt) {
var video = evt.data.element;
var currentTime = evt.target.currentTime;
video.setPath('controller.currentTime', currentTime);
}
});​

Answer 2

Based on what I said and the use of setInterval mentioned by #Zack
Jsfiddle: http://jsfiddle.net/Sly7/xgqkL/
App = Ember.Application.create({
// computed property based on currentTime change
videoCounter: function(){
return this.get('currentTime');
}.property('currentTime'),
currentTime: 0
});
// increment currentTime property every second
setInterval(function(){
App.incrementProperty('currentTime');
}, 1000);