#140 ✓ checked-in
Brett Gaylor

Youtube support

Reported by Brett Gaylor | November 17th, 2010 @ 11:45 AM | in 0.4

Lets support youtube in our 0.3 release! Both flash and HTML5.

Comments and changes to this ticket

  • Scott Downe

    Scott Downe January 20th, 2011 @ 01:26 PM

    • Milestone order changed from “6” to “0”

    I am not sure how to get this data from youtube, but basically we have to be able to get the video's location on the page, and its current time needs to be registered with popcorn at regular intervals.

    So, we currently get the HTML5 video's current time from the timeupdate event, which just fires a callback function when the video's current time changes, and we decide what to do in that callback function. We have to figure out a way to emulate this process with a youtube video, and a way to display the video on the page.

    There may be other pieces of data we need, like its total duration, its x and y position on the page, its height and width maybe?

  • vvasabi

    vvasabi January 20th, 2011 @ 01:29 PM

    • Assigned user set to “vvasabi”
  • annasob

    annasob January 20th, 2011 @ 01:30 PM

    I believe youtube has an API that can help with this

  • David Humphrey

    David Humphrey January 20th, 2011 @ 01:35 PM

    This ticket is awesome, I can't wait to see it fixed. I think we probably want to figure out how to use the YouTube API for this, vs. messing with the dom directly.


  • annasob

    annasob February 8th, 2011 @ 05:32 PM

    • Milestone changed from 0.3 release date to 0.4
    • Milestone order changed from “8” to “0”
  • vvasabi

    vvasabi February 14th, 2011 @ 12:24 PM

    I'm not sure if I am understanding this ticket correctly. Based on the information presented here, the goal seems to be adding support for Youtube's < embed /> and < object /> tags on top of HTML 5's < video /> tag. If that is the correct expectation, then I have a quick working sample here. This current version on github hacks into the internals of popcorn, since I'm not sure how the plug-in architecture supports adding new video formats. This is probably not the best way to do things, so I'm asking for help here.

    If I'm not understanding this ticket correctly, and in fact the intent of this ticket is to be able to load and play Youtube videos while the main < video /> runs, then I'm doing it wrong. Practically speaking, both types of Youtube support may be desired.

    Please let me know how I should proceed.

  • annasob

    annasob February 24th, 2011 @ 12:41 PM

    vvasabi are you making any progress on this. Please post anything new you come across. This will need to make it into 0.4

  • vvasabi

    vvasabi February 24th, 2011 @ 01:54 PM

    Sorry, but I will get back on track on this soon. As per #324, I should be able to create an adapter for Youtube in less than a week. That should make it possible to make it into 0.4.

  • vvasabi

    vvasabi February 27th, 2011 @ 05:53 PM

    The draft of the wrapper is done. The tree of the plug-in is available at https://github.com/vvasabi/popcorn-js/tree/ticket-140-youtube-wrapper. Since I made some minor modifications to the core, I tried to run the tests. However, because there are failures with or without my modifications, I cannot tell if my modifications break things or not.

    An online demo (using stevenaw's code) is available at http://bsd.bradchen.com/dps909/popcorn-js/plugins/youtube/popcorn.y.... This demo currently works with Firefox 3.6, Safari 5 and Chrome 9.

    Here are some comments about implementing the HTMLMediaElement interface. Two features that are not likely to be supported by Flash-based players are playback rate change and fine details about network status. At the bottom of my plug-in's script, I have a detailed list of them. We just need to make sure that Popcorn's functionality does not depend on the unsupported features, so that wrapper developers can get away not supporting them.

  • vvasabi

    vvasabi February 27th, 2011 @ 05:56 PM

    • State changed from “new” to “peer-review-requested”
  • vvasabi

    vvasabi February 28th, 2011 @ 09:07 AM

    By the way, I just thought of one potential problem with Youtube video. Since Youtube automatically displays related videos, what should Popcorn do when a user goes from one video to another?

  • Rick

    Rick March 3rd, 2011 @ 11:21 AM

    • State changed from “peer-review-requested” to “review-needs-work”

    I'd like to see a consistency created between this and the vimeo play plugin #280 - that branch has a new directory called /players/ which i think is good from an organizational standpoint.

    Can you guys connect and create a plan to normalize - that would be awesome.

  • vvasabi

    vvasabi March 3rd, 2011 @ 11:35 AM

    Sure. Though, I was hoping for a general direction on how such support should be implemented. Looks like we will work it out ourselves.

  • Rick

    Rick March 3rd, 2011 @ 11:46 AM

    You're pioneering the "player as a plugin" idea :)

    Also, feel free to ask for guidance in the IRC channel or via email if you need it

  • Steven W

    Steven W March 4th, 2011 @ 12:58 PM

    vvasabi, lets put our heads together so we can normalize our approaches and try and sprint both Youtube and Vimeo into 0.4. I'm often in IRC, or you can reach me by email. Until we connect, you can review my progress in #280.

  • vvasabi

    vvasabi March 4th, 2011 @ 01:07 PM

    Sounds good. I won't be able to do it today, but I will definitely try to do that tomorrow. I will update my comments in #280.

  • Steven W

    Steven W March 9th, 2011 @ 04:51 PM

    • Assigned user changed from “vvasabi” to “Steven W”

    I'm assigning this to myself to extend vvasabi's work alongside my own on #280 to reflect any changes as the result of today's discussion regarding #324 (https://webmademovies.lighthouseapp.com/projects/63272/tickets/324-....

  • David Humphrey

    David Humphrey March 9th, 2011 @ 04:54 PM

    Thanks, Steven. Drive this bad-boy into the tree!

  • vvasabi

    vvasabi March 9th, 2011 @ 04:59 PM

    Thanks, Steven. Let me know if you need anything from me.

  • vvasabi

    vvasabi March 11th, 2011 @ 02:56 AM

    Steven, as per our discussion, I have used your code as a starting point and normalized my code a bit. It's available at the tree https://github.com/vvasabi/popcorn-js/tree/ticket-140-youtube-norma.... I have also tried to observe some of the style rules and removed all the switch statements.

    I have a few questions for you. I'm still not crystal clear about the purpose of LikeADOM object. It seems to me that it is a generic object for event storage, and that the same chunk of code can be shared by other player plug-ins. If this is the case, then there may be opportunity for it to sit somewhere outside the vimeo plug-in, so that it can be better shared. Also, since it deals mostly with events, DOMEventManager would probably be a more suitable name. (Using a name with "Manager" suffix is laziness by the way, as it is also very vague. See if you could come up with a better name.)

    For LikeADOM.addEventListener, what does the doFire parameter do?

    For LikeADOM.addEventListeners, where is an array of functions specified?

    In your code, the vimeo plug-in allows users to pass in a video url, and the plug-in automatically loads the video url in the iframe specified. I think this is great and is very convenient. For the Youtube plug-in, I would also like to follow suit at some point. Since Youtube sits in an < object > and/or < embed > element, at the moment it is more difficult to do without dependency to the swfobject library. Implementing that would require a bit of research and/or borrowing code from the swfobject library, in order to ensure cross-platform compatibility. Seeing the pressing deadline of 0.4, that capability for the YouTube plug-in may probably have to wait.

    Currently, I have not implemented the action deferral mechanism, as you have done for vimeo. I think we may not have enough time to do it for 0.4.

    Let me know if you need anything else from me.


  • Steven W

    Steven W March 12th, 2011 @ 09:10 PM

    vvasabi, awesome work and great changes. To answer a few of your questions:

    LikeADOM should be outside, but those changes should be a part of #324.

    Ignore the doFire argument in LikeADOM.addEventListener, it should be taken out. I was trying to emulate the interface of the DOM's HTMLElement.addEventListener but it was just a dummy value and is unnecessary. The array of functions for LikeADOM is defined in the makeHandler function. The reason for it being separated out is that it made it easier to efficiently transfer deferred events if I could check once if existing event listeners for a given event had already been queued. Deferred events were primarily required because of using getScript to load the Vimeo JS API. Chrome would try playing the video before the script was downloaded and the API could be hooked up.

    Time's tight, so I'm going to start working on these in case you don't see this. Let me know if you have any objections to these or want to tackle them yourself.

    • We will need to rename raiseEvent to dispatchEvent for the core's trigger function to work with the wrappers
    • We don't want to use swfobject, but it should be possible to work with a URL via the 'cueVideoByUrl' and/or 'loadVideoByUrl' API functions.
    • I know the API function onYouTubePlayerReady is required by Youtube, but I feel that having it in the HTML file breaks data/dependency hiding. We should probably move it to the js file and have it call any load event listeners. That way the code is simplified on the HTML page, and if the Youtube API changes we only need to change and redistribute the js file. To get this to work, we'll need to create a registry of all Youtube players like so:
    // JS File, at the very top
    function onYouTubePlayerReady(playerId) {
    // Retrieve the instance to the player and dispatch the event
    ( function( Popcorn ) {
    // By putting it here, it can be used across all instances but is hidden
    var registry = {};
    // Rest of the file follows
    // JS File, somewhere inside the init function
    registry[playerId] = this;
    // HTML page
    var popped = Popcorn( Popcorn.youtube( 'video' ) );
    poppped.listen("load", function() {
    // Setup code here
     element( 'player-duration' ).innerHTML = poppped.duration();
    // Rest of the setup code

    Look for me on IRC or send me an email if you need to reach me. I'll hold off on starting for a little bit to give you the chance to get back to me. Thanks :)

  • Steven W

    Steven W March 13th, 2011 @ 07:21 PM

    I've worked on this and implemented the above. Passing the url into the constructor was a bit difficult. Videos could be cued, but for timing reasons it was difficult to assign to the instance variable "duration" to reflect the new video. In the end, supplying the constructor with a url was taken out.

    My commits are here: https://github.com/stevenaw/popcorn-js/commits/140_Steven

    I may take another shot at giving the constructor a url, but that withstanding I think this one's just about tree-driven.

  • Steven W

    Steven W March 15th, 2011 @ 01:25 AM

    Url is now accepted as the second constructor argument, and some other minor fixes have been included. I've uploaded two versions.

    The first uses minimal core changes, with the Youtube plugin polling for changes to its currentTime and volume attributes, seeking or changing the volume when found. Irregular timer firings meant I had to set the difference threshold between the current time and the last checked times as 0.5 seconds to eliminate false positives for seeking. I also found that events fired in an unpredictable order, making the current unit test for this unreliable.

    The second involves a few more core changes, and expects currentTime and volume to be either functions or attributes. I found this approach less "clunky feeling" to code and run.

  • vvasabi

    vvasabi March 15th, 2011 @ 01:47 AM

    Steven, thanks for the hard work. My experience was that the order of the events fired was pretty reliable, provided that the video had been preloaded. The reason for the events to be fired out of sequence may be due to the cuing of video with script.

    Nonetheless, the tests that I wrote were not the best way to test things. As you have experienced now, they rely on difficult-to-control external factors. It would probably be better to come up with better tests.

    By the way, it seems that player plug-ins have evolved to become more and more complicated. IMHO, this may not be a good thing, as new plauer plug-ins will be difficult to write as well. So, after the initial player plug-ins become more stable, let's see if we could construct a simple template for future player plug-ins.

    Again, thanks for putting in lots of effort into this plug-in. It seems that what appeared to be a straightforward thing is not so simple after all.

  • Steven W

    Steven W March 15th, 2011 @ 10:52 AM

    Perhaps I should've explained better. vvasabi, don't worry your code passed the player tests fine, and the tests worked well for me once the video loaded. It's just a part of updating code that tests need to be updated to adapt :)

    It's just that in part of adapting the timeupdate and volumechange mechanisms for our approach at #324 to polling for changes, those events began to fire within a 0.5 second window rather than instantly. The delay in event firings was an unforeseen result of this approach, and now that we've experimented and got both working I'm hoping to discuss the pros and cons of both with scott today before final landing.

  • annasob

    annasob March 15th, 2011 @ 04:29 PM

    Ok so you need to change 2 things:
    - You must specify via comment that this plugin needs a SERVER, you must also throw if a server is not present, see line 1421 of popcorn.unit.js for an example

    • You need to get rid of object in the html. Pass in a div id in the constructor and make the swf object on the fly and embed into the div.
  • David Humphrey

    David Humphrey March 15th, 2011 @ 04:34 PM

    Steven, the three of us were just playing with this and debugging/reviewing. It's the first time I've seen it running live, and it's amazing. Great work to you and all who have been working on it.

  • Rick

    Rick March 16th, 2011 @ 11:10 AM

    Following up annasob's comments - does the API provide a way of creating the object element?

  • Steven W

    Steven W March 17th, 2011 @ 02:35 AM

    • State changed from “review-needs-work” to “peer-review-requested”

    Rick, it doesn't but I've used swfobject to do that. Fixed this one up now and tested on FF 3.5, Chrome and FF 4 Beta.


    Please review :)

  • vvasabi

    vvasabi March 17th, 2011 @ 01:28 PM

    I just finished reviewing. A few very minor problems, ones that don't hinder functionality:

    * comment beginning from line 785 is now somewhat inaccurate * line 808 missing a comma * line 852 missing a semi colon * line 936 double semi colons * line 1102 formatting is off

    Unit tests passed in Mac Safari 5, Chrome 10, and FireFox 3.6. By the way, YouTube has a nasty tendency to stop playing after seeking, if the time seeking to is not yet buffered. Though, I'm not sure if there is a way to work around the problem.

  • annasob

    annasob March 17th, 2011 @ 01:32 PM

    • State changed from “peer-review-requested” to “super-review-requested”

    This looks good to me PR+

  • annasob

    annasob March 17th, 2011 @ 02:13 PM

    <benmoskowitz> seems to work for me
    <benmoskowitz>    ff4 rc1, safari 5, chrome 11,  mac os 10.6
    <rwaldron> Works: Chrome 10, 11, 12; FF 4b12, 4; XP Pro - the demo that is... there are still weird failing errors, that i suspect are just wrong tests
  • annasob

    annasob March 17th, 2011 @ 03:17 PM

    • State changed from “super-review-requested” to “staged”

    Filled tickets on: Offset calculation: #421, Width and Height: #422, Player Normalization #423, Static SWFObject #424

    Staged in annasob/popcorn-js commit

  • annasob

    annasob March 21st, 2011 @ 02:47 PM

    • State changed from “staged” to “checked-in”
  • annasob

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

Referenced by