#30DaysofHTML Day 29: < audio > and < video>

We're almost done!

🎉📚 Get the #30DaysofHTML e-book📚🎉

We could easily spend several days digging into all aspects of <audio> and <video>... but it's Day 29 of #30DaysofHTML, and we're out of time! We will instead provide lots of links to more reading. We tried to be brief, really, but it just didn’t work.

🏁 If a knowledgeable audio and video person wanted to take up the format, we suggest a #15DaysofAV series to cover all of the things, because there are so many, and we are not experts.

Self-hosted or hosted elsewhere?

After making the audio and video, a university degree program's worth of knowledge by itself, where will it live online?

✅ You're aware of services like YouTube, Vimeo, SoundCloud, and more, which will happily host your audio and video for you. For many site owners, these are awesome solutions. These services will provide you with the appropriate code to embed your content on your website.

⚠️ You may also host your own audio and video content using your own hosting environment. However, be aware that:

📽 Audio and video files are big and take up lots of hard drive space.

🎼 Every play may add megabytes to your bandwidth (transfer) bill.

💰 You'll probably need to upgrade your hosting, if you're putting up more than a handful of short files.

⛔️ "Unlimited bandwidth" plans seldom are.

You'll encounter <audio> and <video> elements where site owners are keeping these files on their own web hosting space. Services like YouTube, Vimeo, and SoundCloud generally share through <iframe> elements, not <audio> and <video>.

Audio and video file formats

Let's assume your files and/or your site traffic is small, and you've decided to host your own audio and video. Next up: choosing the right file format(s).

✅ If your goal is a single file format that's supported by most modern browsers, your choice is likely MP3 for audio and MP4 for video.

Of course, there are a bazillion other codecs and container formats available for audio and video. 👉🏿 We point in their general direction.

Captions and transcripts

✅ Almost always, your audio and video needs captions, transcripts, or both. The primary reason is accessibility. However, even if your site visitors can see video and/or hear audio, captions and transcripts are useful for skimming for relevant information, indexing by search engines and other robots, copying and pasting into an automatic translator like Google Translate, and dodging the boss at work as you watch videos with the sound off. (We saw you.) 👀

There's much to say about quality of auto-transcription services, writing great captions, and editing usable transcripts. W3C's Web Accessibility Initiative (WAI) offers an excellent starting point for this important work.

Autoplay: Just because you can doesn't mean you should

⛔️ One of the common uses of <audio> is to play background music on a website, or to start media playing when the page loads.

🪳 We feel that 99.9% of the time, autoplay is like filling your website with cockroaches.🪳

However, others differ in their worldview. MDN offers an extensive guide to the autoplay API.

Styling custom audio and video players

🎨 While HTML will provide you basic browser-styled controls, you may customize with CSS.

📽 MDN provides a tutorial on styling video players.

🎼 CSS-Tricks offers styling tips for an audio player.

Oh yeah, there's HTML too

We think we've arrived at the HTML. Whew.

🖥 All examples are available in today's CodePen demo.

Audio at its most simple

We believe this is the absolute minimum required to include an audio file on a website. We offer a single file format via the src attribute. Without controls, the audio would be downloaded but not visible to the user to play.

<audio controls src="pencilsharpener.mp3"></audio> 

Obviously the above is not accessible. The audio is the sound of a pencil being sharpened. We could communicate that with our old friend <figure>.

<figure>
    <figcaption>Listen to a pencil being sharpened:</figcaption>
    <audio controls src="pencilsharpener.mp3"></audio>
</figure>

Better. But what if I can't get the MP3? There are two possible approaches. Here's the #UXFail method:

<figure>
    <figcaption>Listen to a pencil being sharpened:</figcaption>
    <audio controls src="pencilsharpener.mp3">
   Your browser does not support the <code>audio</code> element.
</audio>
</figure>

⛔️ #UXFail because who knows or cares what an <audio> element is (except developers)? Furthermore, what are you supposed to do about the problem?

✅ We can improve this by making use of <source> plus some better options if choices fail. The paragraph in between the <audio> tags will only display if the audio is not available to play in the browser.

<figure>
    <figcaption>Listen to a pencil being sharpened:</figcaption>
    <audio controls>
      <source src="pencilsharpener.mp3" type="audio/mpeg">
      <source src="pencilsharpener.ogg" type="audio/ogg">
      <p><a href="pencilsharpener.mp4">Download the audio</a> to play on your device.</p>
    </audio>
</figure>

Finally, what about a transcript or captions? The audio file here does not have words and does not need this, but if it did, we need to provide a text equivalent. According to MDN:

Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions, which are specified using WebVTT, allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them.

However, MDN notes that WebVTT is not supported by <audio>, and therefore recommends you play your audio using the <video> element instead.

<audio> includes many additional HTML attributes and JavaScript events not covered here, but you may review them on MDN.

Basic video

The HTML pattern for video is essentially the same as that for audio. It may be placed in a <figure> tag to provide a caption if desired:

<figure>
    <figcaption>Watch a record spin:</figcaption>
    <video controls>
      <source src="recordplayer.mp4"  type="video/mp4">
      <source src="recordplayer.webm" type="video/webm">
      <p><a href="pencilsharpener.mp4">Download the video</a> to play on your device.</p>
    </video>
</figure>

The poster attribute

<video> allows for a poster attribute, which is the image shown before the video downloads and/or plays. Once again, the paragraph with link only displays if <video> is not supported.

<video 
    controls 
    poster="https://assets.codepen.io/296057/30dayshtml-video.png">
  <source
    src="https://assets.codepen.io/296057/
recordplayer.mp4"  
    type="video/mp4">
  <source 
    src="recordplayer.webm"
    type="video/webm">
      <p><a href="pencilsharpener.mp4">Download the video</a> to play on your device.</p>
</video>    

Embedding a text track

The example video has no sound, so transcripts or captions are not required here. However, if you do need a transcript or captions, one possible way to implement this is via the <track> element, used for embedding WebVTT tracks with the video. MDN has more information and examples on this.

<source> in <video> does not have a media attribute

At one point, video was responsive. Alas, no longer. Scott Jehl offers an explanation and a proposed fix. This would allow video to choose the appropriate video file based on media queries, not just the file type. Right now, the <source> element serves up different file types only, without the media attribute we saw yesterday with <picture>.

<video> includes many additional HTML attributes and JavaScript events not covered here, but you may review them on MDN.

<iframe> video made flexible

If you are using a video hosting service that serves up video with <iframe> elements, these are fixed width across devices. To make this responsive, use CSS. Erika is a fan of www.embedresponsively.com, which will take a provided YouTube, Vimeo, DailyMotion, Google Map, Getty Motion, or generic iframe URL and spit out HTML and CSS to make the <iframe> flex within a container.

Yeah, us too. That's enough for one day.

🎉📚Get the #30DaysofHTML e-book📚🎉

We are super excited to announce our e-book!

Email is great, and blogs are awesome, but it can be challenging to use them as a reference in the future. We'll be assembling this month's work into an e-book. Would you like a copy?

☕️ If you are financially able to do so, buy us a coffee (or two, or five!). Coffees are $5 each, and the e-book starts at $6 (and will go up from there).

• 🎉 If you already bought us a coffee, you get an e-book! 😁 🎉

👍 Or spread the word and we'll give you a free e-book! Choose one of these below:

• Mention and link to at least one post from #30DaysofHTML in your newsletter by April 30. (If you’ve already done this, you get a free e-book!)

• Retweet this e-book announcement, or talk about the e-book on other social media platforms, by April 30!

We will assemble the e-book from these past posts and emails and get that out to you as soon as possible. We anticipate it will be no later than June 30.

<audio> and <video> demo

🖥 View the <audio> and <video> demo on CodePen.

Challenge: <video> and <source>

👩🏽‍💻 Try today’s CodePen Challenge about <video> and <source>. When you’ve completed it, post your answer in our discussion in Substack.

More information and examples

There are a ton of links in this post to resources for codecs, file formats, accessibility, transcripts, captions, and more. However, it’s tradition to include the HTML element links to MDN and WHATWG here.

📚 MDN: <audio>, <video>, and <track>

📚 WHATWG: <audio>, <video> and <track>