Skip to content

Instantly share code, notes, and snippets.

Created September 9, 2013 05:19
Show Gist options
  • Select an option

  • Save anonymous/6491761 to your computer and use it in GitHub Desktop.

Select an option

Save anonymous/6491761 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
{{video-player isPlaying=isPlaying}}
<button {{action 'play'}} >{{playText}}</button>
</script>
<script type="text/x-handlebars" data-template-name="components/video-player">
<video width="640" height="264">
<source src="http://www.tools4movies.com/dvd_catalyst_profile_samples/The%20Amazing%20Spiderman%20bionic.mp4" type='video/mp4' />
</video>
</script>
</body>
</html>
App = Ember.Application.create();
App.VideoPlayerComponent = Ember.Component.extend({
isPlayingDidChange: function() {
if (this.get('isPlaying')) {
this.$('video')[0].play();
} else {
this.$('video')[0].pause();
}
}.observes('isPlaying')
});
App.ApplicationController = Ember.Controller.extend({
actions: {
play: function() {
this.toggleProperty('isPlaying');
}
},
playText: function() {
if (this.get('isPlaying')) {
return 'Pause';
}
return 'Play';
}.property('isPlaying')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment