Cross Fading Angular Video Player

gistfile1.js

  // Cross Fading Video
  // --------------
  // A cross fading video
  .directive('crossVideoSrc', ['$compile', function ($compile) { 
    return {
      //restrict: 'C',
      // This HTML will replace the zippy directive.
      replace: true,
      transclude: false,
      template: '<div class="fading-player-container" ng-class="{player1:activePlayer == 1, player2:activePlayer == 2, transition:transition}">' +
                  '<video class="fading-player fading-player-1" width="320" height="240" src="{{player1Video}}"></video>' +
                  '<video class="fading-player fading-player-2" width="320" height="240" src="{{player2Video}}"></video>' +
                '</div>',
      scope: {
        crossVideoSrc:'&',
        loop:'&'
      },
      // The linking function will add behavior to the template
      link: function(scope, element, attrs) {
        var TRANSITION_DURATION = 800;

        var $element = $(element)
          , $video1 = $('.fading-player-1', $element)
          , $video2 = $('.fading-player-2', $element)
          , video1 = $video1.get(0)
          , video2 = $video2.get(0)
          , playerState = null
          , transitionTimeout = null; // loading, transition, playing

        scope.activePlayer = 1;
        scope.transition = false;
        

        // Video 1 can play
        $video1.on('canplay', function () {
          console.log('video 1 canplay');
          if(scope.activePlayer != 1 && playerState == 'loading') {
            playerState = 'transition';
            scope.$apply(function () {
              scope.transition = true;
              video1.play();
              console.log('video 1 transition');
            });

            transitionTimeout = setTimeout(function () {
              playerState = null;
              video2.pause();
              transitionTimeout = null;
              scope.$apply(function () {
                scope.transition = false;
                scope.activePlayer = 1;
                console.log('video 1 transition done');
              });
            }, TRANSITION_DURATION);
          } else {
            debugger
          }
        }).on('ended', function () {
          console.log('video 1 ended, looping:', scope.loop(), '  -player state:', playerState );
          if(scope.activePlayer == 1 && !playerState && scope.loop()) {
            console.log('video 1 restarted');
            video1.play();
          }
        });

        // Video 2 can play
        $video2.on('canplay', function () {
          console.log('video 2 canplay');
          if(scope.activePlayer == 1 && playerState == 'loading') {
            playerState = 'transition';
            scope.$apply(function () {
              scope.transition = true;
              video2.play();
              console.log('video 2 transition');
            });

            transitionTimeout = setTimeout(function () {
              playerState = null;
              video1.pause();
              transitionTimeout = null;
              scope.$apply(function () {
                scope.transition = false;
                scope.activePlayer = 2;
                console.log('video 2 transition done');
              });
            }, TRANSITION_DURATION);
          } else {
            debugger
          }
        }).on('ended', function () {
          console.log('video 2 ended, looping:', scope.loop(), '  -player state:', playerState);
          if(scope.activePlayer == 2 && !playerState && scope.loop()) {
            console.log('video 2 restarted');
            video2.play();
          }
        });

        // watch the expression, and update the UI on change.
        function setNewVideo(newVideo) {
          console.log('set new video to ', newVideo);
          /*if(transitionTimeout) {
            clearTimeout(transitionTimeout);
            transitionTimeout = null;
          }*/

          if(newVideo) {
            if(scope.activePlayer == 1) {
              playerState = 'loading';
              video2.src = newVideo;
              video2.load();
            } else {
              playerState = 'loading';
              video1.src = newVideo;
              video1.load();
            }
          } else {
            scope.activePlayer = 0;
          }

          

        };
        scope.$watch(scope.crossVideoSrc, setNewVideo);
        setNewVideo(scope.crossVideoSrc());
      }
    };
  }])

gistfile2.less

.fading-player-container {
  position: relative;

	.fading-player {
		opacity: 0;
		position: absolute;
		width: 100%;
		height: 100%;
		
	}

	.fading-player-2 {
		//top: 200px;
	}

	// z-index ordering
	&.player1 {
		.fading-player-1 {
			opacity: 1;
		}
		.fading-player-2 {
			opacity: 0;
		}
		&.transition .fading-player-2 {
			opacity: 1;
			.transition(opacity 0.6s);
			.transition-delay(0.1s);
		}
	}
	&.player2 {
		.fading-player-1 {
			opacity: 0;
			z-index: 100;
		}
		&.transition .fading-player-1 {
			opacity: 1;
			.transition(opacity 0.6s);
			.transition-delay(0.1s);
		}
		.fading-player-2 {
			opacity: 1;
			z-index: 50;
		}
	}
	
}

gistfile3.html

<div id="ipadVideo" cross-video-src="ipadVideo" loop="!transfer1 &amp;&amp; !transfer2">
</div>