Embedding Media and Documents

The Audio Element

The HTML5 <audio> element allows you to play audio files within the browser without any third party plugins.
Browsers don't all support the same audio formats; you can provide multiple <source> tags, and the browser will use the first one it supports.
There are three commonly used file formats for the audio element: ogg, webm and mp3. The mp3 format is the most popular and has the greatest browser support.

Attributes for the Audio Element

Note that these attributes can be written as-is inside the tag or their value can match their name (e.g., muted="muted").

Attribute	Action and Notes
`muted`	Mutes the audio. Browsers are likely to force auto-playing audio/video files to be muted.
`loop`	Loops the audio.
`preload`	Pre-loads the audio so it plays immediately when activated. If specified as `preload="none"` no pre-loading will occur.
`autoplay`	Plays the audio when the page loads. Carefully consider the user experience and user preferences before setting this attribute.
`controls`	Causes the audio controls to be visible to the user. Generally a good idea.
`src`	The source of the audio file. This can also be included in the `<source>` element.

The Source Element

The <audio> element contains one or more <source> elements, which allows authors to specify multiple alternative media resources.
Within a <source> element the src attribute gives the address of the media resource. The value must be a valid non-empty URL potentially surrounded by spaces. This attribute must be present.
The type attribute is also used to specify the video's file type / MIME type.
The <source> element is mainly used if you are including more than one source for your audio (e.g., mp3, ogg, webM). If you are using a single file then use the src attribute of the <audio> element instead.
You can also include a message within the <audio> element. If the <audio> element is not supported by the browser then the line written within the <audio> element will be displayed instead (otherwise nothing would be shown).
```
<audio controls src="audio/beethoven.mp3">
Your browser does not support the audio element.
</audio>
```

A full example with multiple audio sources:

<audio controls>
  <source src="audio/beethoven.mp3" type="audio/mpeg" />
  <source src="audio/beethoven.ogg" type="audio/ogg" />
  <source src="audio/beethoven.webm" type="audio/webm" />
  Your browser does not support the audio element.
</audio>

The Video Element

The <video> element is designed to play videos within the browser.
The HTML5 video element is a huge upgrade. In the past if you wanted to include video, your site visitors would have to have some third party software installed like Quicktime or Flash, which later gave way to JavaScript libraries for playing videos. With HTML5 that is not longer necessary.

Supported Video Formats

Below is a table of the browsers and the commonly supported video formats.

Browser	MP4/H.264	WEBM/VP8	OGG/Theora
Edge	Yes	Yes	Yes
Firefox	Yes	Yes	Yes
Chrome	Yes	Yes	Yes
Safari	Yes	No	No
Opera	Yes	Yes	Yes

As you can see from the table above, MP4 is supported by all. Read more about media formats.

Attributes for the Video Element

Note that these attributes can be written as-is inside the tag or their value can match their name (e.g., controls="controls").

Attribute	Action and Notes
`preload`	Pre-loads the video so it plays immediately when activated. If specified as `preload="none"` no pre-loading will occur.
`autoplay`	Plays the video when the page loads. Carefully consider the user experience and user preferences before setting this attribute.
`controls`	Places controls at the bottom of the video. You can create separate buttons as well, but that is beyond the scope of this lecture.
`src`	The source of the audio file. This can also be include in the `<source>` element.

Read a more comprehensive list of <video> attributes

The <video> element contains one or more <source> elements, which is set up the same as <audio>.

You can also include a message inside the <video></video> that will output if the browser lacks support; otherwise nothing would be output.

Video Code Examples

This is an example of the video element using just one source file, accessed via the src attribute.

<video src="video/chromevid.mp4" height="360" width="640" preload controls>
Your browser does not support the video element.
</video>

This next example includes sources for multiple video formats.

<video height="360" width="640" preload controls>
  <source src="video/chromevid.mp4" type="video/mp4" />
  <source src="video/chromevid.webm" type="video/webm" />
  <source src="video/chromevid.ogv" type="video/ogg" />
  Your browser does not support the video element.
</video>

NOTE: You may find that you can omit the type attribute and it could work fine. Just be sure to test cross-browser to ensure it works across all the browsers you are supporting.

Inline Frames

The <iframe> element is used to load an external document/file into a web page; essentially, it is a window within a window.
By far the most common usage of iframes these days is for embedded YouTube videos (or videos from other services).
However, you can load whatever external resources you want into an iframe (using the src attribute) and control the iframe sizing with width and height attributes, as well as with CSS.