New Media Elements in HTML5 is part 3 of Beginner’s Guide to HTML5.
New Media Elements:
Here is a simple[code language=”html”][/code]
You can easily find that[code language=”js”]var canvas = document.getElementById(“mycanvas”);[/code]
Let us see a simple example on using[code language=”html”];
You can create many shapes using canvas as example below:
The Rendering Context:
When using canvas, it’s important to understand the difference between the canvas element and the canvas context, as often times people get these confused. The canvas element is the actual DOM node that’s embedded in the HTML page. The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2d or 3d.
Each canvas element can only have one context. If we use the getContext() method multiple times, it will return a reference to the same context object.
The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context 2d.
Following is the code to get required context along with a check if your browser supports[code language=”html”]
Before HTML5, the audio files could not be played on a web page without support of third party plug-ins like Adobe Flash Player, Apple QuickTime Player etc. But HTML5 defines a new element (
Important point need to be remembered:
HTML5 audio element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support audio element.
Presently three audio file formats are supported by HTML5 audio element – .mp3, .ogg and .wav.
There is a HTML5 audio element example given below:[code language=”html”] [/code]
The text written between tags is displayed if the browser does not support audio element.
Attributes of Audio Element with Functionality
Controls: If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
Src: The src attribute defines a valid source path of audio file
Loop: The loop attribute specifies whether the audio file should be repeatedly played
Autoplay: A Boolean attribute; if specified (even if the value is “false”!), the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
Buffered: An attribute you can read to determine which time ranges of the media have been buffered. This attribute contains a TimeRanges object.
Preload: The preload attribute specifies when the audio file gets preloaded. Possible values are – none / metadata / auto.
- none: hints that either the author thinks that the user won’t need to consult that audio or that the server wants to minimize its traffic; in others terms this hint indicates that the audio should not be cached;
- metadata: hints that though the author thinks that the user won’t need to consult that audio, fetching the metadata (e.g. length) is reasonable;
- auto: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole audio could be downloaded, even if the user is not expected to use it;
The video tag is one of those HTML5 features that gets a lot of attention. Often presented as an alternative to flash in the media, the video tag actually goes beyond that. Although it’s recently joined the rest of the ubiquitous HTML tags, its capabilities and support across browsers have increased at an amazing speed.
The HTML 5
Let’s take a look at each one in a little more detail.
- autoplay: Tells the browser to start playing the video as soon as it is downloaded.
- controls: Displays built-in controls that are native to the browser. Basic controls tend to include a play/pause button, time counter, volume control, and time scrubber.
- crossorigin: Either allows or prohibits the sharing of a video across other domains using CORS (Cross-Origin Resource Sharing).
- height: Identifies the height of the video (if your height/width aren’t in the correct ratio, you will see black banding above and below the video; it will not distort).
- loop: Tells the browser to loop the video after playback has been completed.
- mediagroup: Allows multiple media elements to be linked together by creating a media controller. Therefore you can synchronize multiple videos or a video with audio.
- muted: Allows the author to specify if the video should be muted when it begins to play.
- poster: Identifies the location of a still image to use as a holding frame.
- preload: Allows the author to inform the browser to start (or not start) downloading the video as soon as the page is loaded. preload has replaced the autobuffer attribute. The autoplay attribute can override the preload attribute if present. The available states are
- none: Tells the browser not to preload the file. The file will begin to load when the user clicks Play.
- metadata: Tells the browser to only preload the metadata (dimensions, first frame, duration, etc.). The rest of the file will begin to load when the user clicks Play.
- auto: Tells the browser to choose whether to download the entire file, nothing, or only the metadata. This is the default state if preload isn’t specified.
- src: Identifies the location of the video file (note that this is not required if a child source element is present, which we’ll cover later).
- width: Identifies the width of the video (if your height/width aren’t in the correct ratio, you will see black banding above and below the video; it will not distort).
In order to implement HTML5 video cross browser, we need to be aware of three container formats.
There is a HTML5 video element example given below:[code language=”html”] [/code]
The source element is used to specify multiple media resources for audio and video elements in HTML5. It is an empty element. It is commonly used to serve the same media in multiple formats supported by different browsers.
The HTML 5
In the two examples below, the[code language=”html”] [/code] [code language=”html”] [/code]
The type attribute is not required, but useful for increased performance. If it is not set, all browsers will start downloading the first video to find out if it can play. With the type set, Firefox and Opera recognize they should download the right video instead of the other one.
embed is a non-standard but well-supported element that’s used to embed multimedia content, including media types that mightn’t usually be natively supported by the browser. It can also be used for embedding media types that are supported, such as images in .jpg, .gif, or .png format.
The example below uses 4 different video formats. The HTML 5[code language=”html”] [/code]
The track element is used as a child of the media elements—
The type of data that track adds to the media is set in the kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata. The element points to a source file containing timed text that the browser exposes when the user requests additional data.
A media element cannot have more than one track with the same kind, srclang, and label.
Each track element has an attribute for kind, which can be subtitles, captions, descriptions, chapters or metadata. The track element src attribute points to a text file that holds data for timed track cues, which can potentially be in any format a browser can parse.
Let’s take a look at each one in a little more detail.
default: This attribute indicates that the track should be enabled unless the user’s preferences indicate that another track is more appropriate. This may only be used on one track element per media element.
kind: How the text track is meant to be used. If omitted the default kind is subtitles. The following keywords are allowed:
Subtitles provide translation of content that cannot be understood by the viewer. For example dialogue or text that is not English in an English language film.Subtitles may contain additional content, usually extra background information. For example the text at the beginning of the Star Wars films, or the date, time, and location of a scene.
Closed captions provide a transcription and possibly a translation of audio.It may include important non-verbal information such as music cues or sound effects. It may indicate the cue’s source (e.g. music, text, character).Suitable for users who are deaf or when the sound is muted.
Textual description of the video content.Suitable for users who are blind or where the video cannot be seen.
Chapter titles are intended to be used when the user is navigating the media resource.
Tracks used by scripts. Not visible to the user.
label: A user-readable title of the text track which is used by the browser when listing available text tracks.
src: Address of the track. Must be a valid URL. This attribute must be defined.
srclang: Language of the track text data. It must be a valid language tag. If the kind attribute is set to subtitles, then srclang must be defined.
HTML CODE EXAMPLE :[code language=”html”] [/code]
Learn more in details about New Form Elements in HTML5