如何将代码插件与 popcornjs 一起使用

Question

我正在使用 Popcornjs 迈出第一步，我正在尝试使用 code plugin，但不知道该怎么做。

我按照this 的例子，得到了视频播放，但我不能使用插件。

索引.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>

媒体.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" );
//    }
//});

// 对象#没有方法'code'

如何使用插件？

干杯

Answer 1

它不起作用，因为您实际上并没有最终创建爆米花实例。包装器背后的命名约定有些混乱，可能应该更改。

当您创建一个新的 HTMLYouTubeVideoElement 对象时，该对象将仅控制播放器与 YouTube 视频的基本交互。要使用它创建一个 Popcorn 实例，您只需将该对象传递给 Popcorn。您的代码最终应该类似于以下内容：

$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 对象，然后将其传递给 Popcorn 并创建一个 Popcorn 实例。需要爆米花实例才能向视频添加新事件。

Answer 2

要将第 3 方库集成到 Angular 中，您需要创建一个指令。任何与 DOM 相关的事情都需要您创建一个指令。创建指令后，您将对指令的 link 函数内的元素执行这些操作。链接函数发生在 Angular 编译你的代码之后，你可以把它想象成 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 使其真正具有角度魔法。