来自指令的媒体播放器对象 [英] media player object from directive

问题描述

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

代码

//查看<div ng-Controller="AudioCtrl"><div url="pathto.mp3" 音频流播放器><div>

//控制器

App = angular.module("myapp", [])App.controller 'AudioCtrl', ['$scope', ($scope) ->$scope.togglePlay() =->$scope.broadcast('开始')//指示App.directive 'audioFlowPlayer' ->限制:'A'范围: {网址:'@'}模板:'<a href="{{url}}"</a>'控制器:($scope, $element, $attrs) ->$scope.init_player = ->$scope.player =$element.flowplayer("/path/to/flow.swf",夹子:音频播放:假)$scope.$on开始"，->$scope.player.play()链接:(范围、元素、属性)->scope.init_player()

]

解决方案

查看这个 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 模板

<视频><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"></视频><div class="fp-playlist"><a class="is-advert" href="http://stream.flowplayer.org/download/640x240.mp4"></a><a ng-repeat="videoConfig.playlist 中的视频" href="{{video}}.mp4">Video {{$index + 1}} </a>
<div class="preroll-cover">pre-roll</div>

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

I'm trying to make accessible a flowplayer media player using a directive. so that parent controllers can broadcast events and then the player just responds to those events using listeners. the events are working but the player is undefined so not really working. my problems are: 1) player not initializing. - i must not be setting this up correctly. 2) I want the player object available in the scope as $scope.player so I can tell it to $scope.player.play() or $scope.player.stop(). something is missing in my understanding of controller, vs link as well as initialization of the player when the DOM is ready as I'm not able to assign the player to a scope variable to start/stop it. I'm able to init the player using jquery from the console, so it seems my init function is just not running at the right time?

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

]

解决方案

Check out this mediaPlayer directive. It works with flowplayer, mediaelement, and pure html5. It could work with other player libraries, but that is all I have tested so far.

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

Everything is based off of templates, so any of the flowplayer demos that are on the site can be created by just creating the appropriate HTML5 video template.

This is the HTML to call the flowplayer

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

{{mediatype}} would equal "flowplayer" or whatever function you want to call on the element. So if you wanted to create a mediaelement player then you would set media-type="mediaelementplayer". The template url point to whatever template you would like to render, which is what builds the playlists and such.

Here is a possible flowplayer template

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

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

这篇关于来自指令的媒体播放器对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！