From 6772831200d14c2436aea2d0c837f40dbf12156f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 26 Sep 2021 13:11:47 +0200 Subject: 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 
 for JS w/ language-js class

* Remove 
 for HTML w/ language-html class

* Remove 
 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
---
 files/fr/web/api/webvtt_api/index.html | 164 ++++++++++++---------------------
 1 file changed, 57 insertions(+), 107 deletions(-)

(limited to 'files/fr/web/api/webvtt_api')

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
 ---
 
{{DefaultAPISidebar("WebVTT")}}

 
-
Web Video Text Tracks Format (WebVTT) 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")}}. 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.

+
Web Video Text Tracks Format (WebVTT) 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")}}.

+
+
 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.

 
 
Les fichiers WebVTT

 
@@ -44,16 +46,16 @@ Ne jamais boire de l'azote liquide.
 
 
Exemple 1 - Plus petit fichier WebVTT

 
-
WEBVTT
+
WEBVTT
 

 
 
Exemple 2 - Simple fichier WebVTT contenant un entête

 
-
WEBVTT - Ce fichier ne possède pas de réplique.

+
WEBVTT - Ce fichier ne possède pas de réplique.

 
 
Exemple 3 - Fichier WebVTT courant avec un entête et des répliques

 
-
WEBVTT - Ce fichier possède des répliques.
+
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
 
 
Exemple 4 - Simple commentaire WebVTT

 
-
NOTE Ceci est un simple commentaire

+
NOTE Ceci est un simple commentaire

 
 
Exemple 5 - Multi-line comment

 
-
NOTE
+
NOTE
 Un autre commentaire qui est
 coupé sur plusieurs lignes.
 
@@ -129,7 +131,7 @@ sur plusieurs lignes de cette façon.
 
 
Exemple 6 - Usage commun des commentaires

 
-
WEBVTT - Traduction de ce film que j'aime
+
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.
 
 
Avec du CSS

 
-
video::cue {
+
video::cue {
   background-image: linear-gradient(to bottom, dimgray, lightgray);
   color: papayawhip;
 }
@@ -172,16 +174,16 @@ video::cue(b) {
 
 
The HTML snippet below actually handles displaying the media itself.

 
-
<video controls autoplay src="video.webm">
+
<video controls autoplay src="video.webm">
  <track default src="track.vtt">
 </video>
 

 
-
Dans le fichier WebVTT

+
Within the WebVTT file itself

 
 
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 "STYLE" all by itelf on a line of text, as shown below:

 
-
WEBVTT
+
WEBVTT
 
 STYLE
 ::cue {
@@ -204,7 +206,7 @@ NOTE style blocks cannot appear after the first cue.

 
 
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:

 
-
WEBVTT
+
WEBVTT
 
 1
 00:00.000 --> 00:02.000
@@ -215,12 +217,12 @@ crédit de transcription
 Transcrit par Célestes™
 

 
-
::cue(#\31) { color: lime; }
+
::cue(#\31) { color: lime; }
 ::cue(#crédit\ de\ transcription) { color: red; }

 
 
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):

 
-
WEBVTT
+
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?

 
-
Les répliques WebVTT

+
WebVTT cues

 
 
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:

 
@@ -239,13 +241,13 @@ What are you waiting for?

  
  • An optional cue identifier followed by a newline.
    • 
  
  • Cue timings.
    • 
  
  • Optional cue settings with at least one space before the first and between each setting.
    • 
- 
  • One or more newlines.
    • 
+ 
  • A single newline.
    • 
  
  • The cue payload text.
    • 
 
 
-
    Exemple 7 - Exemple de réplique
    
+
    Example 7 - Example of a cue
    
 
-
    1 - Title Crawl
+
    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....
    
 
@@ -255,11 +257,11 @@ Some time ago in a place rather distant....
    
 
 
    Example 8 - Cue identifier from Example 7
    
 
-
    1 - Title Crawl
    
+
    1 - Title Crawl
    
 
 
    Example 9 - Common usage of identifiers
    
 
-
    WEBVTT
+
    WEBVTT
 
 1
 00:00:22.230 --> 00:00:24.606
@@ -321,7 +323,7 @@ Third
    
  • Must be between 00 and 59 inclusive.
    • 
   
  
- 
  • ttt is miliseconds.
+ 
  • ttt is milliseconds.
   
      
    
    • Must be between 000 and 999 inclusive.
      • 
   
    
@@ -330,20 +332,20 @@ Third
 
 
    Example 10 - Basic cue timing examples
    
 
-
    00:22.230 --> 00:24.606
-00:30.739 --> 00:00:34.074
-00:00:34.159 --> 00:35.743
+
    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
    
 
 
    Example 11 - Overlapping cue timing examples
    
 
-
    00:00:00.000 --> 00:00:10.000
+
    00:00:00.000 --> 00:00:10.000
 00:00:05.000 --> 00:01:00.000
 00:00:30.000 --> 00:00:50.000
    
 
 
    Example 12 - Non-overlapping cue timing examples
    
 
-
    00:00:00.000 --> 00:00:10.000
+
    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
    
@@ -534,7 +536,7 @@ Third
      top
     
     
-     align:middle
+     align:center
      centred horizontally
      centred vertically
      centred vertically
@@ -554,7 +556,7 @@ Third
 
 
    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.
    
 
-
    00:00:05.000 --> 00:00:10.000
+
    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
 
 
    Cue payload
    
 
-
    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.
    
+
    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.
    
 
 
    A cue text payload cannot contain the string "-->", 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.
    
 
@@ -607,7 +609,7 @@ Third
   
   
    Non-breaking space
-    
+    
    &nbsp;
   
  
@@ -621,13 +623,13 @@ Third
  
  • Timestamp tag
 
   
      
-   
    • 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 active text 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 active text in the payload is previous text . Any text beyond the active text is future text . This enables karaoke style captions.
      • 
+   
    • 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 active text 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 active text in the payload is previous text . Any text beyond the active text is future text . This enables karaoke style captions.
      • 
   
    
 
   
    
   
    Example 12 - Karaoke style text
    
 
-  
    1
+  
    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
  
    • 
 
 
-
    The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).
    
+
    The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <b>text</b>).
    
 
 
      
  
    • Class tag (<c></c>)
@@ -655,7 +657,7 @@ That's <00:00:21.000>amore
   
      
   
      Example 14 - Class tag
      
 
-  
      <c.classname>text</c>
      
+  
      <c.classname>text</c>
      
   
      
  
      • 
  
    • Italics tag (<i></i>)
@@ -666,7 +668,7 @@ That's <00:00:21.000>amore
   
      
   
      Example 15 - Italics tag
      
 
-  
      <i>text</i>
      
+  
      <i>text</i>
      
   
      
  
      • 
  
    • Bold tag (<b></b>)
@@ -677,7 +679,7 @@ That's <00:00:21.000>amore
   
      
   
      Example 16 - Bold tag
      
 
-  
      <b>text</b>
      
+  
      <b>text</b>
      
   
      
  
      • 
  
    • Underline tag (<u></u>)
@@ -688,29 +690,29 @@ That's <00:00:21.000>amore
   
      
   
      Example 17 - Underline tag
      
 
-  
      <u>text</u>
      
+  
      <u>text</u>
      
   
      
  
      • 
  
    • Ruby tag (<ruby></ruby>)
   
        
-   
      • Used with ruby text tags to display ruby characters (i.e., small annotative characters above other characters).
        • 
+   
      • Used with ruby text tags to display ruby characters (i.e., small annotative characters above other characters).
        • 
   
      
 
   
      
   
      Example 18 - Ruby tag
      
 
-  
      <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
      
+  
      <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
      
   
      
  
      • 
  
    • Ruby text tag (<rt></rt>)
   
        
-   
      • Used with ruby tags to display ruby characters (i.e., small annotative characters above other characters).
        • 
+   
      • Used with ruby tags to display ruby characters (i.e., small annotative characters above other characters).
        • 
   
      
 
   
      
   
      Example 19 - Ruby text tag
      
 
-  
      <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
      
+  
      <ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
      
   
      
  
      • 
  
    • Voice tag (<v></v>)
@@ -721,70 +723,22 @@ That's <00:00:21.000>amore
   
      
   
      Example 20 - Voice tag
      
 
-  
      <v Bob>text</v>
      
+  
      <v Bob>text</v>
      
   
      
  
      • 
 
    
 
-
    Interfaces
    
-
-
    There are two interfaces or APIs used in WebVTT which are:
    
-
-
    VTTCue interface
    
-
-
    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.
    
-
-
    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:
    
-
-
    enum AutoKeyword { "auto" };
-enum DirectionSetting { "" /* horizontal */, "rl", "lr" };
-enum LineAlignSetting { "start", "center", "end" };
-enum PositionAlignSetting { "line-left", "center", "line-right", "auto" };
-enum AlignSetting { "start", "center", "end", "left", "right" };
-[Constructor(double startTime, double endTime, DOMString text)]
-interface VTTCue : TextTrackCue {
-  attribute VTTRegion? region;
-  attribute DirectionSetting vertical;
-  attribute boolean snapToLines;
-  attribute (double or AutoKeyword) line;
-  attribute LineAlignSetting lineAlign;
-  attribute (double or AutoKeyword) position;
-  attribute PositionAlignSetting positionAlign;
-  attribute double size;
-  attribute AlignSetting align;
-  attribute DOMString text;
-  DocumentFragment getCueAsHTML();
-};
    
-
-
    VTTRegion interface
    
-
-
    This is the second interface in WebVTT API.
    
-
-
    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:
    
-
-
    enum ScrollSetting { "" /* none */, "up" };
-[Constructor]
-interface VTTRegion {
-  attribute double width;
-  attribute long lines;
-  attribute double regionAnchorX;
-  attribute double regionAnchorY;
-  attribute double viewportAnchorX;
-  attribute double viewportAnchorY;
-  attribute ScrollSetting scroll;
-};
    
-
 
    Methods and properties
    
 
 
    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:
    
 
-
      
+
        
  
      • 
   
        VTTCue
        
 
   
          
    
        • The methods which are available in this interface are:
-    
            
+    
              
      
            • GetCueAsHTML to get the HTML of that Cue.
              • 
      
            • VTT Constructor for creating new objects of Cues.
              • 
      
            • Autokeyword.
              • 
@@ -800,7 +754,7 @@ interface VTTRegion {
 
   
                
    
              • The methods used for region are listed below along with description of their functionality:
-    
                  
+    
                    
      
                  • ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.
                    • 
      
                  • VTT Region Constructor: for construction of new VTT Regions.
                    • 
     
                  
@@ -815,17 +769,17 @@ interface VTTRegion {
 
 
                    
  
                  1. Open a notepad.
                    2. 
- 
                  2. 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.
                    3. 
+ 
                  3. 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:
                    4. 
 
                  
 
-
                  WEBVTT
                  
+
                  WEBVTT
                  
 
-
                        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:
                  
+
                        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:
                  
 
-
                  00:01.000 --> 00:05.000
                  
+
                  00:01.000 --> 00:05.000
                  
 
 
                    
- 
                  1. On the next line you can write the caption for this cue which will run from 1st second to the 5th second, inclusive.
                    2. 
+ 
                  2. On the next line you can write the caption for this cue which will run from the first second to the fifth second, inclusive.
                    3. 
  
                  3. Following the similar steps, a complete WebVTT file for specific video or audio file can be made.
                    4. 
 
                  
 
@@ -835,7 +789,7 @@ interface VTTRegion {
 
 
                  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:
                  
 
-
                  WEBVTT
+
                  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>,
 
 
                  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.
                  
 
-
                  Spécifications
                  
+
                  Specifications
                  
 
-
+
                  
-   
-   
-   
-   
-   
+   
                  
  
   
                  
    SpecificationStatusComment
   
                  
   
                  {{SpecName("WebVTT")}}{{Spec2("WebVTT")}}Définition initialesWebVTT: The Web Video Text Tracks Format
   
                  
                    
 
                  
 
-
                  Compatibilité des navigateurs
                  
+
                  Browser compatibility
                  
 
 
                  VTTCue interface
                  
 
-- 
cgit v1.2.3-54-g00ecf