来自指令的媒体播放器对象答案

【问题标题】：media player object from directive来自指令的媒体播放器对象
【发布时间】：2013-12-16 17:07:04
【问题描述】：

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

代码

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

//控制器

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

]

【问题讨论】：

标签： angularjs angularjs-directive flowplayer

【解决方案1】：

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

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

一切都基于模板，因此网站上的任何 flowplayer 演示都可以通过创建适当的 HTML5 视频模板来创建。

这是调用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的链接

【讨论】：