如何从控制器上的html5视频标签捕捉动作“结束”？

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>

当视频结束并在模板的控制器上处理事件时，我试图触发一个动作，但我似乎无法在控制器上捕捉到事件，我如何做到这一点？

版本：

• 成员-cli: 1.13.8
• 成员: 2.2.0

Answer 1

编辑:此答案将不适用于非冒泡事件，请参阅我的另一个答案。

你有三个选择，从最好到最坏：

1. 使用{{action 'videoEnded' on='ended'}}。这应该会生成一个规则的操作，您可以在控制器或路由的actions: {}中使用。
2. 将ended事件添加到Ember将自动监视的事件列表中： customEvents：{ ended：'videoEnded‘} 创建时必须将此customEvents传递给应用程序(与传递rootElement的位置相同)。具体情况取决于您的确切引导过程，无论您使用的是烬-cli还是…。 一旦正确配置，烬将侦听ended事件，并在视图或组件上查找名为videoEnded的函数。
3. 手动事件处理程序(除非您正在创建一个插件，或者由于某种原因不能使用1或2 )，否则不建议使用手动事件处理程序。 init: this._super () { this._super ()；this._videoEnded = this.videoEnded.bind(this)；}，registerEvents: Ember.on('didInsertElement'，function () { this.get('element').addEventListener('ended'，this._videoEnded，false)；}，unregisterEvents: Ember.on(‘去势元素’，函数(){registerEvents this._videoEnded，false)；)，videoEnded:函数(evt) {Ember.run(函数() {console.log(视频结束)；}) } 告诉过你这会有点麻烦。在init中，我们创建处理程序的绑定版本，以便在调用this时具有正确的值。然后，一旦Ember创建了DOM元素，我们就注册事件，并在拆卸过程中取消注册它。 最后，我们将处理程序封装在一个运行回路中，以确保Ember将检测到属性更改并正确运行触发器和绑定。

Answer 2

我的另一个答案忽略了ended事件不会泡沫化的事实。我把它放在一边，因为它可能对与冒泡事件有相同问题的人很有用。

现在，由于事件不冒泡，您必须手动处理它。有点像我另一篇文章的选项3)。我强烈建议将其封装到组件中：

// video-player/component.js
import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'video',
  attributeBindings: ['autplay', 'buffered', 'controls', 'crossorigin',
                      'loop', 'muted', 'played', 'preload', 'poster', 'src'],

  init: function () {
    this._super();
    this._events = {};
    Object.keys(this.events).forEach(function (name) {
      this._events[name] = function (evt) { Ember.run(this, this.events[name]); };
    }, this);
  }

  registerHandlers: Ember.on('didInsertElement', function () {
    var el = this.get('element');
    Object.keys(this._events).forEach(function (name) {
      el.addEventListener(name, this._events[name], false);
    }, this);
  }),
  unregisterHandlers: Ember.on('willDestroyElement', function () {
    var el = this.get('element');
    Object.keys(this._events).forEach(function (name) {
      el.removeEventListener(name, this._events[name], false);
    }, this);
  }),

  events: {
    play: function (evt) { this.sendAction('play'); },
    ended: function (evt) { this.sendAction('ended'); }
    // add more at will
  }
});

您应该能够像这样使用它：

{{#video-player id="externalVideo" controls loop ended='videoEnded'}}
  <source src="../assets/videos/test.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
{{/video}}