YouTube and Vimeo APIs
YouTube and Vimeo have nice APIs to allow JavaScript developers to control the playback of embedded content (oh, and YouTube has a new design). They’ve also updated the APIs to use the newer <iframe> embed style instead requiring <object><embed> flash tags. But as powerful as those APIs are, they are not consistent with each other and neither one conforms to HTML5 <video> properties or events so you can’t leverage your existing skills or code.
MediaElement.js HTML5 Wrapper
To make the YouTube and Vimeo APIs easier to use, I wrapped the MediaElement.js shim structure around their proprietary APIs to make them feel like HTML5. So for a YouTube video, you can use this <video> markup
<video id="youtube1" width="640" height="360"> <source src="http://www.youtube.com/watch?v=nOEw9iiopwI" type="video/youtube" > </video>
Then to build a full-fledged player that is CSS skinnable on top of YouTube Chromeless , you can simply call the MediaElementPlayer like this:
jQuery(document).ready(function($) {
$('#youtube1').mediaelementplayer();
});
Or you can skip MediaElementPlayer’s controls and build your own player using just the MediaElement wrapper which does not require jQuery (MediaElement is the wrapper which shims HTML5 support into old browsers, MediaElementPlayer is the full-fledged jQuery-based control bar built on top of MediaElement).
new MediaElement('youtube#', {
success: function(media, domNode) {
// add HTML5 events to the YouTube API media object
media.addEventListener('play', function() {
console.log('yeah, it is playing!');
}, false);
media.addEventListener('timeupdate', function() {
// access HTML5-like properties
console.log('current: ' + media.currentTime);
}, false);
// add click events to control player
myMuteButton.addEventListener('click', function() {
// HTML5 has a "muted" setter, but we have to use a function here
media.setMuted(true);
}, false);
}
});
Once the success event fires, the media object is a JavaScript wrapper that mimics the HTML5 Media API, but under the hood is really a wrapper around YouTube’s API. Nice right?
Gotchas
There are a few things you should look out for if you want to try it:
- This code is now in the official 2.4.0 release of MediaElement.js, but it should be considered experimental. I’d like to pull it out of the core and make it a plugin, but this will require some re-architecting.
- The Vimeo API wrapper is not finished yet. It will simply display the default Vimeo controls. (Also, unlike YouTube’s chromeless option, only Vimeo Pro users can totally remove controls)
- Some browsers (Chrome, IE) don’t allow HTML to be placed over an
<iframe>with Flash inside which makes MediaElementPlayer’s controls not work, so I’m using the pure Flash version of YouTube for desktop browsers - Fullscreen: JavaScript can’t initiate Flash’s true fullscreen, and Firefox still has terrible Flash support (if you try to adjust the size of a Flash movie’s surrounding DOM nodes, Firefox reloads it!)
This is just a quick tip for people encoding video for HTML5 (and using sweet HTML5 players like MediaElement.js). Go download a copy of ffmpeg, and if you’re on Windows, use this guide to set it up. Then use the following commands to create H.264, WebM, and Ogg videos, along with an image you can use as a poster.
REM mp4 (H.264 / ACC) "c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 -s 640x360 %1.mp4 REM webm (VP8 / Vorbis) "c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 -s 640x360 %1.webm REM ogv (Theora / Vorbis) "c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30 -s 640x360 %1.ogv REM jpeg (screenshot at 10 seconds) "c:\program files\ffmpeg\bin\ffmpeg.exe" -i %1 -ss 00:10 -vframes 1 -r 1 -s 640x360 -f image2 %1.jpg
I save this as a batch file and then just drag and drop videos on it to get everything ready for HTML5.
I”ve posted before about HTML5 video and based on what I found I released an HTML5 <video> framework and player called MediaElement.js. But I never got around to explaining the logic behind the new library so here it goes:
The Problems with HTML5 <video>
(1) Codecs
It has been well documented that browsers supporting HTML5 <video> don’t support the same codecs. Here’s the current breakdown of proposed(*) codec support including mobile browsers and plugins.
| <IE9 | IE9 | Firefox | Safari | Chrome | Opera | Andriod | iOS | WP7 | Flash | Silverlight | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| H.264 | - | X | X | X | X | X | X | X | X | ||
| OGG | - | - | X | X | X | ||||||
| WebM | - | X* | X | X | X | X* |
At first glance, the promise of HTML5 <video> seems awesome. Just a simple
<video src="myvideo.mp4" controls></video>
and you’re done right? Not quite. In reality there are all kinds of browser inconsistence that make this impossible. Here’s a run down of the problems:
1. Older browsers don’t support <video>
Only the most recent versions of the big five (Firefox, Chrome, Safari, IE, Opera) support <video>, so you have to have a fallback solution of some kind if you want to use <video> and still support your audience. Continue Reading…
A few weeks ago I created an HTML5 version of DTS’s online video player application. A few years ago, when Flash 9 enabled H.264 playback, we switched all of our video from the FLV format to MP4s encoded with the H.264 codec so that our videos could work on as many places as possible, especially Apple’s iPod and iPhone.
I didn’t initially plan to work the the HTML5 <video> tag because of all the browser support and formatting issues, but with the advent of the iPad and IE9′s support for H.264 it makes sense to start using it. I wish that Firefox would support H.264 as well or at least fall back helpfully, but until it does, we will only support Webkit and IE9.
The Player
The player begins in a landscape format with a small video frame and larger slides, but it can also switch to portrait mode and an alternate layout by clicking on the buttons in the lower right. On an iPad, it automatically sense the orientation and rotates accordingly.
Portrait Version
The Code
To code the player, I build a generic MediaPlayer JavaScript object which abstracts out several HTML5 JavaScript APi methods and events. Other than handling HTML5 Media Events, the main thing it does is store and fire Time Cue events much like Flash’s MediaPlayer API (see addASCuePoint). This allows me to add events for syncing the transcript and slides and also handling the UI for controls. On top of the core MediaPlayer object, I built a DtsController which handles choosing a class and building the visual environment for slides and transcript. The timing code looks like this:
player.addCuePoint(‘event-title’, 66); player.addEventListener(‘cuepoint’, function (e) { console.log(‘fired’, e.name, e.time); });
To keep it relatively lightweight, I didn’t use a library like jQuery, but instead used HTML5′s document.querySelector and some custom animation methods to achieve the scrolling and fading effects. I only wish it were as elegant as Thomas Fuch’s emile library.
Try it Out
If you’re interested in the player or the code head to (using a WebKit browser like Safari or Chrome)
http://my.dts.edu/player-html5
Hopefully, the next preview of IE9 will enable the HTML5 <video> tag and let me clean it up for the final version of IE9. Once that happens, we’ll abandon the Flash version of the player and go completely HTML5.
