After realizing that the ended event does not bubble, I decided to keep my previous answer for reference purposes. This could potentially help others who encounter a similar issue with a bubbling event.
Since the event doesn't bubble, manual handling is necessary. It's akin to option 3) from my earlier response. My recommendation is to encapsulate this behavior into a component:
// custom-video-player/component.js
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'video',
attributeBindings: ['autoplay', '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 if needed
}
});
To use it, follow this format:
{{#custom-video-player id="externalVideo" controls loop ended='handleVideoEnd'}}
<source src="../assets/videos/test.mp4" type="video/mp4">
Your browser doesn't support HTML5 video.
{{/custom-video-player}}