Video Player Test

components.video-controls.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: 'video-controls video-layer'.w(),

  hidden: false,

  actions: {
    togglePlayback: function() {
      this.sendAction('togglePlayback');
    }
  },

  mouseLeave: function() {
    this.set('hidden', true);
  },

  mouseEnter: function() {
    this.set('hidden', false);
  }
});

components.video-element.js

import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'video',
    attributeBindings: 'src controls width height poster'.w(),

    src: 'http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4',
    poster: 'https://peach.blender.org/wp-content/uploads/bbb-splash.png',
    controls: true,

    didInsertElement: function() {
      let self = this;
      let observedEvents = `canplay ended error loadeddata loadstart
        pause play playing progress seeked seeking stalled timeupdate waiting`.w();
      observedEvents.forEach(function(eventName) {
        self.$().on(eventName, Ember.run.bind(self, self.updatePlayer, eventName));
      });
    },

    updatePlayer: function(eventName) {
      this.sendAction('videoDidUpdate', this, eventName);
    },

    playbackStateChanged: Ember.observer('isPaused', function() {
      let el = this.get('element');
      (this.get('isPaused') === true) ? el.pause() : el.play();
    })

});

components.video-player.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  actions: {
    videoDidUpdate(videoElement, event) {
      let video = videoElement.get('element');
      console.log(`Event triggered: ${event}`);
    },
    togglePlayback() {
      this.toggleProperty('isPaused');
    }
  }

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

templates.application.hbs

{{video-player}}
{{outlet}}

templates.components.video-controls.hbs

  <div class="control-bar">
    <button {{action 'togglePlayback'}}>Play</button>
    <progress class='progress-bar' min='0' max='100' value='0'>0% played</progress>
  </div>

templates.components.video-element.hbs

{{yield}}

templates.components.video-player.hbs

{{video-controls togglePlayback="togglePlayback"}}

<div class="video-annotations video-layer">
  <h1>Annotations Component here</h1>
</div>

<div class="video-element video-layer">
  {{video-element isPaused=isPaused videoDidUpdate=(action "videoDidUpdate")}}
</div>

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.9/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember-template-compiler.js"
  }
}