Ify's blog
DAY 5: Introducing Multimedia

DAY 5: Introducing Multimedia

IfeanyiChukwu Obi's photo
IfeanyiChukwu Obi
·

7 min read

Table of contents

INTRODUCTION:

Hello everyone! Now, in the spirit of consistency I have made out time to give you back-to-back posts.

Today we will be discussing multimedia. Multimedia on the web is sound, music, videos, movies, and animations.

WHAT IS MULTIMEDIA?

Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

In today's digital age and ever-evolving landscape of web development, multimedia content such as audio and video plays a significant role in enriching the user experience on the web. In HTML, multimedia content can be seamlessly embedded using specialized tags like '<audio>' and '<video>'.

Let us delve into how you can leverage these HTML tags to incorporate multimedia elements into your web pages in order to enhance your web content.

HTML VIDEO IN WEB DEVELOPMENT:

Video content plays a vital role in modern web development, offering engaging experiences for users.

  1. <video>: This element is used to show a video on a web page. It is a primary element used to embed video content in HTML documents. It provides a standardized way to include video files and offers various attributes for controlling video playback. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

  2. <src>: This source attribute specifies the URL of the video resource.

    It allows you to specify alternative video files that the browser may choose from. The browser will use the first recognized format.

    Example: <video src="video.mp4"></video>

  3. controls: The attribute adds video controls, like; play, pause, volume, and progress bar.

    Example: <audio src="audio.mp3" controls></audio>

  4. source: The element allows you to specify alternative video files that the browser may choose from. The browser will use the first recognized format.

  5. autoplay: This attribute helps to start a video automatically.

    Example: <video src="video.mp4" autoplay></video>

  6. muted: This attribute lets the video play muted until it is changed manually.

    Example: <video src="video.mp4" muted></video>

    NOTE:

    autoplay muted: Add muted after autoplay to let your video start playing automatically (but muted):

  7. loop: This attribute, when present tells the browser to loop the media playback infinitely.

    Example: <video src="video.mp4" loop></video>

  8. width and height: It is a good idea to always include these attributes. They define the dimensions of the video player.

    If the height and width are not set, the page might flicker while the video loads.

    Example: <video width="640" height="360"></video>

  9. preload: This attribute hints to the browser how much of the media file should be preloaded before playback begins. The possible values are 'none', 'metadata', and 'auto'.

    Example: <video src="video.mp4" preload="metadata"></video>

  10. poster: This attribute specifies an image to be shown while the video is downloading, or until the user hits play. It is often used as a placeholder or preview image for the video.

    Example: <video src="video.mp4" poster="preview.jpg"></video>

  11. type: This attribute specifies the media type of the media resource. It helps the browser determine which codec to use for playback.

    Example: <source src="video.mp4" type="video/mp4">

    The different types are:

    1. MP4: video/mp4

    2. WebM: video/webm

    3. Ogg: video/ogg

COMMON VIDEO FORMATS:

  • There are many video formats out there.

  • The MP4, WebM, and Ogg formats are supported by HTML.

  • The MP4 format is recommended by YouTube.

    1. .mpg or .mpeg: Moving Pictures Expert Group. The first popular video format on the web. Not supported anymore in HTML.

    2. .avi: Audio Video Interleave. Commonly used in video cameras and TV hardware. It plays well on Windows computers, but not in web browsers.

    3. .wmv: Windows Media Video. Commonly used in video cameras and TV hardware. It plays well on Windows computers, but not in web browsers.

    4. .mov: It is commonly used in video cameras and TV hardware. It plays well on Apple computers but not in web browsers.

    5. .rm or .ram: Real Media. It is used to allow video streaming with low bandwidths. It does not play in web browsers.

    6. .swf: Small Web Format. It often requires an extra component (a plug-in) to play in web browsers.

    7. .flv: Adobe Flash Video. It often requires an extra component (a plug-in) to play in web browsers.

    8. .ogg: Ogging is a free and open container format primarily used for audio files. It is a multimedia container format that's commonly used for storing and playing audio and video files. It's quite versatile and flexible, designed to house different types of media data like audio, video, text, and metadata. Supported by HTML.

    9. .webm: Web Media File. Supported by HTML.

    10. .mpeg-4 or .mp4: MPEG-4 is a multimedia standard, while MP4 is a specific container format within that standard. Commonly used in video cameras and TV hardware. It is supported by all browsers and recommended by YouTube.

NOTE:

  • Only MP4, WebM, and Ogg video are supported by the HTML standard.

  • There are three supported video formats: MP4, WebM, and Ogg. The browser's support for the different formats is:

    1. Edge: MP4, WebM, Ogg

    2. Chrome: MP4, WebM, Ogg

    3. Firefox: MP4, WebM, Ogg

    4. Safari: MP4, WebM

    5. Opera: MP4, WebM, Ogg

HTML AUDIO IN WEB DEVELOPMENT:

The HTML <audio> element is used to play an audio file on a web page.

  1. <audio>: This element is used to play an audio file on a web page. It is a primary element used to embed audio content in HTML documents. It provides a standardized way to include video files and offers various attributes for controlling video playback. The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

  2. <src>: This source attribute specifies the URL of the video resource.

    It allows you to specify alternative video files that the browser may choose from. The browser will use the first recognized format.

    Example: <audio src="audio.mp3"></audio>

  3. controls: The attribute adds video controls, like; play, pause, volume, and progress bar.

    Example: <audio src="audio.mp3" controls></audio>

  4. autoplay: This attribute helps to start a video automatically.

    Example: <audio src="audio.mp3" autoplay></audio>

  5. muted: This attribute lets the video play muted until it is changed manually.

    Example: <audio src="audio.mp3" muted></audio>

    NOTE:

    autoplay muted: Add 'muted' after 'autoplay' to let your audio start playing automatically (but muted):

  6. loop: This attribute, when present tells the browser to loop the media playback infinitely.

    Example: <audio src="audio.mp3" loop></audio>

  7. preload: This attribute hints to the browser how much of the media file should be preloaded before playback begins. The possible values are 'none', 'metadata', and 'auto'.

    Example: <audio src="audio.mp3" preload="metadata"></audio>

  8. type: This attribute specifies the media type of the media resource. It helps the browser determine which codec to use for playback.

    Example: <source src="audio.mp3" type="audio/mpeg">

    The different types are:

    1. MP3: audio/mpeg

    2. WAV: audio/wav

    3. Ogg: audio/ogg

COMMON AUDIO FORMATS:

  • MP3 is the best format for compressed recorded music.

  • The term MP3 has become synonymous with digital music.

  • If your website is about recorded music, MP3 is the choice.

  1. .mid or .midi: Musical Instrument Digital Interface. This is the main format for all electronic music devices, like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. It plays well on all computers and music hardware, but not in web browsers.

  2. .rm or.ram: RealAudio. It allows streaming of audio with low bandwidths. It does not play in web browsers.

  3. .wma: Windows Media Audio). It plays well on Windows computers, but not in web browsers.

  4. .aac: Advanced Audio Coding. Developed by Apple as the default format for iTunes. It plays well on Apple computers but not in web browsers.

  5. .wav: It plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML.

  6. .ogg: Supported by HTML. Ogging is a free and open container format primarily used for audio files. It is a multimedia container format that's commonly used for storing and playing audio and video files. It's quite versatile and flexible, designed to house different types of media data like audio, video, text, and metadata.

  7. .mp3: MPEG Audio Layer 3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. It combines good compression (small files) with high quality. Supported by all browsers.

  8. .mp4: MPEG-4 Part 14 is a video format, but can also be used for audio. Supported by all browsers.

    NOTE: Only MP3, WAV, and Ogg audio are supported by the HTML standard.

    There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is:

    1. Edge: MP3, WAV, OGG

    2. Chrome: MP3, WAV, OGG

    3. Firefox: MP3, WAV, OGG

    4. Safari: MP3, WAV

    5. Opera: MP3, WAV, OGG

NOTES:

  1. The text editor I use is called Visual Studio Code.

  2. The picture attached is a sample of the codes I use. Try it out for yourselves! Enjoy the ride!!!

HTML5HTMLProgramming BlogsProductivityProgramming Tipsprogramming languagesnewbie#newbieintechwomenwhocodeWomenWhoTechtechnologytech #codenewbiesLanguage LearningNewbie web developers