Embedding Videos and Audio

Yaser Rahmati | یاسر رحمتی

Embedding videos and audio in HTML is straightforward and done using the <video> and <audio> tags. These tags allow you to include media directly in your webpage with support for various controls like play, pause, and volume adjustment.

Embedding Videos in HTML

To embed a video, you use the <video> tag. You can specify various attributes, including controls, autoplay, loop, muted, width, and height.

Basic Structure for a Video

<video src="path-to-video.mp4" controls>
  Your browser does not support the video tag.
</video>

Example 1: Embedding a Local Video

<video src="myVideo.mp4" width="600" height="400" controls>
  Your browser does not support the video tag.
</video>

Example 2: Video with Multiple Source Formats

To ensure compatibility across browsers (since not all browsers support the same video formats), you can provide multiple video sources using the <source> tag.

<video width="600" height="400" controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.ogv" type="video/ogg">
  Your browser does not support the video tag.
</video>

Example 3: Autoplay and Loop

You can make the video autoplay when the page loads and loop it indefinitely:

<video src="myVideo.mp4" width="600" height="400" autoplay loop muted>
  Your browser does not support the video tag.
</video>

  • autoplay: Starts the video automatically.

  • loop: Replays the video in a loop.

  • muted: Mutes the audio by default (required for autoplay to work in most browsers).

Example 4: Embedding a YouTube Video

If you want to embed a YouTube video, use an <iframe> tag:

<iframe width="600" height="400" src="https://www.youtube.com/embed/VIDEO_ID" 
        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

Replace VIDEO_ID with the actual ID of the YouTube video.

Embedding Audio in HTML

To embed audio, you use the <audio> tag. Just like with videos, you can control playback options with attributes like controls, autoplay, loop, and muted.

Basic Structure for Audio

<audio src="path-to-audio.mp3" controls>
  Your browser does not support the audio tag.
</audio>

Example 1: Embedding a Local Audio File

<audio src="myAudio.mp3" controls>
  Your browser does not support the audio tag.
</audio>

Example 2: Audio with Multiple Source Formats

Similar to videos, providing multiple audio sources ensures compatibility with various browsers.

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>

Example 3: Autoplay and Loop

To have the audio play automatically and loop continuously:

<audio src="myAudio.mp3" autoplay loop>
  Your browser does not support the audio tag.
</audio>

  • autoplay: Automatically starts the audio.

  • loop: Plays the audio in a loop.

Full Example with Video and Audio

<!DOCTYPE html>
<html>
<head>
    <title>Embedding Video and Audio</title>
</head>
<body>
    <h1>Embedding Video and Audio in HTML</h1>

    <!-- Video Example -->
    <h2>Video Example</h2>
    <video width="600" height="400" controls>
        <source src="myVideo.mp4" type="video/mp4">
        <source src="myVideo.ogv" type="video/ogg">
        Your browser does not support the video tag.
    </video>

    <!-- Audio Example -->
    <h2>Audio Example</h2>
    <audio controls>
        <source src="myAudio.mp3" type="audio/mpeg">
        <source src="myAudio.ogg" type="audio/ogg">
        Your browser does not support the audio tag.
    </audio>
</body>
</html>

Keywords

HTML, Hypertext Markup Language, Tags, Elements, Attributes, Head, Body, Paragraph, Heading, Title, Meta, Link, Image, Anchor, Hyperlink, List, Table, Form, Input, Button, CSS, Class, ID, Inline, Block, Div, Span, Script, Styles, Font, Color, Background, Margin, Padding, Border, Doctype, HTML5, Video, Audio, Canvas, SVG

External Links

🌐 Personal Website 📄 Resume 🎥 Video Archive 💼 Finance Blog 🔐 Network & Security Notebook 🎬 Aparat Channel

PreviousAdding Images to a WebpageNextCreating Lists

Last updated