Question

我正在尝试使用指令来访问流媒体播放器。以便父控制器可以广播事件，然后播放器只使用监听器响应这些事件。事件正在发挥作用，但玩家未定义，因此不能正常工作。我的问题是： 1）玩家没有初始化。 - 我不能正确设置它。 2）我希望作用域范围内的播放器对象为$ scope.player，因此我可以告诉$ scope.player.play（）或$ scope.player.stop（）。我对控制器的理解，vs链接以及DOM准备好时播放器的初始化都缺少了一些东西，因为我无法将播放器分配给范围变量来启动/停止它。我可以从控制台使用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()

Answer 1

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

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

所有内容都基于模板，因此只需创建适当的HTML5视频模板即可创建网站上的任何流程演示。

这是调用流程图的HTML

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

{{mediatype}}等于＆＃34; flowplayer＆＃34;或者你想要在元素上调用的任何函数。因此，如果您想创建一个mediaelement播放器，那么您可以设置media-type =＆＃34; mediaelementplayer＆＃34;。模板URL指向您要渲染的任何模板，这是构建播放列表等的内容。

这是一个可能的流程图模板

<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

的链接

指令中的媒体播放器对象

1 个答案: