title: How to display time of video in Ember.js / Handlebars
body: <p>I am working on an application with HTML5 video where I have to display the current time of the <code>video</code> tag of my page in a seperate label.</p>
  
  <p>I tried to define a property in my view which returns the formatted time of the video, something like</p>
  
  <pre><code>videoCounter: function() {
      return App.seconds2String(Math.floor(App.getCurrentVideoTime() + 0.5));
  }.property().volatile()
  </code></pre>
  
  <p>which returns the current time of the video as mm:ss.</p>
  
  <p>The function <code>App.getCurrentVideoTime()</code> gets the current time from the video element in the page (so it is not an Ember property and therefore an not be bound) like this:</p>
  
  <pre><code>getCurrentVideoTime: function() {
      var videoElement = document.getElementById('video');
      if (videoElement) {
          return Math.round(videoElement.currentTime * 10) / 10;
      }
      else {
          return 0;
      }
  }
  </code></pre>
  
  <p>The handlebars view contains</p>
  
  <pre><code>&lt;label id="videoCounter"&gt;{{view.videoCounter}}&lt;/label&gt;
  </code></pre>
  
  <p>Unfortunately the value is not updated as the video plays, i. e. it displays <code>00:00</code> all the time.</p>
  
  <p>How can i trigger an update for the computed property that is only dependent on the current time of the video tag?</p>
  
  <p>I don't need high accuracy, the timer should only show the current time of the video in seconds.</p>
  
  <p>Any ideas?</p>
  
  <p>Thank you so much!</p>
  
  <p>Thomas</p>