javascript - Ember 如何从 Controller 上的 html5 视频标签中捕获操作 '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>

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

版本:

• ember-cli: 1.13.8
• Ember :2.2.0

Answer 1

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

你有三种选择，从最好到最差:

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

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

   customEvents: {
     ended: 'videoEnded'
   }
   

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

   正确配置后，ember 将监听 ended 事件，并在您的 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)。