Media Player-Objekt aus der Direktive

Ich versuche, einen flowplayer media player über eine Direktive zugänglich zu machen. Damit die übergeordneten Controller Ereignisse übertragen können, reagiert der Player nur auf diese Ereignisse mit Zuhörern. Die Ereignisse funktionieren, aber der Player ist nicht definiert, funktioniert also nicht wirklich. Meine Probleme sind:     1) Spieler wird nicht initialisiert. - Ich muss das nicht richtig einrichten.     2) Ich möchte das Player-Objekt im Bereich als $ scope.player zur Verfügung stellen, damit ich es an $ scope.player.play() oder $ scope.player.stop() sagen kann. etwas fehlt in meinem Verständnis von Controller, vs Link sowie Initialisierung des Players, wenn das DOM bereit ist, da ich den Player nicht einer Scope-Variable zuweisen kann, um ihn zu starten/zu stoppen. Ich bin in der Lage, den Spieler mit jQuery von der Konsole aus zu initialisieren, so scheint es, dass meine Init-Funktion gerade nicht zur richtigen Zeit ausgeführt wird?

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: ''
  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 Antworten

Sieh dir diese mediaPlayer-Direktive an. Es funktioniert mit Flowplayer, Mediaelement und reinem HTML5. Es könnte mit anderen Player-Bibliotheken funktionieren, aber das ist alles, was ich bisher getestet habe.

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

Alles basiert auf Vorlagen, so dass alle Flowplayer-Demos, die sich auf der Site befinden, erstellt werden können, indem einfach die entsprechende HTML5-Videovorlage erstellt wird.

Dies ist der HTML-Code, um den Flowplayer aufzurufen

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

{{mediatype}} würde gleich "flowplayer" oder einer anderen Funktion sein, die Sie für das Element aufrufen möchten. Wenn Sie also einen Mediaelement-Player erstellen möchten, müssen Sie media-type = "mediaelementplayer" festlegen. Die Vorlagen-URL verweist auf die Vorlage, die Sie wiedergeben möchten, wodurch die Wiedergabelisten erstellt werden.

Hier ist eine mögliche Flowplayer-Vorlage

<div class="flowplayer">
 

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

0
hinzugefügt
Angular - Deutsche Gemeinschaft
Angular - Deutsche Gemeinschaft
2 der Teilnehmer

Link für Einladungen: https://t.me/joinchat/B2gdShWFginwAlxbJrgRNA In dieser Gruppe sprechen wir über Angular. Partner: de.switch-case.com