With the internet band going faster and faster in the last years we have seen the web evolving from static pages that needed few seconds to be opened and had mostly text and few images to the introduction of Macromedia Flash and its animations in the end of the 90's.
Macromedia Flash played a big role in the development of the webpages in the early 2000, every company wanted a website made with animation, music, videos and Flash made it possible using specific plugins and players; this trend continued for about 15 years on the web.
In 2014 the latest version of HTML5 has introduced two new elements that allow to incorporate media objects in an HTML page, those elements are the tag <audio> and <video>, no more need of Flash plugins then and both audio and video easily added to webpages exactly like it's happening with images.
As we have explained the new HTML5 has introduced the <audio> tag that allow to play an audio file in a webpage with an embedded player/controller simply linking it. Exactly in the same way images are shown in a webpage using the <img> tag.
Currently <audio> tag supports 3 audio file formats: WAV, OGG and MP3. While all browsers supports to play MP3 files the same scenario cannot be repeated for WAV and OGG files that shows some incompatibilities with Safari and Internet Explorer. For this reason it's possible to add more audio formats per audio tag so that if the browser won't allow to play an OGG file it would pass to the MP3 file and if still incompatible will show the error message between the audio tag.
To select an audio file source tag is used between audio tag, src containes the location of the audio file and type attribute needs to identify the type of audio format for the browser to understand which integrated player to use.
Several the attributes to configure the audio tag:
- controls shows a default control panel tab for the audio file with volume, status and play/pause button.
- autoplay makes the audio file to start automatically after page loading
- loop repeates the audio file continuously after it finishes
- muted set the audio automatically on mute, user will have to unmute in the control panel
- preload is to be used to set what to do when we do not want to show the controls panel, this attribute can be used with value auto to play the audio file at page loaded, none to play the file only after clicking a button, metadata to instruct the browser to load only the audio metadata.
The usage of the <audio> tag is particularly useful when we want a background music to our website to start automatically at page loaded and that user can easily mute without the usage of external plugins.
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
| Audio Type | Format |
|---|---|
| audio/ogg | OGG |
| audio/wav | WAV |
| audio/mpeg | MP3 |
There are plenty of ways to add and play a video in a webpage, a few years ago the only way was to use external plugins like Flash finally HTML5 introduced <video> tag to make developer's job easy and have a standard way to embed videos in HTML files.
The <video> tag works similarly to <audio> tag, one or more sources can be set between opening and closing tags to cover a wider browser compatibility.
There are 3 supported video formats: MP4, WebM and Ogg. MP4 is supported in all modern browsers while WebM and Ogg format have still some incompatibility issues with older versions of Safari and Internet Explorer.
Attributes of <video> tag are very similar to the one in audio tag:
- controls shows the control panel with play/pause button, full screen button and volume
- autoplay specify to the browser to play teh video as soon as it is loaded
- width and height are used to set the size of the video in pixels
- loop is used when we want to restart the video as soon as it finishes
- muted plays the video in mute as default, user can switch on audio through the control panel
- preload defines when the loading of the video should be done via the values auto, none and metadata
- poster defines the image to be shown while teh video is loading, an URL needs to be set as value of the attribute.
It is important to understand that the browser cannot play any video file unless a proper video codec is installed in the computer, luckily in this Netflix era all computers has installed the most modern audio/video codecs.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
| Video Type | Format |
|---|---|
| video/ogg | OGG |
| video/webm | WebM |
| video/mp4 | MP4 |
At today's date Youtube is the largest video database and that makes it pretty conveniente for web developers to use Youtube platform not only for video sharing but also as video hosting.
Having a video on Youtube means in fact to be available since day 1 to a very large audience, audience that if correctly addressed can be used to promote a product or a website but also, uploading a video on Youtube means to have granted access to an own video a pretty reliable server and free hosting for it.
At this point all you need is just to share a video into your webpage, how do you embed a video into your webpage? Youtube has a pretty user friendly way of sharing embedded code using <iframe> tag.
The whole process is so easy it can be done in 3 steps:
1. Search the video you want to embed into your website and press the SHARE button
2. Choose the option EMBED to get the code you need
3. Copy-paste teh code into your webpage
Here the magic result:
It might not be visible but to embed this video Youtube used the inline frame <iframe> element, a tag used to embed other documents inside a webpage, in this case a video.
Of course <iframe> can be used to embed any kind of document like entire websites, RSS feeds and more but the real usage of this tag is supposed to be to integrate addional documents in a webpage like can be a media or a payment form coming from 3rd parties.
In past teh usage of frames in HTML via the <frame> tag has created monsters that are now far from the modern design. The <frame> tag has been dismissed in HTML5 and also many attributes of <iframe> have been removed to allow a proper usage of the element.
Let's share on our website the evergreen Maniac from Flashdance movie.
1. Find the video on Youtube and press SHARE
2. Choose the option EMBED
3. Get the code and copy-paste it into your webpage
