如何使用popcornjs的代码插件

Question

我正在使用Popcornjs做我的第一步，我尝试使用代码插件，但不知道如何做。

我学习了这的例子，并播放了视频，但我不能使用插件。

Index.html：

<script src="bower_components/popcornjs/popcorn.js"></script>
    <script src="bower_components/popcornjs/wrappers/common/popcorn._MediaElementProto.js"></script>
    <script src="bower_components/popcornjs/wrappers/youtube/popcorn.HTMLYouTubeVideoElement.js"></script>
    <script src="bower_components/popcornjs/plugins/code/popcorn.code.js"></script>

Media.js

$scope.player = Popcorn.HTMLYouTubeVideoElement( "#media-player" );
$scope.player.src = "http://www.youtube.com/watch?v=DaN2Y2-wNSs";

//下列行失败

//$scope.player.code({
//    start: Popcorn.util.toSeconds( 2 ),
//    onStart: function () {
//        console.log( "I am here" );
//    }
//});

// Object #没有方法‘代码’

我该如何使用这个插件？

干杯

Answer 1

它不起作用，因为你实际上并没有创建一个爆米花实例。包装后面的命名约定有些混乱，可能需要更改。

当您创建一个新的HTMLYouTubeVideoElement对象时，它将只控制基本播放器与YouTube视频的交互。要创建一个爆米花实例，只需将该对象传递给爆米花。您的代码最终应该如下所示：

$scope.player = new Popcorn.HTMLYouTubeVideoElement( "#media-player" );
$scope.player.src = "http://www.youtube.com/watch?v=DaN2Y2-wNSs";
$scope.player = new Popcorn( $scope.player );

$scope.player.code({
  start: Popcorn.util.toSeconds( 2 ),
  onStart: function () {
      console.log( "I am here" );
  }
});

这将创建一个新的HTMLYouTubeVideoElement对象，然后将其传递给爆米花并创建一个爆米花实例。爆米花的例子是需要添加新的事件到视频。

Answer 2

要将第三方库集成到角中，您需要创建一个指令。任何与DOM相关的操作都需要创建一个指令。一旦创建了指令，就可以对指令的link函数中的元素执行这些操作。链接函数是在角编译代码之后出现的，您可以把它看作jQuery的document.ready，但它是元素级别的。

myapp.directive('popcornPlayer', function(){
  return:{
    restrict: 'EA',
    link: function(scope, element, attributes){
      var player = Popcorn.HTMLYouTubeVideoElement(element);
      player.src = attributes.src;
      player.code( /* stuff */ );
    }
  }
});

现在你可以做这样的事情：

<popcorn-player src="http://www.youtube.com/watch?v=DaN2Y2-wNSs"></popcorn-player>

还有卡巴拉摩！魔术。您也可能希望使用attributes.$observe来使其具有真正的角度魔法。