http://web.appstorm.net/how-to/sublimevideo-your-html5-video-solution/

[image: SublimeVideo: Your HTML5 Video Solution]
How-To <http://web.appstorm.net/category/how-to/>SublimeVideo: Your HTML5
Video SolutionLuke Smallman <http://web.appstorm.net/author/lsmallman/> on
November 4th 2010

- Embed <http://web.appstorm.net/tag/embed/>,
- HTML5 <http://web.appstorm.net/tag/html5/>,
- SublimeVideo <http://web.appstorm.net/tag/sublimevideo/>,
- Video <http://web.appstorm.net/tag/video/>

SublimeVideo.net <http://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 <http://sublimevideo.net/> 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.
[image: 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 <http://sublimevideo.net/demo>.
[image: 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<http://docs.sublimevideo.net/supported-browsers-and-platforms>
.
Setup For Your SiteStep 1

At the moment, SublimeVideo.net is in beta. However, you can request a beta
invite by applying here <http://sublimevideo.net/notify>. 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*
[image: 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<http://handbrake.fr/>,
an open-source, multi-platform video encoding program. See the supported
browsers page<http://docs.sublimevideo.net/supported-browsers-and-platforms>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.
[image: 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.
[image: 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
withSublimeVideo<http://sublimevideo.net/> 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 <http://docs.sublimevideo.net/>.
[image: TaskAnt: Efficient Task and Project Management Tool for Flat
Teams]<http://stats.buysellads.com/click.go?z=1244468&b=559571&g=&s=&sw=320&sh=480&br=safari,6531.22,iphone&r=0.9144191222731024&link=http://taskant.com/>[image:
Sales Leads Management
System]<http://stats.buysellads.com/click.go?z=1244468&b=600018&g=&s=&sw=320&sh=480&br=safari,6531.22,iphone&r=0.01963648060336709&link=http://www.getdashboard.com/?utm_source=appstorm.net>

Our Sponsors
1digg
[image: Delicious
Bookmark]<http://del.icio.us/post?url=http://web.appstorm.net/how-to/sublimevideo-your-html5-video-solution/&title=SublimeVideo:%20Your%20HTML5%20Video%20Solution>
*5* Saves
[image: Share]<http://www.addtoany.com/share_save#url=http%3A%2F%2Fweb.appstorm.net%2Fhow-to%2Fsublimevideo-your-html5-video-solution%2F&title=SublimeVideo%3A%20Your%20HTML5%20Video%20Solution&description=SublimeVideo.net%20promises%20to%20give%20you%20a%20sexy%2C%20embeddable%20and%20customizable%20HTML5%20video%20player%20for%20your%20website%20that%20will%20work%20in%20every%20major%20browser%20(and%20quite%20a>

- Related Posts<http://web.appstorm.net/how-to/sublimevideo-your-html5-video-solution/#related>

Related Posts

- 10 Great HTML5 Video
Players<http://web.appstorm.net/roundups/media-roundups/10-great-html5-video-players/>
- Penzu Goes HTML5
Mobile<http://web.appstorm.net/reviews/blogging-reviews/penzu-goes-html5-mobile/>
- Awesome Video Mashups with
Dragontape<http://web.appstorm.net/reviews/media-reviews/awesome-video-mashups-with-dragontape/>
- 7 Fun Facebook Video Conferencing and Chat
Apps<http://web.appstorm.net/roundups/communication-roundups/7-fun-facebook-video-conferencing-and-chat-apps/>

Popular Posts

- The Ultimate Dropbox Toolkit &
Guide<http://web.appstorm.net/roundups/data-management-roundups/the-ultimate-dropbox-toolkit-guide/>
- Nicereply:
Five Account
Giveaway<http://web.appstorm.net/general/giveaway/nicereply-five-account-giveaway/>
- Create Stunning 3D Slideshows with
CU3ER<http://web.appstorm.net/how-to/create-stunning-3d-slideshows-with-cu3er/>
- 10 Apps for Monitoring Social
Media<http://web.appstorm.net/roundups/10-apps-to-monitor-social-media/>

--
Leif Gregory 
http://PowerWagonRegistry.org
http://TBCave.com

[Non-text portions of this message have been removed]