javascript - Ember 如何从 Controller 上的 html5 视频标签捕获 Action 'ended'？

Question

我有一个带有 html5 视频标签的 hbs 文件:

<video id="externalVideo" controls loop>
    <source src="../assets/videos/test.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

我试图在视频结束时触发一个操作并处理模板 Controller 上的事件，但我似乎无法捕获 Controller 上的事件，我该怎么做？

版本:

• ember-cli:1.13.8
• Ember :2.2.0

Answer 1

[编辑:此答案不适用于非冒泡事件，请参阅我的其他答案]

您有三个选择，从最好到最差:

1. 使用{{action 'videoEnded' on='end'}}。这应该会生成一个常规操作，您可以在 Controller 或路由的操作:{}中使用。

2. 将结束事件添加到events that Ember will watch automatically列表中:

   customEvents: {
     ended: 'videoEnded'
   }
   

   此 customEvents 必须在创建时传递给应用程序(在传递 rootElement 的同一位置)。具体细节取决于您的确切启动过程，无论您是否使用 ember-cli，...

   正确配置后，ember 将监听 ending 事件，并在您的 View 或组件上查找名为 videoEnded 的函数。

3. 手动事件处理程序(不推荐，除非您正在创建插件或由于某种原因无法使用 1. 或 2.)。

   init: function () {
       this._super();
       this._videoEnded = this.videoEnded.bind(this);
   },
   registerEvents: Ember.on('didInsertElement', function () {
       this.get('element').addEventListener('ended', this._videoEnded, false);
   }),
   unregisterEvents: Ember.on('willDestroyElement', function () {
       this.get('element').removeEventListener('ended', this._videoEnded, false);
   }),
   videoEnded: function (evt) { Ember.run(function () {
       console.log('Video ended');
   })}
   

   告诉过你这会有点困惑。在 init 中，我们创建了处理程序的绑定(bind)版本，因此 this 在调用时将具有正确的值。然后，我们在 Ember 创建 DOM 元素后注册该事件，并在拆卸过程中取消注册该事件。

   最后，我们将处理程序包含在 run loop 中确保 Ember 能够检测属性更改并正确运行触发器和绑定(bind)。