Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added more content in Docs #4583

Merged
merged 1 commit into from
Jan 10, 2025
Merged

added more content in Docs #4583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file removed assets/606 ex1.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/LinearSearch_GFG.webp
View file
Open in desktop
Binary file not shown.
Binary file removed assets/Screenshot 2024-06-16 145014.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/Tutorials.png
View file
Open in desktop
Binary file not shown.
Binary file removed assets/tsp.png
View file
Open in desktop
Binary file not shown.
120 changes: 67 additions & 53 deletions docs/html/multimedia/adding-audio-and-video.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,60 +4,74 @@ title: Adding Audio and Video in HTML
sidebar_label: Adding Audio and Video
sidebar_position: 1
tags: [html, web-development, multimedia, audio, video]
description: In this tutorial, you will learn how to add audio and video to your HTML documents.
description: In this tutorial, you will learn how to add audio and video to your HTML documents
keywords: [html audio, html video, html multimedia, html audio tag, html video tag, html audio element, html video element]
---
Multimedia elements like audio and video are crucial for creating engaging web experiences. HTML5 simplified the embedding of media directly into web pages with the introduction of the `<audio>` and `<video>` elements, eliminating the need for external plugins.

## Audio

To add audio to your web page, use the `<audio>` element. This tag supports various audio formats, such as MP3, WAV, and OGG, allowing for broad compatibility across different browsers and devices.

```html
<audio>
<source src="path/to/your-audio.mp3" type="audio/mp3">
</audio>
```

## Video

Embedding video content is similarly straightforward with the `<video>` element. This tag supports several video formats, including MP4, WebM, and OGG, to ensure your content is accessible on a wide range of platforms.

```html
<video>
<source src="path/to/your-video.mp4" type="video/mp4">
</video>
```


## Browser Support
The numbers in the table specify the first browser version that fully supports the element.
<table class="browserref notranslate">
<tbody><tr>
<th>Element</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Safari</th>
<th>Opera</th>
</tr>
<tr>
<td>&lt;audio&gt;</td>
<td>4.0</td>
<td>9.0</td>
<td>3.5</td>
<td>4.0</td>
<td>11.5</td>
</tr>
<tr>
<td>&lt;video&gt;</td>
<td>4.0</td>
<td>9.0</td>
<td>3.5</td>
<td>3.1</td>
<td>11.5</td>
</tr>
</tbody></table>

In this tutorial, you will learn how to add audio and video to your HTML documents. HTML provides built-in elements such as `<audio>` and `<video>` to embed multimedia content in web pages. These elements allow you to play audio and video files directly in the browser without the need for third-party plugins like Flash.

<AdsComponent />

## Adding Audio in HTML

To add audio to your HTML document, you can use the `<audio>` element. The `<audio>` element allows you to embed audio files in various formats such as MP3, WAV, or OGG. Here's an example of how you can add audio to your HTML document:

```html title="index.html"
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```

<BrowserWindow url="http://127.0.0.1:5500/index.html">
<audio controls>
<source src="/audio/audio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</BrowserWindow>

In the example above, we have used the `<audio>` element with the `controls` attribute, which adds audio controls (play, pause, volume, etc.) to the audio player. The `<source>` element is used to specify the audio file's source and its MIME type.

## Adding Video in HTML

To add video to your HTML document, you can use the `<video>` element. The `<video>` element allows you to embed video files in various formats such as MP4, WebM, or OGG. Here's an example of how you can add video to your HTML document:

```html title="index.html"
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
```

<BrowserWindow url="http://127.0.0.1:5500/index.html">
<video controls width="640" height="360">
<source src="/video/video.mp4" type="video/mp4" />
Your browser does not support the video element.
</video>
</BrowserWindow>

In the example above, we have used the `<video>` element with the `controls` attribute, which adds video controls (play, pause, volume, etc.) to the video player. The `<source>` element is used to specify the video file's source and its MIME type.

## Adding Audio and Video with Multiple Sources

You can provide multiple sources for audio and video files using the `<source>` element. This allows the browser to choose the best source based on its compatibility. Here's an example of how you can provide multiple sources for audio and video files:

```html title="index.html"
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>
```

In the example above, we have provided two sources for both audio and video files. The browser will choose the first compatible source based on the file format and codec support.

## Conclusion

Incorporating audio and video into web pages significantly enhances user engagement by providing a richer multimedia experience. The `<audio>` and `<video>` elements facilitate the embedding of media content directly into your sites, making it more dynamic and interactive. Always ensure your media files are optimized for the web to improve loading times and overall user experience.
In this tutorial, you learned how to add audio and video to your HTML documents using the `<audio>` and `<video>` elements. These elements provide a simple and effective way to embed multimedia content in web pages without the need for third-party plugins. You can customize the appearance and behavior of the audio and video players using CSS and JavaScript to create a rich multimedia experience for your users.
115 changes: 64 additions & 51 deletions docs/html/multimedia/embedding-multimedia-content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,71 +4,84 @@ title: Embedding Multimedia Content in HTML
sidebar_label: Embedding Multimedia Content
sidebar_position: 2
tags: [html, web-development, multimedia, embedding-multimedia-content]
description: In this tutorial, you will learn how to embed multimedia content such as images, audio, and video in your HTML documents.
description: In this tutorial, you will learn how to embed multimedia content such as images, audio, and video in your HTML documents
keywords: [html multimedia, html images, html audio, html video, html multimedia content, html multimedia elements]
---

In this tutorial, you will learn how to embed multimedia content such as images, audio, and video in your HTML documents.
In this tutorial, you will learn how to embed multimedia content such as images, audio, and video in your HTML documents. HTML provides built-in elements such as `<img>`, `<audio>`, and `<video>` to embed multimedia content in web pages. These elements allow you to display images, play audio, and video files directly in the browser without the need for third-party plugins like Flash.

## Adding Audio
<AdsComponent />

To add audio to your web page, use the `<audio>` element. The `<audio>` tag is used to embed sound content in a document, such as music or other audio streams.
## Embedding Images in HTML

The `<audio>` tag contains one or more `<source>` tags with different audio sources. The browser will choose the first source it supports.
To embed images in your HTML document, you can use the `<img>` element. The `<img>` element allows you to display images in various formats such as JPEG, PNG, GIF, etc. Here's an example of how you can embed an image in your HTML document:

The text between the `<audio>` and `</audio>` tags will only be displayed in browsers that do not support the `<audio> `element.
```html title="index.html"
<img src="image.jpg" alt="Image Description">
```

There are three supported audio formats in HTML: MP3, WAV, and OGG.
<!-- <BrowserWindow url="http://.../index.html">
<img src="/images/image.jpg" alt="Image Description" />
</BrowserWindow> -->

<Tabs>
<TabItem value="HTML">
```html
<audio controls>
<source src="path/to/your-audio.mp3" type="audio/mp3">
</audio>
```
</TabItem>
<TabItem value="Output">
<BrowserWindow url="http://127.0.0.1:5500/index.html">
<div>
<audio controls>
<source src="path/to/your-audio.mp3" type="audio/mp3"></source>
</audio>
</div>
</BrowserWindow>
</TabItem>
</Tabs>
In the example above, we have used the `<img>` element with the `src` attribute to specify the image file's URL and the `alt` attribute to provide a text description of the image. The `alt` attribute is used for accessibility purposes and is displayed if the image fails to load.

## Adding Video
## Adding Audio in HTML

Embedding video content is similarly straightforward with the `<video>` element. The `<video>` tag is used to embed video content in a document, such as a movie clip or other video streams.
To add audio to your HTML document, you can use the `<audio>` element. The `<audio>` element allows you to embed audio files in various formats such as MP3, WAV, or OGG. Here's an example of how you can add audio to your HTML document:

The `<video>` tag contains one or more `<source>` tags with different video sources. The browser will choose the first source it supports.
```html title="index.html"
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
```

The text between the `<video>` and `</video>` tags will only be displayed in browsers that do not support the `<video>` element.
<BrowserWindow url="http://127.0.0.1:5500/index.html">
<audio controls>
<source src="/audio/audio.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</BrowserWindow>

There are three supported video formats in HTML: MP4, WebM, and OGG.
In the example above, we have used the `<audio>` element with the `controls` attribute, which adds audio controls (play, pause, volume, etc.) to the audio player. The `<source>` element is used to specify the audio file's source and its MIME type.

<Tabs>
<TabItem value="HTML">
```html
<video controls>
<source src="path/to/your-video.mp4" type="video/mp4">
</video>
```
</TabItem>
<TabItem value="Output">
<BrowserWindow url="http://127.0.0.1:5500/index.html">
<div>
<video controls>
<source src="path/to/your-video.mp4" type="video/mp4"></source>
</video>
</div>
</BrowserWindow>
</TabItem>
</Tabs>
## Adding Video in HTML

## Conclusion
To add video to your HTML document, you can use the `<video>` element. The `<video>` element allows you to embed video files in various formats such as MP4, WebM, or OGG. Here's an example of how you can add video to your HTML document:

Embedding multimedia content into HTML documents is a powerful way to enhance the visual appeal and interactivity of web pages. Through this tutorial, we've explored the fundamentals of incorporating audio and video elements, which are essential components for creating rich multimedia experiences. By utilizing the `<audio>` and `<video>` tags, along with specifying various source files, developers can ensure broad compatibility across different browsers and devices, making content accessible to a wider audience.
```html title="index.html"
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
```

In conclusion, the integration of audio and video into HTML documents is a testament to the evolving capabilities of the web as a platform for multimedia content. By following the guidelines and examples provided in this tutorial, developers can craft more immersive and interactive web experiences that captivate and engage users.
<BrowserWindow url="http://127.0.0.1:5500/index.html">
<video controls width="640" height="360">
<source src="/video/video.mp4" type="video/mp4" />
Your browser does not support the video element.
</video>
</BrowserWindow>

In the example above, we have used the `<video>` element with the `controls` attribute, which adds video controls (play, pause, volume, etc.) to the video player. The `<source>` element is used to specify the video file's source and its MIME type.

## Adding Audio and Video with Multiple Sources

You can provide multiple sources for audio and video files using the `<source>` element. This allows the browser to choose the best source based on its compatibility. Here's an example of how you can provide multiple sources for audio and video files:

```html title="index.html"
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>
```

In the example above, we have used the `<source>` element to provide multiple sources for audio and video files. The browser will choose the best source based on its compatibility with the user's device and browser. This ensures that the audio and video content can be played on a wide range of devices and browsers.
Binary file added static/audio/audio.mp3
View file
Open in desktop
Binary file not shown.
Binary file added static/video/video.mp4
View file
Open in desktop
Binary file not shown.
Loading