Note: This is a guest post written by Steve Anderson
HTML 5 Video Tag – What HTML 5 Video Tag brings to the table is creating a lot of buzz and a lot of excitement. Unfortunately, many people are reluctant to use these video tags – due to the fact that they do not know about it or they have a misconception of how to use it. Many still believe that this is only for mobile users and others are worried about the cross browser compatibility. Both are reasonable concerns, but HTML 5’s video tag may just be the answer to all of your video needs. You get it all with the video tag – the clear picture, simplicity, and the ease of search bots to properly index your file. Perfect for SEO.
I am going to break down the Video tag in its entirety, to show you how you should use it, what the controls will be, and what to do when you need some fallback content.
The video tag is used just like any other tags in HTML. Opening and closing the tags are just like any other and then you can design your video by placing various attributes within the tag. There are various attributes you can implement to get the right video player you want.
HTML 5 Video Tag attributes
The attributes include:
- Autoplay – Autoplay does exactly what it says. Starts playing on load
- Controls – Displays controls for your video
- Height – Sets height
- Loop – Has video play over again when it ends
- Muted – Mutes the output
- Poster – Specifies image that is displayed as the background
- Preload – Specifies when the video should be loaded
- Scr – Specifies URL of the video
- Width – Sets width
These video tags, along with some creative attributes make for the ability to create some pretty dynamic video players, with simplicity. Some have questions about the ability to use full screen, which is possible, and you can find everything you need to know about it here.
The video code is clear, and concise, so search bots can now identify your code for exactly what it is. You may even include the “title” attribute to clarify what the video is named – sort of like an H1. This is great for SEO, and getting your videos recognized in the search engines. Now you do not have to mess around with mapping out videos tediously and individually creating a reference for each video. When sites have a lot of videos they want to share, this is going to be clutch! Now your videos can be seen in the search engines directly which boosts your PR, reputation, and traffic. You can even provide embedded code for the video from an offsite source, and effectively create video link building services. With the power to rank in Google Videos, you can see your traffic explode. Just make sure the content is quality.
The one problem with the video tag for HTML 5 is web browser compatibility. As of right now the video tag is supported by all the major browsers. By this, I mean that their latest versions support it. So for example IE8 does not support the video tag. So what you will have to do is write a browser detection to identify IE8 and then display different code – perhaps a flash player. This can be very tedious, but until IE8 becomes obsolete, things like this will continually need to be done. There is however, a more inticising option.
When a browser does not support the video tag, it is rendered invisible, because the code does not translate into anything. Therefore, you can insert a fallback content inside of your video tag. For example if someone is on IE8, you can put “You Browser Doesn’t Support The Video Tag” as your fallback content. This got me thinking. What if you made your fallback content, your flash player, or whatever video source you are using? Theoretically you could just place the other video content in just before you close out the tag, and it will only be displayed if you are in a browser without the support. Now I haven’t tried that yet, but I believe it will work, and make writing additional scripts for browser detection unneeded. Eventually IE8 will expire, and HTML 5 will be subsequently supported across all browsers.
The video tag is definitely a revolutionary HTML tag. It is a game a changer for web designers. Not a lot of Flash developers are particularly thrilled about it. HTML’s video tag creates ease, and simplicity for effective clear videos. You do not need to be an experience programmer to have great videos for your website now. The video tag also ensures that all of your videos become properly indexed, so you can start seeing more traffic from the search engines. You can even style your video tag with CSS. Video might be the most exciting new HTML tag there is. You will certainly be seeing a lot more of it in the near future.
Note: This guest post is written by Steve Anderson. Steve is a web designer who is passionate about trying new techniques to make creative websites. He has been experimenting with HTML 5, to find the best ways to use it.
Comments are closed.