Continuing the study guide for Microsoft Exam 70-480, we are addressing the media and graphics goals within the Write code that interacts with UI controls objective.
Implement and Manipulate Document Structures and Objects (24%)
Write code that interacts with UI controls
Implement media controls
HTML5 has two new tags,
audio, which allow direct embedding of these sources. Prior to HTML5, this was accomplished via the
object tags, and relied on plugins for playing the source. Modern browsers provide native implementations for playing audio and video, in support of the new tags.
video tags supports the following custom attributes:
src: URL for the source file
autoplay: boolean - should the file play immediately?
loop: boolean - should the file loop upon completion?
controls: boolean - should the browser show its own controls?
preload: value can be
auto. Indicates whether none of the file, only its metadata, or a browser-determined amount of the file should be pre-loaded before beginning playback.
video tag supports the additional attribute:
poster: URL for an image to display while the video is loading
Note that in HTML5 boolean attributes can be included without a value (
<audio src='file.mp3' controls />), or self-value (, as )
<audio src='file.mp3' controls="controls"/>).
Earlier HTML5 drafts had an
autobuffer atrribute that is superseded by
preload. Both attribute can be used while browsers transition.
These are block content tags, and so they support all of the attributes common to block content.
Different browsers support different file formats, and there is no single format supported by all major browsers.
For audio, WAV garners the most support, with only Chrome excluded. Firefox, Chrome, and Opera support Ogg; Safari, Chrome, and IE support MP3; Firefox, Safari, Opera, and IE support WAV.
For video, webm has been agreed upon as the standard format for video, with some caveats. Safari does not currently support webm, and Internet Explorer will play webm video if the codec is installed separately. Within the type attribute, the codecs can be specified, video and then audio, e.g.
<source src="movie.webm" type='video/webm; codecs="vp8, vorbis"'/>. Note the double quotes embedded within single quotes. The other major video types are mp4 and ogv . Because there is not a single source format supported by all major browsers,
sourceelements can be nested inside the
videoelements to provide multiple sources. The order of the sources is important: certain versions of Firefox had issues if the MP3 source was included first, so it’s recommended to provide an OGG source followed by an MP3 source to cover all browsers. For video, mp4 should be included first to avoid an iOS Safari issue.
MIME type should be specified on the source tags - this allows the browser to pre-determine which file to download.
Given the above information, here is an HTML5
audio control with all possible attributes set:
1 2 3 4 5
1 2 3 4 5
video element and check for the existence of the
canPlayType function on it to determine if the HTML5 audio tag is implemented in the current browser. The
canPlayType function can then be used to check what file types are supported: empty string, “maybe”, or “probably” will be returned. When the tag is not supported, or the browser does not support your available sources, you can fall back to Flash.
Currently only IE10 and Chrome support the
<track> element within a media control. The purpose of tracks is to add parallel timed features such as navigation points, subtitles, or alternate audio streams.
Methods and Properties
controls attribute is not set, custom controls can be implemented by accessing the following methods and properties. You may wish to implement your own controls to achieve a more consistent appearance across browsers.
error, src, readyState, seeking, currentTime, duration, paused, playbackRate, played, seekable, ended, autoplay, loop, volume, muted
canPlayType, load, play, pause
The media controls provide the following commonly-used events:
canplay: Fires when the control determines whether it can play the video source.
playing: Fires when playback is ready to start after having been paused or media not yet downloaded.
ended: Fires when playback stops at the end of the file.
timeupdate: Fires when the playback position changes during playback. Firefox fires once per frame, Webkit fires every 250ms.
play: Fires when no longer paused, either after the play function is called or autoplay causes playback to begin.
pause: Fires when paused after the pause function is called.
volumechange: Fires after the volume or muted attribute value changes.
Note that the playing and play events seem very similar: play will fire as soon as the play command is issued, and then the playing event will fire once playback actually begins.
Implement HTML5 canvas and SVG graphics
Both the Canvas and SVG APIs are available to developers for creating graphics. Both are vector graphics technologies but are better suited for different tasks. The primary difference is that SVG can be expressed in markup and styled with CSS, while Canvas drawing is performed through scripting. Another difference is that SVG is a “retained mode” model in which the graphic definition remains in memory and can be modified and re-rendered, while Canvas is an “immediate” or “fire and forget” model that renders directly to the screen when its API is called.
The choice of which technology to use comes down to several factors:
- Developer familiarity: graphics APIs - Canvas versus markup - SVG
- Performance: size of screen has a large effect on Canvas, number of objects has a large effect on SVG
- Fidelity: SVG is scalable and stays crisp at any magnification
- High performance filtering: Canvas is better suited to pixel-based render, e.g. filters, ray tracers, pixel replacement/green screen
- Real-time data: Canvas is much better suited for images that require rendering real-time changes in many small objects, e.g. weather animations
canvas element enables rendering of resolution-independent graphics. A context is used for drawing, the most commonly implemented being Canvas 2D. Most browsers have implemented hardware-accelerated canvas rendering.
Canvas allows you to draw rectangles, lines, fills, arcs, shadows, Bezier curves, quadratic curves, images, and video.
Check for canvas support by creating a canvas element, verifying that it possesses the get
getContext function, and that
getContext('2d') is truthy. Canvas is supported on IE 7 / Firefox 3 / Safari 3 / Chrome 3 / Opera 10 / Android 1; basically, wide support on current browsers. Warning: IE 8 and below do not support the full API - the Explorercanvas library an be used in this case.
canvas element on the page, you can call its
getContext('2d') method to get a Canvas 2D context and begin drawing.
The following are some interesting canvas APIs, assuming
ctx is a Canvas 2D context:
ctx.fillStyle = "style": sets the current fill style, may be a color, pattern, or gradient
ctx.strokeStyle = "style": similar to fillStyle, but for outlines.
ctx.fillRect(x, y, width, height): draw the fill of a rectangle in the current fillStyle
ctx.strokeRect(x, y, width, height): draw the stroke of a rectangle in the current strokeStyle
ctx.clearRect(x, y, width, height): clears the target rectangle
ctx.beginPath(): begins a new path for the next stroke
ctx.moveTo(x,y): moves the pen position without drawing
ctx.lineTo(x,y): defines a path with the pen from the current position
ctx.strokeStyle = "style": sets the stroke style
ctx.stroke(): draws the current path with the current stroke style
ctx.textBaseline: set the current text drawing properties
ctx.fillText("text", x, y): write text at the given position (x at left edge, y relative to textBasline).
var grad = ctx.createLinearGradient(x0, y0, x1, y1): create a linear gradient with the given angle
grad.addColorStop(position, "color"): add a color stop to the gradient, at a position between 0.0 and 1.0.
Canvas coordinates originate in the upper left, with the X axis horizontal.
You can listen to the
click event, which provides cursor position, to interact with the canvas.
SVG graphics can be displayed by including an
<svg> tag with SVG markup inside. SVG graphic elements can be styled with their own attributes, or with CSS. SVG elements can be modified via the DOM API, but CSS styling takes precedence for rendering. CSS pseudo-classes (like :hover) can be used to trigger style changes. SVG has its own CSS namespace with attributes like fill, stroke, stroke-width, stop-color, etc.
defs tag within the SVG tag allows the definition of gradients and filters, which can be combined for interesting fill effects, blurs, and shadows.
The following example illustrates the primary primitives and styles possible
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32