使用 Backbone 个事件和 HTML5 个视频播放事件

Question

我正在尝试使用 backbone 来监听视频何时结束，但我收到 undefined is not a function 返回。

尝试在视频结束后从 backbone 视图中调用另一个方法：

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

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

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

很明显我的方法不起作用。使用 Backbone 监控媒体播放事件是否有推荐的解决方案？

Answer 1

简单..

var video = document.getElementsByTagName('video')[0];
    video.onended = function(e) {
     // your method which is to be called
    };

Answer 2

listenTo method is only applicable to Backbone objects (Model, Collection, ...) and internal Backbone events（例如add、remove等）。尽管您可以使用自定义事件扩展该事件列表，但它们仍然只能绑定到 Backbone 个对象。

ended 是一个 DOM 事件，所以它的侦听器应该被 DOM 方法（addEventListener 或其等效的 jQuery 绑定）。在 Backbone 中，您可以使用 View 的 events hash 来达到这个目的。

因此您的代码可能如下所示：

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

其中 #video 是引用 DOM 中已存在的 video 元素的选择器。

使用 Backbone 个事件和 HTML5 个视频播放事件

Using Backbone Events with HTML5 video playback events

html

javascript

video

playback

backbone.js