objeto del reproductor de medios de la directiva

Estoy tratando de hacer accesible un reproductor multimedia flowplayer usando una directiva. para que los padres controladores puedan transmitir eventos y luego el jugador simplemente responda a esos eventos utilizando oyentes. los eventos funcionan, pero el jugador no está definido, por lo que realmente no funciona. mis problemas son:     1) el jugador no se está inicializando - No debo configurar esto correctamente.     2) Quiero que el objeto jugador esté disponible en el alcance como $ scope.player para que pueda decirlo a $ scope.player.play() o $ scope.player.stop (). falta algo en mi comprensión del controlador, el enlace vs y la inicialización del jugador cuando el DOM está listo ya que no puedo asignarle al jugador una variable de ámbito para iniciar/detenerlo. ¿Puedo iniciar el reproductor utilizando jQuery desde la consola, por lo que parece que mi función init no se está ejecutando en el momento adecuado?

código

//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: ''
  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()

]

0

1 Respuestas

Consulte esta directiva de MediaPlayer. Funciona con flowplayer, mediaelement y pure html5. Podría funcionar con otras bibliotecas de jugadores, pero eso es todo lo que he probado hasta ahora.

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

Todo se basa en plantillas, por lo que cualquiera de las demostraciones de Flowplayer que se encuentran en el sitio se puede crear simplemente creando la plantilla de video HTML5 adecuada.

Este es el HTML para llamar al flowplayer

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

{{mediatype}} sería igual a "flowplayer" o cualquier función que quieras invocar en el elemento. Entonces, si quisieras crear un reproductor de medios, entonces establecerías media-type = "mediaelementplayer". La url de la plantilla apunta a la plantilla que quieras representar, que es lo que crea las listas de reproducción y demás.

Aquí hay una posible plantilla de jugador de flujo

<div class="flowplayer">
 

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

0
agregado
Angular - Comunidad española
Angular - Comunidad española
2 de los participantes

En este grupo hablamos de Angular. Partner: es.switch-case.com