javascript - Backbone : how can i add event for html5 video?

Question

如何在 Backbone 示例中添加视频 html 5 的事件:onplay、onend...

我有模板:

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

我可以在主干中添加视频事件吗？

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.

作者:idbehold

因此需要自定义事件来捕获视频事件。捕获视频元素上的事件并触发主干 View 的自定义事件。

这是视频事件列表:http://www.w3schools.com/tags/ref_av_dom.asp

主干 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');
    },
});