Sunday, December 30, 2018
COMPLETE GUIDE ON HOW TO USE AUDIO, VIDEO AND PROGRESS ELEMENT
In this lesson, we will be considering audio, video and progress element. To avoid complexity, I adjure you to practically follow me as we move on.
The <audio> element
The Audio element helps you to add audio to a web page. Prior to the introduction of HTML 5 in 2016, playing audios on a web page almost seems impossible. You either download the audio file and listen to it afterwards or you forget about it. Thanks to HTML 5 for providing a unique way of embedding audio (s) on a web page. All you need to do is to add the URL of the audio inside the audio element. C’ést fini.
Strikingly, you can do this using two methods. One is expressed as follows
<audio src=’’audio URL’’ control>
Your browser may not support audio
</audio>
Note These:
a. Those words within the audio element (i.e ‘’Your browser may not support audio’’). It will appear if you are not using the latest web browser.
b. To check if your browser is compatible with HTML 5, visit: www.html5test.com. It will tell you everything about your current browser.
c. You can also download HTML code play on Google play store if you are using an android phone.
Another way to embed the audio file on a web page is expressed below:
<audio control>
<source src=’’audio URL’’ type=’’audio/mpeg’’>
<source src=’’audio URL’’ type=’’audio/ogg’’>
Your browser may not support audio
</audio>
Note Also
HTML 5 as at the time I'm writing this article (Dec 30th, 2018) only support three audio formats. Namely; mp3, ogg and wav.
Let us consider one example before we move to the video element. Open you text editor now an write the following codes below
<audio src=’’http://www.centapreneur.com/upload/audio.mp3’’ control>
Your browser may not support audio
</audio>
It will look like this on your text editor
Save and open it, you will see something like this
NOTE
If you want the audio to start playing as soon as it loads without asking for the persmission of your website visitors, simply use the <autoplay> attribute.
Example
<audio controls autoplay>
<Source src=’’http://www.centapreneur.com/upload/audio.mp3’’ control>
Your browser may not support audio
</audio>
Save it and open it the audio will automatically start playing without your consent.
2. The <Video> element
The video element is similar to the audio element. The only difference is that the video element displays audio-visual characters, unlike the audio element. Also, the video source URL is indicated in the video element. To elaborate further, it will be appropriate if we consider an example.
So study the following codes below:
<video control>
<source src ’’http://www.centapreneur.com/upload/video.mp4’’ type ‘’video/mp4’’>
<source src ’’http://www.centapreneur.com/upload/video.ogg’’ type ‘’video/ogg’’>
</video>
It will look like this in your text editor
Save and open it, the result looks like this
IMPORTANT
a. HTML5 at the moment of the composition of this article (30/Dec/2018) only supports three video formats; namely mp4, WebM, and Ogg.
b. Also, if you want autoplay of the video, succinctly follow the formats stipulated in audio element.
3. The <progress> element
You may have come across a loading bar or status bar when downloading something over the internet. It can be created using the progress element. Relax, I will teach you how to do that in a moment. However, it important to sagely state here that the progress element can be used inside <heading>, <body> or <p> tags. The choice is totally yours.
IMPORTANT
There are a few things I would like you to note before we continue. They include:
VALUE: it is used to indicate the current value of a task that has been completed
MIN: it is used to define the lowest value of a task
MAX: it indicates the total value required for completion of a task.
To drive home the above points, it won’t be inappropriate if we consider at least one example.
Write the following codes into your text editor
Status: <progress min’’0’’ max‘’100’’ value‘’67’’
</progress>
It will look like this in your text editor
Open it after you’ve saved it, it will look like this
WRAPPING UP
Next lesson will be on creating beautiful but amazing shapes using scalable Vector graphics. Keep learning, keep investing in yourself.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment