controller.js

import Ember from 'ember';

export default Ember.Controller.extend({

  main: function(){

    return this.store.find('post');

  }.property(),

  actions: {

    search: function(){
      var terms = this.get('terms');
      this.store.unloadAll('post');
      return this.store.find('post', {terms: terms});
    },

    next: function(){
      var count = this.store.all('post').get('length');
      this.store.find('post', {count: 4, offset: count});
    },

    play: function(post){
      var string = '#' + post.get('vineid');
      $(string).get(0).paused ? $(string).get(0).play() : $(string).get(0).pause();

      var playCount = this.store.createRecord('post', {
        play: 1,
      });

      playCount.save();
    },

    mute: function(post) {
      var vid = '#' + post.get('vineid');
      $(vid).prop('muted', !$(vid).prop('muted'));
      this.set('isMuted', !this.get('isMuted'));
    },

  }
});

post.hbs

{{#each post in main}}
  <div class="card-container">
    <div class="card">
      <div class="card-video">
        <div class="video">
          <video preload="auto" loop {{action "play" post }} {{bind-attr src="post.video" id="post.vineid"}}></video>
        </div>
        <a href="#" {{action "mute" post}} {{bind-attr class=":sound isMuted"}}></a><span class="play-count">22,104</span>
        <div class="card-description">
          <p>{{post.brandDescLong}} <a href="{{post.brandUrl}}">website link</a>.</p>
        </div>
      </div>
      <div class="card-footer">
        <h3 class="name">{{post.brandName}}</h3>
        <h4 class="description">{{post.brandDescShort}}</h4><a href="#" class="more-info js-open-card"></a>
      </div>
    </div>
  </div>
{{/each}}

<button class="" {{action "next"}}>Next </button>