Skip to content
This repository

Updated YouTube Tech #157

Closed
wants to merge 17 commits into from

10 participants

John Hurliman Steve Heffernan Dominic jameswann Matt Gray xbgmsharp Aurélien Thieriot Zlati Pehlivanov gefangenimnetz clarkewd
John Hurliman

I wrote a new YouTube tech following the latest VideoJS API conventions. It uses the YouTube iFrame embed method which automatically chooses between HTML5 or Flash when serving videos, staying true to the HTML5 nature of VideoJS :-).

I tested all of the basic functionality with the following platforms:

  • Chrome 17.0.963.79 on OSX Lion
  • Chrome 17.0.963.79 on Windows 7
  • iPhone Safari on iOS 5.0
  • iPad Safari on iOS 5.1

Testing on additional platforms and more API feature testing (such as swapping out the playing video with a src() call) is welcome.

Steve Heffernan
Owner
heff commented March 22, 2012

Heck yeah, thanks for the help. I'm trying to get v3.2 out the door and then I'll dig in more. Cheers. -heff

John Hurliman

On my fork I also have a functional Vimeo tech, although it is limited compared to the YouTube tech. YouTube will give you a "chromeless" player allowing a VideoJS skin to be overlaid, while Vimeo insists on their interface always being present. Having the VideoJS and Vimeo interfaces fight with each other is no good, so I opted to auto-hide VideoJS controls with Vimeo and just use their interface. Better than nothing if you want to embed Vimeo videos with a universal player, but many people probably won't use this so I broke out each tech into a separate file to make building without YouTube or Vimeo support easier. I haven't looked at the plugin refactor branch so I'm not sure if this aligns with that work or not, but it seemed like a good first step.

I've also been working on audio-only support (using the latest video-js-swf binary for Flash mp3 playback) which I will commit to my fork when I get something working. My goal is to have one player that can handle audio and video across a wide number of providers and all popular browsers/devices. This is getting very close to that goal!

Steve Heffernan
Owner
heff commented March 22, 2012

Awesome. Bummer about Vimeo, but I'm sure most people will be fine using the Vimeo interface and just happy to have a universal way to embed video.

I'm glad you were able to dig into audio support. The functionality has been in the swf for a bit, and just haven't had the time to run tests. Let me know how it goes.

John Hurliman

It looks like the events being fired are not quite matching up with what video.js requires to function properly. The first issue I'm running into is that the "playing" event is fired but not "play", which is listened for to swap the poster and big play image with the control bar.

A hacky fix in V.flash.onEvent() would be adding if (eventName === "playing") player.triggerEvent("play"); but this doesn't seem right. When should "playing" be fired vs. "play"?

Steve Heffernan
Owner
heff commented March 31, 2012

Play should be triggered when play() is called or when autoplay is triggered. Playing should be triggered whenever the video goes from paused to playing, and I believe only once the video is actually playing, not just when it's been told to play. Digging into this more today. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-definitions

Steve Heffernan

What was the need for modifying JSON?

Owner

Oh, vimeo. I might split that out into Vimeo's tech. Trying to keep the core lib as small as possible.

Dominic

I am noticing some issues with the full screen functionality in my tests. On transition to and from full screen the video is paused, and when I click play, it starts over from the beginning. Also, after a full screen transition, the controls stop working and clicking on them causes the youtube javascript to throws this error: NPMethod called on non-NPObject wrapped JSObject!.

Other than that, it seems to be working great. Thanks for a great plugin.

Dominic

Also, one really minor thing I saw was that right now it doesn't check the protocol (https vs http) in the function to get the poster image. So, users could get the "unsecured resources on a secure page" warning that we all love so much.

John Hurliman

Thanks for the heads up, I'll take a look at both issues. Which browser/OS were you using when experiencing the fullscreen issues? Just in case I have any trouble reproducing it.

Dominic

Thanks. I was testing in Firefox 11 on Windows 7. When I get a chance I'll test some other browsers as well.

Dominic

Just tested in a couple more browsers (all on Windows 7). I'm not seeing any issues in IE8+ (there might be an issue with IE7, but I can't confirm that at the moment). In Chrome, everything seems to work perfectly, but I do get the following error in my console when the video is initially setup:

Unsafe JavaScript attempt to access frame with URL http://3strandsmarketing.com/video.php from frame with URL http://www.youtube.com/embed/Tblcf8MGorY?disablekb=1&enablejsapi=1&iv_load_policy=3&modestbranding=1&playerapiid=vjs-test-youtube_youtube_api&wmode=opaque&rel=0&showinfo=0&showsearch=0&controls=0&autoplay=0&loop=0&hd=0&origin=http%3A%2F%2F3strandsmarketing.com. Domains, protocols and ports must match.

Dominic

Just noticed another issue. It seems like the ready action for the main _V_ object isn't triggered if the video is not visible when it's setup. I don't know if this is just a consequence of YouTube's embed method, but I figured I'd bring it to your attention anyway.

After tinkering with this a bit, it seems like this might be connected to the NPMethod called on non-NPObject wrapped JSObject! error I mentioned earlier. I'm having trouble pinning down the exact cause, but it seems like the two problems might be connected.

jameswann

I found a small bug in core.js (line 116), you need to change it to this line:

techOrder: ["html5","flash", "youtube"],

This will allow more programmatic instantiation.

Matt Gray

I moved line 94 up to 92 to prevent parentNode returning as null when switching between techs

Fixed in ca8102, thanks!

Matt Gray

All seems to work fine for me in IE7,8,9, FF 11 and Chrome 19 once my above alteration had been made.

The only issue I'm seeing is the the UI doesn't reset when the tech switches (due to an .src() call). This just means that the progress bar and play/pause button might show the wrong state until the new video starts playing so not a big deal. I don't know if this has ever been addressed in the zencoder master branch either but it might be something for the future.

Cheers

xbgmsharp

Could you provide a working example?

Aurélien Thieriot

Hi there !

Do you think there is a chance to merge this PR anytime soon?
It's an awesome work.

Thank you

Aurélien

Zlati Pehlivanov

yeah, I'm also user of that tech, it will be nice if we get merged all ull request that are waiting for half year already, minify was not so bad, I don't think closure is more important then fixing bugs with merge of pull requests that are fixing those bugs

gefangenimnetz

+1 for a merge.

Steve Heffernan
Owner

@jhurliman, would you be interested in breaking this out into it's own repo? I'm currently heads down on refactoring the core project, and looking to keep it very focused, as in only HTML5 + Flash, and only features supported natively by HTML5 video. Everything else would be plugins/modules.

John Hurliman

Sure. Let me know when it's ready.

clarkewd

+1 for getting this to a usable state

John Hurliman

To everyone following this thread: We've recently switched away from video.js at MOX due to the lack of HLS support in Flash. I'm still interested in using video.js for side projects and maintaining the YouTube plugin, but we have a launch on March 15th and I don't have time for any extracurricular coding before then. If someone wants to jump in and get started on this now please feel free, otherwise I'll get started probably early April (2013).

Aurélien Thieriot

Thank you for this update !

Can you tell us what are you using now?

John Hurliman

I'm evaluating JWPlayer 6 and the Yospace HLS SDK for Flash.

Steve Heffernan
Owner
Steve Heffernan
Owner
heff commented March 15, 2013

Closing this pull request for now since it's for the old version. There's a plugins page on the wiki for anyone who wants to create a youtube plugin.
https://github.com/zencoder/video-js/wiki/Video.js-Plugins

Steve Heffernan heff closed this March 15, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 17 unique commits by 1 author.

Mar 20, 2012
John Hurliman Initial commit of the new iFrame-based YouTube wrapper 3b1f6db
Mar 21, 2012
John Hurliman Fixed pause state, don't kill the initial poster image and big play b…
…utton, and playback issues when running from a local file
ce31d7e
John Hurliman Added youtube.html demo file to the build process, removed defunct te…
…ch/youtube.* files
efb37c1
John Hurliman Fix for Flash video rendering on top of controls on some platforms 03efd3d
John Hurliman Cleaner handling of player init params and added a new ytcontrols par…
…am to use the native YouTube player controls
ca916fb
John Hurliman Fixed volume controls 0c136d2
John Hurliman Hide video.js overlay since YouTube supplies its own overlay, and loo…
…ping fixes
89d6bcf
John Hurliman Hide the waiting spinner since YouTube has its own 34bf7e2
John Hurliman * Added Vimeo support and refactored tech plugins into separate files
* Added the full JSON object including JSON.stringify (needed by Vimeo)
* Small fixes for YouTube getters
* Vimeo tech using iFrame wrapper (uses built-in Vimeo controls instead
of VideoJS controls)
* Refactored techs into separate files
ee173f5
May 30, 2012
John Hurliman Prevent parentNode returning as null when switching between techs and…
… removed a JSHint warning

Courtesy of @e1fjl
ca81021
Jun 22, 2012
John Hurliman Merging with upstream d10d795
John Hurliman Applying fixes from John A. Baena (JAB) for YouTube playback on local…
…host and hiding video.js controls when native YT controls are enabled
d8fa124
John Hurliman Adding basic tech and YouTube documentation courtesy of John A. Baena…
… (JAB)
7d35d0d
Jul 01, 2012
John Hurliman Merge branch 'master' of https://github.com/zencoder/video-js 49b0b7c
Aug 08, 2012
John Hurliman Merge branch 'master' of https://github.com/zencoder/video-js c5883b0
John Hurliman Reverting an attempted fix for YouTube controls fighting with VideoJS…
… controls. Sometimes this throws an exception on init
fe84d59
John Hurliman Added a "native poster" option to preserve the <video> poster attribute cf2f965
Something went wrong with that request. Please try again.