401
edits
Accessibility/HTML5 captions v2: Difference between revisions
replace all element starts with <
(added examples) |
(replace all element starts with <) |
||
| Line 226: | Line 226: | ||
1. Simple subtitles example | 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 type is "text/srt" and the default charset it "UTF-8". | ||
| Line 242: | Line 242: | ||
2. Caption example with diverse formats | 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. | 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. | ||
| Line 260: | Line 260: | ||
3. Textual audio description example | 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. | 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. | ||
| Line 276: | Line 276: | ||
4. Chapter markers with cue ranges example | 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. | 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. | ||