Using VideoJS with YouTube

I have been using VideoJS for some streaming videos and mp4 videos, but also wanted to pull YouTube videos into the player along with the other videos I had on the site. First of all, the working example. Then, the list of problems ;)

### VideoJS and Youtube Example

###How to replicate the Youtube and VideoJS integration:

First, clone or download [this fork of videoJS](https://github.com/jhurliman/video-js) and build it.

Next, place this in your webpage’s `` (needs to be there to work with older browsers). Also fix the odd character after the href in the first line (sorry about that) and make sure the path points to the correct location for the files.

And then place this in your document’s ``:

There is also an example file in the `dist` directory which will only be created after you “build” the fork you have cloned from github.

### VideoJS and Youtube Problems With Integration

I tried simply giving VideoJS the URL to the YouTube video but that didn’t workout so well.

Here are a few things that might help you out with playing You Tube videos in Video JS:

1. There is a [pull request](https://github.com/zencoder/video-js/pull/157) for changes that would allow VideoJS to work with YouTube. A few problems with it are:
* Has not been pulled in
* Both the Video JS maintainer and the pull requestor have become busy with other projects so it might not get pulled in ever, but it is mentioned that it would be better to have this as a plugin. I’m not even sure if VideoJS is set up to allow plugins easily at this point, which is a shame because I really like VideoJS
* You can also get the [jhurliman’s fork of VideoJS](https://github.com/jhurliman/video-js) which actually DOES WORK TO PLAY YOUTUBE VIDEOS but unfortunately hasn’t been kept up to date with the regular videoJS and so normal videos don’t play well and the Javascript API was causing me problems :( …. BUT it does work to play YouTube videos with VideoJS which is very encouraging
2. You will find several places on the VideoJS forums where people have submitted patches and changes which allow it to work with youtube. Since nothing has been officially pulled in I find that it is quite difficult to fathom maintaining this functionality with snippets of code from pastebin
3. VideoJS has a GitHub repo and ACTUALLY DOES have a [YouTube branch](https://github.com/zencoder/video-js/tree/feature/youtube)! Cool! But it has not been updated in several months and sort of looks like it is not being maintained. I tried switching to this branch in Git and merging changes into the Master branch but with limited success.
4. The main difference with the syntax of videoJS and youtube is in the video style – the one that I’ve seen a lot is: `type=’video/youtube’` for the `` tag. There are two pieces of code below showing this as well as how to change that with the JavaScript API. It worked mostly fine for me for Youtube Videos with jhurliman’s fork but it wasn’t stable enough for me to be comfortable using it in production mode.

##VideoJS and Youtube Code Samples

This is how you set up a You Tube video using the VideoJS branch by jhurliman:

Notice the big difference is the `type` paramater in the `source` tag.

Next, this is how you *should* be able to load videos and specify their “type” with the javascript api:

myPlayer.src([{ type: ‘video/youtube’, src: ‘http://www.youtube.com/watch?v=v1uyQZNg2vE’ }]);

And for an mp4:

myPlayer.src([{ type: ‘video/mp4’, src: ‘http://video-js.zencoder.com/oceans-clip.mp4’ }]);

Again, I had luck with Youtube video only with the `jhurliman` branch, but then when I tried to use mp4’s with it I would get a lot of javascript errors. I hope this is a feature that is pulled into VideoJS soon because I love the player and love that it is open source.

A few other things that I wish VideoJS could have:

* Support for IE8 and maybe even IE7 – or at least a graceful fallback, warning, or link to download the video
* HLS Support – looks like this will be important soon

Related Posts:

• No Related Posts