Add support for vimeo.com videos
In addition to html5 videos, we need to support other popular video sites, like youtube.com (ticket #140), vimeo, etc.
Vimeo has a limited, but useful js api for embedding and loading videos into an iframe. The embedded flash object have a number of events we can use:
We will have to create a parallel timer object that plays nicely with play/pause/etc in order to support time-based actions; but I think it's doable.
Before we start this ticket, I'd like to know the proper way for going about this, specifically, how do we want to support a youtube/vimeo/xyz video? Ideally the user can provide a URL to a video and it "Just Works."
Do we need a metabug for this that fixes the constructor to handle this and other non-html5 cases?
Comments and changes to this ticket
I would think that the best approach would be for us to use our own swfobject, and interact with the vendors' chromeless as apposed to trying to normalize disparate interfaces from all the different video vendors.
Unfortunately, Vimeo does not supply a chromeless API the only thing they give you in their API is a fragment:
We have to make a high level decision about the kinds of third party code we are going to try to play nice with, and how open they are going to have to be.
- Milestone set to 0.3 release date
- Milestone order changed from 14 to 0
If we are going to do our own timing, we should compare it to ontimeupdate, and if it is faster, drop ontimeupdate for the code we need for the above.
I think whatever we do to make it work, it should be used as closely to the current HTML5 implementation as possible. Possibly just by id or existence of data-timeline-sources inside the object or embed or whatever tag, doesn't matter what it is, just so long as it is a tag, and then let the vimeo or youtube etc plugin control the url, if at all possible.
With the presence of our own timing, all we need access to is an onPlay, currentTime and onPause, which exist in vimeos API, normalizing the players doesn't seem too difficult. Just have our own internal controls for what we need, that wraps the needed api for the used format. The likeliness that a player has what we need is high. We need a way to check what kind of player we are, and set the internal controls accordingly.
Just checking in. I've been getting something together for this while 324 is going ahead.
I have a demo checked into github (https://github.com/stevenaw/popcorn-js/commit/280)
The parallel timeline should be doable, see the demo in my comment on #324
As it is, my first run at this one was using Vimeo's time update event (onProgress), but that seems to only fire every 0.5 seconds. If a custom timeline can be made to work, I think it would be a better choice. The only way it would be reliable is if onPause is fired when the video stops to buffer. Their documentation says it fires only when the video is explicitly paused, will take a bit of experimentation.
Unfortunately, a parallel timeline doesn't look very doable. There is no way to capture when the video has to stop to buffer, which means an internal timer quickly comes out of sync. Using the Vimeo-supplied events, I have a working demo:
Steven W, if you don't mind, I would like to use your test html code to test the Youtube wrapper. By the way, running your code results in cross domain problem of Ajax. It appears that your code would need to access remote resources.
ps. Dividing this ticket number by 2 gets the ticket number of Youtube support. What a coincidence. :-)
vvasabi, you sure can. You can get my current code here:
I'm nearly done with Vimeo, all that's left is documentation, debugging a timing-related issue when using Popcorn plugins, and to use Popcorn.getScript() in popcorn.playerVimeo.js to resolve dependency loading.
In order to keep some DOM-related behaviour like the ability to easily get the embedded video with getElementById(), I had to put functions on the <iframe> element rather than wrapping it in a js object. The cross-domain issue is probably there because the Vimeo player is embedded in an iframe. It shouldn't stop the player from working but let me know if there's an issue. I've tested it on Windows 7, on FF 3.5, FF3.6, FF4Beta, Opera 11, Safari 5 and IE 9 Beta.
Checking in again, because of how close we are to release. It's not completely working using getScript, but if we take the dependency loading out of the equation, this is the cross-browser working product I've got:
Dependency loading currently works in FF 3.5-4 & IE 9, but not Chrome 9, Safari 5 or Opera 11. The reason for the difficulties is that the Vimeo API relies on the load event of the embedded iframe being subscribed to through the API in the DOMContentLoaded event. Unfortunately, the API doesn't seem to always be loaded by the time that code is fired. I'm still going on a workaround, but what does work is here:
And the hack-around worked. Finished product here:
Tested to work on Windows 7 in Firefox 3.5, 3.6, 4 Beta 12 and Chrome 9.
Also works partially on:
- Safari 5 (Vimeo Flash player crashes when trying to call Popcorn.play())
- IE 9 Beta (Track Events don't seem to be fired)
Does not work on Opera. An uncaught DOMException is thrown within the Vimeo API when posting data to the embedded iframe. Could be related to #374, as it wasn't occurring before switching to using getScript().
Will put this to peer-review once I can write a few tests and connect with vvasabi. A lot of what's in place could be abstracted out.
We now have unit tests.
A note about the Safari 5 issue mentioned in the above comment: It seems to be caused by unloading the video, and occurs whether the video is playing or not. It looks like something between the Vimeo-Safari layers, beyond our reach.
These unit tests pass in Windows 7 on FF 3.5, 3.6, 4beta12, Chrome 9, and Safari 5 (excluding crash). Pending abstracting out some of this stuff and normalizing the code with vvasabi, this baby's done.
- State changed from blocked to peer-review-requested
I've updated the code base and unit tests to meet the "Normalized Changes" outlined in #324.
Tests run and everything works under Windows 7 in Firefox 3.5, 3.6, 4 beta 12, Chrome 9, and IE 9 beta.
Ready for review. :)
When I was going through Vimeo touching it up, I noticed Vimeo released a new version of their HTML5 API, which is 'limited to Safari and Chrome', though worked on Firefox 4 RC.
Unfortunately, the latest update broke playback for Firefox 4 RC (http://vimeo.com/forums/topic:35399). I've reworked the Vimeo wrapper to use a Flash object, but for when Vimeo does change their mind the HTML 5 source can be found here:
The Flash version is done, and ready for review. Tested on Firefox 3.5, Firefox 4 RC, Chrome 9 and Safari 5:
- State changed from peer-review-requested to under-review
Scott, Humph and I discussed your HTML5 api hiccup in IRC and we determined that focus should be on the flash video api for the time being.
That being said, I'm going ahead with reviewing your 280_Flash branch
- State changed from under-review to review-needs-work
I'm concerned about the external swfobject.js dependency - it's clearly a requirement, but i wonder if we can get the uncompressed source and just include it wholesale into the popcorn.vimeo.js file? Unfornately, the compressed code will not make it through our own linting and compressing steps.
- State changed from review-needs-work to peer-review-requested
I've updated the player to use the de-minified swfobject source. Also, a great many plugins have been added to the demo.
Tested on Firefox 3.5, Firefox 4 RC, Chrome 9 and Safari 5:
Ready for review.
Drive-by review comment... I think this is wrong for situations where the content is embedded within other content vs. the body:
You want to look at the node's parent(s) as well, see how we do it in processing.js:
(from [ac7935ddb563ab10159aad71d58831e54aeb4961]) [#280] Wrapper coded, unit tests written https://github.com/rwldrn/popcorn-js/commit/ac7935ddb563ab10159aad7...
(from [ea2d5c4540431e477b07e4880392bb775a9d70f0]) [#280] Bugfixes in popcorn core for duration, mute implementation in player https://github.com/rwldrn/popcorn-js/commit/ea2d5c4540431e477b07e48...
(from [dbe3fdf68e49ab0e51b60888ee866e206b4285b5]) [#280] Quick fix to allow pause(), play(), load(), mute() to work on native https://github.com/rwldrn/popcorn-js/commit/dbe3fdf68e49ab0e51b6088...
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.