Two new media tags were introduced with HTML5. The video and audio tags. If your website distributes video and audio, you may want to host your own videos using these new HTML5 media tags. By hosting your own videos, you can breakaway from YouTube and Vimeo’s rules and avoid having your channel suspended. This article discusses how to use both of these tags in your web pages.
Two very popular tags for HTML5 are the new audio and video tags. Instead of using complex Flash plugins to create a media-rich website, you now have the option to link to video with a simple HTML tag. These two tags are some of the new perks of HTML5 that aren’t available on any other version of HTML.
To see why you must avoid Adobe Flash like a plague these days, read my previous article on 5 Old Web Development Trends That You Should Remove from Your Site.
The Video Tag
The best part about using native video formats is that you no longer need your viewers to rely on Flash. As a matter of fact, HTML5 also lets you get rid of Flash entirely for both video content and animations. The downside is that your videos must be in one of three formats: WebM, MP4 or Ogg. If you can’t use these formats, then you’re stuck using embedded Vimeo or YouTube videos.
Let’s take a look at the code to embed a video:
<video width="400" height="400" autoplay> <source src="somevideo.mp4" type="video/mp4"> <source src="somevideo.ogg" type="video/ogg"> Your browser does not support this video format. </video>
You might wonder why there are two videos listed here. It’s because each format is not necessarily supported by every browser. The browser looks first at the MP4 format and if it isn’t supported, it moves to the next format. If it can’t display the video at all, your viewer sees the “Your browser does not support this video format” message.
The “src” property tells the browser where to find the video. The video could be hosted locally or on a cloud server. Cloud servers or content delivery networks are suggested for video to keep streaming at maximum speeds.
The “autoplay” property is also set, which means that the video automatically plays when the user opens the page. This can be good or bad, depending on your viewer base. Some people don’t like sound to automatically play since they could be at work or in a place where noise is disrespectful (think libraries). I particularly hate it myself. However, some designers and marketers say that autoplay helps with conversions. Just make sure users are able to stop the sound using the proper controls.
The Audio Tag
The audio tag works just like the video tag. Like the video tag, you have three audio formats to choose from: Ogg, Wav and MP3.
Let’s take a look at the code:
<audio controls> <source src="someaudio.ogg" type="audio/ogg"> <source src="someaudio.mp3" type="audio/mpeg"> Your browser does not support this audio. </audio>
Of course, just like any other HTML tag, the audio tag has the open and close “audio” syntax. With video, we used “autoplay”, but with audio you have the option to display controls.
The “controls” attribute tells the browser to render the start, pause, and stop controls. You should give your users this option instead of forcing sound to play on a page. Frustrated users lead to poor conversion rates.
Just like the video tag, the browser first looks at the Ogg file. If it is unable to play this file, it moves to the MP3 file. If the user has an older browser or one that does not support either format, the “Your browser does not support this audio” message displays.
That’s it! Video and audio tags are easy to use HTML5 media tags. They are probably even easier than embedding third-party software, but your site must support HTML5 to get started.
These two tags are quickly becoming replacements for older Flash software, so it’s beneficial for media website owners to move towards HTML5 compliance.