HTML 5 Notes For Professional Chapter 25

Chapter 25: Media Elements

AttributeDetails
widthSets the element’s width in pixels.
heightSets the element’s height in pixels.
Defines resources of the audio or video files
trackDefines the text track for media elements
controlsDisplays controls
autoplayAutomatically start playing the media
loopPlays the media in a repeated cycle
mutedPlays the media without sound
posterAssigns an image to display until a video is loaded

Audio

HTML5 provides a new standard for embedding an audio file on a web page.

You can embed an audio file to a page using the element

Video

You can embed also a video to a webpage using the element:

Using and element to display
audio/video content

Use the HTML or element to embed video/audio content in a document. The video/audio element contains
one or more video/audio sources. To specify a source, use either the src attribute or the element; the
browser will choose the most suitable one.

Audio tag example:






Audio tag example:




Video header or background

Adding a video that will autoplay on a loop and has no controls or sound. Perfect for a video header or background.

This CSS provides a fallback if the video cannot be loaded. Note that is it recomended to use the first frame of the
video as the poster video.jpg.

#videobg {
 background: url(video.jpg) no-repeat;
 background-size: cover;
}

Pin It on Pinterest

Share This