<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.
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.
This is an example of a properly configured
<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.
<video>elements that have the sublime
heightattributes 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).
width="800" height="450"to have the video properly scaled down with its original proportions maintained.
data-uidattribute is mandatory if you plan to use our real-time statistics platform. Read more.
titleattributes is recommended if you plan to use our real-time statistics platform. Read more.
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.
<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.
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.