401
edits
Accessibility/HTML5 captions v2: Difference between revisions
Jump to navigation
Jump to search
added examples
m (→Introduction) |
(added examples) |
||
| Line 95: | Line 95: | ||
3. Event handlers | 3. Extension of video controls | ||
The existence of itextlist and itext element should cause the browser to extend the video or audio controls with a menu from which to select / activate / deactivate the available subtitle tracks. This menu must also be created upon parsing of a binary audio/video file that includes such tracks. | |||
4. Event handlers | |||
An active itext element will consist of a series of text elements with a start and a end time. Only one such text element is at most displayed per itextlist - the last element for which the audio or video element's currentTime is between its start and end time. | An active itext element will consist of a series of text elements with a start and a end time. Only one such text element is at most displayed per itextlist - the last element for which the audio or video element's currentTime is between its start and end time. | ||
| Line 162: | Line 167: | ||
The lang attribute, if present, gives the language of the linked resource. The value must be a valid RFC 3066 language code. [RFC3066] User agents will use this attribute to select between, e.g., all itext elements given for a video or audio element that belong to the same category, but represent different languages. User agents that discover upon fetching of the resource that language information associated with the resource differs from the given lang, will set an error code on the element. | The lang attribute, if present, gives the language of the linked resource. The value must be a valid RFC 3066 language code. [RFC3066] User agents will use this attribute to select between, e.g., all itext elements given for a video or audio element that belong to the same category, but represent different languages. User agents that discover upon fetching of the resource that language information associated with the resource differs from the given lang, will set an error code on the element. | ||
The charset attribute gives the character encoding of the external text resource. If the attribute is set, its value must be a valid character encoding name, must be the preferred name for that encoding, and must match the encoding given in the charset parameter of the Content-Type metadata of the external file, if any. [IANACHARSET] This attribute is required since many formats and in particular text/srt does not provide the charset it is encoded in within the resource and thus the user agent has no way of knowing how to interpret and represent the characters. | The charset attribute gives the character encoding of the external text resource. If the attribute is set, its value must be a valid character encoding name, must be the preferred name for that encoding, and must match the encoding given in the charset parameter of the Content-Type metadata of the external file, if any. [IANACHARSET] This attribute is required since many formats and in particular text/srt does not provide the charset it is encoded in within the resource and thus the user agent has no way of knowing how to interpret and represent the characters. If the attribute is not given, a default of UTF-8 is assumed, unless the document itself indicates its charset. | ||
| Line 209: | Line 214: | ||
The allText attribute allows access to all the text segments as extracted from the active itext resource. | The allText attribute allows access to all the text segments as extracted from the active itext resource. | ||
The langName attribute exposes the full language name for the itext resource, such that a | The langName attribute exposes the full language name for the itext resource, such that a JavaScript developer can display it in a menu. The lang attribute of the itext elements themselves contains the actual language code which is more appropriate for automated processing. | ||
| Line 215: | Line 220: | ||
The currentText(currentTime) function returns the current text segment from the itext resource, i.e. the text that is active at the parent's currentTime attribute value. | The currentText(currentTime) function returns the current text segment from the itext resource, i.e. the text that is active at the parent's currentTime attribute value. | ||
== Examples == | |||
1. Simple subtitles example | |||
<video src="video.ogv" controls> | |||
<itextlist category="SUB"> | |||
<itext src="sub_en.srt" lang="en"/> | |||
<itext src="sub_de.srt" lang="de"/> | |||
<itext src="sub_fr.srt" lang="fr"/> | |||
<itext src="sub_jp.srt" lang="jp"/> | |||
</itextlist> | |||
</video> | |||
The default type is "text/srt" and the default charset it "UTF-8". | |||
The default active track is selected from the language setting of the browser, if a match can be found in the browser settings prioritised languages. | |||
2. Caption example with diverse formats | |||
<video src="video.ogv" controls> | |||
<itextlist category="CC" active="none"> | |||
<itext src="caption_en.dfxp" lang="en" type="application/ttaf+xml"/> | |||
<itext src="caption_de.srt" lang="de" charset="ISO-8859-1" delay="3" stretch="97%"/> | |||
<itext src="caption_fr.smil" lang="fr" type="application/smil+xml" /> | |||
<itext src="caption_jp.ssa" lang="jp" type="application/x-ssa"/> | |||
</itextlist> | |||
</video> | |||
There are srt, dfxp, smil and ssa files in this specification. It is still questionable if a browser would want to support all these formats, but this specification provides for this possiblity. | |||
The srt file has a different charset. It also has to be delayed by 3s relative to the start of the video file and a stretch of 97% to make up for a constant drift in timing difference between the video and the caption file. | |||
Also note that none of the captions is active by default, but rather have to be turned on by a user interaction. This could possibly be overridden by the browser for a deaf user. | |||
3. Textual audio description example | |||
<video src="video.ogv" aria-label="test video" title="test video" controls> | |||
<itextlist category="TAD" active="tad_en"> | |||
<itext id="tad_en" src="tad_en.srt" lang="en"/> | |||
<itext id="tad_de" src="tad_de.srt" lang="de"/> | |||
<itext id="tad_fr" src="tad_fr.srt" lang="fr"/> | |||
<itext id="tad_jp" src="tad_jp.srt" lang="jp"/> | |||
</itextlist> | |||
</video> | |||
The active textual audio description is the English track. It will be decoded and the text segments made available, but they won't be visually displayed since the default display style is hidden visibility. However, if a screen reader is available, the assertive aria-live attribute will force text changes to be read out. | |||
Also note how the video element now has an aria-label attribute, which will also be read out by a screen reader upon tabbing onto a video element. The menu that is being created from the itextlist and itext elements will also need to be made accessible. | |||
4. Chapter markers with cue ranges example | |||
<video src="video.ogv" controls> | |||
<itextlist category="CUE" onenter="showChapterImg()" onleave="removeChapterImg()"> | |||
<itext src="chapters_en.srt" lang="en"/> | |||
<itext src="chapters_de.srt" lang="de"/> | |||
<itext src="chapters_fr.srt" lang="fr"/> | |||
<itext src="chapters_jp.srt" lang="jp"/> | |||
</itextlist> | |||
</video> | |||
A JavaScript function is called upon entering or leaving a new chapter. The associated text may or may not be displayed: visibility can be set to hidden for the text area in which the chapter text is displayed. | |||