#539 ✓ resolved
brianchirls

YouTube Player Plugin doesn't work with multiple videos and multiple Popcorn instances

Reported by brianchirls | May 23rd, 2011 @ 10:34 PM | in 0.9 (closed)

Let's say you run something like this:

var popcorn1 = Popcorn( Popcorn.youtube( 'video1',url1, { width: 640, height: 480 } ) );
var popcorn2 = Popcorn( Popcorn.youtube( 'video2',url2, { width: 640, height: 480 } ) );

...and then add a bunch of track events to both popcorn instances.

Now, whichever video you play, the events for popcorn2 will run. i.e., whatever is the most recent instance of popcorn.

The problem is in registerYoutubeEventHandlers. When the global event handlers are called by Flash, the youcorn variable will have been overwritten. You can solve this by creating a unique global function for every instance and wrapping it in a proper closure that saves the video id or other identifier.

This needs to be done for both stateChangeHandler and errorHandler.

Comments and changes to this ticket

  • Scott Downe

    Scott Downe May 24th, 2011 @ 09:48 AM

    • Milestone set to 0.7
    • Milestone order changed from “62” to “0”

    I can confirm this is broken.

    Reduced test case:

    <html>
      <head>
        <title>Popcorn Youtube Player Example</title>
          <script src="../../popcorn.js"></script>
          <script src="popcorn.youtube.js"></script>
          <script src="../../plugins/subtitle/popcorn.subtitle.js"></script>
          <script>
            
            document.addEventListener( 'DOMContentLoaded', function() {
              var popcorn1,
                  popcorn2;
              
              popcorn1 = Popcorn( Popcorn.youtube( 'video1', 'http://www.youtube.com/watch?v=9oar9glUCL0' ) );
              popcorn2 = Popcorn( Popcorn.youtube( 'video2', 'http://www.youtube.com/watch?v=9oar9glUCL0' ) );
              
              popcorn1
                .subtitle({
                  start: 5, // seconds
                  end: 15, // seconds
                  text: 'This is overlaid on top of the video. You can hightlight it!',
                  language: "en"
                })
              .play();
    
              popcorn2
                .subtitle({
                  start: 5, // seconds
                  end: 15, // seconds
                  text: 'This is overlaid on top of the video. You can hightlight it!',
                  language: "en"
                })
              .play();
    
            }, false );
    
        </script>
      </head>
      <body>
        <div>
          <div>
            <div id="video1" style="width: 360px; height: 300px;" ></div>
            <div id="video2" style="width: 360px; height: 300px;" ></div>
          </div>
        </div>
      </body>
    </html>
    
  • Scott Downe

    Scott Downe June 2nd, 2011 @ 05:00 PM

    • Assigned user set to “Scott Downe”
  • Scott Downe

    Scott Downe June 2nd, 2011 @ 05:21 PM

    • State changed from “new” to “assigned”
  • Rick

    Rick June 18th, 2011 @ 11:39 AM

    • Milestone changed from 0.7 to 0.8
    • Milestone order changed from “36” to “0”
  • Rick

    Rick August 23rd, 2011 @ 01:41 PM

    • Milestone changed from 0.8 to 0.9
    • Milestone order changed from “17” to “0”
  • Scott Downe

    Scott Downe September 22nd, 2011 @ 03:00 PM

    • State changed from “assigned” to “blocked”

    Blocked on #423.

  • cadecairos

    cadecairos September 27th, 2011 @ 03:27 PM

    tests included with the new youtube player show this is fixed. #423 will resolve.

  • David Seifried

    David Seifried September 28th, 2011 @ 04:24 PM

    • State changed from “blocked” to “resolved”
    • Assigned user cleared.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins

Pages