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