Changes

Jump to: navigation, search

Timed Divs HTML

4,243 bytes added, 11:45, 9 July 2010
m
Undo revision 12270 by Vsimon213 (Talk)
= File Extension =
Files in this format are to be of text/x-tdht html mime type. Files in this format should have a file extension of .tdht since they are valid html files, apart from some extra attributes.
Files in this format should have a file extension of .tdht to separate them from plain html files.
= The TDHT format changes from HTML =
</head>
<body>
<div start="00:00:00,.070" end="00:00:02,.270">
<p>Previously on...</p>
</div>
<div start="00:00:02,.280" end="00:00:04,.270">
<p>We had an agreement to keep things casual.</p>
</div>
<div start="00:00:04,.280" end="00:00:06,.660">
<p>Susan made her feelings clear.</p>
</div>
<div start="00:00:06,.800" end="00:00:10,.100">
<p>So if I was with another woman, that wouldn't bother you? No, it wouldn't.</p>
</div>
</pre>
Right now, The differences of TDHT is based on from HTML are described using [http://www.w3.org/TR/html401/ HTML4.01], but it should also be possible the changes apply the same to work on [http://www.whatwg.org/specs/web-apps/current-work/ HTML5], which is still in fluxdoesn't have a normative schema.
The following changes to HTML4.01 HTML are made for TDHT:
</pre>
In TDHT1.0 we restrict it body to just contain a sequence of div tags:
<pre>
</pre>
The div Any tags in turn can contain anything inside the body tag that HTML div are non-conformant to this specification (such as regular html tags can contain, thus enabling a very flexible, but time-aligned text modelthat are allowed inside body) must be ignored for TDHT.
The div tags, however, can contain anything that HTML div tags can contain, thus enabling a very flexible, but time-aligned text model.
== 2. The div element ==
In HTML4.01HTML, the [http://www.w3.org/TR/html401/struct/global.html#h-7.5.4 div element] is defined as follows:
<pre>
</pre>
The Time entity is defined in represents a valid time string accroding to HTML5: http://www.whatwg.org/specs/web-apps/current-work/#valid-time-string . The end time string must be larger than the start time string, otherwise the div element does not exist for any duration and can never turn active.
&lt;div> elements in a TDHT file should be ordered by start time to simplify parsing. Inside Ogg or when rendered, they will be ordered by start time.
= Rendering in a Web Browser =
A TDHT file is meant to be associated with a audio or video file and rendered in a Web browser in sync with the audio or video file.
The TDHT file's div elements are not rendered into an existing HTML page, but rather a TDHT file creates its own [http://www.whatwg.org/specs/web-apps/current-work/#the-iframe-element iframe-like] new nested browsing context. This It is linked to the parent HTML page through an itext element that is inserted as a child of the video element. Creation of a nested browsing context is important because a TDHT file can come from a different URI than the Web page and thus for security reasons and for general base URI computations a nested browsing context is the better approach with the DOM nodes of the hosting page and the DOM nodes of the TDHT document in different owner documents. That way, the hosting document has the security origin of its own URL and the TDHT document has the security origin of its URL.  The rendering and CSS view port are either by default the rectangle occupied by the given <video> or <audio> tag, or an area provided for by the hosting HTML page through the itext element's properties. The zoom factor of the iframe must be set to such a value that the width of the view port established by the itext frame is equally wide in CSS px as the video frame is wide in codec pixels. (Example: If the video encodes a frame that is 240 pixels wide but is displayed at 480 CSS px wide, the zoom factor of the itext frame should be 200% so that the box that on the outsize measures 480 px seems like a box of 240 px from within the itext frame.) The itext frame is by default transparent.
The rendering and CSS view port are A TDHT file can get to a browser either by default the rectangle occupied by the given <video> as a external resource, or <as part of audio> tag, or an area provided for by the hosting HTML page. The zoom factor of the iframe must be set to such a value that the width of the view port established by the iframe is equally wide in CSS px as the video frame is wide resource (in codec pixelsparticular inside Ogg, see below). (Example: If the video encodes a frame that Parsing in these two cases is 240 pixels wide but is displayed at 480 CSS px wide, the zoom factor of slightly different for the iframe should be 200% so that the box that on the outsize measures 480 px seems like a box of 240 px from within the iframebrowser.)
When For the browser happens upon a external TDHT file case:The TDHT file, it must create is parsed using the HTML5 parsing algorithm in its normal mode into a document by calling createDocument() on DOMImplementation and then calling open() on the created documentnon-rendered DOM. The browser must insert To render a <html> element in div, the children of the HTML namespace as div would be cloned into the root element body of the rendering shell document and insert <head> and <(replacing possible previous children of body> elements in the HTML namespace into the root element).
A For the Ogg-internal TDHT file can either be received by a HTML parser in one go (as a case:To multiplex an external TDHT file) or a into Ogg, each div-less TDHT file can be received together with its <innerHTML would be placed into a data packet and the head data in to an Ogg header. For decoding, the rendering shell document is set up and the head> tag and create is included from the Ogg headers. To render a HTML shell into which packet, the &lt;div> elements can and its innerHTML would be added to the innerHTML of the body element of the rendering shell document as they come (e.g. from a video file that is decoded and played back in parallel) by using a This will use the HTML fragment parser.
The <head> tag As the browser plays the video, it must decode into a DOMString (using REPLACEMENT CHARACTER on errors) and set render the TDHT DOM property &lt;div> tags in sync. As the start time of a &lt;div> tag is reached, the &lt;div> tag is made activate, and it is made inactive as the <head&lt;div> element tag's end time is reached. If no start time is given, the start is assumed to the DOMStringbe 0, and if no end time is given, end is assumed to be infinity.
As the browser plays the video, it must render the TDHT An "active" &lt;div> tags in sync. As the start time of tag may be a &lt;div> tag that is reached, the being displayed ("display: block") in contrast to an "inactive" &lt;div> tag appears, which may not be displayed ("display: none"). For some text formats however the difference between "active" and it is removed as "inactive" may be a background colour or the &lt;div> tag's end time is reacheddisplay location on screen or some other mechanism. If no start time is given, the start is assumed to The default should be 0, between "block" and if no end time is given"none", end is assumed to be infinitybut changeable through CSS.
As the browser has parsed the TDHT file or its consitutent &lt;div> tags, it is expected to keep the structure in memory. When seeking happens on the video, it can then decide upon which &lt;div> tags are supposed to be active at the seek time and display these.[There is a discussion to be had here about the effect this has on the DOM. Different selectors may apply to a caption depending on whether the video was played back all the way there or seeking skipped over data to get there. It was suggested that inactive captions should be removed from the DOM, so there's always a well-defined small unambiguous DOM to match selectors against. However, this may for example not be desirable on some text display formats.]
= Encapsulation into Ogg =
The codec-specific header data for the OggText ident header is the <head>..</head> part of the TDHT file. The complete <head> tag including all its subtags is encoded into the ident header unchanged.
The &lt;div> tags elements with all their inner HTML are the data packets of the TDHT text codec and are thus encapsulated into the data packets as text codec data. A complete &lt;div> including all its subtags is encoded into one data packet each. = Direct linking on a HTML5 page = Often, subtitles and other time-aligned text files are not actually provided inside a video stream (e.g. inside Ogg), but are referenced as a separate partner resource to a video. To allow association of such files with a <video> or <audio> element, we propose the following approach: <pre><video i="video" src="http://example.com/video.ogv" controls> <itext id="caption1" category="CC" lang="en/us" src="caption.srt" style=""></itext> <itext id="caption2" category="CC" lang="de/de" src="caption.tdht" style=""></itext> <itext id="subtitle1" category="SUB" lang="de/de" src="german.dfxp" style=""></itext> <itext id="subtitle2" category="SUB" lang="jp" src="japanese.smil" style="></itext> <itext id="subtitle3" category="SUB" lang="fr" src="translation_webservice/fr/caption.srt" style=""></itext></video></pre> Notice the second set of closed captions being a TDHT file. The id tag is simply a unique identifier for the tag.The category is from [http://wiki.xiph.org/index.php/OggText#Categories_of_Text_Codecs Ogg text categories].The lang contains a natural language according to [http://en.wikipedia.org/wiki/Language_code language codes].The src element contains the actual file URI that we are after.The style element allows to attach styling to marked-up import files. The <itext> element would act like an <iframe> element and create the nested browsing context described earlier. It has been renamed from earlier mentions of this approach from <text> to <itext> to avoid name clashes with e.g. SVG. The user agent would then provide an interface such as:  interface MediaItextElement : HTMLElement { attribute DOMString src; attribute DOMString category; attribute DOMString lang; attribute DOMString id; attribute DOMString style; }; In javascript there will need to be additional functions such as:  getItext (): returns an array of time-aligned text elements addItext({src,category,lang,style,name}): adds a time-aligned text element to a <video> or <audio> element enable(itextElement): activates display of an itext file disable(itextElement) : deactivates display of an itext file delay(itextElement, seconds) : delays the itext file in relation to the video file by a positive or negative number of seconds

Navigation menu