application.handlebars

{{view "Application.CrossfadeVideoContainerView" url=videoUrl class="crossfade-container"}}

crossfade_video_container.js

Application.CrossfadeVideoContainerView = Ember.ContainerView.extend({
  addView: function(){
    var url = this.get('url');

    var view = Application.FullscreenVideoView.create({
      src: url,
    });

    this.insertAt(0, view);
  },

  childViewLoaded: function(view){
    view.fade("1", function(){});
    
    this.removeCurrentVideoView();
    this.set('currentVideoView', view);
  },

  removeCurrentVideoView: function(){
    var currentVideoView = this.get('currentVideoView');
    if (currentVideoView){
      currentVideoView.fadeAndRemove();
      this.set('currentVideoView', null);
    }
  },

  urlDidChange: function(){
    this.addView();
  }.observes('url').on('didInsertElement'),

  applyResize: function(){
    var self = this;
    Ember.run.once(function(){
      var views = self.toArray();
      views.forEach(function (view) {
        view.position();
      });
    });
  },

  didInsertElement: function () {
    var self = this;
    this._boundApplyResize = function(){
      self.applyResize();
    }
    $(window).on('resize', this._boundApplyResize);
  },

  willDestroyElement: function(){
    $(window).off('resize', this._boundApplyResize);
  }

});

video_view.coffee

Application.FullscreenVideoView = Ember.View.extend
  isLoaded: false
  tagName: "video"
  autoplay: "autoplay"
  loop: true
  aspectRatio: 1.78
  attributeBindings: ['src', 'autoplay', 'loop', 'frameborder']
  classNames: ["video-fullscreen"]

  fade: (opacity, callback) ->
    currentOpacity = @$().css('opacity')
    return callback() if currentOpacity == opacity

    @$().css('opacity', opacity)
    @$().on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', =>
      @$().off('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd')
      Ember.run =>
        callback()
    )

  position: ->
    componentHeight = @.$().parent().height()
    componentWidth = @.$().parent().width()

    aspectRatio = @get('aspectRatio')

    if (componentWidth / componentHeight) < aspectRatio
      marginLeft = (componentHeight * aspectRatio) - componentWidth
      @$().css
        'width': componentHeight * aspectRatio
        'height': '100%'
        'margin-top': ''
        'margin-left': -marginLeft / 2

    else
      marginTop = (componentWidth / aspectRatio) - componentHeight
      @$().css
        'width': '100%'
        'height': componentWidth / aspectRatio
        'margin-top': -marginTop / 2
        'margin-left': ''

  didLoadVideo: (->
    if @get('isLoaded')
      @get('parentView').childViewLoaded(this)
  ).observes('isLoaded')

  fadeAndRemove: ->
    @fade("0", =>
      @destroy()
    )

  didInsertElement: ->
    @position()
    @$().on('canplaythrough', =>
      Ember.run =>
        @set('isLoaded', true)
    )