gpt4 book ai didi

javascript - Ember 如何从 Controller 上的 html5 视频标签中捕获操作 'ended'?

转载 作者:行者123 更新时间:2023-11-29 21:38:34 25 4
gpt4 key购买 nike

我有一个带有 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

最佳答案

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

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

  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)。

关于javascript - Ember 如何从 Controller 上的 html5 视频标签中捕获操作 'ended'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34029469/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com