in

Learn HTML For Beginner (Part 7: Audio and Video Elements)

Initially, HTML was only used as a means of sharing research results among scientists, where most of the content consisted of text, tables, and images.

At present various websites compete with one another to display multimedia content to attract the attention of visitors. One of them is by adding multimedia files such as audio and video.

Before the presence of HTML5, to run multimedia files, we had to rely on third-party applications such as Adobe Flash. Therefore, each computer must have Adobe Flash Player installed. If the visitor does not have the Adobe Flash Player application, the video cannot be run.

It is this limitation that makes various parties urge that HTML can support audio and video without the help of other applications. W3C and WHATWG address this problem by providing <audio> and <video> tags (Audio and Video Elements).

The <audio> and <video> tags are relatively new HTML5 features. Thus, not all web browsers support this tag. In general, the latest versions of the web browser Google Chrome, Mozilla Firefox, and Opera fully support the <audio> and <video> tags. What is often a problem is the Internet Explorer 8 web browser (default Windows 7) and the IE version below.

Audio Element

HTML5 provides a <audio> tag for running audio files. Here’s how to use the <audio> tag:

<audio src="song.mp3"> </audio>

As you can see, writing the <audio> tag is similar to the <img> tag, but this tag must be written in pairs with the closing </audio> tag.

If you run the code above, you won’t see anything in the web browser. We need to add some attributes that will be discussed after this.

Src Attributes

The src (source) attribute is used as a pointer to the location of the audio file. In the example above, the song.mp3 file must be in the same folder as the HTML file. You can place audio files anywhere as long as they can be accessed using relative or absolute addresses (we have discussed them in chapter 6 about the difference between these two addresses).

Controls Attribute

So that we can play audio files, we need to add the controls attribute to the <audio> tag,

such as the following:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Audio Element</title>
</head>
<body>
  <audio src="song.mp3" controls></audio>
</body>
</html>

Control attribute functions to display the control buttons on the audio player, namely the play / stop button, slider, volume, timer, etc. If the <audio> tag is written without using the controls attribute, you will not see anything.

The player display for the <audio> tag differs from browser to browser.

Audio and Video Elements

Autoplay attribute

We can also add the autoplay attribute to the <audio> tag. This attribute will make the audio run immediately when the web page is displayed. Without this attribute, the audio file will only run when the play button is pressed. Here is an example of its use:

<audio src="song.mp3" controls autoplay> </audio>

Please run the code above, and the audio will be directly heard when the web page is displayed.

If the autoplay attribute is used without the controls attribute, then you can create web pages with audio that run immediately, but cannot be stopped. So the only way to stop music is to close the webpage. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Audio Element</title>
</head>
<body>
  <audio src="song.mp3" autoplay></audio>
</body>
</html>

Loop Attribute

By default, the audio will stop after playing. If you want the audio to automatically repeat from the beginning, you can add the loop attribute. Here is an example:

<audio src="song.mp3" loop controls> </audio>

To try the loop attribute effect, please skip music to the end of the duration, and the audio file will automatically playback from the beginning. Effects like this are suitable for making background music that is playing continuously.

Mute Attribute

So that the audio effect does not interfere, we can run audio with volume = 0. If the user wants to listen to music, he just needs to increase the volume of the audio player button.

For this, HTML provides muted attributes. Here is an example of its use:

<audio src="song.mp3″ mute controls> </audio>

The above code will run the audio file when the web page is run but without sound. If you do this, at least inform the user that there is actually a muted audio file.

Preload Attributes

The <audio> tag provides preload attributes that are used to control how the web browser downloads audio files when a web page is started. Or it can also be understood by the way the web browser buffers the audio file.

This attribute can be set with one of the following values: none, metadata, and auto.

Audio and Video Elements

If we use the preload = “auto” attribute, the web browser will try to download (buffer) all audio files the first time the web is displayed, regardless of whether the audio file will be played or not.

This should be used when we are sure the user will play the file. Because every time a web page is displayed, the download process starts immediately (which will also reduce the user’s bandwidth capacity)

Some web browsers use preload = “auto” as the default value.

Conversely, the preload = “none” attribute will instruct the web browser not to buffer the audio file until the play button is clicked. When the audio file starts to run (the play button is clicked), that’s when the new web browser starts the buffering process.

This method is suitable if it is most likely that the audio file will not be run by the user, or on the page there are more than 1 audio file. Because the buffering process will not run thereby saving bandwidth.

Because of the way this works, this preload = “none” attribute also has weaknesses. The web browser cannot display the audio duration before the play button is clicked. This happens because the web browser ‘does not know anything’ about the audio file (where he must download it first). The duration of the new audio will appear when the user starts to run the audio file.

In addition, the first time the audio file is run there may be a pause of a few seconds when the web browser starts the buffering process.

As a middle way, we can use the preload = “meta” attribute. This attribute will instruct the web browser to download a small audio file when the page is displayed, this is enough to get information about the file.

From this ‘few files’, the web browser can find out and display the length of the audio file when the page loads. However, the new buffering process will run when we click the play button.

The preload attribute that we discuss here is actually only a ‘suggestion’ for web browsers. Web browsers will ignore the value of this attribute in certain situations, especially for the value preload = “auto”.

For example, if a web browser detects a user using a slow internet connection, it will switch to the preload = “meta” or preload = “none” method. Some web browsers for smartphones will also ignore the value of preload = “auto” to save bandwidth.

Here is an example of using these three values:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Audio Element</title>
</head>
<body>
  <h3>Audio tag with preload attribute = auto</h3>
  <audio src="song.mp3" controls  preload="auto"></audio>
<br>
  <h3>Audio tag with preload attribute = none</h3>
  <audio src="song.mp3" controls  preload="none"></audio>
<br>
  <h3>Audio tag with preload attribute = meta</h3>
  <audio src="song.mp3" controls  preload="meta"></audio>
</body>
</html>
Audio and Video Elements

If you run the above code, there will be no difference between the preload = “auto” attribute and preload = “meta”, this is because the buffering effect is too fast so it is not detected (because the file is already available on our computer, automatic buffering is not needed).

But pay attention to the player display for the preload = “none” attribute. The web browser cannot display the duration of the audio file because it does not have information about this.

Get to know the Audio Format

If the explanation of the preload attribute is confusing enough, then this discussion might make you even more confused.

Although the <audio> tag is part of the standard elements in HTML5, HTML5 itself does not provide an explanation of what audio formats the web browser must support.

There are 4 audio formats that are commonly used on the internet, namely MP3, WAV, Ogg, and ACC.

Audio Format: MP3

The MP3 format (MPEG-2 Audio Layer III) is the most popular format for audio. MP3 uses a lossy compression technique, where we can compress the audio file size to be smaller at the expense of a little quality.

Although popular, the MP3 format is proprietary. If you want to develop an MP3 player application (including creating a web browser that supports MP3) then you have to pay a fee. For this reason, web browsers from ‘small’ companies like Opera and Mozilla Firefox did not initially support the MP3 format. But now both web browsers fully support MP3 in the latest version.

Opera is the latest web browser that supports MP3, which is the version of Opera 25 which was released in September 2014. Opera versions 24 and below do not yet support MP3 for the <audio> tag.

MP3 copyrights are held by the Fraunhofer Institute or the Fraunhofer Society, a research organization based in Germany. According to Wikipedia, in 2005 the organization earned around 100 million euros in income for the MP3 format patent.

You can read more about this in Wikipedia /MP3 and Wikipedia/Fraunhofer Society.

Audio Format: WAV

The WAV (Waveform Audio File Format) format is also proprietary (developed by IBM and Microsoft), but in contrast to MP3 and Ogg, WAV implements lossless compression, where audio files are not compressed to maintain quality. Therefore the resulting file is large so it is not suitable for web use.

Audio Format: Ogg Vorbis

Ogg format (or in full: Ogg Vorbis) is an open-source audio format, so its use does not require a license fee. Ogg uses a lossy compression principle such as MP3 where the file size can be reduced at the expense of a little audio quality.

The format developed by Xiph.Org Foundation was originally designed to replace MP3. But because it is relatively new, the use of the Ogg format is still less popular when compared to mp3.

Because it is open-source, the Ogg format was originally set as the standard audio format for HTML5. But this was finally canceled and the web browser was given the freedom to use this type of audio format. Mozilla Firefox and Opera web browsers fully support the Ogg format since the appearance of the <audio> tag.

Audio Format: ACC

The ACC (Advanced Audio Coding) format was developed by several technology companies such as Bell Labs, Fraunhofer Institute, Dolby Labs, Sony, and Nokia. This proprietary format also uses lossy compression like MP3 but is designed to produce better sound quality than MP3s (with the same file size). Because of this, the ACC format is gaining in popularity, especially for music stores like iTunes.

Difference Between Audio Formats and File Extension

The audio format that we discussed earlier is more fully called the audio coding format or also known as the audio codec (short for coder-decoder).

An audio codec is a set of rules (algorithms) on how to convert/encode ‘voice’ into digital data that can be stored in computer memory. These rules distinguish one format from another format.

Although most audio formats use the file name extension in accordance with the abbreviation of the codec, but not always. For example, the MP3 audio format only uses the .mp3 extension as the file name. However, the WAV audio format can use the .wav or .wave extension.

The ACC audio format even has 8 types of file extensions, such as .acc, .m4a or .mp4 as file names. So you will find a file called songku.m4a, but the audio format it uses is ACC. The .m4a extension is an audio format used by Apple iTunes.

The table below summarizes the various file extensions commonly used in an audio format:

Format AudioFile Extension
MP3.mp3
WAVwav, .wave
Ogg.ogg, .ogv, .oga, .ogx, .ogm, .spx, .opus
ACC.m4a, .m4b, .m4p, .m4v, .m4r, .3gp, .mp4, .aac

From the table above, it can be seen that an audio format can have many file extensions. When discussing digital audio and video, this file extension is also known as a ‘container’.

Audio Format Support by Web Browsers

The many audio formats available, supported by various web browsers. License issues are generally the main reason for a web browser not to support certain formats (such as the MP3 case in Opera).

The table below summarizes web browser support for various audio file formats and from what version the web browser can play it:

Audio and Video Elements

For updates on the audio format support tables above, visit: Wikipedia/HTML5_Audio and developer.mozilla.org

As can be seen from the table, not all web browsers can run audio files with certain formats, and only the latest version supports this.

For example, if I use an audio file in MP3 format, then I can’t play it using Opera 24 and below (which is still relatively new. But if I replace it with the Ogg format, it’s the turn of the Internet Explorer web browser that can’t run it.

Using Multiple Audio File Formats

One solution to overcome the limitations of format support, we can use several formats for the same audio file. The web browser will then choose which format can be used.

For example, I can provide 2 audio files: Lagu.mp3, and Lagu.ogg in one <audio> tag. For this purpose, we must use the <source> tag. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Audio Element</title>
</head>
<body>
	<audio controls>
	  <source src="song.mp3" type="audio/mp3">
	  <source src="song.ogg" type="audio/ogg">
	</audio>
</body>
</html>

This time, I moved the src attribute from the <audio> tag to the <source> tag. The type attribute is used to ‘inform’ web browsers about the audio file format. The contents of this attribute are in the form of audio file MIME type (about the MIME type we discussed in chapter 6).

When the above code is accessed, the web browser can choose to use which file format can be run (in the order of writing). Google Chrome or IE will choose to use the MP3 format, while Opera 24 or Firefox 20 will skip the MP3 and use the Ogg format.

Notification for old Web Browsers

Although the majority of web browsers already use automatic updates, there are still users who use the ‘old school’ web browser. Generally, this web browser is on an old computer or office computer that cannot be updated for security reasons or other reasons (for example IE on Windows XP can only be updated to version 8).

The web browser cannot handle the <audio> tag because it does not understand HTML5 at all. The polyfill method with HTMLshiv that we discussed in chapter 2 is only useful for introducing semantic tags, but cannot ‘teach’ web browsers how to play audio and video only with HTML.

For this situation, we can choose whether to completely ignore this web browser (because of its use which is already relatively small) or provide information so that users update the web browser.

When a web browser doesn’t understand a tag, it will pass the tag. We can use this to provide information related to this matter. Here is an example of writing the HTML code:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Audio Element</title>
</head>
<body>
	<audio controls>
	<source src="song.mp3" type="audio/mp3">
	<source src="song.ogg" type="audio/ogg">
	<p>Sorry, you cannot play this audio file.
	Please update your web browser or use another web browser.
	As an alternative, you can download the audio file at the
	following link: <a href="song.mp3" >song.mp3</a></p>
	</audio> 
</body>
</html>

If the above code is run in a modern web browser, the default web browser audio browser will appear, but for IE 8 that does not support HTML5, the text displayed is in the <p> tag.

Element Video

In addition to providing an audio player feature, HTML5 also provides a <video> tag to run videos. The <video> tag has the same attributes as the <audio> tag, such as src, controls, autoplay, loop, muted and preload.

As a sample file, I use the butterfly.mp4 file which is placed in the learn_html folder, so this file is in the same folder as the index.html file.

Here’s how to use the <video> tag:

<video src="butterfly.mp4" controls> </video>

Like the <audio> tag, the src attribute is used to input the location and name of the video file, while the controls attribute is added so that the video player displays control buttons such as play/stop, slider, volume, and timer.

Autoplay attribute

The autoplay attribute can be added to the <video> tag so that the video runs immediately when the page is displayed. Here is an example of its use:

<video src="butterfly.mp4" autoplay controls> </video>

Loop Attribute

The loop attribute will make the video repeat automatically when it reaches the end of the duration. Without using this attribute, the video will stop when it has finished playing. Here is an example of the writing:

<video src="butterfly.mp4" loop controls> </video>

Mute Attribute

By default, the video will run at full volume. We can add mute attributes to turn off the volume. Even so, users can increase the volume through the available buttons. Here is an example:

<video src="butterfly.mp4" mute controls> </video>

Running videos without sound can be used to play advertisements or product promotions so as not to be too distracting.

Preload Attributes

Just like the <audio> tag, the <video> tag also has a preload attribute to set the buffering method by the web browser. The values ​​used in this attribute are none, metadata, and auto.

We have learned a complete explanation of this attribute and its functions when discussing the <audio> tag. The use of this attribute should be a concern if you want to use the value preload = “auto”. Buffering for videos will take up more bandwidth than audio files.

Following is an example of usage in the <video> tag:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Video Elements</title>
</head>
<body>
  <h3>Video tag with preload attribute = auto</h3>
    <video src="butterfly.mp4" controls preload="auto"></video> 
  <br>
  <h3>Video tag with preload attribute = none</h3>
    <video src="butterfly.mp4" controls preload="none"></video> 
  <br>
  <h3>Video tag with preload attribute = meta</h3>
    <video src="butterfly.mp4" controls preload="meta"></video>
</body>
</html>
Audio and Video Elements
Audio and Video Elements
Audio and Video Elements

As you can see, if we use the preload = “none” attribute, the web browser cannot display the duration along with the height and width of the video window. This happens because the web browser has not received information about the video.

Only when the play button is pressed, the web browser will run the video with the size it should. To avoid this we can set the video size by using the width and height attributes.

Attributes Width and Height

Through the width and height attributes, we can adjust the width and height of the video being displayed. But unlike images, web browsers will maintain the video ratio.

Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Video Elements</title>
</head>
<body>
  <h3>Video tag with attributes width = 200 height = 300</h3>
    <video src="butterfly.mp4" controls width="200" height="300"></video> 
  <h3>Video tag with attributes width = 400</h3>
    <video src="butterfly.mp4" controls width="400"></video>
</body>
</html>
Audio and Video Elements
Audio and Video Elements

Poster Attribute

The <video> tag has a poster attribute that can be used to display placeholder images before the video is run. This attribute contains the value of the address to the image file. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Video Elements</title>
</head>
<body>
  <video src="butterfly.mp4" controls width="400"
  poster="butterfly.jpg">
  </video>
</body>
</html>
Audio and Video Elements

When the web page is loaded, the web browser will display a butterfly.jpg image in the video window. By using this poster tag we can choose what images you want to display.

Know the Video Format

Just like audio files, not all video formats can be run by a web browser. Before we look at the limitations of this support, let’s briefly discuss video file formats that are commonly used.

There are 3 types of video formats that are quite popular to use, namely H.264, Ogg Theora and WebM. The video format is also known as video codec.

Video Format: H.264

The H.264 or MPEG-4 Part 10 format, Advanced Video Coding (MPEG-4 AVC) is the most popular video codec used today. Hardware devices such as video recorders and Blueray players generally use this format. Video sharing sites like YouTube and Vimeo also use H.264. The popularity of the H.264 format is similar to the MP3 format in audio files. This format can produce videos with high quality but with relatively small file size.

However, H.264 is a proprietary format, so it requires a license fee to use it. For this reason, the H.264 format was not initially supported by Mozilla Firefox and Opera.

Maybe you are not too familiar with the H.264 format, but unconsciously we have often used it. The H.264 format is mostly placed in ‘containers’ .mp4 or .mkv. If you save a video with this extension, most likely the codec used is H.264. I will return to discussing these ‘containers’ in a few moments.

Audio and Video Elements

Video Format: Ogg Theora

If Ogg Forbis is an open-source format for audio files, then Ogg Theora is an open-source format for video files. This codec was also developed by the same company, namely Xiph.Org Foundation.

During the draft stage of the HTML5 specification, Ogg Theora (and also Ogg Forbis) was briefly submitted as the standard for HTML5. However, due to the many lobbies of some parties, HTML5 then chose not to specify a certain format and gave freedom to the web browser.

The Ogg Theora format is supported by the Open Source community and is a standard format choice by Mozilla Firefox and Opera. However, when viewed from the results of video compression, in some cases the results are still inferior when compared with H.264.

Video Format: WebM

The WebM format is derived from the VP8 video codec developed by the On2 company. In 2010, Google acquired On2 and made VP8 as the basis for an open-source codec called WebM.

This format is still relatively new when compared to H.264 and Ogg Theora. Because it is supported by a company as big as Google and is open source, WebM can be a universal video format going forward. YouTube also said it would switch to WebM to replace the H.264 format.

Even so many people still doubt this format, especially when compared with the already popular H.264 format.

WebM can be run on Mozilla Firefox, Opera and Google Chrome. But Microsoft decided not to support it on IE.

In addition to using VP8, Google is currently also developing a newer version, namely VP9. Both of these technologies are still included in WebM.

Get to know the Video Standards

The video codec or video format that we discussed earlier is only one of the standards used to make videos. At least, there are 3 standards in digital video.

Video formats such as H.264, Ogg Theora and WebM are codecs (short for coders-decoders) that contain algorithms on how to save moving images (video) into computer bits. This is the first standard in digital video.

The second standard is about aspects of ‘sound’ in the video. Generally, the digital video uses a separate standard for audio, this audio format we discussed earlier, where MP3, Ogg, Wav, and ACC are audio formats that are widely available today. The H.264 video format generally uses MP3 or ACC as audio codecs, while Ogg Theora and WebM use Ogg forbis for voice acting.

The third standard is the ‘container’ or the container of the two codecs above (audio codec and video codec). This container is better known as a file format. For example, files with the .mp4 suffix are generally used to hold H.264 videos, the .ogv suffix is ​​used by the Ogg Theora codec while .webm is used by the WebM codec.

In addition, there are also multi-format containers, such as .mkv which can be used by H.264, Ogg Theora or WebM. So just by looking at the name of a file, we cannot get information about the codec used. For a complete list of these containers, see Wikipedia/Comparison_of_container_formats.

Video Format Support by Web Browsers

License issues are generally the biggest factor in the use of the H.264 format. The web browser Mozilla Firefox and Opera initially did not support this format, but in the latest version both of them can play the H.264 format. On the other hand, Internet Explorer still does not support the Ogg format, even in the latest version.

Audio and Video Elements

The following table summarizes web browser support for video formats in HTML5:

Using Multiple Video File Formats

Just like audio files, to overcome the limitations of video format support, we can use several types of formats in 1 <video> tag. The web browser will choose a format that can be played according to its specifications. Following is an example of how many video file formats 1 <video> was written in:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Video Elements</title>
</head>
<body>
 <video controls>
  <source src="butterfly.mp4" type="video/mp4">
  <source src="butterfly.ogg" type="video/ogg">
  <source src="butterfly.webm" type="video/webm">
</video>
</body>
</html>

By providing several video formats, one can anticipate the limitations of format support in some web browsers.

Notification for Old Web Browsers

Just like the <audio> tag, we can also create information messages for older web browsers that don’t yet support HTML5. Here is an example of its use:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learn Audio Element</title>
</head>
<body>
<video controls>
  <source src="butterfly.mp4" type="video/mp4">
  <source src="butterfly.ogg" type="video/ogg">
  <source src="butterfly.webm" type="video/webm">
  <p>Sorry, you cannot play this audio file.
Please update your web browser or use another web browser.
As an alternative, you can download the audio file at the 
following link: <a href="song.mp3" >song.mp3</a></p>
</video>
</body>
</html>

If you run the code above on a web browser that supports the <video> tag, a video window will appear with the control button. But on web browsers that don’t support HTML5, information will appear information.

In this chapter we have discussed the <audio> and <video> tags ( Audio and Video Elements) carried by HTML5. The limitation of format support is indeed an obstacle. But with the decreasing popularity of the flash player, soon all web browsers will look for ‘shared formats’, so we can use the <audio> and <video> tags to the full.

In the next chapter, we will enter into how to create tables in HTML.

HTML Tutorial List

  1. Learn HTML For Beginner (Part 1 : Introduction HTML)
  2. Learn HTML For Beginner (Part 2 : Basic Structure of HTML)
  3. Learn HTML For Beginner (Part 3 : Head Element)
  4. Learn HTML For Beginner (Part 4 : Text Formatting Element)
  5. Learn HTML For Beginner (Part 5 : List Element)
  6. Learn HTML For Beginner (Part 6 : Image Related Element)
  7. Learn HTML For Beginner (Part 7 : Audio dan Video Element)
  8. Learn HTML For Beginner (Part 8 : Table Element)
  9. Learn HTML For Beginner (Part 9 : Form Element
  10. Learn HTML For Beginner (Part 10 : HTML5 Form Element)
  11. Learn HTML For Beginner (Part 11 : Embed, Object dan Iframe Element)
  12. Learn HTML For Beginner (Part 12 : HTML5 Canvas Element)
  13. Learn HTML For Beginner (Part 13 : Scalable Vector Graphics (SVG))
  14. Learn HTML For Beginner (Part 14 : HTML5 Semantic Tag (Layout))


What do you think?

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading…

0

Comments

0 comments

Learn HTML For Beginner (Part 6: Image Related Element)

Learn HTML For Beginner (Part 8: Table Element)