Bringing Video, Audio, And Images On Web Page

Hello and Welcome Dear Developers, in today's Article I am going to show you how you can bring media(Video, Audio and Images) on your web page in order to make it more engaging and visually appealing. Today's article is going to be one of the most important and interesting topics in your web development journey. So without any delay let's start.

Introduction

Websites in the present-day scenario are not just built to showcase the content. Web developers and website owners want to make their websites more attractive and interactive. Considering this, the media in the websites are gaining popularity day by day. In Fact these days one of the most important things on the internet is the media.

1. Getting A Video In Web Page

The <video> tag is part of the HTML5 specification and provides a standardized way to embed video files directly into a webpage. The video tag is a inline tag, means it will take only that much of space on the webpage which is required to fit its width. Its simplicity and versatility make it a fundamental element for delivering dynamic multimedia content.

Reasons Behind Adding A Video

1. Educational Content.

2. Marketing and Advertising.

3. Entertaining ang Engaging Visitors.

4. Providing Customer Support.

5. Improving Search Engine Optimization(SEO).

How to Add?

Let's understand it by a Code Example:

<video width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Let's Break Down the Code

1. width and height attributes: with the help of these attributes you can set the dimensions or the area in which your video should be displayed.

2. controls attribute adds controls to the player, allowing users to interact with the video. Without controls your video on the page will look like a simple image and nothing more so don't forget to give controls to your video.

3. src attribute defines the source file for the video. Replace "your-video.mp4" with the actual file path or URL of your video.

4. type="video/mp4": This attribute specifies the MIME type of the video file. It helps the browser understand the format of the video. In this case, it indicates an MP4 video.

5. Fallback Text: In case your browser does not support the specified video format then this text will be displayed on your page.

Providing Multiple Sources

It may happen that a particular browser does not support a video type. To ensure compatibility across various browsers and devices, it's good practice to include multiple sources with different file formats. This is achieved using multiple <source> elements within the <video> tag:

<video width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    <source src="your-video.webm" type="video/webm">
    <source src="your-video.ogv" type="video/ogg">
    Your browser does not support the video tag.
</video>

Now one of the videos, which is supported by your browser will be displayed on your web page.

Other Important Attributes of <Video> Tag:

1. autoplay Attribute: Causes the video to start playing automatically when the page loads.

<video autoplay><source src="your-video.mp4" type="video/mp4"></video>

2. muted Attribute: Your video will remain muted when page loads.

<video muted><source src="your-video.mp4" type="video/mp4"></video>

3. loop Attribute: Makes the video play in a continuous loop.

<video loop><source src="your-video.mp4" type="video/mp4"></video>

4. poster Attribute: Specifies an image to be displayed while the video is downloading, or until the user presses play.

<video poster="your-poster-image.jpg"><source src="your-video.mp4" type="video/mp4">
</video>

5. preload Attribute: Specifies whether the browser should preload the audio file. Values can be none(no preload), metadata(preload duration and dimensions)or auto (preload entire video).

<audio preload="auto"></audio>

2. Getting An Audio In Web Page

We often see many websites, especially blogging sites with an audio player in them. These audio players play the audio description of the blog. This is very important when it comes to websites that have content to tell in a story format or a website where the owner wants to share his thoughts with the audience over voice.

HTML provides a way to play audio on web pages through the <audio> element. The <audio> element is also a inline tag, and it is used to embed audio files in web pages.

The <audio> tag creates an audio player on a web page. Along with playing the audio, it supports media controls, like play, pause, volume, and mute. The browser will choose the first file with a file format that it supports. Supported audio file formats include MP3, WAV, and OGG.

How to add?

Similar to video there are two ways to bring audio on your web page:

1. Single source:

<audio controls>
    <source src="your-audio.mp3" type="audio/mp3">
    Your browser does not support the audio tag.
</audio>

2. Multiple Sources:

<audio>
    <source src="your-audio.mp3" type="audio/mp3">
    <source src="your-audio.ogg" type="audio/ogg">
    Your browser does not support the audio tag.
</audio>

All the attributes work similar to video tag. Also autoplay, muted, loop, preload attributes are applicable with the audio tag as it is.

3. Getting An Image In Web Page

Images are a common element of web design, and they serve a number of different purposes on websites. Images make your web page visually appealing, also they are important for branding, illustration and navigation purposes.

To include an image in an HTML page, you can use the <img> element. The element is a self-closing tag, which means that it doesn't have a closing tag.

<img src="your-image.jpg" alt="Descriptive Text">
<img src="https://images.unsplash.com/photo-1604251405903-b8c4e83cdf7c?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cmVsYXhhdGlvbnxlbnwwfHwwfHx8MA%3D%3D" alt="Descriptive Text">

Ensure to replace "your-image.jpg" with the actual path or URL of your image and provide meaningful descriptive text for accessibility.

Essential Attributes:

1. src Attribute: Specifies the source file or URL of the image.

    <img src="your-image.jpg" alt="Description of the image">
   

2. alt Attribute: Provides alternative text for the image. This is crucial for accessibility and SEO.

    <img src="your-image.jpg" alt="A beautiful landscape">
   

3. width and height Attributes: Set the width and height of the image. This helps in controlling the image's display size.

    <img src="your-image.jpg" alt="Description" width="300" height="200">
   

4. title Attribute: Adds a title or tooltip to the image, providing additional information when the user hovers over it.

    <img src="your-image.jpg" alt="Description" title="Click for a larger view">
   

5. loading Attribute (HTML5): Determines how the image should be loaded. Values can be eager (default) or lazy.

    <img src="your-image.jpg" alt="Description" loading="lazy">
   

6. decoding Attribute (HTML5): Specifies the decoding process for the image. Values can be async (default), sync, or auto.

    <img src="your-image.jpg" alt="Description" decoding="auto">
   

Sources and Exploration

👉If you want to get free videos, audios and images for the practice you can get from here:

1. https://www.pexels.com/

2. https://pixabay.com/

👉If you want to explore more about the above things you can visit these:

1. For video: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

2. For audio: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

3. Images: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Thank You

If You've reached to the end, You are a champ🏆. If you liked the Article consider sharing it with others and stay connected because much more is coming.

Your thoughts matter—feel free to drop any questions or suggest topics for discussion in the comments. Let's keep the conversation going!"