SublimeVideo: Your HTML5 Video Solution

SublimeVideo.net promises to give you a sexy, embeddable and customizable HTML5 video player for your website that will work in every major browser (and quite a few minor ones too). SublimeVideo is currently in beta, but it’s coming soon and we’ve got the scoop. Read on after the fold to learn how to use this fantastic web app.

Introduction

The SublimeVideo player has a very sleek, modern user interface that will look great on any web 2.0 website, or, for that matter, on just about any website. As well as providing single video playback (think of a YouTube.com page), SublimeVideo also allows for lightbox-style popup videos.

Lightbox

Lightbox

The third player option is interactive thumbnails which change the actively playing video. To see all of these different video displays, check out the SublimeVideo demo page.

Thumbnails

Thumbnails

Compatibility

As well as having some fantastic features in the way of video display, the range of browsers SublimeVideo is compatible with is fantastic.

  • Internet Explorer 9
  • Firefox 3.5+
  • Chrome 3+
  • Opera 10+
  • Safari 3.1+
  • Konqueror 4.4+
  • Mobile Safari on iPhone iOS 3+ and iPad iOS 3.2+
  • Android browser on Android 2.1+

Any other major browser which hasn’t yet implemented HTML5 video playback is served up the Flash version of the player, meaning SublimeVideo will serve video to just about any browser you can throw at it. For a full list of compatible browsers, please see the compatibility list.

Setup For Your Site

Step 1

At the moment, SublimeVideo.net is in beta. However, you can request a beta invite by applying here. When you’ve got yourself a beta invite and created an account, you’re ready to move onto the next step. All you need to create an account is an email address, your name, country and postcode and information on how you’ll be using the service.

Step 2

Now that you’ve got an account, it’s time to register a website to use SublimeVideo on. After creating an account you’ll see asks you to do this. All you need to do is enter the domain (or subdomain) of the site you’d like to use the player on. For example, web.appstorm.net

Add Sites

Add Sites

Step 3

Next, make sure you’ve got your video properly encoded. If you want your video to be played using the HTML5 player in all desktop browsers that support it, you’ll need to have the video encoded in two formats: MP4/H.264 and Ogg Video. If you also want the video to be playable on iDevices and Android devices, you may need to encode the video in MP4 format with a bitrate and resolution supported by these devices.

If you need a quick and easy video encoding program, I use HandBrake, an open-source, multi-platform video encoding program. See the supported browsers page for a full list of video encoding requirements by browser.

If you don’t want to encode your video in the Ogg video format, the video will still play using the HTML5 player in Chrome 3+ and Safari 3.1+, but Firefox, Internet Explorer and Opera will use the Flash player.

Step 4

So you’ve got your video files ready but how do you actually get these videos playing on your website? Well, if we direct our attention to SublimeVideo’s website, you will notice that next to the site you added in Step 2 there’s a big blue embed button.

Embed Code

Embed Code

Click the button and copy the text it brings up. This code snippet needs to go into the source file of every page you want to embed a video in. As VideoSublime mentions, the best place for it is within the <head> tags.

Embed JS

Embed JS

Step 5

The code snippet you’ve just placed in your source file loads the SublimeVideo player but now you’ll need to include code that tells SublimeVideo what video to play. We’ll going to go through the process of constructing this code line by line.

Line 1:

The class attribute has to be set to “sublime” in order for SublimeVideo to recognise it as the video to play.

<video class=”sublime” width=”960” height=”540” poster=”poster.jpg” preload=”none”>

The width and height attributes need to be proportionate to your video, even if they aren’t the same as your video. I.E., the example above will play a full HD (1080p) video at half its full size. The poster attribute refers to an image file which will load behind the play button as a preview for the video. It could be a title screen, a frame from the video or anything else you want it to be. The preload attribute here is set to “none” to save end-user bandwidth. Most of the modern major browsers support this tag.

Line 2:

Set the source location for the MP4/H.264 encoded version of your video.

<source src=”http://yoursite.com/media/video.mp4” />

Line 3:

This line is optional and points SublimeVideo to the mobile version of the video

<source src=”http://yoursite.com/media/video-mobile.mp4” />

Line 4:

This line is also optional and points SublimeVideo to the Ogg Video version of the video.

<source src=”http://yoursite.com/media/video.ogv” />

Line 5:

Closes the embedded video tag.

</video>

Step 6

Right, now it’s time to upload all your HTML files and videos to your website, making sure you keep paths the same as you specified in your HTML code.

Step 7

Go on, enjoy your video in its shiny HTML5 player and feel good that you’re supporting open video playback standards!

Conclusion

This should be enough to get you up and going with SublimeVideo and give you a good idea of how SublimeVideo’s <video> code snippets work. If you want to customize the display of your SublimeVideo player, use the lightbox player or interactive thumbnails, then you can find all the information you need so you can accomplish this here on the SublimeVideo documentation website.