diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-26 13:11:47 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-26 13:11:47 +0200 |
| commit | 6772831200d14c2436aea2d0c837f40dbf12156f (patch) | |
| tree | e41b587ce1834baf8c737454c0ae110ebc8208ca /files/fr/web/api/webvtt_api | |
| parent | 707941dbecfb0cc1e75dd32d2dacac4d1845bf2c (diff) | |
| download | translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.gz translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.bz2 translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.zip | |
Prepare Web API section for Markdown conversion (#2464)
* Remove summary classes and ids
* Remove unecessary hidden
* Remove useless span filled with useless attributes / ids
* Remove useless font
* Remove notranslate
* Remove id in other elements than headings
* Remove name attributes
* Remove <pre><code> for JS w/ language-js class
* Remove <pre><code> for HTML w/ language-html class
* Remove <pre><code> for other lang w/ language-* class
* Rm highlighted line in code samples
* fix links, internal, external, absolute URLs
* missing file from last commit
* Fix styles errors apart from table + some classes
* Fix notes and warnings (+ some other :x)
* fix typo during merge which broke a doc
* aand forgot a conflict
* fix remaining classes of errors except dls and images
* Fix dls
* Fix images (deki/mozillademos) and remaining style issues
* Remove script tag from svg file
* Remove script tag from svg fileS
* Compress SVG files for CI
Diffstat (limited to 'files/fr/web/api/webvtt_api')
| -rw-r--r-- | files/fr/web/api/webvtt_api/index.html | 164 |
1 files changed, 57 insertions, 107 deletions
diff --git a/files/fr/web/api/webvtt_api/index.html b/files/fr/web/api/webvtt_api/index.html index e450f04863..eaca4fd78c 100644 --- a/files/fr/web/api/webvtt_api/index.html +++ b/files/fr/web/api/webvtt_api/index.html @@ -5,7 +5,9 @@ translation_of: Web/API/WebVTT_API --- <div>{{DefaultAPISidebar("WebVTT")}}</div> -<p><span class="seoSummary"><strong>Web Video Text Tracks Format</strong> (<strong>WebVTT</strong>) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur </span>{{HTMLElement("video")}}. WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.</p> +<p><strong>Web Video Text Tracks Format</strong> (<strong>WebVTT</strong>) est un format pour afficher du texte en fonction du temps (comme des sous-titres ou des légendes) en utilisant l'élément HTML {{HTMLElement("track")}}. L'objectif de ce format est d'afficher du texte sur {{HTMLElement("video")}}.</p> + +<p> WebVTT est un format texte codé en {{Glossary("UTF-8")}}. On peut utiliser aussi bien des espaces que des tabulations. Il y a aussi une petite API capable de représenter et de modifier ces pistes ainsi que les données nécéssaires à la synchornisation du texte.</p> <h2 id="Les_fichiers_WebVTT">Les fichiers WebVTT</h2> @@ -44,16 +46,16 @@ Ne jamais boire de l'azote liquide. <h5 id="Exemple_1_-_Plus_petit_fichier_WebVTT">Exemple 1 - Plus petit fichier WebVTT</h5> -<pre class="eval notranslate">WEBVTT +<pre class="eval">WEBVTT </pre> <h5 id="Exemple_2_-_Simple_fichier_WebVTT_contenant_un_entête">Exemple 2 - Simple fichier WebVTT contenant un entête</h5> -<pre class="eval notranslate">WEBVTT - Ce fichier ne possède pas de réplique.</pre> +<pre class="eval">WEBVTT - Ce fichier ne possède pas de réplique.</pre> <h5 id="Exemple_3_-_Fichier_WebVTT_courant_avec_un_entête_et_des_répliques">Exemple 3 - Fichier WebVTT courant avec un entête et des répliques</h5> -<pre class="eval notranslate">WEBVTT - Ce fichier possède des répliques. +<pre class="eval">WEBVTT - Ce fichier possède des répliques. 14 00:01:14.815 --> 00:01:18.114 @@ -115,11 +117,11 @@ NOTE Cette ligne est la dernière ligne du fichier <h5 id="Exemple_4_-_Simple_commentaire_WebVTT">Exemple 4 - Simple commentaire WebVTT</h5> -<pre class="eval notranslate">NOTE Ceci est un simple commentaire</pre> +<pre class="eval">NOTE Ceci est un simple commentaire</pre> <h5 id="Exemple_5_-_Multi-line_comment">Exemple 5 - Multi-line comment</h5> -<pre class="eval notranslate">NOTE +<pre class="eval">NOTE Un autre commentaire qui est coupé sur plusieurs lignes. @@ -129,7 +131,7 @@ sur plusieurs lignes de cette façon. <h5 id="Exemple_6_-_Usage_commun_des_commentaires">Exemple 6 - Usage commun des commentaires</h5> -<pre class="eval notranslate">WEBVTT - Traduction de ce film que j'aime +<pre class="eval">WEBVTT - Traduction de ce film que j'aime NOTE Cette traduction a été faite par Kyle pour que @@ -158,7 +160,7 @@ NOTE Cette dernière ligne n'est pas forcément bien traduite. <h3 id="Avec_du_CSS">Avec du CSS</h3> -<pre class="brush: css notranslate">video::cue { +<pre class="brush: css">video::cue { background-image: linear-gradient(to bottom, dimgray, lightgray); color: papayawhip; } @@ -172,16 +174,16 @@ video::cue(b) { <p>The HTML snippet below actually handles displaying the media itself.</p> -<pre class="brush: html notranslate"><video controls autoplay src="video.webm"> +<pre class="brush: html"><video controls autoplay src="video.webm"> <track default src="track.vtt"> </video> </pre> -<h3 id="Dans_le_fichier_WebVTT">Dans le fichier WebVTT</h3> +<h3 id="Within_the_WebVTT_file_itself">Within the WebVTT file itself</h3> <p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p> -<pre class="notranslate">WEBVTT +<pre class="brush: plain">WEBVTT STYLE ::cue { @@ -204,7 +206,7 @@ NOTE style blocks cannot appear after the first cue.</pre> <p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p> -<pre class="notranslate">WEBVTT +<pre class="brush: plain">WEBVTT 1 00:00.000 --> 00:02.000 @@ -215,12 +217,12 @@ crédit de transcription Transcrit par Célestes™ </pre> -<pre class="brush: css notranslate">::cue(#\31) { color: lime; } +<pre class="brush: css">::cue(#\31) { color: lime; } ::cue(#crédit\ de\ transcription) { color: red; }</pre> <p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p> -<pre class="notranslate">WEBVTT +<pre class="brush: plain">WEBVTT 00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% Where did he go? @@ -231,7 +233,7 @@ I think he went down this lane. 00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% What are you waiting for?</pre> -<h2 id="Les_répliques_WebVTT">Les répliques WebVTT</h2> +<h2 id="WebVTT_cues">WebVTT cues</h2> <p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p> @@ -239,13 +241,13 @@ What are you waiting for?</pre> <li>An optional cue identifier followed by a newline.</li> <li>Cue timings.</li> <li>Optional cue settings with at least one space before the first and between each setting.</li> - <li>One or more newlines.</li> + <li>A single newline.</li> <li>The cue payload text.</li> </ul> -<h5 id="Exemple_7_-_Exemple_de_réplique">Exemple 7 - Exemple de réplique</h5> +<h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5> -<pre class="eval notranslate">1 - Title Crawl +<pre class="brush: plain">1 - Title Crawl 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start Some time ago in a place rather distant....</pre> @@ -255,11 +257,11 @@ Some time ago in a place rather distant....</pre> <h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5> -<pre class="eval notranslate">1 - Title Crawl</pre> +<pre class="brush: plain">1 - Title Crawl</pre> <h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5> -<pre class="eval notranslate">WEBVTT +<pre class="brush: plain">WEBVTT 1 00:00:22.230 --> 00:00:24.606 @@ -321,7 +323,7 @@ Third <li>Must be between 00 and 59 inclusive.</li> </ul> </li> - <li><code>ttt</code> is miliseconds. + <li><code>ttt</code> is milliseconds. <ul> <li>Must be between 000 and 999 inclusive.</li> </ul> @@ -330,20 +332,20 @@ Third <h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5> -<pre class="eval notranslate">00:22.230 --> 00:24.606 -00:30.739 --> 00:00:34.074 -00:00:34.159 --> 00:35.743 +<pre class="brush: plain">00:00:22.230 --> 00:00:24.606 +00:00:30.739 --> 00:00:34.074 +00:00:34.159 --> 00:00:35.743 00:00:35.827 --> 00:00:40.122</pre> <h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5> -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 +<pre class="brush: plain">00:00:00.000 --> 00:00:10.000 00:00:05.000 --> 00:01:00.000 00:00:30.000 --> 00:00:50.000</pre> <h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5> -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 +<pre class="brush: plain">00:00:00.000 --> 00:00:10.000 00:00:10.000 --> 00:01:00.581 00:01:00.581 --> 00:02:00.100 00:02:01.000 --> 00:02:01.000</pre> @@ -534,7 +536,7 @@ Third <td>top</td> </tr> <tr> - <th><code>align:middle</code></th> + <th><code>align:center</code></th> <td>centred horizontally</td> <td>centred vertically</td> <td>centred vertically</td> @@ -554,7 +556,7 @@ Third <p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p> -<pre class="eval notranslate">00:00:05.000 --> 00:00:10.000 +<pre class="brush: plain">00:00:05.000 --> 00:00:10.000 00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start 00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start 00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end @@ -562,7 +564,7 @@ Third <h3 id="Cue_payload">Cue payload</h3> -<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p> +<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p> <p>A cue text payload cannot contain the string "<code>-->"</code>, the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p> @@ -607,7 +609,7 @@ Third </tr> <tr> <td>Non-breaking space</td> - <td><code> </code></td> + <td><code> </code></td> <td><code>&nbsp;</code></td> </tr> </tbody> @@ -621,13 +623,13 @@ Third <li><strong>Timestamp tag</strong> <ul> - <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li> + <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li> </ul> <div> <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5> - <pre class="eval notranslate">1 + <pre class="brush: plain">1 00:16.500 --> 00:18.500 When the moon <00:17.500>hits your eye @@ -643,7 +645,7 @@ That's <00:00:21.000>amore </li> </ul> -<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code><b>text</b></code>).</p> +<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code><b>text</b></code>).</p> <ul> <li><strong>Class tag</strong> (<code><c></c></code>) @@ -655,7 +657,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5> - <pre class="notranslate"><c.classname>text</c></pre> + <pre class="brush: html"><c.classname>text</c></pre> </div> </li> <li><strong>Italics tag</strong> (<code><i></i></code>) @@ -666,7 +668,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5> - <pre class="notranslate"><i>text</i></pre> + <pre class="brush: html"><i>text</i></pre> </div> </li> <li><strong>Bold tag</strong> (<code><b></b></code>) @@ -677,7 +679,7 @@ That's <00:00:21.000>amore <div> <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5> - <pre class="notranslate"><b>text</b></pre> + <pre class="brush: html"><b>text</b></pre> </div> </li> <li><strong>Underline tag</strong> (<code><u></u></code>) @@ -688,29 +690,29 @@ That's <00:00:21.000>amore <div> <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5> - <pre class="notranslate"><u>text</u></pre> + <pre class="brush: html"><u>text</u></pre> </div> </li> <li><strong>Ruby tag</strong> (<code><ruby></ruby></code>) <ul> - <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> + <li>Used with ruby text tags to display <a href="https://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> </ul> <div> <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5> - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> + <pre class="brush: html"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> </div> </li> <li><strong>Ruby text tag</strong> (<code><rt></rt></code>) <ul> - <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> + <li>Used with ruby tags to display <a href="https://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> </ul> <div> <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5> - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> + <pre class="brush: html"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> </div> </li> <li><strong>Voice tag</strong> (<code><v></v></code>) @@ -721,70 +723,22 @@ That's <00:00:21.000>amore <div> <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5> - <pre class="notranslate"><v Bob>text</v></pre> + <pre class="brush: html"><v Bob>text</v></pre> </div> </li> </ul> -<h2 id="Interfaces">Interfaces</h2> - -<p>There are two interfaces or APIs used in WebVTT which are:</p> - -<h3 id="VTTCue_interface">VTTCue interface</h3> - -<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p> - -<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p> - -<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> }; -enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> }; -enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> }; -enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> }; -enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> }; -[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)] -interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> { - attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>; - attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>; - attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>; - attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>; - attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>; - <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>(); -};</pre> - -<h3 id="VTTRegion_interface">VTTRegion interface</h3> - -<p>This is the second interface in WebVTT API.</p> - -<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p> - -<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> }; -[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>] -interface <dfn>VTTRegion</dfn> { - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>; - attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>; -};</pre> - <h2 id="Methods_and_properties">Methods and properties</h2> <p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p> -<ul style="list-style-type: circle;"> +<ul> <li> <h3 id="VTTCue">VTTCue</h3> <ul> <li>The methods which are available in this interface are: - <ul style="list-style-type: circle;"> + <ul> <li>GetCueAsHTML to get the HTML of that Cue.</li> <li>VTT Constructor for creating new objects of Cues.</li> <li>Autokeyword.</li> @@ -800,7 +754,7 @@ interface <dfn>VTTRegion</dfn> { <ul> <li>The methods used for region are listed below along with description of their functionality: - <ul style="list-style-type: circle;"> + <ul> <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li> <li>VTT Region Constructor: for construction of new VTT Regions.</li> </ul> @@ -815,17 +769,17 @@ interface <dfn>VTTRegion</dfn> { <ol> <li>Open a notepad.</li> - <li>The first line of WebVTT is standardized similar in the way some other languages require you to put headers as the file starts to indicate the file type. One the very first line you have to write.</li> + <li>The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:</li> </ol> -<pre class="notranslate">WEBVTT</pre> +<pre class="brush: plain">WEBVTT</pre> -<p> 3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p> +<p> 3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p> -<pre class="notranslate">00:01.000 --> 00:05.000</pre> +<pre class="brush: plain">00:01.000 --> 00:05.000</pre> <ol> - <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li> + <li>On the next line you can write the caption for this cue which will run from the first second to the fifth second, inclusive.</li> <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li> </ol> @@ -835,7 +789,7 @@ interface <dfn>VTTRegion</dfn> { <p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p> -<pre class="notranslate">WEBVTT +<pre class="brush: plain">WEBVTT 04:02.500 --> 04:05.000 J’ai commencé le basket à l'âge de 13, 14 ans @@ -856,24 +810,20 @@ Sur les <i.foreignphrase><lang en>playground</lang></i>, <p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="Specifications">Specifications</h2> -<table class="standard-table"> +<table> <tbody> <tr> <th>Specification</th> - <th>Status</th> - <th>Comment</th> </tr> <tr> - <td>{{SpecName("WebVTT")}}</td> - <td>{{Spec2("WebVTT")}}</td> - <td>Définition initiales</td> + <td><a href="https://w3c.github.io/webvtt/">WebVTT: The Web Video Text Tracks Format</a></td> </tr> </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Browser compatibility</h2> <h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3> |