media player object from directive

Question

I'm trying to make accessible a flowplayer media player using a directive. so that parent controllers can broadcast events and then the player just responds to those events using listeners. the events are working but the player is undefined so not really working. my problems are: 1) player not initializing. - i must not be setting this up correctly. 2) I want the player object available in the scope as $scope.player so I can tell it to $scope.player.play() or $scope.player.stop(). something is missing in my understanding of controller, vs link as well as initialization of the player when the DOM is ready as I'm not able to assign the player to a scope variable to start/stop it. I'm able to init the player using jquery from the console, so it seems my init function is just not running at the right time?

code

//view
<div ng-Controller="AudioCtrl">
        <div url="pathto.mp3" audio-flowplayer><div>
</div>

//controller

App = angular.module("myapp", [])
App.controller 'AudioCtrl', ['$scope', ($scope) ->
 $scope.togglePlay() =->
    $scope.broadcast('start')

//directive
App.directive 'audioFlowPlayer' ->
  restrict: 'A'
  scope: {
    url: '@'
  }
  template: '<a href="{{url}}"</a>'
  controller: ($scope, $element, $attrs) -> 
    $scope.init_player = ->
      $scope.player = 
        $element.flowplayer("/path/to/flow.swf",
          clip:
            audoPlay: false
          )

    $scope.$on "start", ->
      $scope.player.play()

   link: (scope, element, attrs) ->
     scope.init_player()

]

Answer 1

Check out this mediaPlayer directive. It works with flowplayer, mediaelement, and pure html5. It could work with other player libraries, but that is all I have tested so far.

http://angulardirectives.joshkurz.net/dist/#/flowplayer

Everything is based off of templates, so any of the flowplayer demos that are on the site can be created by just creating the appropriate HTML5 video template.

This is the HTML to call the flowplayer

<div media-player media-type="{{mediaType}}" video-config="activeVideo" template-url="{{currentFlowplayer}}"></div>

{{mediatype}} would equal "flowplayer" or whatever function you want to call on the element. So if you wanted to create a mediaelement player then you would set media-type="mediaelementplayer". The template url point to whatever template you would like to render, which is what builds the playlists and such.

Here is a possible flowplayer template

<div class="flowplayer">
 <video>
  <source type="video/mp4" src="http://stream.flowplayer.org/download/640x240.mp4">
  <source type="video/webm" src="http://stream.flowplayer.org/download/640x240.webm">
  <source type="video/ogg" src="http://stream.flowplayer.org/download/640x240.ogv">
 </video>

 <div class="fp-playlist">
  <a class="is-advert" href="http://stream.flowplayer.org/download/640x240.mp4"></a>
  <a ng-repeat="video in videoConfig.playlist" href="{{video}}.mp4">Video {{$index + 1}}   </a>
 </div>

 <div class="preroll-cover">pre-roll</div>
</div>

Here is the link to the directive https://github.com/joshkurz/Black-Belt-AngularJS-Directives/tree/master/directives/mediaPlayer