Video Test

components.video-player.js

import Ember from 'ember';

export default Ember.Component.extend({
  didRender(...args) {
  	this._super(...args);
    
    this.video = this.$().find('video')[0];
  },
  
  isPlaying: false,
  
  poster: 'https://thumbs.licdn.com/urn:li:videoMetadata:36268396_6195248146851844096/2a2f357dc0044c94889625424bc20a7f/00001-500x500.jpg?t=exp=1785515400~hmac=6e0b8341ac56d6185a7c8ba4eec9a81c53082539c1b91746bd8c37e9c6fcc07e',
  
  source: 'https://streaming.licdn.com/urn:li:videoMetadata:36268396_6195248146851844096/1464134974017-5adcqk/5556e695250b41b9885b8a93d2e6a2e9?t=exp=1477679087~hmac=a48d33046e082f2ccabf679258e8e11243f31b4c8fda3baa3fa12333b2c97868',
  
  actions: {
  	play() {
      this.video[this.get('isPlaying') ? 'pause' : 'play']();
      this.toggleProperty('isPlaying');
    }
  }
});

controllers.application.js

import Ember from 'ember';

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

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('video', { path: '/video' });
});

export default Router;

routes.video.js

import Ember from 'ember';

export default Ember.Route.extend({
});

templates.application.hbs

<h1>Demo</h1>

{{outlet}}

{{video-player}}

templates.components.video-player.hbs

<video poster="{{poster}}">
	<source src="{{source}}" type="video/mp4">
</video>

<div class="controls">
  <button {{action 'play'}}>
    {{#if isPlaying}}Pause{{else}}Play{{/if}}
  </button>
</div>

templates.video.hbs

<h2>Video</h2>

{{video-player}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}