Backbone: how can i add event for html5 video?

Question

How can i add event for video html 5 in backbone example: onplay, onended...

i have template:

<div class="player">
    <video preload="auto" src="<%- videolink %>"></video>
</div>

and can i add event for video in backbone?

window.VideoPlayer = Backbone.View.extend({
    tagName: "div",
    className: "player",

    events: {},

    initialize: function () {
        this.videolink = this.model;
        this.render();
    },

    render: function () {
        $(this.el).html(this.template(this.videolink));
        return this;
    }
});

Answer 1

All Backbone.View event handlers are delegated to the view's el. This means that any events that fire inside the view must bubble/propagate up to its el before your handlers will catch them.

Unfortunately for you, HTML5 audio and video elements do not propagate their events up through the DOM the way most other elements do. The only way to handle these events is to add eventListeners directly to the element after it has been inserted into the DOM.

by idbehold

Therefore custom event is required to catch video events. Catch events on the video element and trigger custom event to backbone view.

This is video events list: http://www.w3schools.com/tags/ref_av_dom.asp

Backbone view:

window.VideoPlayer = Backbone.View.extend({
    tagName: "div",
    className: "player",

    events: {
        "playing": "onPlaying"
    },

    initialize: function () {
        this.videolink = this.model;
        this.render();

        var self = this;
        var video = $(self.el).find("video");
        video.on('playing', function(e){
            $(self.el).trigger('playing');
        });
        video[0].play();
    },

    render: function () {
        $(this.el).html(this.template(this.videolink));
        return this;
    },

    playingVideo: function(){
        alert('playing');
    },
});