HTML5 Video Example

MSN HTML5 Video Feature

Adding HTML5 Video to your website is now easier than ever. Stop wasting time with Flash videos and convert all the videos on your website to use HTML5. With more and more individuals accessing content from mobile devices, specifically Apple products, you don’t want to alienate those visitors and have them leave your site because their device can’t render your video content properly.

Our HTML5 video example below will show you all you need to know to add rich video content to your website in a few simple steps that any visitor will be able to watch, regardless of their device type.

Web Video History

In the early days, actually not so long ago, there was no standard for showing videos/movies on web pages. In fact before HTML5 came along, most videos could only be played with a plug-in (like flash). And for the longest time different browsers supported different plug-ins, making it even a bigger pain to present your videos to all visitors.

Fortunately HTML5 came along and defined a new element which specifies a standard way to embed a video or movie on a web page. Using the <video> element, web developers can now easily add videos to their website.

Checkout JWPLAYER’s  State of HTML5 Video report for more details about HTML5; it’s a great resource that shows you not only which browsers support the HTML5 video standard, but also some of the key features of the standard that the browsers support too.

 HTML5 Video Example

Below is an HTML5 video example and the code used to render it on this page using the video element:

<video width="360" height="202" controls 
              poster="http://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.png">
    <source src="http://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.webm" 
                    type="video/webm" width="360" height="202" />
    <source src="http://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.mp4" 
                    type="video/mp4" width="360" height="202" />
    <!-- fallback -->
        Your browser does not support HTML5 video.
</video>

Getting Your HTML5 Code To Work

Even if you’re not an HTML expert it’s pretty easy to follow this example, and we’ll break it down for you just in case you really are an HTML novice and are clueless when it comes to coding.

  • Video Element: controls the setup of your video and there are four parameters that we reference: WIDTH, HEIGHT, CONTROLS, and POSTER. These are not required parameters, however, if height and width attributes are set the space required for your video is reserved when the page is loaded. If you do not set these attributes the browser does not know the size of the video it’s loading and cannot reserve the appropriate space on the page for the video while the page loads, thereby causing the page layout to change while the video loads. The controls attribute adds video controls, like play, pause, and volume, to your video player. The poster attribute controls the image displayed where your video will be shown on your page when the page is loaded. If you’ve ever worked with YouTube videos, you’re probably familiar with how your video cover images are somewhat limited. Using this attribute, especially if you’re referencing a YouTube video, gives you complete control of what video cover is shown when your page loads. By the way, make sure your poster image width and height are sized the same as your video.
  • Source Element: controls the different video formats that your page supports. In the early days of HMTL5 video support you had to specify a bunch of video formats, basically one for each browser type. Now most browsers support the MP4 format, however, we still include the WEBM source format for older versions of Chrome and Firefox. The key parameters of this element are the SRC, TYPE, WIDTH, and HEIGHT. The src parameter contains the URL path that points to the actual video file, which does not have to be on our server. The type parameter specifies the MIME video format for this source element and it must match the file referenced in the src attribute. Valid MIME types are MP4, WEBM, and OGG. Make sure you always include the type attribute in the source element, otherwise the browser of the person visiting your site will need to load each video file until it can find a type that it supports, which can be really annoying when you have large videos!
  • Text Element: although not a true element, you should include some text after your last source element and before the closing video tag about non-HTML5 support.  This text will be displayed by browsers that do not support the HTML5 video standard. Note: in the example above the <!– fallback –> text is just a comment (used for reference) and is not required.

That’s pretty much it or at least the coding basics that most individuals need to get the job of migrating their video code to HTML5 done. However, there’s plenty more to learn when it comes to the HTML5 video standard, so if you want to learn more check out any of these great resources: Mozilla Developer Network, w3schools (a great resource for when you want to learn some HTML feature you can’t quite figure out), and of course Wikipedia. Each of these resources can teach you tons of other little tricks that you can use to enhance your HTML5 video implementations.

HTML5 Video Gets Complicated

Well not really! As you can see from the example above, writing the code to display a video on a web page in HTML5 is pretty easy. The only complicated part of the process may be creating the different MIME video formats you need for all the different browsers. And this really isn’t that difficult either.

If you create your own videos, then you probably already know how to created all the MIME video formats that HTML5 supports.  If you don’t, creating the formats you need from the format you already have is a simple as downloading and installing some video conversion software. The following video conversion software items are all FREE and have versions that run on MAC and PC: FLV Crunch, HandBrake, and Miro Video Converter. Of course there are other products out there, but these are ones we use, we know they work, have some pretty handy features, and did we mention they are all free!

HTML5 Video Summary

Adding video to your website that supports all visitors, whether they have a mobile device that supports flash or not, is easier than ever before and opens some amazing new possibilities for you. With more and more people watching video on the web, make sure your site supports anyone that comes to your site and from any device they use.

So if you’re sites not using the HTML5 Video Standard today, schedule some time to update your code and make sure your visitors are seeing what you want them to see.

PS – the above video was just a short sample taken from our Internet Marketing Untold What You Wish They Told You… But Didn’t product. If you haven’t already, go get your free copy of this report and find out “What they don’t want you to know!”

Readers Comments

comments powered by Disqus

Sign Me Up For Millionaire Success Tips & More!

We Respect Your Privacy

Recent Comments

Recent Tweets

Connect With Us

HTML5 Video Example

MSN HTML5 Video Feature

Adding HTML5 Video to your website is now easier than ever. Stop wasting time with Flash videos and convert all the videos on your website to use HTML5. With more and more individuals accessing content from mobile devices, specifically Apple products, you don’t want to alienate those visitors and have them leave your site because their device can’t render your video content properly.

Our HTML5 video example below will show you all you need to know to add rich video content to your website in a few simple steps that any visitor will be able to watch, regardless of their device type.

Web Video History

In the early days, actually not so long ago, there was no standard for showing videos/movies on web pages. In fact before HTML5 came along, most videos could only be played with a plug-in (like flash). And for the longest time different browsers supported different plug-ins, making it even a bigger pain to present your videos to all visitors.

Fortunately HTML5 came along and defined a new element which specifies a standard way to embed a video or movie on a web page. Using the <video> element, web developers can now easily add videos to their website.

Checkout JWPLAYER’s  State of HTML5 Video report for more details about HTML5; it’s a great resource that shows you not only which browsers support the HTML5 video standard, but also some of the key features of the standard that the browsers support too.

 HTML5 Video Example

Below is an HTML5 video example and the code used to render it on this page using the video element:

<video width="360" height="202" controls 
              poster="http://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.png">
    <source src="http://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.webm" 
                    type="video/webm" width="360" height="202" />
    <source src="http://millionairesuccessnetwork.com/wp-content/uploads/MSN-HTML5-Promo.mp4" 
                    type="video/mp4" width="360" height="202" />
    <!-- fallback -->
        Your browser does not support HTML5 video.
</video>

Getting Your HTML5 Code To Work

Even if you’re not an HTML expert it’s pretty easy to follow this example, and we’ll break it down for you just in case you really are an HTML novice and are clueless when it comes to coding.

  • Video Element: controls the setup of your video and there are four parameters that we reference: WIDTH, HEIGHT, CONTROLS, and POSTER. These are not required parameters, however, if height and width attributes are set the space required for your video is reserved when the page is loaded. If you do not set these attributes the browser does not know the size of the video it’s loading and cannot reserve the appropriate space on the page for the video while the page loads, thereby causing the page layout to change while the video loads. The controls attribute adds video controls, like play, pause, and volume, to your video player. The poster attribute controls the image displayed where your video will be shown on your page when the page is loaded. If you’ve ever worked with YouTube videos, you’re probably familiar with how your video cover images are somewhat limited. Using this attribute, especially if you’re referencing a YouTube video, gives you complete control of what video cover is shown when your page loads. By the way, make sure your poster image width and height are sized the same as your video.
  • Source Element: controls the different video formats that your page supports. In the early days of HMTL5 video support you had to specify a bunch of video formats, basically one for each browser type. Now most browsers support the MP4 format, however, we still include the WEBM source format for older versions of Chrome and Firefox. The key parameters of this element are the SRC, TYPE, WIDTH, and HEIGHT. The src parameter contains the URL path that points to the actual video file, which does not have to be on our server. The type parameter specifies the MIME video format for this source element and it must match the file referenced in the src attribute. Valid MIME types are MP4, WEBM, and OGG. Make sure you always include the type attribute in the source element, otherwise the browser of the person visiting your site will need to load each video file until it can find a type that it supports, which can be really annoying when you have large videos!
  • Text Element: although not a true element, you should include some text after your last source element and before the closing video tag about non-HTML5 support.  This text will be displayed by browsers that do not support the HTML5 video standard. Note: in the example above the <!– fallback –> text is just a comment (used for reference) and is not required.

That’s pretty much it or at least the coding basics that most individuals need to get the job of migrating their video code to HTML5 done. However, there’s plenty more to learn when it comes to the HTML5 video standard, so if you want to learn more check out any of these great resources: Mozilla Developer Network, w3schools (a great resource for when you want to learn some HTML feature you can’t quite figure out), and of course Wikipedia. Each of these resources can teach you tons of other little tricks that you can use to enhance your HTML5 video implementations.

HTML5 Video Gets Complicated

Well not really! As you can see from the example above, writing the code to display a video on a web page in HTML5 is pretty easy. The only complicated part of the process may be creating the different MIME video formats you need for all the different browsers. And this really isn’t that difficult either.

If you create your own videos, then you probably already know how to created all the MIME video formats that HTML5 supports.  If you don’t, creating the formats you need from the format you already have is a simple as downloading and installing some video conversion software. The following video conversion software items are all FREE and have versions that run on MAC and PC: FLV Crunch, HandBrake, and Miro Video Converter. Of course there are other products out there, but these are ones we use, we know they work, have some pretty handy features, and did we mention they are all free!

HTML5 Video Summary

Adding video to your website that supports all visitors, whether they have a mobile device that supports flash or not, is easier than ever before and opens some amazing new possibilities for you. With more and more people watching video on the web, make sure your site supports anyone that comes to your site and from any device they use.

So if you’re sites not using the HTML5 Video Standard today, schedule some time to update your code and make sure your visitors are seeing what you want them to see.

PS – the above video was just a short sample taken from our Internet Marketing Untold What You Wish They Told You… But Didn’t product. If you haven’t already, go get your free copy of this report and find out “What they don’t want you to know!”



Sign Me Up For Millionaire Success Tips & More!

We Respect Your Privacy

Recent Comments

Recent Tweets

Connect With Us

© Copyright 2013 - · Millionaire Success Network · All Rights Reserved
© Copyright 2013 - · Millionaire Success Network · All Rights Reserved
© Copyright 2013 - · Millionaire Success Network · All Rights Reserved
backtotop