Using Backbone Events with HTML5 video playback events

Question

I am trying to use backbone to listen for when a video has ended but I am getting undefined is not a function returned.

Trying to call another method from within a backbone view once video has ended:

playIOS: function() {
    var $video = $('video'),
        video = $video.get(0);
    video.play();

    this.listenTo( video, 'ended', this.videoEnded );
},

videoEnded: function() {
    alert( 'Video Ended!' );
}

Clearly my method is not working. Is there a recommended solution for monitoring media playback events with Backbone?

Answer 1

listenTo method is only applicable to Backbone objects (Model, Collection, ...) and internal Backbone events (such as add, remove etc). Although you can extend that event list with your custom events, however they still can be bound to Backbone objects only.

ended is a DOM event, so its listener should be bound by DOM method (addEventListener or its jQuery equivalent). In Backbone you could use View's events hash for this purpose.

So your code might look like this:

var MyVideo = Backbone.View.extend({
    el: '#video',
    events: {
        "ended": "videoEnded"
    },
    videoEnded: function() {
        alert( 'Video Ended!' );
    }
});

where #video is selector refering to a video element already exist in DOM.