How to use the code plugin with popcornjs

Question

I am doing my first steps with Popcornjs and I am trying to use the code plugin but not sure how to do it.

I followed this example, and got the video to play, but I can not use the plugin.

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

// the following lines fail

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

// Object # has no method 'code'

How do I use the plugin?

Cheers

Answer 1

It isn't working because you didn't actually wind up creating a popcorn instance. The naming conventions behind the wrappers are somewhat confusing and should probably be changed.

When you created a new HTMLYouTubeVideoElement object that will just control basic player interactions with the YouTube video. To create a Popcorn instance with that, you simply pass that object to Popcorn. Your code should wind up being something like the following:

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

That will create a new HTMLYouTubeVideoElement object and then pass it to Popcorn and create a Popcorn instance. Popcorn instances are needed to add new events to the video.