HTML5 Multimedia Test 1

General considerations

Here we want to get some impression on the interpretation of elements like video and audio - differences to object seem to be the name (semantical advantage) and the bugs and gaps of many viewers in the interpretation of object with video or audio files. We need to check the fallback behaviour if a format is not interpreted, does this work as effective as for object? And we need to check the general concept of accessibility of these features. video and audio may have an element track as well as possible content - try to get access to it for the examples, it notes simply 'Dummdideldumm'.

Well, compared to object the concept is quite different and less advanced, flexible and elaborate. The content is not intended for viewers being able to interpret the elements video or audio - and this does not depend on the used formats. The content is only relevant for viewers older than HTML5, not knowing the elements video and audio.

For one element several sources can be provided with elements source, one per format or alternative - and the type of content is restricted by the name of the multimedia element, either only video or audio formats - there is no way to provide for example an SVG document or an XHTML document or simply text as alternative - HTML5 suggests to put alternatives within the multimedia documents, therefore does not solve the problem, it defers only to the other formats.

The main option to provide more accessibility, is to put all alternative content additionally to the multimedia element next to it - for example as links to the multimedia documents and to alternative SVG documents or alternative text. Typically it will be useful to put everything into a figure.

Video

First we want to check the element video. We want to have one with controls to start, stop and pause the presentation. To start was possible for object as well per recommendation, but this was never implemented in the usual viewers. Here is one with an OGG file:

Short video of a plasma lamp (OGG)

In a second approach we try different video formats as alternatives, here FLV and SWF, assuming the viewer will not display this, if the viewer does, this is ok, if not, it should display the alternative text 'No FLV or SWF!' Does it? If not, it is still better to use object.

Short video of a plasma lamp (FLV or SWF)

We should try it with more common formats here AVI, MPEG, 3GPP, WMV. And it would be good to be able to download it for an external program of course, if it cannot be displayed.

Short video of a plasma lamp (3GPP, AVI, MPEG or WMV)

Maybe it works better with MOV?

Short video of a plasma lamp (MOV)

Or with MP4?

Short video of a plasma lamp (MP4)

For comparison, does object a better job? For this we use multiple nested elements, well the first no program can present. If a video format cannot be presented, there is an alternative, at least some text:

No 'shred', try 3GPP:
No 3GPP, try AVI:
No AVI, try WMV:
No WMV, try MOV:
No MOV, try MPEG:
No MPEG, try MP4:
No MP4, try OGG:
No OGG, try FLV:
No FLV, try SWF:
No SWF...
Short video of a plasma lamp

Audio

audio works similar to video, therefore not much to explain:

Some noise (OGG, MP3 or WAV)

embed

embed is yet another new multimedia element in HTML5. As already the name suggests, it is not really thought through. It can reference one source document. And it is empty. Therefore alternatives or other formats have to be placed next to it, for example within an element figure. One could put all alternative formats with embed and an additional text alternative into a figure element and users will see all alternatives together, which are interpreted by the user-agent.

Short video of a plasma lamp (OGG)

canvas

canvas is defined as an element containing everything, the parent element can contain. This can be replaced alternative content by scripting. In case script interpretation is activated at all in the viewer, this is possible for every element, respectively new elements can be created anyway within the document, using the DOM and scripts, but of course such scripted creations are not related to the primary layer, the content. canvas is dedicated especially to bitmap graphics, that is created by scripts.

HTML5 emphasises, that if possible, another element should be used, not canvas. Obviously, if something really matters for content, there is always another more relevant constructions than an empty box, that needs scripting to be filled with illusions, replacing the relevant content of the element.

Here we just have to test, that the content of the element is visible, if scripting is not activated. There has to be displayed: 'This canvas is almost empty.' if script interpretation is not active. Authors must not rely on the interpretation of scripts for content, therefore no further tests here - and the scripted decoration of canvas is not part of HTML5 anyway.

This canvas is almost empty.
Some canvas for almost nothing.

Content referenced for download

With a new (draft from 2013-08-06) attribute download for the element a it is possible for authors to indicate, that referenced content is not intended for direct presentation, but for download. Especially for multimedia formats this is quite useful, because typically external programs can interprete more of such formats than the user-agent directly or with plugins. The suggested name for the file after the download is 'plasma_lamp.*' with * a hint about the format.

Check this with some video formats:
OGG, 3GPP, AVI, MPEG, WMV, FLV, SWF, MOV, MP4

Exchange of Content

Because object now has an attribute name, it can be target of references, therefore it is possible to exchange the content with an element a in the embedding document. The following test assumes, that the format SVG is interpreted therefore no alternatives for the referenced files.

Rotated ellipses; exchange content: 2 or 1, but this must not work due to a restriction with typemustmatch: XHTML document

Iframe

With the attribute seamless one can embed other documents without visible indications in a document.

One with an SVG - the required viewport is determined automatically: