Audio & Video

The Language of the Senses

It’s an evening that enchants all the senses: A bard plucks the strings of his lute while his voice reaches the hearts of every listener. But how can you capture this magic, this experience brimming with music and emotion, in words? The melodies, the singer’s heartfelt expressions, and the brilliance of the lights—none of it fits neatly into mere text.

But there is a way: By integrating an audio or video player into your post, you open a gateway to the world of sound and imagery. Your audience can feel the rhythm, experience the melodies firsthand, and immerse themselves in the atmosphere as if they were in the concert hall. Your story transforms into a journey for the senses—intense, moving, and unforgettable.

Let’s Keep Going

Adding Audio
Audio & Video Attributes
Inserting Video

Video Attributes
Different File Formats
The <track>-Element

Media on the Web

Embed videos and audio – for content that is heard and seen!

Adding Audio

The Sound Mage

The heart of audio magic in HTML lies within the <audio> element. With this powerful tool, you can bring audio files to life on your website. Like a seasoned sound mage who conjures melodies with a mere snap of their fingers, the <audio> element lets music and sounds flow directly from your visitors’ speakers, creating an immersive auditory experience.

<audio></audio>

Audio & Video Attributes

Essential to Know

To unlock the full power of the <audio> and <video> elements, you must master their attributes.
These magical commands dictate how audio and video appear and function on your website:

src: The most essential attribute, defining the source of the audio or video file, whether it’s a URL or a filename on your server.
controls: Adds player controls that allow users to play, pause, stop, or adjust the volume. Without this attribute, the audio is invisible, and the video is unplayable.
autoplay: Automatically starts playback as soon as the page loads.
loop: Continuously repeats the media until the user decides to stop it.
muted: Ensures the media starts with no sound, perfect for silent playback scenarios.

<audio src="snow-tree.mp3" type="audio/mpeg" controls loop></audio>

Inserting Video

The Art of Motion Pictures

Beyond audio magic, HTML also masters the art of motion pictures. With the <video> element, you conjure videos directly onto your website, crafting visual experiences that captivate your visitors. Whether it’s epic adventures or brief messages, moving images breathe life into your story, bringing it to the screen vibrantly.

<video></video>

Video Attributes

The Finer Details of Moving Images

The attributes of the <video> tag are akin to those of the <audio> tag. However, there are some additional ones specifically designed to enhance video playback:

poster: A preview image displayed before the video is loaded.
width und height: Specify the video’s dimensions in pixels (though CSS often does this better).
fullscreen: The magic of full-screen playback, allowing the video to expand and fill the entire screen.

<video src="yggdrasil.mp4" type="video/mp4" controls poster="yggdrasil.jpg">
	Oh no, your browser doesn’t support the video tag!
</video>

Different File Formats

Making the Right Choice

Choosing the correct file format is essential to ensure your audio and video magic works seamlessly everywhere. By specifying multiple formats in the <audio> and <video> tags, you can guarantee that your content plays optimally on any device or browser – no matter what magical machine your visitors use!

<video controls>
    <source src="yggdrasil.mp4" type="video/mp4">
    <source src="yggdrasil.webm" type="video/webm">
    Your browser doesn’t support the video tag!
</video>
<audio controls>
    <source src="snow-tree.mp3" type="audio/mpeg">
    <source src="snow-tree.ogg" type="audio/ogg">
    Your browser doesn’t support the video tag!
</audio>

Video: Formats like mp4 and webm cover most browser needs.
Audio: Formats like mp3 and ogg ensure similar compatibility.
There are other formats you can explore – check out “Can I Use” to see their browser support!
Audio
Video

The <track>-Element

Subtitles and Hidden Messages

With the <track> element, you can add a whole new dimension to your videos and audio files: text. But we’re not just talking about ordinary subtitles here! This magical tool lets you include subtitles in various languages, descriptions, or other helpful information. Whether you’re hiding secret messages for your loyal companions or simply making your content accessible to everyone – the <track> element opens the door to a world of inclusive and enriched experiences. Perfect for those who want to enjoy all the magic in every language and form!

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles_de.vtt" srclang="de" label="Deutsch">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
</video>

In this example, the element adds subtitles in both German and English.

In this lesson, you have learned…

How to embed audio using the <audio> element and control it with controls, autoplay, and loop.
Why the <video> element is essential for dynamic content and how to optimize it with poster, controls, and fullscreen options.
How to use the <track> element to add subtitles or additional information to videos.
Why <source> is important for browser compatibility, providing different file formats to ensure the best possible playback.
How to make media content accessible by using alternative texts and subtitles to make content available to all users.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

Let’s Keep Going