Documentation

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

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 insert and SublimeVideo will take care of the rest.

Automatically configuring your <video> elements

The Video Publishing Assistant lets you easily create properly configured <video> elements that are automatically optimized for SublimeVideo.

The Video Publishing Assistant 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 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:

<video class="sublime" width="640" height="360" poster="video-poster.jpg" data-uid="my-video-1" title="My Video #1" preload="none">
  <source src="http://yoursite.com/video.mp4" />
  <source src="http://yoursite.com/video-mobile.mp4" />
  <source src="http://yoursite.com/video.webm" />
</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 provide the proper width and height attributes in order to ensure that 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.
• The poster frame is the image displayed behind the initial start view which represents the video until the user clicks on the play button. We recommend you always specify a poster frame.
• The data-uid attribute is mandatory if you plan to use our real-time statistics platform. Read more.
• The title attributes is recommended if you plan to use our real-time statistics platform. 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 (Chrome 6, Firefox 4, Safari 5 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 clicks on 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 Internet Explorer 6, 7, 8) and on very old versions of Firefox (3.6 and earlier) that did not support WebM. 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 would 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.