angularjs - 指令中的媒体播放器对象

Question

我正在尝试使用指令来访问 flowplayer 媒体播放器。这样父 Controller 就可以广播事件，然后播放器只需使用监听器响应这些事件。事件正在工作，但播放器未定义，因此没有真正工作。我的问题是: 1) 播放器未初始化。 - 我一定没有正确设置它。 2)我希望播放器对象在范围内可用为 $scope.player，这样我就可以告诉它 $scope.player.play() 或 $scope.player.stop()。当 DOM 准备好时，我对 Controller 、vs 链接以及播放器初始化的理解中缺少一些东西，因为我无法将播放器分配给范围变量来启动/停止它。我可以从控制台使用 jquery 初始化播放器，所以看来我的 init 函数没有在正确的时间运行？

代码

//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

查看此 mediaPlayer 指令。它适用于 flowplayer、mediaelement 和纯 html5。它可以与其他播放器库一起使用，但这就是我迄今为止测试过的全部内容。

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

一切都基于模板，因此只需创建适当的 HTML5 视频模板即可创建网站上的任何 Flowplayer 演示。

这是调用 flowplayer 的 HTML

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

{{mediatype}} 等于“flowplayer”或您想要在元素上调用的任何函数。因此，如果您想创建一个 mediaelement 播放器，那么您需要设置 media-type="mediaelementplayer"。模板 url 指向您想要呈现的任何模板，这就是构建播放列表等的内容。

这是一个可能的 Flowplayer 模板

<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>

这里是指令 https://github.com/joshkurz/Black-Belt-AngularJS-Directives/tree/master/directives/mediaPlayer 的链接