SublimeVideo Documentation - Write proper video elements

Write proper <video> elements

The <video> tag is the core element used to embed videos in HTML5.
SublimeVideo relies exclusively on this element to define the video you want to embed.

There’s no need to worry about browsers that don’t support HTML5 (like Internet Explorer 6, 7, 8), and no need to add extra markup code for the Flash fallback. You just need to write a simple <video> element for each video you want to embed and SublimeVideo will take care of the rest.

Automatically configuring your <video> elements

SublimeVideo’s Video Code Generator lets you easily create properly configured <video> elements that are automatically optimized for SublimeVideo.

The Video Code Generator includes some powerful features to assist you in resolving common problems you may face when creating your own <video> elements and helps you set up video attributes to optimize your videos for SublimeVideo’s Universal, Real-Time Statistics platform. Learn more on this page.

If you want to manually create your <video> elements yourself or simply better understand the code, please read on.

Manually configuring your <video> elements

This is an example of a properly configured <video> element:

1<video class="sublime" width="640" height="360" poster="video-poster.jpg" data-uid="my-video-1" data-name="My Video #1" preload="none">
2  <source src="http://yoursite.com/video.mp4" />
3  <source src="http://yoursite.com/video-mobile.mp4" />
4  <source src="http://yoursite.com/video.webm" />
5</video>

Let’s go through the above code line by line.

The <video> attributes

Line 1.

SublimeVideo only operates on <video> elements that have the sublime class, unless you use our JavaScript API to prepare your <video>s.
We highly recommend that you to provide the proper width and height attributes in order to be sure the proportions of the original video are maintained. These values don’t necessarily have to match the width and height of the original video: you can use smaller values to scale down the video, but be sure the proportions are maintained. Otherwise your video will appear with a letterboxed/pillarboxed player (black bars around the video).
Example: if the resolution of the original video is 1280×720, you could use width="640" height="360" or width="800" height="450" to have the video properly scaled down with its original proportions maintained.
We recommend you always specify a poster frame. It’s the image displayed behind the initial play button. It represents the video until the user starts playing it.
The data-uid and data-name attributes are useful if you plan to use our real-time statistics platform. Please note it is highly recommended that you set at least a data-uid for each of your <video>. Read more.
The preload="none" attribute allows you to save bandwidth by avoiding to start preloading (buffering) the video when the page is loaded. It is supported by most modern browsers (Safari 5, Chrome 6, Firefox 4 and Opera 10.6) . We recommend you always specify this attribute otherwise your videos might start preloading in the background even if the user never clicked the initial play button.

The <source> elements

A <video> element can link to multiple video files through <source> elements. These are different versions (in different formats) of the same video. The browser will choose the first source it can actually play.

Line 2. You must provide at least one <source> element linking to the MP4/H.264 video file. This will enable SublimeVideo HTML5 mode in browsers like Chrome and Safari. But if you only specify this source you won’t get HTML5 mode in Firefox and Opera (although the video will still be visible on those browsers through SublimeVideo’s Flash mode). Please do not forget the closing slash /> at the end of every <source> element, this is necessary to ensure compatibility with IE 6, 7, 8.

Line 3. In case the MP4 source specified above (line 2.) exceeds the maximum resolution/bitrate supported by the iPhone and other mobile platforms, you need to provide a specific version of the video encoded for these mobile devices. Learn more about how to encode for mobile devices.

Lines 4. Providing the WebM source (in addition to MP4) enables SublimeVideo HTML5 mode in all modern HTML5-capable browsers, meaning Flash mode will only be used on browsers that do not support HTML5 (like IE 6, 7, 8) and on very old versions of Firefox that did not support WebM (v3.6 and earlier). You are not obliged to provide a WebM source: you could completely omit line 4 and the video would still be watchable on all browsers; BUT in this case SublimeVideo will switch to Flash mode on Firefox and Opera.

Additional information

Please consult our supported platforms page which includes information about the supported video formats for each browser.
For more information about the HTML5 <video> element, please read the W3C specification.