HTML Audio/Video

Last modified on: October 19, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">
<div class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">&nbsp;</div>
</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-[20px] text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="3509f5c0-b7ac-4cc1-ba23-eccd6e341b66">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>HTML provides native support for embedding and controlling audio and video media directly in web pages through the <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> elements. These elements allow you to integrate multimedia content without relying on external plugins. Here&rsquo;s an overview of how to use these elements, including their attributes and basic examples.</p>
<h3>HTML Audio Element</h3>
<p>The <code>&lt;audio&gt;</code> element is used to embed sound content in a document. It supports various audio formats such as MP3, WAV, and Ogg.</p>
<h4>Basic Syntax</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;audio src="audio-file.mp3" controls&gt;
  Your browser does not support the audio element.
&lt;/audio&gt;
</code></pre>
</div>
</div>
<h4>Attributes</h4>
<ul>
<li><strong><code>src</code></strong>: Specifies the path to the audio file.</li>
<li><strong><code>controls</code></strong>: Adds playback controls like play, pause, and volume to the audio player.</li>
<li><strong><code>autoplay</code></strong>: Automatically starts playing the audio when the page loads.</li>
<li><strong><code>loop</code></strong>: Repeats the audio playback once it ends.</li>
<li><strong><code>muted</code></strong>: Mutes the audio.</li>
<li><strong><code>preload</code></strong>: Specifies how the audio file should be loaded. Values: <code>none</code>, <code>metadata</code>, <code>auto</code>.</li>
</ul>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Audio Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Audio Example&lt;/h1&gt;
  &lt;audio src="audio.mp3" controls autoplay loop&gt;
    Your browser does not support the audio element.
  &lt;/audio&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>HTML Video Element</h3>
<p>The <code>&lt;video&gt;</code> element is used to embed video content in a document. It supports formats such as MP4, WebM, and Ogg.</p>
<h4>Basic Syntax</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;video src="video-file.mp4" controls width="600" height="400"&gt;
  Your browser does not support the video element.
&lt;/video&gt;
</code></pre>
</div>
</div>
<h4>Attributes</h4>
<ul>
<li><strong><code>src</code></strong>: Specifies the path to the video file.</li>
<li><strong><code>controls</code></strong>: Adds playback controls like play, pause, and volume to the video player.</li>
<li><strong><code>autoplay</code></strong>: Automatically starts playing the video when the page loads.</li>
<li><strong><code>loop</code></strong>: Repeats the video playback once it ends.</li>
<li><strong><code>muted</code></strong>: Mutes the video.</li>
<li><strong><code>preload</code></strong>: Specifies how the video file should be loaded. Values: <code>none</code>, <code>metadata</code>, <code>auto</code>.</li>
<li><strong><code>width</code></strong>: Specifies the width of the video player.</li>
<li><strong><code>height</code></strong>: Specifies the height of the video player.</li>
</ul>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Video Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Video Example&lt;/h1&gt;
  &lt;video src="video.mp4" controls width="600" height="400" autoplay muted&gt;
    Your browser does not support the video element.
  &lt;/video&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>Multiple Sources</h3>
<p>You can provide multiple sources for both audio and video elements to ensure compatibility across different browsers.</p>
<h4>Example with Multiple Sources</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Audio/Video Control&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;audio id="myAudio" src="audio.mp3" controls&gt;&lt;/audio&gt;
  &lt;video id="myVideo" src="video.mp4" controls width="600" height="400"&gt;&lt;/video&gt;

&lt;button onclick="playAudio()"&gt;Play Audio&lt;/button&gt;
  &lt;button onclick="pauseAudio()"&gt;Pause Audio&lt;/button&gt;
  &lt;button onclick="playVideo()"&gt;Play Video&lt;/button&gt;
  &lt;button onclick="pauseVideo()"&gt;Pause Video&lt;/button&gt;

&lt;script&gt;
    const audio = document.getElementById('myAudio');
    const video = document.getElementById('myVideo');

function playAudio() {
      audio.play();
    }

function pauseAudio() {
      audio.pause();
    }

function playVideo() {
      video.play();
    }

function pauseVideo() {
      video.pause();
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>JavaScript API for Audio and Video</h3>
<p>You can control audio and video playback using JavaScript through the MediaElement API.</p>
<h4>Example</h4>
<div class="dark bg-gray-950 contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative">
<div class="flex items-center text-token-text-secondary bg-token-main-surface-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Audio/Video Control&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;audio id="myAudio" src="audio.mp3" controls&gt;&lt;/audio&gt;
  &lt;video id="myVideo" src="video.mp4" controls width="600" height="400"&gt;&lt;/video&gt;

&lt;script&gt;
    const audio = document.getElementById('myAudio');
    const video = document.getElementById('myVideo');

function playAudio() {
      audio.play();
    }

function pauseAudio() {
      audio.pause();
    }

function playVideo() {
      video.play();
    }

function pauseVideo() {
      video.pause();
    }
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
<h3>Best Practices</h3>
<ol>
<li><strong>Provide Multiple Formats</strong>: Use different formats for compatibility (e.g., MP4, WebM for video; MP3, Ogg for audio).</li>
<li><strong>Consider Accessibility</strong>: Use captions and transcripts for video, and provide controls for audio.</li>
<li><strong>Optimize Media Files</strong>: Compress audio and video files to ensure faster loading times and better performance.</li>
</ol>
<p>Using the <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code> elements allows you to integrate rich multimedia content into your web pages, enhancing user engagement and interactivity.</p>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More