Video tag muted

components.video-player.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'video',
  attributeBindings: [
    'autoplay',
    'muted',
    'height',
    'width',
    'poster',
    'controls',
  ],
  
  didRender() {
    let attrs = [...this.$().get(0).attributes]
    	.reduce((memo, attr) => {
      	memo[attr.nodeName] = attr.nodeValue
      	return memo
    	}, {})

    this.$().parent()
      .find('#thing')
      .text(JSON.stringify(attrs, null, 2))
  }
});

controllers.application.js

import Ember from 'ember';

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

templates.application.hbs

<div>Video</div>

{{#video-player
  autoplay=true
  muted=true
  height=123
  controls=true
  src="http://vjs.zencdn.net/v/oceans.mp4"
  poster="http://vjs.zencdn.net/v/oceans.png"
}}
{{/video-player}}

<pre id="thing"></pre>

templates.components.video-player.hbs

{{yield}}

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": {}
}