javascript - 如何在Popcorn.js中使用代码插件

我正在使用Popcornjs做我的第一步，我正在尝试使用code plugin，但不确定如何去做。

我以this为例，并播放了视频，但无法使用该插件。

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

//对象＃没有方法“代码”

如何使用插件？

干杯

最佳答案

它没有用，因为您实际上并没有创建爆米花实例。包装器后面的命名约定有些困惑，可能应该更改。

创建新的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实例。需要爆米花实例将新事件添加到视频。