Go to this section at Learn HTML.
<audio>elements can be used to embed media players directly with the
srcattribute or can be used as the container element for a series of
<source>elements, each providing a
srcfile suggestion. While
<video>can be used to embed an audio file, the
<audio>element is preferable for embedding sound files.
My experience with audio and video is limited to copy and pasting code from YouTube, Vimeo or the like. This entire module is something I know nothing about, at least in a hands-on way.
Fallback content is included between the opening and closing tags. If the user agent doesn’t support
<audio>this content is shown.
Always good to know the fallbacks.
srcattribute is included on the opening
<audio>tags, include one or more
<source>elements, each with a
srcattribute to a media file.
There’s a code example at the site that illustrates this, it’s similar to using
typeattribute, you can include a
codecsparameter, which specifies exactly how the resource is encoded. Codecs give you a way of including media optimizations that are not yet supported in all browsers. The codec is separated from the media type with a semicolon. For example, the codec can be written using intuitive syntax, such as
<source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">which indicates that the WebM files contain VP8 video and vorbis audio.
I’m so going to know what I’m doing if I ever have to do this.
Make sure to define the aspect ratio of your video, because when the video loads, a size difference between the poster and the video will cause a reflow and repaint.
As always, good tip.
controlscreates a bad user experience, especially if the boolean
autoplayattribute is included.
This should be seared into the brains of anyone adding audio or video files to a site.
Go to section at Learn HTML.
Between the opening and required closing tags of both audio and video, include one or more
<track>elements to specify timed text tracks. […] There are five enumerated values for the track
chapters, and other
As previously mentioned, YouTube and Vimeo are my only real hands-on experience with integrating audio and video. But as a consumer,
chapters is an incredibly useful way to navigate a video.
kind="caption"should be reserved for transcription and translations that include sound effects and other relevant audio information. This isn’t just for deaf viewers. Maybe a user can’t find their headphones so they turned on the captions. Or maybe they didn’t quite catch the last few talking points from a favorite podcast, so they want to read the transcript to confirm their understanding. Having alternative ways to access audio and video content is both important and convenient.
If you get tired of my writing “another good tip”, let me know. Otherwise, another good tip.
kind="description"is for text descriptions of the visual content in the video for users who can’t see the video, whether they are using a system without a screen such as Google Home or Alexa, or are blind.
I didn’t realize there was a distinction between
caption, or what’s commonly referred to as captions, and
description. Also, another important aspect of this point, and the previous one, is broadening our understanding of how things are used and by whom.
Program note: Hot HTML Summer is taking a summer break next week. The next post will be on Monday July 24, happy Hot HTMLing!
Back to top