About Media

The media component is used to display media such as audio, video, or image in a player embedded in the user agent. Use the source attribute to specify the location of the media resource, and the player attribute to specify a particular media player.

The media component is designed to handle two aspects of cross-platform media display: determining the best player to use to display the media, and sizing the media player.

When attempting to pick the appropriate media player, the media component uses the following steps:

If the primary MIME type of the content is "image", the built-in user agent support will be used.
If a media player has been specified by the "player" attribute and that player is available on the user agent and can display the media resource, that player will be used.
If one player is especially good at playing the media resource and that player is available on the user agent, that player will be used.
If one player is especially dominant on the user agent and that player can play the media resource, that player will be used.
The "link" player will be used.

When sizing the media player, the media component uses two approaches:

use the width and height attributes, which specify the amount of space reserved on the user agent for the media component
use the innerWidth and innerHeight attributes, which specify the size of the media resource content.

It is recommended that you specify the innerWidth and innerHeight attributes since it is almost impossible to determine the correct width and height to use across different players and different player control configurations.

If you don't specify the size of the media component by either one of the above approaches, the media component uses a default inner size that is determined by the content type of the media resource. This works well for audio content, but can cause content to be clipped or occupy too much space for video content.