Wistia embed

Wistia embed

by jdcravens

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://fast.wistia.net/static/E-v1.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    
<button id="btn">Get Frame</button>
<p id="time"></p>

<div id="wistia_abcde12345" style="height:387px;width:640px" data-video-width="640" data-video-height="360">
  this is displayed if javascript is disabled
</div>
    <button onclick="wistiaEmbed.time(25).play();">25</button >
    <button  onclick="wistiaEmbed.time(30).play();">30</button >
    <button  onclick="wistiaEmbed.time(35).play();">35</button >
    <button  onclick="wistiaEmbed.time(40).play();">40</button >
    <button  onclick="wistiaEmbed.time(45).play();">45</button >
    
</script>

JavaScript

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({

});

App.IndexView = Ember.View.extend({
  didInsertElement: function() {
    
    wistiaEmbed = Wistia.embed("yztgscw87l", {
      playerColor: "000",
      playerPreference: "html5",
      fullscreenButton: false,
      container: "wistia_abcde12345"
    });

    wistiaEmbed.bind("play", function() {
     console.log("playing!");
    });
      
    wistiaEmbed.bind("end", function() {
     alert("The video ended!");
    });
      
    $('#btn').bind('click', function() {
      $('#time').html('vid.currentTime: '
      + wistiaEmbed.time());
    });           
  }
  
});