Multimedia tags (video, audio)
| Site: | Philippine Science High School - MC - Knowledge Hub |
| Course: | SY25.CS3.Web Development |
| Book: | Multimedia tags (video, audio) |
| Printed by: | , Guest user |
| Date: | Monday, 6 October 2025, 11:27 PM |
1. Introduction
After completing this module, you are expected to:
- Compare the differences of HTML and HTML5
- Demonstrate the use of various HTML5 tags
- Configure the video and audio on a web page with HTML5 elements.
At the start of the World Wide Web a MIDI file can be added to a web page for a little soundtrack.
Not long after, superior choices permitted sound and video designs to be embedded in a web page. Flash,
however, got to be the de facto implanted mixed media player, in portion since of its utilize by Youtube
and other comparable administrations.
This kind of innovation worked affirm, but it had several problems, including not working
well with HTML/CSS features, security issues, and accessibility issues.
A native solution would solve much of this if implemented correctly. Fortunately, a few years
later the HTML5 specification had such features added, with the <video> and <audio>
elements.
Please note that this module is meant to be an introduction to multimedia Web files, with a
strong emphasis on the HTML5 code you need. It does not teach you how to create multimedia
content, only how to make it available to your web page.
2. How media formats work?
There are two format decisions to make when preparing audio or video content. Firstly, how the media is encoded. Codec, short for code/decode or compress/decompress, refers to the method used for encoding. An example of which are AAC, MP3, H.264 and Vorpis. Only a few, however, are appropriate for the Web.
Secondly, choosing the container format for the media. A holder arrange can hold more than one
codec and familiarizing yourself with these formats are important when adding audio or video to a site.
3. The video formats
For video, the most common options are:
- Ogg container + Theora video codec+ Vorbis audio coded – Commonly named “Ogg Theora”, the
record incorporates a .ogy suffix. All codecs and holder in this choice are open source making them
perfect for web dissemination. Still, a few accept the quality is second rate to other options.
- MPEG-4 container + H.264 video codec + AAC audio codec – This can be by and large alluded to as MPEG-4 and takes .mp4 or .m4v record addition. H.264 is a high- quality and adaptable video coded but it is protected and must be authorized for a fee.
- WebM container + VP8 video coded + Vorbis audio codec - WebM is the most up to date holder organize and employments .webm record extension. Planned to work solely with VP8 and verbs, it has the advantage of being open-source and royalty-free.
Browser creators have not concurred on a single format to support. A few lean toward open
source, royalty-free choices like Ogg Theora or WebM whereas others adhere with H.264 because it is
of superior quality despite of the royalty requirements. Different form of videos ought to be made to
guarantee support over all browsers.
4. Adding a video to a page
Before HTML5, to have a video play on a webpage, you would need to use a plugin like Adobe Flash Player. With the introduction of HTML5, you can now place videos directly into the page itself.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The HTML5 video Tag</title>
</head>
<body>
<video width="640" height="480" poster="posterpic.jpg" controls>
<source src= "https://download.blender.org/peach/trailer/
trailer_400p.ogg" type="video/ogg">
<source src= "https://download.blender.org/peach/trailer/
trailer_400p.mp4" type="video/mpeg">
Your browser does not support the video element. Kindly update
it to the latest version.
</video>
</body>
</html>
This will produce the following result:
5. The audio formats
There are a few sound designs to select from but not one format is supported by all browsers.
- MP3. The format with the record extension .mp3 has become to be omnipresent as a music download arrange. The MP3 (short for MPEG-1 Audio Layer 3is protected and requires permit expenses paid by equipment and program companies (not media makers).
- WAV. The WAV arrange (.wav) is additionally a codec and holder in one.
- Ogg container + Vorbis audio codec. As a rule alluded to as Ogg Vorbis, it is served with the .ogg or .oga record extension.
- MPEG 4 container + AAC audio codec. “MPEG4 audio” (.m4a) is not frequently used than MP3.
- WebM container + Vorbis audio codec. The WebM (.webm) format can moreover contain sounds only and open media file format (see http://www.webmproject.org) sponsored by Google; uses the VP8 video codec and Vorbis audio codec.
6. Adding audio to a page
The HTML <audio> element is used to embed sound content in documents. It may contain
one or more audio sources, represented using the src attribute or the
HTML5 most commonly used audio formats are ogg, mp3, and wav. You can use the <source> tag to specify media along with media type and many other attributes. An audio element allows multiple source elements, and the browser will use the first recognized format.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The HTML5 audio Element</title>
</head>
<body>
<audio controls="controls">
<source src="images/html5-audio-mp3.mp3" type="audio/mpeg">
<source src="images/html5-audio-mp3.ogg" type="audio/ogg">
</audio>
</body>
</html>
This will produce the following result:
Some of the attributes that could be used with the audio tag as shown below:
7. Adding a Youtube Video
Media files, especially video files could be large resource that can affect the loading time of any web page. Using the right media file format is also a consideration for web developers when they try to add them in a web page.
An alternative method for incorporating videos in your web page is to use a streaming service like Youtube.com and then just embed it the HTML document. W3schools dedicated a page in discussing this method and you can access it using this link: HTML YouTube Videos (w3schools.com) or you can also find the discussion in google support web page through this link: Embed videos & playlists - YouTube Help (google.com)
8. Summary and References
Summary
- After you get ready sound or video substance for web conveyance, there are two organize choices to create.
- The first is how the media is encoded. The strategy utilized for encoding is called the coded which is short for “code/decode” or “compress/decompress.” Second, you need to select the holder arrange for the media…you can think of it as a ZIP record that holds the compressed media and its metadata together in a package.
- HTML5 <video>element provides a standard way to embed video in web pages.
- For video, the most frequently used formats are:
- Ogg container + Theora video codec + Vorbis audio codec.
- MPEG-4 container + H.264 video codec + AAC audio codec.
- WebM container + VP8 video codec + Vorbis audio codec.
- The HTML5 <audio> element is used to embed sound content in documents.
- HTML5 most commonly used audio formats are ogg, mp3, and wav.