From d8c6447ca84ee0a7d3d934e4addcfb68fb41332f Mon Sep 17 00:00:00 2001 From: Ian Hickson Date: Fri, 18 Jul 2014 23:41:43 +0000 Subject: [PATCH] [e] (0) More progress with the new pipeline Affected topics: CSS, DOM APIs, HTML, HTML Syntax and Parsing, Microdata, Rendering, Video Text Tracks, Video and Audio, Workers git-svn-id: http://svn.whatwg.org/webapps@8692 340c8d12-0b0e-0410-8428-c7bf67bfef74 --- complete.html | 16936 ++++++++++++++++++++-------------------- index | 16936 ++++++++++++++++++++-------------------- source | 19936 ++++++++++++++++++++++++------------------------ 3 files changed, 26898 insertions(+), 26910 deletions(-) diff --git a/complete.html b/complete.html index 64e23c77334..8a7904b4035 100644 --- a/complete.html +++ b/complete.html @@ -290,8 +290,8 @@
@@ -326,15 +326,13 @@

Table of contents

  1. 1 Introduction
    1. 1.1 Where does this specification fit?
    2. 1.2 Is this HTML5?
    3. 1.3 Background
    4. 1.4 Audience
    5. 1.5 Scope
    6. 1.6 History
    7. 1.7 Design notes
      1. 1.7.1 Serializability of script execution
      2. 1.7.2 Compliance with other specifications
      3. 1.7.3 Extensibility
    8. 1.8 HTML vs XHTML
    9. 1.9 Structure of this specification
      1. 1.9.1 How to read this specification
      2. 1.9.2 Typographic conventions
    10. 1.10 Privacy concerns
    11. 1.11 A quick introduction to HTML
      1. 1.11.1 Writing secure applications with HTML
      2. 1.11.2 Common pitfalls to avoid when using the scripting APIs
      3. 1.11.3 How to catch mistakes when writing HTML: validators and conformance checkers
    12. 1.12 Conformance requirements for authors
      1. 1.12.1 Presentational markup
      2. 1.12.2 Syntax errors
      3. 1.12.3 Restrictions on content models and on attribute values
    13. 1.13 Suggested reading
  2. 2 Common infrastructure
    1. 2.1 Terminology
      1. 2.1.1 Resources
      2. 2.1.2 XML
      3. 2.1.3 DOM trees
      4. 2.1.4 Scripting
      5. 2.1.5 Plugins
      6. 2.1.6 Character encodings
    2. 2.2 Conformance requirements
      1. 2.2.1 Conformance classes
      2. 2.2.2 Dependencies
      3. 2.2.3 Extensibility
      4. 2.2.4 Interactions with XPath and XSLT
    3. 2.3 Case-sensitivity and string comparison
    4. 2.4 Common microsyntaxes
      1. 2.4.1 Common parser idioms
      2. 2.4.2 Boolean attributes
      3. 2.4.3 Keywords and enumerated attributes
      4. 2.4.4 Numbers
        1. 2.4.4.1 Signed integers
        2. 2.4.4.2 Non-negative integers
        3. 2.4.4.3 Floating-point numbers
        4. 2.4.4.4 Percentages and lengths
        5. 2.4.4.5 Lists of integers
        6. 2.4.4.6 Lists of dimensions
      5. 2.4.5 Dates and times
        1. 2.4.5.1 Months
        2. 2.4.5.2 Dates
        3. 2.4.5.3 Yearless dates
        4. 2.4.5.4 Times
        5. 2.4.5.5 Local dates and times
        6. 2.4.5.6 Time zones
        7. 2.4.5.7 Global dates and times
        8. 2.4.5.8 Weeks
        9. 2.4.5.9 Durations
        10. 2.4.5.10 Vaguer moments in time
      6. 2.4.6 Colours
      7. 2.4.7 Space-separated tokens
      8. 2.4.8 Comma-separated tokens
      9. 2.4.9 References
      10. 2.4.10 Media queries
    5. 2.5 URLs
      1. 2.5.1 Terminology
      2. 2.5.2 Resolving URLs
      3. 2.5.3 Dynamic changes to base URLs
    6. 2.6 Fetching resources
      1. 2.6.1 Terminology
      2. 2.6.2 Processing model
      3. 2.6.3 Encrypted HTTP and related security concerns
      4. 2.6.4 Determining the type of a resource
      5. 2.6.5 Extracting character encodings from meta elements
      6. 2.6.6 CORS settings attributes
      7. 2.6.7 CORS-enabled fetch
    7. 2.7 Common DOM interfaces
      1. 2.7.1 Reflecting content attributes in IDL attributes
      2. 2.7.2 Collections
        1. 2.7.2.1 HTMLAllCollection
        2. 2.7.2.2 HTMLFormControlsCollection
        3. 2.7.2.3 HTMLOptionsCollection
        4. 2.7.2.4 HTMLPropertiesCollection
      3. 2.7.3 DOMStringMap
      4. 2.7.4 DOMElementMap
      5. 2.7.5 Transferable objects
      6. 2.7.6 Safe passing of structured data
      7. 2.7.7 Callbacks
      8. 2.7.8 Garbage collection
    8. 2.8 Namespaces
  3. 3 Semantics, structure, and APIs of HTML documents
    1. 3.1 Documents
      1. 3.1.1 The Document object
      2. 3.1.2 Resource metadata management
      3. 3.1.3 DOM tree accessors
      4. 3.1.4 Loading XML documents
    2. 3.2 Elements
      1. 3.2.1 Semantics
      2. 3.2.2 Elements in the DOM
      3. 3.2.3 Element definitions
        1. 3.2.3.1 Attributes
      4. 3.2.4 Content models
        1. 3.2.4.1 Kinds of content
          1. 3.2.4.1.1 Metadata content
          2. 3.2.4.1.2 Flow content
          3. 3.2.4.1.3 Sectioning content
          4. 3.2.4.1.4 Heading content
          5. 3.2.4.1.5 Phrasing content
          6. 3.2.4.1.6 Embedded content
          7. 3.2.4.1.7 Interactive content
          8. 3.2.4.1.8 Palpable content
          9. 3.2.4.1.9 Script-supporting elements
        2. 3.2.4.2 Transparent content models
        3. 3.2.4.3 Paragraphs
      5. 3.2.5 Global attributes
        1. 3.2.5.1 The id attribute
        2. 3.2.5.2 The title attribute
        3. 3.2.5.3 The lang and xml:lang attributes
        4. 3.2.5.4 The translate attribute
        5. 3.2.5.5 The xml:base attribute (XML only)
        6. 3.2.5.6 The dir attribute
        7. 3.2.5.7 The class attribute
        8. 3.2.5.8 The style attribute
        9. 3.2.5.9 Embedding custom non-visible data with the data-* attributes
      6. 3.2.6 Requirements relating to the bidirectional algorithm
        1. 3.2.6.1 Authoring conformance criteria for bidirectional-algorithm formatting characters
        2. 3.2.6.2 User agent conformance criteria
      7. 3.2.7 WAI-ARIA
  4. 4 The elements of HTML
    1. 4.1 The root element
      1. 4.1.1 The html element
    2. 4.2 Document metadata
      1. 4.2.1 The head element
      2. 4.2.2 The title element
      3. 4.2.3 The base element
      4. 4.2.4 The link element
      5. 4.2.5 The meta element
        1. 4.2.5.1 Standard metadata names
        2. 4.2.5.2 Other metadata names
        3. 4.2.5.3 Pragma directives
        4. 4.2.5.4 Other pragma directives
        5. 4.2.5.5 Specifying the document's character encoding
      6. 4.2.6 The style element
      7. 4.2.7 Interactions of styling and scripting
    3. 4.3 Sections
      1. 4.3.1 The body element
      2. 4.3.2 The article element
      3. 4.3.3 The section element
      4. 4.3.4 The nav element
      5. 4.3.5 The aside element
      6. 4.3.6 The h1, h2, h3, h4, h5, and - h6 elements
      7. 4.3.7 The hgroup element
      8. 4.3.8 The header element
      9. 4.3.9 The footer element
      10. 4.3.10 The address element
      11. 4.3.11 Headings and sections
        1. 4.3.11.1 Creating an outline
        2. 4.3.11.2 Sample outlines
      12. 4.3.12 Usage summary
        1. 4.3.12.1 Article or section?
    4. 4.4 Grouping content
      1. 4.4.1 The p element
      2. 4.4.2 The hr element
      3. 4.4.3 The pre element
      4. 4.4.4 The blockquote element
      5. 4.4.5 The ol element
      6. 4.4.6 The ul element
      7. 4.4.7 The li element
      8. 4.4.8 The dl element
      9. 4.4.9 The dt element
      10. 4.4.10 The dd element
      11. 4.4.11 The figure element
      12. 4.4.12 The figcaption element
      13. 4.4.13 The main element
      14. 4.4.14 The div element
    5. 4.5 Text-level semantics
      1. 4.5.1 The a element
      2. 4.5.2 The em element
      3. 4.5.3 The strong element
      4. 4.5.4 The small element
      5. 4.5.5 The s element
      6. 4.5.6 The cite element
      7. 4.5.7 The q element
      8. 4.5.8 The dfn element
      9. 4.5.9 The abbr element
      10. 4.5.10 The ruby element
      11. 4.5.11 The rt element
      12. 4.5.12 The rp element
      13. 4.5.13 The data element
      14. 4.5.14 The time element
      15. 4.5.15 The code element
      16. 4.5.16 The var element
      17. 4.5.17 The samp element
      18. 4.5.18 The kbd element
      19. 4.5.19 The sub and sup elements
      20. 4.5.20 The i element
      21. 4.5.21 The b element
      22. 4.5.22 The u element
      23. 4.5.23 The mark element
      24. 4.5.24 The bdi element
      25. 4.5.25 The bdo element
      26. 4.5.26 The span element
      27. 4.5.27 The br element
      28. 4.5.28 The wbr element
      29. 4.5.29 Usage summary
    6. 4.6 Edits
      1. 4.6.1 The ins element
      2. 4.6.2 The del element
      3. 4.6.3 Attributes common to ins and del elements
      4. 4.6.4 Edits and paragraphs
      5. 4.6.5 Edits and lists
      6. 4.6.6 Edits and tables
    7. 4.7 Embedded content
      1. 4.7.1 Introduction
      2. 4.7.2 Dependencies
      3. 4.7.3 The picture element
      4. 4.7.4 The source element when used with the picture element
      5. 4.7.5 The img element
        1. 4.7.5.1 Requirements for providing text to act as an alternative for images
          1. 4.7.5.1.1 General guidelines
          2. 4.7.5.1.2 A link or button containing nothing but the image
          3. 4.7.5.1.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
          4. 4.7.5.1.4 A short phrase or label with an alternative graphical representation: icons, logos
          5. 4.7.5.1.5 Text that has been rendered to a graphic for typographical effect
          6. 4.7.5.1.6 A graphical representation of some of the surrounding text
          7. 4.7.5.1.7 A purely decorative image that doesn't add any information
          8. 4.7.5.1.8 A group of images that form a single larger picture with no links
          9. 4.7.5.1.9 A group of images that form a single larger picture with links
          10. 4.7.5.1.10 A key part of the content
          11. 4.7.5.1.11 An image not intended for the user
          12. 4.7.5.1.12 An image in an e-mail or private document intended for a specific person who is known to be able to view images
          13. 4.7.5.1.13 Guidance for markup generators
          14. 4.7.5.1.14 Guidance for conformance checkers
      6. 4.7.6 The iframe element
      7. 4.7.7 The embed element
      8. 4.7.8 The object element
      9. 4.7.9 The param element
      10. 4.7.10 The video element
      11. 4.7.11 The audio element
      12. 4.7.12 The source element
      13. 4.7.13 The track element
      14. 4.7.14 Media elements
        1. 4.7.14.1 Error codes
        2. 4.7.14.2 Location of the media resource
        3. 4.7.14.3 MIME types
        4. 4.7.14.4 Network states
        5. 4.7.14.5 Loading the media resource
        6. 4.7.14.6 Offsets into the media resource
        7. 4.7.14.7 Ready states
        8. 4.7.14.8 Playing the media resource
        9. 4.7.14.9 Seeking
        10. 4.7.14.10 Media resources with multiple media tracks
          1. 4.7.14.10.1 AudioTrackList and VideoTrackList objects
          2. 4.7.14.10.2 Selecting specific audio and video tracks declaratively
        11. 4.7.14.11 Synchronising multiple media elements
          1. 4.7.14.11.1 Introduction
          2. 4.7.14.11.2 Media controllers
          3. 4.7.14.11.3 Assigning a media controller declaratively
        12. 4.7.14.12 Timed text tracks
          1. 4.7.14.12.1 Text track model
          2. 4.7.14.12.2 Sourcing in-band text tracks
          3. 4.7.14.12.3 Sourcing out-of-band text tracks
          4. 4.7.14.12.4 Guidelines for exposing cues in various formats as text track cues
          5. 4.7.14.12.5 Text track API
          6. 4.7.14.12.6 Text tracks describing chapters
          7. 4.7.14.12.7 Event handlers for objects of the text track APIs
          8. 4.7.14.12.8 Best practices for metadata text tracks
        13. 4.7.14.13 User interface
        14. 4.7.14.14 Time ranges
        15. 4.7.14.15 The TrackEvent interface
        16. 4.7.14.16 Event summary
        17. 4.7.14.17 Security and privacy considerations
        18. 4.7.14.18 Best practices for authors using media elements
        19. 4.7.14.19 Best practices for implementors of media elements
      15. 4.7.15 The map element
      16. 4.7.16 The area element
      17. 4.7.17 Image maps
        1. 4.7.17.1 Authoring
        2. 4.7.17.2 Processing model
      18. 4.7.18 MathML
      19. 4.7.19 SVG
      20. 4.7.20 Dimension attributes
    8. 4.8 Links
      1. 4.8.1 Introduction
      2. 4.8.2 Links created by a and area elements
      3. 4.8.3 Following hyperlinks
      4. 4.8.4 Downloading resources
        1. 4.8.4.1 Hyperlink auditing
      5. 4.8.5 Link types
        1. 4.8.5.1 Link type "alternate"
        2. 4.8.5.2 Link type "author"
        3. 4.8.5.3 Link type "bookmark"
        4. 4.8.5.4 Link type "external"
        5. 4.8.5.5 Link type "help"
        6. 4.8.5.6 Link type "icon"
        7. 4.8.5.7 Link type "license"
        8. 4.8.5.8 Link type "nofollow"
        9. 4.8.5.9 Link type "noreferrer"
        10. 4.8.5.10 Link type "pingback"
        11. 4.8.5.11 Link type "prefetch"
        12. 4.8.5.12 Link type "search"
        13. 4.8.5.13 Link type "sidebar"
        14. 4.8.5.14 Link type "stylesheet"
        15. 4.8.5.15 Link type "tag"
        16. 4.8.5.16 Sequential link types
          1. 4.8.5.16.1 Link type "next"
          2. 4.8.5.16.2 Link type "prev"
        17. 4.8.5.17 Other link types
    9. 4.9 Tabular data
      1. 4.9.1 The table element
        1. 4.9.1.1 Techniques for describing tables
        2. 4.9.1.2 Techniques for table design
      2. 4.9.2 The caption element
      3. 4.9.3 The colgroup element
      4. 4.9.4 The col element
      5. 4.9.5 The tbody element
      6. 4.9.6 The thead element
      7. 4.9.7 The tfoot element
      8. 4.9.8 The tr element
      9. 4.9.9 The td element
      10. 4.9.10 The th element
      11. 4.9.11 Attributes common to td and th elements
      12. 4.9.12 Processing model
        1. 4.9.12.1 Forming a table
        2. 4.9.12.2 Forming relationships between data cells and header cells
      13. 4.9.13 Table sorting model
      14. 4.9.14 Examples
    10. 4.10 Forms
      1. 4.10.1 Introduction
        1. 4.10.1.1 Writing a form's user interface
        2. 4.10.1.2 Implementing the server-side processing for a form
        3. 4.10.1.3 Configuring a form to communicate with a server
        4. 4.10.1.4 Client-side form validation
        5. 4.10.1.5 Enabling client-side automatic filling of form controls
        6. 4.10.1.6 Improving the user experience on mobile devices
        7. 4.10.1.7 The difference between the field type, the autofill field name, and the input modality
        8. 4.10.1.8 Date, time, and number formats
      2. 4.10.2 Categories
      3. 4.10.3 The form element
      4. 4.10.4 The label element
      5. 4.10.5 The input element
        1. 4.10.5.1 States of the type attribute
          1. 4.10.5.1.1 Hidden state (type=hidden)
          2. 4.10.5.1.2 Text (type=text) state and Search state (type=search)
          3. 4.10.5.1.3 Telephone state (type=tel)
          4. 4.10.5.1.4 URL state (type=url)
          5. 4.10.5.1.5 E-mail state (type=email)
          6. 4.10.5.1.6 Password state (type=password)
          7. 4.10.5.1.7 Date and Time state (type=datetime)
          8. 4.10.5.1.8 Date state (type=date)
          9. 4.10.5.1.9 Month state (type=month)
          10. 4.10.5.1.10 Week state (type=week)
          11. 4.10.5.1.11 Time state (type=time)
          12. 4.10.5.1.12 Local Date and Time state (type=datetime-local)
          13. 4.10.5.1.13 Number state (type=number)
          14. 4.10.5.1.14 Range state (type=range)
          15. 4.10.5.1.15 Colour state (type=color)
          16. 4.10.5.1.16 Checkbox state (type=checkbox)
          17. 4.10.5.1.17 Radio Button state (type=radio)
          18. 4.10.5.1.18 File Upload state (type=file)
          19. 4.10.5.1.19 Submit Button state (type=submit)
          20. 4.10.5.1.20 Image Button state (type=image)
          21. 4.10.5.1.21 Reset Button state (type=reset)
          22. 4.10.5.1.22 Button state (type=button)
        2. 4.10.5.2 Implemention notes regarding localization of form controls
        3. 4.10.5.3 Common input element attributes
          1. 4.10.5.3.1 The maxlength and minlength attributes
          2. 4.10.5.3.2 The size attribute
          3. 4.10.5.3.3 The readonly attribute
          4. 4.10.5.3.4 The required attribute
          5. 4.10.5.3.5 The multiple attribute
          6. 4.10.5.3.6 The pattern attribute
          7. 4.10.5.3.7 The min and max attributes
          8. 4.10.5.3.8 The step attribute
          9. 4.10.5.3.9 The list attribute
          10. 4.10.5.3.10 The placeholder attribute
        4. 4.10.5.4 Common input element APIs
        5. 4.10.5.5 Common event behaviors
      6. 4.10.6 The button element
      7. 4.10.7 The select element
      8. 4.10.8 The datalist element
      9. 4.10.9 The optgroup element
      10. 4.10.10 The option element
      11. 4.10.11 The textarea element
      12. 4.10.12 The keygen element
      13. 4.10.13 The output element
      14. 4.10.14 The progress element
      15. 4.10.15 The meter element
      16. 4.10.16 The fieldset element
      17. 4.10.17 The legend element
      18. 4.10.18 Form control infrastructure
        1. 4.10.18.1 A form control's value
        2. 4.10.18.2 Mutability
        3. 4.10.18.3 Association of controls and forms
      19. 4.10.19 Attributes common to form controls
        1. 4.10.19.1 Naming form controls: the name attribute
        2. 4.10.19.2 Submitting element directionality: the dirname attribute
        3. 4.10.19.3 Limiting user input length: the maxlength attribute
        4. 4.10.19.4 Setting minimum input length requirements: the minlength attribute
        5. 4.10.19.5 Enabling and disabling form controls: the disabled attribute
        6. 4.10.19.6 Form submission
          1. 4.10.19.6.1 Autofocusing a form control: the autofocus attribute
        7. 4.10.19.7 Input modalities: the inputmode attribute
        8. 4.10.19.8 Autofill
          1. 4.10.19.8.1 Autofilling form controls: the autocomplete attribute
          2. 4.10.19.8.2 Processing model
          3. 4.10.19.8.3 User interface for bulk autofill
          4. 4.10.19.8.4 The AutocompleteErrorEvent interface
      20. 4.10.20 APIs for the text field selections
      21. 4.10.21 Constraints
        1. 4.10.21.1 Definitions
        2. 4.10.21.2 Constraint validation
        3. 4.10.21.3 The constraint validation API
        4. 4.10.21.4 Security
      22. 4.10.22 Form submission
        1. 4.10.22.1 Introduction
        2. 4.10.22.2 Implicit submission
        3. 4.10.22.3 Form submission algorithm
        4. 4.10.22.4 Constructing the form data set
        5. 4.10.22.5 Selecting a form submission encoding
        6. 4.10.22.6 URL-encoded form data
        7. 4.10.22.7 Multipart form data
        8. 4.10.22.8 Plain text form data
      23. 4.10.23 Resetting a form
    11. 4.11 Interactive elements
      1. 4.11.1 The details element
      2. 4.11.2 The summary element
      3. 4.11.3 The menu element
      4. 4.11.4 The menuitem element
      5. 4.11.5 Context menus
        1. 4.11.5.1 Declaring a context menu
        2. 4.11.5.2 Processing model
        3. 4.11.5.3 The RelatedEvent interfaces
      6. 4.11.6 Commands
        1. 4.11.6.1 Facets
        2. 4.11.6.2 Using the a element to define a command
        3. 4.11.6.3 Using the button element to define a command
        4. 4.11.6.4 Using the input element to define a command
        5. 4.11.6.5 Using the option element to define a command
        6. 4.11.6.6 Using the menuitem element to define a + h6 elements
        7. 4.3.7 The hgroup element
        8. 4.3.8 The header element
        9. 4.3.9 The footer element
        10. 4.3.10 The address element
        11. 4.3.11 Headings and sections
          1. 4.3.11.1 Creating an outline
          2. 4.3.11.2 Sample outlines
        12. 4.3.12 Usage summary
          1. 4.3.12.1 Article or section?
      7. 4.4 Grouping content
        1. 4.4.1 The p element
        2. 4.4.2 The hr element
        3. 4.4.3 The pre element
        4. 4.4.4 The blockquote element
        5. 4.4.5 The ol element
        6. 4.4.6 The ul element
        7. 4.4.7 The li element
        8. 4.4.8 The dl element
        9. 4.4.9 The dt element
        10. 4.4.10 The dd element
        11. 4.4.11 The figure element
        12. 4.4.12 The figcaption element
        13. 4.4.13 The main element
        14. 4.4.14 The div element
      8. 4.5 Text-level semantics
        1. 4.5.1 The a element
        2. 4.5.2 The em element
        3. 4.5.3 The strong element
        4. 4.5.4 The small element
        5. 4.5.5 The s element
        6. 4.5.6 The cite element
        7. 4.5.7 The q element
        8. 4.5.8 The dfn element
        9. 4.5.9 The abbr element
        10. 4.5.10 The ruby element
        11. 4.5.11 The rt element
        12. 4.5.12 The rp element
        13. 4.5.13 The data element
        14. 4.5.14 The time element
        15. 4.5.15 The code element
        16. 4.5.16 The var element
        17. 4.5.17 The samp element
        18. 4.5.18 The kbd element
        19. 4.5.19 The sub and sup elements
        20. 4.5.20 The i element
        21. 4.5.21 The b element
        22. 4.5.22 The u element
        23. 4.5.23 The mark element
        24. 4.5.24 The bdi element
        25. 4.5.25 The bdo element
        26. 4.5.26 The span element
        27. 4.5.27 The br element
        28. 4.5.28 The wbr element
        29. 4.5.29 Usage summary
      9. 4.6 Links
        1. 4.6.1 Introduction
        2. 4.6.2 Links created by a and area elements
        3. 4.6.3 Following hyperlinks
        4. 4.6.4 Downloading resources
          1. 4.6.4.1 Hyperlink auditing
        5. 4.6.5 Link types
          1. 4.6.5.1 Link type "alternate"
          2. 4.6.5.2 Link type "author"
          3. 4.6.5.3 Link type "bookmark"
          4. 4.6.5.4 Link type "external"
          5. 4.6.5.5 Link type "help"
          6. 4.6.5.6 Link type "icon"
          7. 4.6.5.7 Link type "license"
          8. 4.6.5.8 Link type "nofollow"
          9. 4.6.5.9 Link type "noreferrer"
          10. 4.6.5.10 Link type "pingback"
          11. 4.6.5.11 Link type "prefetch"
          12. 4.6.5.12 Link type "search"
          13. 4.6.5.13 Link type "sidebar"
          14. 4.6.5.14 Link type "stylesheet"
          15. 4.6.5.15 Link type "tag"
          16. 4.6.5.16 Sequential link types
            1. 4.6.5.16.1 Link type "next"
            2. 4.6.5.16.2 Link type "prev"
          17. 4.6.5.17 Other link types
      10. 4.7 Edits
        1. 4.7.1 The ins element
        2. 4.7.2 The del element
        3. 4.7.3 Attributes common to ins and del elements
        4. 4.7.4 Edits and paragraphs
        5. 4.7.5 Edits and lists
        6. 4.7.6 Edits and tables
      11. 4.8 Embedded content
        1. 4.8.1 Introduction
        2. 4.8.2 Dependencies
        3. 4.8.3 The picture element
        4. 4.8.4 The source element when used with the picture element
        5. 4.8.5 The img element
          1. 4.8.5.1 Requirements for providing text to act as an alternative for images
            1. 4.8.5.1.1 General guidelines
            2. 4.8.5.1.2 A link or button containing nothing but the image
            3. 4.8.5.1.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
            4. 4.8.5.1.4 A short phrase or label with an alternative graphical representation: icons, logos
            5. 4.8.5.1.5 Text that has been rendered to a graphic for typographical effect
            6. 4.8.5.1.6 A graphical representation of some of the surrounding text
            7. 4.8.5.1.7 A purely decorative image that doesn't add any information
            8. 4.8.5.1.8 A group of images that form a single larger picture with no links
            9. 4.8.5.1.9 A group of images that form a single larger picture with links
            10. 4.8.5.1.10 A key part of the content
            11. 4.8.5.1.11 An image not intended for the user
            12. 4.8.5.1.12 An image in an e-mail or private document intended for a specific person who is known to be able to view images
            13. 4.8.5.1.13 Guidance for markup generators
            14. 4.8.5.1.14 Guidance for conformance checkers
        6. 4.8.6 The iframe element
        7. 4.8.7 The embed element
        8. 4.8.8 The object element
        9. 4.8.9 The param element
        10. 4.8.10 The video element
        11. 4.8.11 The audio element
        12. 4.8.12 The source element
        13. 4.8.13 The track element
        14. 4.8.14 Media elements
          1. 4.8.14.1 Error codes
          2. 4.8.14.2 Location of the media resource
          3. 4.8.14.3 MIME types
          4. 4.8.14.4 Network states
          5. 4.8.14.5 Loading the media resource
          6. 4.8.14.6 Offsets into the media resource
          7. 4.8.14.7 Ready states
          8. 4.8.14.8 Playing the media resource
          9. 4.8.14.9 Seeking
          10. 4.8.14.10 Media resources with multiple media tracks
            1. 4.8.14.10.1 AudioTrackList and VideoTrackList objects
            2. 4.8.14.10.2 Selecting specific audio and video tracks declaratively
          11. 4.8.14.11 Synchronising multiple media elements
            1. 4.8.14.11.1 Introduction
            2. 4.8.14.11.2 Media controllers
            3. 4.8.14.11.3 Assigning a media controller declaratively
          12. 4.8.14.12 Timed text tracks
            1. 4.8.14.12.1 Text track model
            2. 4.8.14.12.2 Sourcing in-band text tracks
            3. 4.8.14.12.3 Sourcing out-of-band text tracks
            4. 4.8.14.12.4 Guidelines for exposing cues in various formats as text track cues
            5. 4.8.14.12.5 Text track API
            6. 4.8.14.12.6 Text tracks describing chapters
            7. 4.8.14.12.7 Event handlers for objects of the text track APIs
            8. 4.8.14.12.8 Best practices for metadata text tracks
          13. 4.8.14.13 User interface
          14. 4.8.14.14 Time ranges
          15. 4.8.14.15 The TrackEvent interface
          16. 4.8.14.16 Event summary
          17. 4.8.14.17 Security and privacy considerations
          18. 4.8.14.18 Best practices for authors using media elements
          19. 4.8.14.19 Best practices for implementors of media elements
        15. 4.8.15 The map element
        16. 4.8.16 The area element
        17. 4.8.17 Image maps
          1. 4.8.17.1 Authoring
          2. 4.8.17.2 Processing model
        18. 4.8.18 MathML
        19. 4.8.19 SVG
        20. 4.8.20 Dimension attributes
      12. 4.9 Tabular data
        1. 4.9.1 The table element
          1. 4.9.1.1 Techniques for describing tables
          2. 4.9.1.2 Techniques for table design
        2. 4.9.2 The caption element
        3. 4.9.3 The colgroup element
        4. 4.9.4 The col element
        5. 4.9.5 The tbody element
        6. 4.9.6 The thead element
        7. 4.9.7 The tfoot element
        8. 4.9.8 The tr element
        9. 4.9.9 The td element
        10. 4.9.10 The th element
        11. 4.9.11 Attributes common to td and th elements
        12. 4.9.12 Processing model
          1. 4.9.12.1 Forming a table
          2. 4.9.12.2 Forming relationships between data cells and header cells
        13. 4.9.13 Table sorting model
        14. 4.9.14 Examples
      13. 4.10 Forms
        1. 4.10.1 Introduction
          1. 4.10.1.1 Writing a form's user interface
          2. 4.10.1.2 Implementing the server-side processing for a form
          3. 4.10.1.3 Configuring a form to communicate with a server
          4. 4.10.1.4 Client-side form validation
          5. 4.10.1.5 Enabling client-side automatic filling of form controls
          6. 4.10.1.6 Improving the user experience on mobile devices
          7. 4.10.1.7 The difference between the field type, the autofill field name, and the input modality
          8. 4.10.1.8 Date, time, and number formats
        2. 4.10.2 Categories
        3. 4.10.3 The form element
        4. 4.10.4 The label element
        5. 4.10.5 The input element
          1. 4.10.5.1 States of the type attribute
            1. 4.10.5.1.1 Hidden state (type=hidden)
            2. 4.10.5.1.2 Text (type=text) state and Search state (type=search)
            3. 4.10.5.1.3 Telephone state (type=tel)
            4. 4.10.5.1.4 URL state (type=url)
            5. 4.10.5.1.5 E-mail state (type=email)
            6. 4.10.5.1.6 Password state (type=password)
            7. 4.10.5.1.7 Date and Time state (type=datetime)
            8. 4.10.5.1.8 Date state (type=date)
            9. 4.10.5.1.9 Month state (type=month)
            10. 4.10.5.1.10 Week state (type=week)
            11. 4.10.5.1.11 Time state (type=time)
            12. 4.10.5.1.12 Local Date and Time state (type=datetime-local)
            13. 4.10.5.1.13 Number state (type=number)
            14. 4.10.5.1.14 Range state (type=range)
            15. 4.10.5.1.15 Colour state (type=color)
            16. 4.10.5.1.16 Checkbox state (type=checkbox)
            17. 4.10.5.1.17 Radio Button state (type=radio)
            18. 4.10.5.1.18 File Upload state (type=file)
            19. 4.10.5.1.19 Submit Button state (type=submit)
            20. 4.10.5.1.20 Image Button state (type=image)
            21. 4.10.5.1.21 Reset Button state (type=reset)
            22. 4.10.5.1.22 Button state (type=button)
          2. 4.10.5.2 Implemention notes regarding localization of form controls
          3. 4.10.5.3 Common input element attributes
            1. 4.10.5.3.1 The maxlength and minlength attributes
            2. 4.10.5.3.2 The size attribute
            3. 4.10.5.3.3 The readonly attribute
            4. 4.10.5.3.4 The required attribute
            5. 4.10.5.3.5 The multiple attribute
            6. 4.10.5.3.6 The pattern attribute
            7. 4.10.5.3.7 The min and max attributes
            8. 4.10.5.3.8 The step attribute
            9. 4.10.5.3.9 The list attribute
            10. 4.10.5.3.10 The placeholder attribute
          4. 4.10.5.4 Common input element APIs
          5. 4.10.5.5 Common event behaviors
        6. 4.10.6 The button element
        7. 4.10.7 The select element
        8. 4.10.8 The datalist element
        9. 4.10.9 The optgroup element
        10. 4.10.10 The option element
        11. 4.10.11 The textarea element
        12. 4.10.12 The keygen element
        13. 4.10.13 The output element
        14. 4.10.14 The progress element
        15. 4.10.15 The meter element
        16. 4.10.16 The fieldset element
        17. 4.10.17 The legend element
        18. 4.10.18 Form control infrastructure
          1. 4.10.18.1 A form control's value
          2. 4.10.18.2 Mutability
          3. 4.10.18.3 Association of controls and forms
        19. 4.10.19 Attributes common to form controls
          1. 4.10.19.1 Naming form controls: the name attribute
          2. 4.10.19.2 Submitting element directionality: the dirname attribute
          3. 4.10.19.3 Limiting user input length: the maxlength attribute
          4. 4.10.19.4 Setting minimum input length requirements: the minlength attribute
          5. 4.10.19.5 Enabling and disabling form controls: the disabled attribute
          6. 4.10.19.6 Form submission
            1. 4.10.19.6.1 Autofocusing a form control: the autofocus attribute
          7. 4.10.19.7 Input modalities: the inputmode attribute
          8. 4.10.19.8 Autofill
            1. 4.10.19.8.1 Autofilling form controls: the autocomplete attribute
            2. 4.10.19.8.2 Processing model
            3. 4.10.19.8.3 User interface for bulk autofill
            4. 4.10.19.8.4 The AutocompleteErrorEvent interface
        20. 4.10.20 APIs for the text field selections
        21. 4.10.21 Constraints
          1. 4.10.21.1 Definitions
          2. 4.10.21.2 Constraint validation
          3. 4.10.21.3 The constraint validation API
          4. 4.10.21.4 Security
        22. 4.10.22 Form submission
          1. 4.10.22.1 Introduction
          2. 4.10.22.2 Implicit submission
          3. 4.10.22.3 Form submission algorithm
          4. 4.10.22.4 Constructing the form data set
          5. 4.10.22.5 Selecting a form submission encoding
          6. 4.10.22.6 URL-encoded form data
          7. 4.10.22.7 Multipart form data
          8. 4.10.22.8 Plain text form data
        23. 4.10.23 Resetting a form
      14. 4.11 Interactive elements
        1. 4.11.1 The details element
        2. 4.11.2 The summary element
        3. 4.11.3 The menu element
        4. 4.11.4 The menuitem element
        5. 4.11.5 Context menus
          1. 4.11.5.1 Declaring a context menu
          2. 4.11.5.2 Processing model
          3. 4.11.5.3 The RelatedEvent interfaces
        6. 4.11.6 Commands
          1. 4.11.6.1 Facets
          2. 4.11.6.2 Using the a element to define a command
          3. 4.11.6.3 Using the button element to define a command
          4. 4.11.6.4 Using the input element to define a command
          5. 4.11.6.5 Using the option element to define a command
          6. 4.11.6.6 Using the menuitem element to define a command
          7. 4.11.6.7 Using the command attribute on menuitem elements to define a command indirectly
          8. 4.11.6.8 Using the accesskey attribute on a label element to define a command
          9. 4.11.6.9 Using the accesskey attribute on a legend element to define a command
          10. 4.11.6.10 Using the accesskey attribute to define a command on other elements
        7. 4.11.7 The dialog element
          1. 4.11.7.1 Anchor points
      15. 4.12 Scripting
        1. 4.12.1 The script element
          1. 4.12.1.1 Scripting languages
          2. 4.12.1.2 Restrictions for contents of script elements
          3. 4.12.1.3 Inline documentation for external scripts
          4. 4.12.1.4 Interaction of script elements and XSLT
        2. 4.12.2 The noscript element
        3. 4.12.3 The template element
          1. 4.12.3.1 Interaction of template elements with XSLT and XPath
        4. 4.12.4 The canvas element
          1. 4.12.4.1 Proxying canvases to workers
          2. 4.12.4.2 The 2D rendering context
            1. 4.12.4.2.1 Implementation notes
            2. 4.12.4.2.2 The canvas state
            3. 4.12.4.2.3 DrawingStyle objects
            4. 4.12.4.2.4 Line styles
            5. 4.12.4.2.5 Text styles
            6. 4.12.4.2.6 Building paths
            7. 4.12.4.2.7 Path2D objects
            8. 4.12.4.2.8 Transformations
            9. 4.12.4.2.9 Image sources for 2D rendering contexts
            10. 4.12.4.2.10 Fill and stroke styles
            11. 4.12.4.2.11 Drawing rectangles to the bitmap
            12. 4.12.4.2.12 Drawing text to the bitmap
            13. 4.12.4.2.13 Drawing paths to the canvas
            14. 4.12.4.2.14 Drawing images
            15. 4.12.4.2.15 Hit regions
            16. 4.12.4.2.16 Pixel manipulation
            17. 4.12.4.2.17 Compositing
            18. 4.12.4.2.18 Image smoothing
            19. 4.12.4.2.19 Shadows
            20. 4.12.4.2.20 Drawing model
            21. 4.12.4.2.21 Best practices
            22. 4.12.4.2.22 Examples
          3. 4.12.4.3 Colour spaces and colour correction
          4. 4.12.4.4 Serializing bitmaps to a file
          5. 4.12.4.5 Security with canvas elements
      16. 4.13 Common idioms without dedicated elements
        1. 4.13.1 The main part of the content
        2. 4.13.2 Bread crumb navigation
        3. 4.13.3 Tag clouds
        4. 4.13.4 Conversations
        5. 4.13.5 Footnotes
      17. 4.14 Disabled elements
      18. 4.15 Matching HTML elements using selectors
        1. 4.15.1 Case-sensitivity
        2. 4.15.2 Pseudo-classes
    12. 5 Microdata
      1. 5.1 Introduction
        1. 5.1.1 Overview
        2. 5.1.2 The basic syntax
        3. 5.1.3 Typed items
        4. 5.1.4 Global identifiers for items
        5. 5.1.5 Selecting names when defining vocabularies
        6. 5.1.6 Using the microdata DOM API
      2. 5.2 Encoding microdata
        1. 5.2.1 The microdata model
        2. 5.2.2 Items
        3. 5.2.3 Names: the itemprop attribute
        4. 5.2.4 Values
        5. 5.2.5 Associating names with items
        6. 5.2.6 Microdata and other namespaces
      3. 5.3 Microdata DOM API
      4. 5.4 Sample microdata vocabularies
        1. 5.4.1 vCard
          1. 5.4.1.1 Conversion to vCard
          2. 5.4.1.2 Examples
        2. 5.4.2 vEvent
          1. 5.4.2.1 Conversion to iCalendar
          2. 5.4.2.2 Examples
        3. 5.4.3 Licensing works
          1. 5.4.3.1 Examples
      5. 5.5 Converting HTML to other formats
        1. 5.5.1 JSON
    13. 6 User interaction
      1. 6.1 The hidden attribute
      2. 6.2 Inert subtrees
      3. 6.3 Activation
      4. 6.4 Focus
        1. 6.4.1 Introduction
        2. 6.4.2 Data model
        3. 6.4.3 The tabindex attribute
        4. 6.4.4 Processing model
        5. 6.4.5 Sequential focus navigation
        6. 6.4.6 Focus management APIs
      5. 6.5 Assigning keyboard shortcuts
        1. 6.5.1 Introduction
        2. 6.5.2 The accesskey attribute
        3. 6.5.3 Processing model
      6. 6.6 Editing
        1. 6.6.1 Making document regions editable: The contenteditable content attribute
        2. 6.6.2 Making entire documents editable: The designMode IDL attribute
        3. 6.6.3 Best practices for in-page editors
        4. 6.6.4 Editing APIs
        5. 6.6.5 Spelling and grammar checking
      7. 6.7 Drag and drop
        1. 6.7.1 Introduction
        2. 6.7.2 The drag data store
        3. 6.7.3 The DataTransfer interface
          1. 6.7.3.1 The DataTransferItemList interface
          2. 6.7.3.2 The DataTransferItem interface
        4. 6.7.4 The DragEvent interface
        5. 6.7.5 Drag-and-drop processing model
        6. 6.7.6 Events summary
        7. 6.7.7 The draggable attribute
        8. 6.7.8 The dropzone attribute
        9. 6.7.9 Security risks in the drag-and-drop model
    14. 7 Loading Web pages
      1. 7.1 Browsing contexts
        1. 7.1.1 Nested browsing contexts
          1. 7.1.1.1 Navigating nested browsing contexts in the DOM
        2. 7.1.2 Auxiliary browsing contexts
          1. 7.1.2.1 Navigating auxiliary browsing contexts in the DOM
        3. 7.1.3 Secondary browsing contexts
        4. 7.1.4 Security
        5. 7.1.5 Groupings of browsing contexts
        6. 7.1.6 Browsing context names
      2. 7.2 The Window object
        1. 7.2.1 Security
        2. 7.2.2 APIs for creating and navigating browsing contexts by name
        3. 7.2.3 Accessing other browsing contexts
        4. 7.2.4 Named access on the Window object
        5. 7.2.5 Garbage collection and browsing contexts
        6. 7.2.6 Closing browsing contexts
        7. 7.2.7 Browser interface elements
        8. 7.2.8 The WindowProxy object
      3. 7.3 Origin
        1. 7.3.1 Relaxing the same-origin restriction
      4. 7.4 Sandboxing
      5. 7.5 Session history and navigation
        1. 7.5.1 The session history of browsing contexts
        2. 7.5.2 The History interface
        3. 7.5.3 The Location interface
          1. 7.5.3.1 Security
        4. 7.5.4 Implementation notes for session history
      6. 7.6 Browsing the Web
        1. 7.6.1 Navigating across documents
        2. 7.6.2 Page load processing model for HTML files
        3. 7.6.3 Page load processing model for XML files
        4. 7.6.4 Page load processing model for text files
        5. 7.6.5 Page load processing model for multipart/x-mixed-replace resources
        6. 7.6.6 Page load processing model for media
        7. 7.6.7 Page load processing model for content that uses plugins
        8. 7.6.8 Page load processing model for inline - content that doesn't have a DOM
        9. 7.6.9 Navigating to a fragment identifier
        10. 7.6.10 History traversal
          1. 7.6.10.1 The PopStateEvent interface
          2. 7.6.10.2 The HashChangeEvent interface
          3. 7.6.10.3 The PageTransitionEvent interface
        11. 7.6.11 Unloading documents
          1. 7.6.11.1 The BeforeUnloadEvent interface
        12. 7.6.12 Aborting a document load
      7. 7.7 Offline Web applications
        1. 7.7.1 Introduction
          1. 7.7.1.1 Supporting offline caching for legacy applications
          2. 7.7.1.2 Event summary
        2. 7.7.2 Application caches
        3. 7.7.3 The cache manifest syntax
          1. 7.7.3.1 Some sample manifests
          2. 7.7.3.2 Writing cache manifests
          3. 7.7.3.3 Parsing cache manifests
        4. 7.7.4 Downloading or updating an application cache
        5. 7.7.5 The application cache selection algorithm
        6. 7.7.6 Changes to the networking model
        7. 7.7.7 Expiring application caches
        8. 7.7.8 Disk space
        9. 7.7.9 Application cache API
        10. 7.7.10 Browser state
    15. 8 Web application APIs
      1. 8.1 Scripting
        1. 8.1.1 Introduction
        2. 8.1.2 Enabling and disabling scripting
        3. 8.1.3 Processing model
          1. 8.1.3.1 Definitions
          2. 8.1.3.2 Script settings for browsing contexts
          3. 8.1.3.3 Calling scripts
          4. 8.1.3.4 Creating scripts
          5. 8.1.3.5 Killing scripts
          6. 8.1.3.6 Runtime script errors
            1. 8.1.3.6.1 Runtime script errors in documents
            2. 8.1.3.6.2 The ErrorEvent interface
        4. 8.1.4 Event loops
          1. 8.1.4.1 Definitions
          2. 8.1.4.2 Processing model
          3. 8.1.4.3 Generic task sources
        5. 8.1.5 Events
          1. 8.1.5.1 Event handlers
          2. 8.1.5.2 Event handlers on elements, Document objects, and Window objects
            1. 8.1.5.2.1 IDL definitions
          3. 8.1.5.3 Event firing
          4. 8.1.5.4 Events and the Window object
      2. 8.2 Base64 utility methods
      3. 8.3 Dynamic markup insertion
        1. 8.3.1 Opening the input stream
        2. 8.3.2 Closing the input stream
        3. 8.3.3 document.write()
        4. 8.3.4 document.writeln()
      4. 8.4 Timers
      5. 8.5 User prompts
        1. 8.5.1 Simple dialogs
        2. 8.5.2 Printing
        3. 8.5.3 Dialogs implemented using separate documents
      6. 8.6 System state and capabilities
        1. 8.6.1 The Navigator object
          1. 8.6.1.1 Client identification
          2. 8.6.1.2 Language preferences
          3. 8.6.1.3 Custom scheme and content handlers
            1. 8.6.1.3.1 Security and privacy
            2. 8.6.1.3.2 Sample user interface
          4. 8.6.1.4 Manually releasing the storage mutex
          5. 8.6.1.5 Plugins
        2. 8.6.2 The External interface
      7. 8.7 Images
    16. 9 Communication
      1. 9.1 The MessageEvent interfaces
      2. 9.2 Server-sent events
        1. 9.2.1 Introduction
        2. 9.2.2 The EventSource interface
        3. 9.2.3 Processing model
        4. 9.2.4 Parsing an event stream
        5. 9.2.5 Interpreting an event stream
        6. 9.2.6 Authoring notes
        7. 9.2.7 Connectionless push and other features
        8. 9.2.8 Garbage collection
        9. 9.2.9 Implementation advice
        10. 9.2.10 IANA considerations
          1. 9.2.10.1 text/event-stream
          2. 9.2.10.2 Last-Event-ID
      3. 9.3 Web sockets
        1. 9.3.1 Introduction
        2. 9.3.2 The WebSocket interface
        3. 9.3.3 Feedback from the protocol
        4. 9.3.4 Ping and Pong frames
        5. 9.3.5 Parsing WebSocket URLs
        6. 9.3.6 The CloseEvent interfaces
        7. 9.3.7 Garbage collection
      4. 9.4 Cross-document messaging
        1. 9.4.1 Introduction
        2. 9.4.2 Security
          1. 9.4.2.1 Authors
          2. 9.4.2.2 User agents
        3. 9.4.3 Posting messages
      5. 9.5 Channel messaging
        1. 9.5.1 Introduction
          1. 9.5.1.1 Examples
          2. 9.5.1.2 Ports as the basis of an object-capability model on the Web
          3. 9.5.1.3 Ports as the basis of abstracting out service implementations
        2. 9.5.2 Message channels
        3. 9.5.3 Message ports
        4. 9.5.4 Broadcasting to many ports
        5. 9.5.5 Ports and garbage collection
      6. 9.6 Broadcasting to other browsing contexts
    17. 10 Web workers
      1. 10.1 Introduction
        1. 10.1.1 Scope
        2. 10.1.2 Examples
          1. 10.1.2.1 A background number-crunching worker
          2. 10.1.2.2 Worker used for background I/O
          3. 10.1.2.3 Shared workers introduction
          4. 10.1.2.4 Shared state using a shared worker
          5. 10.1.2.5 Delegation
        3. 10.1.3 Tutorials
          1. 10.1.3.1 Creating a dedicated worker
          2. 10.1.3.2 Communicating with a dedicated worker
          3. 10.1.3.3 Shared workers
      2. 10.2 Infrastructure
        1. 10.2.1 The global scope
          1. 10.2.1.1 The WorkerGlobalScope common interface
          2. 10.2.1.2 Dedicated workers and the DedicatedWorkerGlobalScope interface
          3. 10.2.1.3 Shared workers and the SharedWorkerGlobalScope interface
        2. 10.2.2 The event loop
        3. 10.2.3 The worker's lifetime
        4. 10.2.4 Processing model
        5. 10.2.5 Runtime script errors
        6. 10.2.6 Creating workers
          1. 10.2.6.1 The AbstractWorker abstract interface
          2. 10.2.6.2 Script settings for workers
          3. 10.2.6.3 Dedicated workers and the Worker interface
          4. 10.2.6.4 Shared workers and the SharedWorker interface
      3. 10.3 APIs available to workers
        1. 10.3.1 Importing scripts and libraries
        2. 10.3.2 The WorkerNavigator object
        3. 10.3.3 Worker locations
    18. 11 Web storage
      1. 11.1 Introduction
      2. 11.2 The API
        1. 11.2.1 The Storage interface
        2. 11.2.2 The sessionStorage attribute
        3. 11.2.3 The localStorage attribute
        4. 11.2.4 The storage event
          1. 11.2.4.1 The StorageEvent interface
        5. 11.2.5 Threads
      3. 11.3 Disk space
      4. 11.4 Privacy
        1. 11.4.1 User tracking
        2. 11.4.2 Sensitivity of data
      5. 11.5 Security
        1. 11.5.1 DNS spoofing attacks
        2. 11.5.2 Cross-directory attacks
        3. 11.5.3 Implementation risks
    19. 12 The HTML syntax
      1. 12.1 Writing HTML documents
        1. 12.1.1 The DOCTYPE
        2. 12.1.2 Elements
          1. 12.1.2.1 Start tags
          2. 12.1.2.2 End tags
          3. 12.1.2.3 Attributes
          4. 12.1.2.4 Optional tags
          5. 12.1.2.5 Restrictions on content models
          6. 12.1.2.6 Restrictions on the contents of raw text and escapable raw text elements
        3. 12.1.3 Text
          1. 12.1.3.1 Newlines
        4. 12.1.4 Character references
        5. 12.1.5 CDATA sections
        6. 12.1.6 Comments
      2. 12.2 Parsing HTML documents
        1. 12.2.1 Overview of the parsing model
        2. 12.2.2 The input byte stream
          1. 12.2.2.1 Parsing with a known character encoding
          2. 12.2.2.2 Determining the character encoding
          3. 12.2.2.3 Character encodings
          4. 12.2.2.4 Changing the encoding while parsing
          5. 12.2.2.5 Preprocessing the input stream
        3. 12.2.3 Parse state
          1. 12.2.3.1 The insertion mode
          2. 12.2.3.2 The stack of open elements
          3. 12.2.3.3 The list of active formatting elements
          4. 12.2.3.4 The element pointers
          5. 12.2.3.5 Other parsing state flags
        4. 12.2.4 Tokenization
          1. 12.2.4.1 Data state
          2. 12.2.4.2 Character reference in data state
          3. 12.2.4.3 RCDATA state
          4. 12.2.4.4 Character reference in RCDATA state
          5. 12.2.4.5 RAWTEXT state
          6. 12.2.4.6 Script data state
          7. 12.2.4.7 PLAINTEXT state
          8. 12.2.4.8 Tag open state
          9. 12.2.4.9 End tag open state
          10. 12.2.4.10 Tag name state
          11. 12.2.4.11 RCDATA less-than sign state
          12. 12.2.4.12 RCDATA end tag open state
          13. 12.2.4.13 RCDATA end tag name state
          14. 12.2.4.14 RAWTEXT less-than sign state
          15. 12.2.4.15 RAWTEXT end tag open state
          16. 12.2.4.16 RAWTEXT end tag name state
          17. 12.2.4.17 Script data less-than sign state
          18. 12.2.4.18 Script data end tag open state
          19. 12.2.4.19 Script data end tag name state
          20. 12.2.4.20 Script data escape start state
          21. 12.2.4.21 Script data escape start dash state
          22. 12.2.4.22 Script data escaped state
          23. 12.2.4.23 Script data escaped dash state
          24. 12.2.4.24 Script data escaped dash dash state
          25. 12.2.4.25 Script data escaped less-than sign state
          26. 12.2.4.26 Script data escaped end tag open state
          27. 12.2.4.27 Script data escaped end tag name state
          28. 12.2.4.28 Script data double escape start state
          29. 12.2.4.29 Script data double escaped state
          30. 12.2.4.30 Script data double escaped dash state
          31. 12.2.4.31 Script data double escaped dash dash state
          32. 12.2.4.32 Script data double escaped less-than sign state
          33. 12.2.4.33 Script data double escape end state
          34. 12.2.4.34 Before attribute name state
          35. 12.2.4.35 Attribute name state
          36. 12.2.4.36 After attribute name state
          37. 12.2.4.37 Before attribute value state
          38. 12.2.4.38 Attribute value (double-quoted) state
          39. 12.2.4.39 Attribute value (single-quoted) state
          40. 12.2.4.40 Attribute value (unquoted) state
          41. 12.2.4.41 Character reference in attribute value state
          42. 12.2.4.42 After attribute value (quoted) state
          43. 12.2.4.43 Self-closing start tag state
          44. 12.2.4.44 Bogus comment state
          45. 12.2.4.45 Markup declaration open state
          46. 12.2.4.46 Comment start state
          47. 12.2.4.47 Comment start dash state
          48. 12.2.4.48 Comment state
          49. 12.2.4.49 Comment end dash state
          50. 12.2.4.50 Comment end state
          51. 12.2.4.51 Comment end bang state
          52. 12.2.4.52 DOCTYPE state
          53. 12.2.4.53 Before DOCTYPE name state
          54. 12.2.4.54 DOCTYPE name state
          55. 12.2.4.55 After DOCTYPE name state
          56. 12.2.4.56 After DOCTYPE public keyword state
          57. 12.2.4.57 Before DOCTYPE public identifier state
          58. 12.2.4.58 DOCTYPE public identifier (double-quoted) state
          59. 12.2.4.59 DOCTYPE public identifier (single-quoted) state
          60. 12.2.4.60 After DOCTYPE public identifier state
          61. 12.2.4.61 Between DOCTYPE public and system identifiers state
          62. 12.2.4.62 After DOCTYPE system keyword state
          63. 12.2.4.63 Before DOCTYPE system identifier state
          64. 12.2.4.64 DOCTYPE system identifier (double-quoted) state
          65. 12.2.4.65 DOCTYPE system identifier (single-quoted) state
          66. 12.2.4.66 After DOCTYPE system identifier state
          67. 12.2.4.67 Bogus DOCTYPE state
          68. 12.2.4.68 CDATA section state
          69. 12.2.4.69 Tokenizing character references
        5. 12.2.5 Tree construction
          1. 12.2.5.1 Creating and inserting nodes
          2. 12.2.5.2 Parsing elements that contain only text
          3. 12.2.5.3 Closing elements that have implied end tags
          4. 12.2.5.4 The rules for parsing tokens in HTML content
            1. 12.2.5.4.1 The "initial" insertion mode
            2. 12.2.5.4.2 The "before html" insertion mode
            3. 12.2.5.4.3 The "before head" insertion mode
            4. 12.2.5.4.4 The "in head" insertion mode
            5. 12.2.5.4.5 The "in head noscript" insertion mode
            6. 12.2.5.4.6 The "after head" insertion mode
            7. 12.2.5.4.7 The "in body" insertion mode
            8. 12.2.5.4.8 The "text" insertion mode
            9. 12.2.5.4.9 The "in table" insertion mode
            10. 12.2.5.4.10 The "in table text" insertion mode
            11. 12.2.5.4.11 The "in caption" insertion mode
            12. 12.2.5.4.12 The "in column group" insertion mode
            13. 12.2.5.4.13 The "in table body" insertion mode
            14. 12.2.5.4.14 The "in row" insertion mode
            15. 12.2.5.4.15 The "in cell" insertion mode
            16. 12.2.5.4.16 The "in select" insertion mode
            17. 12.2.5.4.17 The "in select in table" insertion mode
            18. 12.2.5.4.18 The "in template" insertion mode
            19. 12.2.5.4.19 The "after body" insertion mode
            20. 12.2.5.4.20 The "in frameset" insertion mode
            21. 12.2.5.4.21 The "after frameset" insertion mode
            22. 12.2.5.4.22 The "after after body" insertion mode
            23. 12.2.5.4.23 The "after after frameset" insertion mode
          5. 12.2.5.5 The rules for parsing tokens in foreign content
        6. 12.2.6 The end
        7. 12.2.7 Coercing an HTML DOM into an infoset
        8. 12.2.8 An introduction to error handling and strange cases in the parser
          1. 12.2.8.1 Misnested tags: <b><i></b></i>
          2. 12.2.8.2 Misnested tags: <b><p></b></p>
          3. 12.2.8.3 Unexpected markup in tables
          4. 12.2.8.4 Scripts that modify the page as it is being parsed
          5. 12.2.8.5 The execution of scripts that are moving across multiple documents
          6. 12.2.8.6 Unclosed formatting elements
      3. 12.3 Serializing HTML fragments
      4. 12.4 Parsing HTML fragments
      5. 12.5 Named character references
    20. 13 The XHTML syntax
      1. 13.1 Writing XHTML documents
      2. 13.2 Parsing XHTML documents
      3. 13.3 Serializing XHTML fragments
      4. 13.4 Parsing XHTML fragments
    21. 14 Rendering
      1. 14.1 Introduction
      2. 14.2 The CSS user agent style sheet and presentational hints
      3. 14.3 Non-replaced elements
        1. 14.3.1 Hidden elements
        2. 14.3.2 The page
        3. 14.3.3 Flow content
        4. 14.3.4 Phrasing content
        5. 14.3.5 Bidirectional text
        6. 14.3.6 Quotes
        7. 14.3.7 Sections and headings
        8. 14.3.8 Lists
        9. 14.3.9 Tables
        10. 14.3.10 Margin collapsing quirks
        11. 14.3.11 Form controls
        12. 14.3.12 The hr element
        13. 14.3.13 The fieldset and legend elements
      4. 14.4 Replaced elements
        1. 14.4.1 Embedded content
        2. 14.4.2 Images
        3. 14.4.3 Attributes for embedded content and images
        4. 14.4.4 Image maps
      5. 14.5 Bindings
        1. 14.5.1 Introduction
        2. 14.5.2 The button element
        3. 14.5.3 The details element
        4. 14.5.4 The input element as a text entry widget
        5. 14.5.5 The input element as domain-specific widgets
        6. 14.5.6 The input element as a range control
        7. 14.5.7 The input element as a colour well
        8. 14.5.8 The input element as a checkbox and radio button widgets
        9. 14.5.9 The input element as a file upload control
        10. 14.5.10 The input element as a button
        11. 14.5.11 The marquee element
        12. 14.5.12 The meter element
        13. 14.5.13 The progress element
        14. 14.5.14 The select element
        15. 14.5.15 The textarea element
        16. 14.5.16 The keygen element
      6. 14.6 Frames and framesets
      7. 14.7 Interactive media
        1. 14.7.1 Links, forms, and navigation
        2. 14.7.2 The title attribute
        3. 14.7.3 Editing hosts
        4. 14.7.4 Text rendered in native user interfaces
      8. 14.8 Print media
      9. 14.9 Unstyled XML documents
    22. 15 Obsolete features
      1. 15.1 Obsolete but conforming features
        1. 15.1.1 Warnings for obsolete but conforming features
      2. 15.2 Non-conforming features
      3. 15.3 Requirements for implementations
        1. 15.3.1 The applet element
        2. 15.3.2 The marquee element
        3. 15.3.3 Frames
        4. 15.3.4 Other elements, attributes and APIs
    23. 16 IANA considerations
      1. 16.1 text/html
      2. 16.2 multipart/x-mixed-replace
      3. 16.3 application/xhtml+xml
      4. 16.4 application/x-www-form-urlencoded
      5. 16.5 text/cache-manifest
      6. 16.6 text/ping
      7. 16.7 application/microdata+json
      8. 16.8 Ping-From
      9. 16.9 Ping-To
      10. 16.10 web+ scheme prefix
    24. Index
      1. Elements
      2. Element content categories
      3. Attributes
      4. Element Interfaces
      5. All Interfaces
      6. Events
      7. MIME Types
    25. References
    26. Acknowledgments
    - -
    + content that doesn't have a DOM
  5. 7.6.9 Navigating to a fragment identifier
  6. 7.6.10 History traversal
    1. 7.6.10.1 The PopStateEvent interface
    2. 7.6.10.2 The HashChangeEvent interface
    3. 7.6.10.3 The PageTransitionEvent interface
  7. 7.6.11 Unloading documents
    1. 7.6.11.1 The BeforeUnloadEvent interface
  8. 7.6.12 Aborting a document load
  • 7.7 Offline Web applications
    1. 7.7.1 Introduction
      1. 7.7.1.1 Supporting offline caching for legacy applications
      2. 7.7.1.2 Event summary
    2. 7.7.2 Application caches
    3. 7.7.3 The cache manifest syntax
      1. 7.7.3.1 Some sample manifests
      2. 7.7.3.2 Writing cache manifests
      3. 7.7.3.3 Parsing cache manifests
    4. 7.7.4 Downloading or updating an application cache
    5. 7.7.5 The application cache selection algorithm
    6. 7.7.6 Changes to the networking model
    7. 7.7.7 Expiring application caches
    8. 7.7.8 Disk space
    9. 7.7.9 Application cache API
    10. 7.7.10 Browser state
  • 8 Web application APIs
    1. 8.1 Scripting
      1. 8.1.1 Introduction
      2. 8.1.2 Enabling and disabling scripting
      3. 8.1.3 Processing model
        1. 8.1.3.1 Definitions
        2. 8.1.3.2 Script settings for browsing contexts
        3. 8.1.3.3 Calling scripts
        4. 8.1.3.4 Creating scripts
        5. 8.1.3.5 Killing scripts
        6. 8.1.3.6 Runtime script errors
          1. 8.1.3.6.1 Runtime script errors in documents
          2. 8.1.3.6.2 The ErrorEvent interface
      4. 8.1.4 Event loops
        1. 8.1.4.1 Definitions
        2. 8.1.4.2 Processing model
        3. 8.1.4.3 Generic task sources
      5. 8.1.5 Events
        1. 8.1.5.1 Event handlers
        2. 8.1.5.2 Event handlers on elements, Document objects, and Window objects
          1. 8.1.5.2.1 IDL definitions
        3. 8.1.5.3 Event firing
        4. 8.1.5.4 Events and the Window object
    2. 8.2 Base64 utility methods
    3. 8.3 Dynamic markup insertion
      1. 8.3.1 Opening the input stream
      2. 8.3.2 Closing the input stream
      3. 8.3.3 document.write()
      4. 8.3.4 document.writeln()
    4. 8.4 Timers
    5. 8.5 User prompts
      1. 8.5.1 Simple dialogs
      2. 8.5.2 Printing
      3. 8.5.3 Dialogs implemented using separate documents
    6. 8.6 System state and capabilities
      1. 8.6.1 The Navigator object
        1. 8.6.1.1 Client identification
        2. 8.6.1.2 Language preferences
        3. 8.6.1.3 Custom scheme and content handlers
          1. 8.6.1.3.1 Security and privacy
          2. 8.6.1.3.2 Sample user interface
        4. 8.6.1.4 Manually releasing the storage mutex
        5. 8.6.1.5 Plugins
      2. 8.6.2 The External interface
    7. 8.7 Images
  • 9 Communication
    1. 9.1 The MessageEvent interfaces
    2. 9.2 Server-sent events
      1. 9.2.1 Introduction
      2. 9.2.2 The EventSource interface
      3. 9.2.3 Processing model
      4. 9.2.4 Parsing an event stream
      5. 9.2.5 Interpreting an event stream
      6. 9.2.6 Authoring notes
      7. 9.2.7 Connectionless push and other features
      8. 9.2.8 Garbage collection
      9. 9.2.9 Implementation advice
      10. 9.2.10 IANA considerations
        1. 9.2.10.1 text/event-stream
        2. 9.2.10.2 Last-Event-ID
    3. 9.3 Web sockets
      1. 9.3.1 Introduction
      2. 9.3.2 The WebSocket interface
      3. 9.3.3 Feedback from the protocol
      4. 9.3.4 Ping and Pong frames
      5. 9.3.5 Parsing WebSocket URLs
      6. 9.3.6 The CloseEvent interfaces
      7. 9.3.7 Garbage collection
    4. 9.4 Cross-document messaging
      1. 9.4.1 Introduction
      2. 9.4.2 Security
        1. 9.4.2.1 Authors
        2. 9.4.2.2 User agents
      3. 9.4.3 Posting messages
    5. 9.5 Channel messaging
      1. 9.5.1 Introduction
        1. 9.5.1.1 Examples
        2. 9.5.1.2 Ports as the basis of an object-capability model on the Web
        3. 9.5.1.3 Ports as the basis of abstracting out service implementations
      2. 9.5.2 Message channels
      3. 9.5.3 Message ports
      4. 9.5.4 Broadcasting to many ports
      5. 9.5.5 Ports and garbage collection
    6. 9.6 Broadcasting to other browsing contexts
  • 10 Web workers
    1. 10.1 Introduction
      1. 10.1.1 Scope
      2. 10.1.2 Examples
        1. 10.1.2.1 A background number-crunching worker
        2. 10.1.2.2 Worker used for background I/O
        3. 10.1.2.3 Shared workers introduction
        4. 10.1.2.4 Shared state using a shared worker
        5. 10.1.2.5 Delegation
      3. 10.1.3 Tutorials
        1. 10.1.3.1 Creating a dedicated worker
        2. 10.1.3.2 Communicating with a dedicated worker
        3. 10.1.3.3 Shared workers
    2. 10.2 Infrastructure
      1. 10.2.1 The global scope
        1. 10.2.1.1 The WorkerGlobalScope common interface
        2. 10.2.1.2 Dedicated workers and the DedicatedWorkerGlobalScope interface
        3. 10.2.1.3 Shared workers and the SharedWorkerGlobalScope interface
      2. 10.2.2 The event loop
      3. 10.2.3 The worker's lifetime
      4. 10.2.4 Processing model
      5. 10.2.5 Runtime script errors
      6. 10.2.6 Creating workers
        1. 10.2.6.1 The AbstractWorker abstract interface
        2. 10.2.6.2 Script settings for workers
        3. 10.2.6.3 Dedicated workers and the Worker interface
        4. 10.2.6.4 Shared workers and the SharedWorker interface
    3. 10.3 APIs available to workers
      1. 10.3.1 Importing scripts and libraries
      2. 10.3.2 The WorkerNavigator object
      3. 10.3.3 Worker locations
  • 11 Web storage
    1. 11.1 Introduction
    2. 11.2 The API
      1. 11.2.1 The Storage interface
      2. 11.2.2 The sessionStorage attribute
      3. 11.2.3 The localStorage attribute
      4. 11.2.4 The storage event
        1. 11.2.4.1 The StorageEvent interface
      5. 11.2.5 Threads
    3. 11.3 Disk space
    4. 11.4 Privacy
      1. 11.4.1 User tracking
      2. 11.4.2 Sensitivity of data
    5. 11.5 Security
      1. 11.5.1 DNS spoofing attacks
      2. 11.5.2 Cross-directory attacks
      3. 11.5.3 Implementation risks
  • 12 The HTML syntax
    1. 12.1 Writing HTML documents
      1. 12.1.1 The DOCTYPE
      2. 12.1.2 Elements
        1. 12.1.2.1 Start tags
        2. 12.1.2.2 End tags
        3. 12.1.2.3 Attributes
        4. 12.1.2.4 Optional tags
        5. 12.1.2.5 Restrictions on content models
        6. 12.1.2.6 Restrictions on the contents of raw text and escapable raw text elements
      3. 12.1.3 Text
        1. 12.1.3.1 Newlines
      4. 12.1.4 Character references
      5. 12.1.5 CDATA sections
      6. 12.1.6 Comments
    2. 12.2 Parsing HTML documents
      1. 12.2.1 Overview of the parsing model
      2. 12.2.2 The input byte stream
        1. 12.2.2.1 Parsing with a known character encoding
        2. 12.2.2.2 Determining the character encoding
        3. 12.2.2.3 Character encodings
        4. 12.2.2.4 Changing the encoding while parsing
        5. 12.2.2.5 Preprocessing the input stream
      3. 12.2.3 Parse state
        1. 12.2.3.1 The insertion mode
        2. 12.2.3.2 The stack of open elements
        3. 12.2.3.3 The list of active formatting elements
        4. 12.2.3.4 The element pointers
        5. 12.2.3.5 Other parsing state flags
      4. 12.2.4 Tokenization
        1. 12.2.4.1 Data state
        2. 12.2.4.2 Character reference in data state
        3. 12.2.4.3 RCDATA state
        4. 12.2.4.4 Character reference in RCDATA state
        5. 12.2.4.5 RAWTEXT state
        6. 12.2.4.6 Script data state
        7. 12.2.4.7 PLAINTEXT state
        8. 12.2.4.8 Tag open state
        9. 12.2.4.9 End tag open state
        10. 12.2.4.10 Tag name state
        11. 12.2.4.11 RCDATA less-than sign state
        12. 12.2.4.12 RCDATA end tag open state
        13. 12.2.4.13 RCDATA end tag name state
        14. 12.2.4.14 RAWTEXT less-than sign state
        15. 12.2.4.15 RAWTEXT end tag open state
        16. 12.2.4.16 RAWTEXT end tag name state
        17. 12.2.4.17 Script data less-than sign state
        18. 12.2.4.18 Script data end tag open state
        19. 12.2.4.19 Script data end tag name state
        20. 12.2.4.20 Script data escape start state
        21. 12.2.4.21 Script data escape start dash state
        22. 12.2.4.22 Script data escaped state
        23. 12.2.4.23 Script data escaped dash state
        24. 12.2.4.24 Script data escaped dash dash state
        25. 12.2.4.25 Script data escaped less-than sign state
        26. 12.2.4.26 Script data escaped end tag open state
        27. 12.2.4.27 Script data escaped end tag name state
        28. 12.2.4.28 Script data double escape start state
        29. 12.2.4.29 Script data double escaped state
        30. 12.2.4.30 Script data double escaped dash state
        31. 12.2.4.31 Script data double escaped dash dash state
        32. 12.2.4.32 Script data double escaped less-than sign state
        33. 12.2.4.33 Script data double escape end state
        34. 12.2.4.34 Before attribute name state
        35. 12.2.4.35 Attribute name state
        36. 12.2.4.36 After attribute name state
        37. 12.2.4.37 Before attribute value state
        38. 12.2.4.38 Attribute value (double-quoted) state
        39. 12.2.4.39 Attribute value (single-quoted) state
        40. 12.2.4.40 Attribute value (unquoted) state
        41. 12.2.4.41 Character reference in attribute value state
        42. 12.2.4.42 After attribute value (quoted) state
        43. 12.2.4.43 Self-closing start tag state
        44. 12.2.4.44 Bogus comment state
        45. 12.2.4.45 Markup declaration open state
        46. 12.2.4.46 Comment start state
        47. 12.2.4.47 Comment start dash state
        48. 12.2.4.48 Comment state
        49. 12.2.4.49 Comment end dash state
        50. 12.2.4.50 Comment end state
        51. 12.2.4.51 Comment end bang state
        52. 12.2.4.52 DOCTYPE state
        53. 12.2.4.53 Before DOCTYPE name state
        54. 12.2.4.54 DOCTYPE name state
        55. 12.2.4.55 After DOCTYPE name state
        56. 12.2.4.56 After DOCTYPE public keyword state
        57. 12.2.4.57 Before DOCTYPE public identifier state
        58. 12.2.4.58 DOCTYPE public identifier (double-quoted) state
        59. 12.2.4.59 DOCTYPE public identifier (single-quoted) state
        60. 12.2.4.60 After DOCTYPE public identifier state
        61. 12.2.4.61 Between DOCTYPE public and system identifiers state
        62. 12.2.4.62 After DOCTYPE system keyword state
        63. 12.2.4.63 Before DOCTYPE system identifier state
        64. 12.2.4.64 DOCTYPE system identifier (double-quoted) state
        65. 12.2.4.65 DOCTYPE system identifier (single-quoted) state
        66. 12.2.4.66 After DOCTYPE system identifier state
        67. 12.2.4.67 Bogus DOCTYPE state
        68. 12.2.4.68 CDATA section state
        69. 12.2.4.69 Tokenizing character references
      5. 12.2.5 Tree construction
        1. 12.2.5.1 Creating and inserting nodes
        2. 12.2.5.2 Parsing elements that contain only text
        3. 12.2.5.3 Closing elements that have implied end tags
        4. 12.2.5.4 The rules for parsing tokens in HTML content
          1. 12.2.5.4.1 The "initial" insertion mode
          2. 12.2.5.4.2 The "before html" insertion mode
          3. 12.2.5.4.3 The "before head" insertion mode
          4. 12.2.5.4.4 The "in head" insertion mode
          5. 12.2.5.4.5 The "in head noscript" insertion mode
          6. 12.2.5.4.6 The "after head" insertion mode
          7. 12.2.5.4.7 The "in body" insertion mode
          8. 12.2.5.4.8 The "text" insertion mode
          9. 12.2.5.4.9 The "in table" insertion mode
          10. 12.2.5.4.10 The "in table text" insertion mode
          11. 12.2.5.4.11 The "in caption" insertion mode
          12. 12.2.5.4.12 The "in column group" insertion mode
          13. 12.2.5.4.13 The "in table body" insertion mode
          14. 12.2.5.4.14 The "in row" insertion mode
          15. 12.2.5.4.15 The "in cell" insertion mode
          16. 12.2.5.4.16 The "in select" insertion mode
          17. 12.2.5.4.17 The "in select in table" insertion mode
          18. 12.2.5.4.18 The "in template" insertion mode
          19. 12.2.5.4.19 The "after body" insertion mode
          20. 12.2.5.4.20 The "in frameset" insertion mode
          21. 12.2.5.4.21 The "after frameset" insertion mode
          22. 12.2.5.4.22 The "after after body" insertion mode
          23. 12.2.5.4.23 The "after after frameset" insertion mode
        5. 12.2.5.5 The rules for parsing tokens in foreign content
      6. 12.2.6 The end
      7. 12.2.7 Coercing an HTML DOM into an infoset
      8. 12.2.8 An introduction to error handling and strange cases in the parser
        1. 12.2.8.1 Misnested tags: <b><i></b></i>
        2. 12.2.8.2 Misnested tags: <b><p></b></p>
        3. 12.2.8.3 Unexpected markup in tables
        4. 12.2.8.4 Scripts that modify the page as it is being parsed
        5. 12.2.8.5 The execution of scripts that are moving across multiple documents
        6. 12.2.8.6 Unclosed formatting elements
    3. 12.3 Serializing HTML fragments
    4. 12.4 Parsing HTML fragments
    5. 12.5 Named character references
  • 13 The XHTML syntax
    1. 13.1 Writing XHTML documents
    2. 13.2 Parsing XHTML documents
    3. 13.3 Serializing XHTML fragments
    4. 13.4 Parsing XHTML fragments
  • 14 Rendering
    1. 14.1 Introduction
    2. 14.2 The CSS user agent style sheet and presentational hints
    3. 14.3 Non-replaced elements
      1. 14.3.1 Hidden elements
      2. 14.3.2 The page
      3. 14.3.3 Flow content
      4. 14.3.4 Phrasing content
      5. 14.3.5 Bidirectional text
      6. 14.3.6 Quotes
      7. 14.3.7 Sections and headings
      8. 14.3.8 Lists
      9. 14.3.9 Tables
      10. 14.3.10 Margin collapsing quirks
      11. 14.3.11 Form controls
      12. 14.3.12 The hr element
      13. 14.3.13 The fieldset and legend elements
    4. 14.4 Replaced elements
      1. 14.4.1 Embedded content
      2. 14.4.2 Images
      3. 14.4.3 Attributes for embedded content and images
      4. 14.4.4 Image maps
    5. 14.5 Bindings
      1. 14.5.1 Introduction
      2. 14.5.2 The button element
      3. 14.5.3 The details element
      4. 14.5.4 The input element as a text entry widget
      5. 14.5.5 The input element as domain-specific widgets
      6. 14.5.6 The input element as a range control
      7. 14.5.7 The input element as a colour well
      8. 14.5.8 The input element as a checkbox and radio button widgets
      9. 14.5.9 The input element as a file upload control
      10. 14.5.10 The input element as a button
      11. 14.5.11 The marquee element
      12. 14.5.12 The meter element
      13. 14.5.13 The progress element
      14. 14.5.14 The select element
      15. 14.5.15 The textarea element
      16. 14.5.16 The keygen element
    6. 14.6 Frames and framesets
    7. 14.7 Interactive media
      1. 14.7.1 Links, forms, and navigation
      2. 14.7.2 The title attribute
      3. 14.7.3 Editing hosts
      4. 14.7.4 Text rendered in native user interfaces
    8. 14.8 Print media
    9. 14.9 Unstyled XML documents
  • 15 Obsolete features
    1. 15.1 Obsolete but conforming features
      1. 15.1.1 Warnings for obsolete but conforming features
    2. 15.2 Non-conforming features
    3. 15.3 Requirements for implementations
      1. 15.3.1 The applet element
      2. 15.3.2 The marquee element
      3. 15.3.3 Frames
      4. 15.3.4 Other elements, attributes and APIs
  • 16 IANA considerations
    1. 16.1 text/html
    2. 16.2 multipart/x-mixed-replace
    3. 16.3 application/xhtml+xml
    4. 16.4 application/x-www-form-urlencoded
    5. 16.5 text/cache-manifest
    6. 16.6 text/ping
    7. 16.7 application/microdata+json
    8. 16.8 Ping-From
    9. 16.9 Ping-To
    10. 16.10 web+ scheme prefix
  • Index
    1. Elements
    2. Element content categories
    3. Attributes
    4. Element Interfaces
    5. All Interfaces
    6. Events
    7. MIME Types
  • References
  • Acknowledgements @@ -2483,13 +2481,12 @@

    2.2.2 Dependencies

    WebVTT
    -

    Implementations may support WebVTT as a text track format for subtitles, captions, - chapter titles, metadata, etc, for media resources. [WEBVTT]

    +

    Implementations may support WebVTT as a text track format for subtitles, captions, chapter + titles, metadata, etc, for media resources. [WEBVTT]

    The following terms, used in this specification, are defined in the WebVTT specification:

    -
    • WebVTT interface -
    • WebVTT file +
      • WebVTT file
      • WebVTT file using cue text
      • WebVTT file using chapter title text
      • WebVTT file using only nested cues @@ -2497,6 +2494,7 @@

        2.2.2 Dependencies

      • The rules for updating the display of WebVTT text tracks
      • The rules for interpreting WebVTT cue text
      • The WebVTT text track cue writing direction +
      • VTTCue interface
      The WebSocket protocol
      @@ -15646,11436 +15644,11484 @@

      4.5.29 Usage summary

      + -

      4.6 Edits

      +

      4.6.1 Introduction

      -

      The ins and del elements represent edits to the document.

      +

      Links are a conceptual construct, created by a, area, and + link elements, that represent a connection between + two resources, one of which is the current Document. There are two kinds of links in + HTML:

      +
      Links to external resources

      These are links to resources that are to be used to augment the current document, + generally automatically processed by the user agent.

      Hyperlinks

      These are links to other resources that are generally exposed to the user by the user + agent so that the user can cause the user agent to navigate to those resources, e.g. + to visit them in a browser or download them.

      -

      4.6.1 The ins element

      +

      For link elements with an href attribute and a + rel attribute, links must be created for the keywords of the + rel attribute, as defined for those keywords in the link types section.

      -
      Categories:
      Flow content.
      Phrasing content.
      Palpable content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      cite — Link to the source of the quotation or more information about the edit
      datetime — Date and (optionally) time of the change
      DOM interface:
      Uses the HTMLModElement interface.
      +

      Similarly, for a and area elements with an href attribute and a rel attribute, links must be created for the keywords of the + rel attribute as defined for those keywords in the link types section. Unlike link elements, however, + a and area element with an href + attribute that either do not have a rel attribute, or + whose rel attribute has no keywords that are defined as + specifying hyperlinks, must also create a hyperlink. + This implied hyperlink has no special meaning (it has no link type) + beyond linking the element's document to the resource given by the element's href attribute.

      -

      The ins element represents an addition to the document.

      +

      A hyperlink can have one or more hyperlink + annotations that modify the processing semantics of that hyperlink.

      -
      -

      The following represents the addition of a single paragraph:

      + - 
      <aside>
- <ins>
-  <p> I like fruit. </p>
- </ins>
-</aside>
      +

      The href attribute on a and + area elements must have a value that is a valid URL potentially surrounded by + spaces.

      -

      As does the following, because everything in the aside element here counts as - phrasing content and therefore there is just one paragraph:

      +

      The href attribute on a and + area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

      - 
      <aside>
- <ins>
-  Apples are <em>tasty</em>.
- </ins>
- <ins>
-  So are pears.
- </ins>
-</aside>
      +

      The target attribute, if present, must be + a valid browsing context name or keyword. It gives the name of the browsing + context that will be used. User agents use this name when + following hyperlinks.

      -
      +

      When an a or area element's activation behavior is + invoked, the user agent may allow the user to indicate a preference regarding whether the + hyperlink is to be used for navigation or whether the resource it + specifies is to be downloaded.

      -

      ins elements should not cross implied paragraph - boundaries.

      +

      In the absence of a user preference, the default should be navigation if the element has no + download attribute, and should be to download the + specified resource if it does.

      -
      +

      Whether determined by the user's preferences or via the presence or absence of the attribute, + if the decision is to use the hyperlink for navigation then the user + agent must follow the hyperlink, and if the decision is + to use the hyperlink to download a resource, the user agent must download the hyperlink. These terms are defined in subsequent sections + below.

      -

      The following example represents the addition of two paragraphs, the second of which was - inserted in two parts. The first ins element in this example thus crosses a - paragraph boundary, which is considered poor form.

      +

      The download attribute, if present, + indicates that the author intends the hyperlink to be used for downloading a resource. The + attribute may have a value; the value, if any, specifies the default file name that the author + recommends for use in labeling the resource in a local file system. There are no restrictions on + allowed values, but authors are cautioned that most file systems have limitations with regard to + what punctuation is supported in file names, and user agents are likely to adjust file names + accordingly.

      - 
      <aside>
- <!-- don't do this -->
- <ins datetime="2005-03-16 00:00Z">
-  <p> I like fruit. </p>
-  Apples are <em>tasty</em>.
- </ins>
- <ins datetime="2007-12-19 00:00Z">
-  So are pears.
- </ins>
-</aside>
      -

      Here is a better way of marking this up. It uses more elements, but none of the elements cross - implied paragraph boundaries.

      +

      The ping attribute, if present, + gives the URLs of the resources that are interested in being notified if the user follows the + hyperlink. The value must be a set of space-separated tokens, each of which must be a + valid non-empty URL. The value is used by the user agent for + hyperlink auditing.

      - 
      <aside>
- <ins datetime="2005-03-16 00:00Z">
-  <p> I like fruit. </p>
- </ins>
- <ins datetime="2005-03-16 00:00Z">
-  Apples are <em>tasty</em>.
- </ins>
- <ins datetime="2007-12-19 00:00Z">
-  So are pears.
- </ins>
-</aside>
      +

      The rel attribute on a and + area elements controls what kinds of links the elements create. The attribute's value + must be a set of space-separated tokens. The allowed keywords + and their meanings are defined below.

      - +

      The rel attribute has no default value. If the + attribute is omitted or if none of the values in the attribute are recognised by the user agent, + then the document has no particular relationship with the destination resource other than there + being a hyperlink between the two.

      -
      +

      The hreflang attribute on + a and area elements that create hyperlinks, if present, gives the language of the linked resource. It is + purely advisory. The value must be a valid BCP 47 language tag. [BCP47] + User agents must not consider this attribute authoritative — upon + fetching the resource, user agents must use only language information associated with the resource + to determine its language, not metadata included in the link to the resource.

      +

      The type attribute, if present, gives the + MIME type of the linked resource. It is purely advisory. The value must be a + valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the + resource, user agents must not use metadata included in the link to the resource to determine its + type.

      -

      4.6.2 The del element

      -
      Categories:
      Flow content.
      Phrasing content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      cite — Link to the source of the quotation or more information about the edit
      datetime — Date and (optionally) time of the change
      DOM interface:
      Uses the HTMLModElement interface.
      + -

      The del element represents a removal from the document.

      + -

      del elements should not cross implied paragraph - boundaries.

      +

      When a user follows a hyperlink created by an element + subject, the user agent must run the following steps:

      -
      +

      1. Let replace be false.

      2. Let source be the browsing context that contains the + Document object with which subject in question is + associated.

      3. -

        The following shows a "to do" list where items that have been done are crossed-off with the - date and time of their completion.

        +

        If the user indicated a specific browsing context when following the hyperlink, + or if the user agent is configured to follow hyperlinks by navigating a particular browsing + context, then let target be that browsing context.

        - 
        <h1>To Do</h1>
-<ul>
- <li>Empty the dishwasher</li>
- <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
- <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
- <li>Buy a printer</li>
-</ul>
        +

        Otherwise, if subject is an a or area element + that has a target attribute, then let target be the browsing context that is chosen by applying the + rules for choosing a browsing context given a browsing context name, using the value of + the target attribute as the browsing context name. If + these rules result in the creation of a new browsing context, set replace to true.

        -
      +

      Otherwise, if the hyperlink is a sidebar + hyperlink, the user agent implements a feature that can be considered a secondary + browsing context, and the user agent intends to use this feature in this instance, let + target be such a secondary browsing context.

      +

      Otherwise, if target is an a or area element + with no target attribute, but the + Document contains a base element with a target attribute, then let target be the + browsing context that is chosen by applying the rules for choosing a browsing + context given a browsing context name, using the value of the target attribute of the first such base element as + the browsing context name. If these rules result in the creation of a new browsing + context, set replace to true.

      +

      Otherwise, let target be the browsing context that subject itself is in.

      -

      4.6.3 Attributes common to ins and del elements

      +

    • Resolve the URL given by the href attribute of that element, relative to that + element.

    • -

      The cite attribute may be used to specify the - address of a document that explains the change. When that document is long, for instance the - minutes of a meeting, authors are encouraged to include a fragment identifier pointing to the - specific part of that document that discusses the change.

      +

      If that is successful, let URL be the resulting absolute + URL.

      -

      If the cite attribute is present, it must be a valid - URL potentially surrounded by spaces that explains the change. To obtain - the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such - citation links, but they are primarily intended for private use (e.g. by server-side scripts - collecting statistics about a site's edits), not for readers.

      +

      Otherwise, if resolving the URL failed, the + user agent may report the error to the user in a user-agent-specific manner, may queue a + task to navigate the target + browsing context to an error page to report the error, or may ignore the error and + do nothing. In any case, the user agent must then abort these steps.

      +

    • In the case of server-side image maps, append the hyperlink + suffix to URL.

    • -

      The datetime attribute may be used to specify - the time and date of the change.

      +

      Queue a task to navigate the target browsing context to URL. If replace is true, the navigation must be performed with replacement + enabled. The source browsing context must be source.

      -

      If present, the datetime attribute's value must be a - valid date string with optional time.

      + + +

      The task source for the tasks mentioned above is the DOM manipulation task + source.

      -

      User agents must parse the datetime attribute according - to the parse a date or time string algorithm. If that doesn't return a date or a global date and time, - then the modification has no associated timestamp (the value is non-conforming; it is not a - valid date string with optional time). Otherwise, the modification is marked as - having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated - time-zone offset information to determine which time zone to present the given datetime in.

      - -

      This value may be shown to the user, but it is primarily intended for - private use.

      -

      The ins and del elements must implement the - HTMLModElement interface:

      +

      4.6.4 Downloading resources

      - 
      interface HTMLModElement : HTMLElement {
-           attribute DOMString cite;
-           attribute DOMString dateTime;
-};
      +

      In some cases, resources are intended for later use rather than immediate viewing. To indicate + that a resource is intended to be downloaded for use later, rather than immediately used, the + download attribute can be specified on the + a or area element that creates the hyperlink to that + resource.

      - +

      The attribute can furthermore be given a value, to specify the file name that user agents are + to use when storing the resource in a file system. This value can be overridden by the Content-Disposition HTTP header's filename parameters. [RFC6266]

      -

      The cite IDL attribute must reflect - the element's cite content attribute. The dateTime IDL attribute must reflect the - element's datetime content attribute.

      +

      In cross-origin situations, the download attribute + has to be combined with the Content-Disposition HTTP + header, specifically with the attachment disposition type, to avoid the user + being warned of possibly nefarious activity. (This is to protect users from being made to download + sensitive personal or confidential information without their full understanding.)

      +
      +

      When a user downloads a hyperlink created by an + element, the user agent must run the following steps:

      -

      4.6.4 Edits and paragraphs

      +

      1. Resolve the URL given by the href attribute of that element, relative to that + element.

      2. If resolving the URL fails, the user agent + may report the error to the user in a user-agent-specific manner, may + navigate to an error page to report the error, or may + ignore the error and do nothing. In either case, the user agent must abort these steps.

        -

        This section is non-normative.

        +

      3. Otherwise, let URL be the resulting absolute + URL.

      4. In the case of server-side image maps, append the hyperlink + suffix to URL.

      5. Return to whatever algorithm invoked these steps and continue + these steps asynchronously.

      6. Fetch URL and handle the resulting resource + as a download.

      -

      Since the ins and del elements do not affect paragraphing, it is possible, in some cases where paragraphs are implied (without explicit p elements), for an - ins or del element to span both an entire paragraph or other - non-phrasing content elements and part of another paragraph. For example:

      +

      When a user agent is to handle a resource obtained from a fetch algorithm as + a download, it should provide the user with a way to save the resource for later use, if a + resource is successfully obtained; or otherwise should report any problems downloading the file to + the user.

      - 
      <section>
- <ins>
-  <p>
-   This is a paragraph that was inserted.
-  </p>
-  This is another paragraph whose first sentence was inserted
-  at the same time as the paragraph above.
- </ins>
- This is a second sentence, which was there all along.
-</section>
      +

      If the user agent needs a file name for a resource being handled as a download, it + should select one using the following algorithm.

      -

      By only wrapping some paragraphs in p elements, one can even get the end of one - paragraph, a whole second paragraph, and the start of a third paragraph to be covered by the same - ins or del element (though this is very confusing, and not considered - good practice):

      +

      This algorithm is intended to mitigate security dangers involved in downloading + files from untrusted sites, and user agents are strongly urged to follow it.

      - 
      <section>
- This is the first paragraph. <ins>This sentence was
- inserted.
- <p>This second paragraph was inserted.</p>
- This sentence was inserted too.</ins> This is the
- third paragraph in this example.
- <!-- (don't do this) -->
-</section>
      +

      1. Let filename be the void value.

      2. If the resource has a Content-Disposition + header, that header specifies the attachment disposition type, and the + header includes file name information, then let filename have the value + specified by the header, and jump to the step labeled sanitize below. [RFC6266]

      3. Let interface origin be the origin of the + Document in which the download or + navigate action resulting in the download was initiated, if any.

      4. Let resource origin be the origin of the URL of the + resource being downloaded, unless that URL's scheme + component is data, in which case let resource origin be + the same as the interface origin, if any.

      5. If there is no interface origin, then let trusted + operation be true. Otherwise, let trusted operation be true if resource origin is the same origin as interface + origin, and false otherwise.

      6. If trusted operation is true and the resource has a Content-Disposition header and that header includes file + name information, then let filename have the value specified by the header, + and jump to the step labeled sanitize below. [RFC6266]

      7. If the download was not initiated from a hyperlink created by an + a or area element, or if the element of the hyperlink from + which it was initiated did not have a download + attribute when the download was initiated, or if there was such an attribute but its value when + the download was initiated was the empty string, then jump to the step labeled no proposed + file name.

      8. Let proposed filename have the value of the download attribute of the element of the + hyperlink that initiated the download at the time the download was + initiated.

      9. If trusted operation is true, let filename have + the value of proposed filename, and jump to the step labeled sanitize + below.

      10. If the resource has a Content-Disposition + header and that header specifies the attachment disposition type, let filename have the value of proposed filename, and jump to the + step labeled sanitize below. [RFC6266]

      11. No proposed file name: If trusted operation is true, or if the + user indicated a preference for having the resource in question downloaded, let filename have a value derived from the URL of the resource in a + user-agent-defined manner, and jump to the step labeled sanitize below.

      12. -

        However, due to the way implied paragraphs are defined, it is - not possible to mark up the end of one paragraph and the start of the very next one using the same - ins or del element. You instead have to use one (or two) p - element(s) and two ins or del elements, as for example:

        +

        Act in a user-agent-defined manner to safeguard the user from a potentially hostile + cross-origin download. If the download is not to be aborted, then let filename be set to the user's preferred file name or to a file name selected by + the user agent, and jump to the step labeled sanitize below.

        - 
        <section>
- <p>This is the first paragraph. <del>This sentence was
- deleted.</del></p>
- <p><del>This sentence was deleted too.</del> That
- sentence needed a separate &lt;del&gt; element.</p>
-</section>
        +
        -

        Partly because of the confusion described above, authors are strongly encouraged to always mark - up all paragraphs with the p element, instead of having ins or - del elements that cross implied paragraphs - boundaries.

        +

        If the algorithm reaches this step, then a download was begun from a different origin than + the resource being downloaded, and the origin did not mark the file as suitable for + downloading, and the download was not initiated by the user. This could be because a download attribute was used to trigger the download, or + because the resource in question is not of a type that the user agent supports.

        +

        This could be dangerous, because, for instance, a hostile server could be trying to get a + user to unknowingly download private information and then re-upload it to the hostile server, + by tricking the user into thinking the data is from the hostile server.

        -

        4.6.5 Edits and lists

        +

        Thus, it is in the user's interests that the user be somehow notified that the resource in + question comes from quite a different source, and to prevent confusion, any suggested file name + from the potentially hostile interface origin should be ignored.

        -

        This section is non-normative.

        +
        -

        The content models of the ol and ul elements do not allow - ins and del elements as children. Lists always represent all their - items, including items that would otherwise have been marked as deleted.

        +

      13. Sanitize: Optionally, allow the user to influence filename. For + example, a user agent could prompt the user for a file name, potentially providing the value of + filename as determined above as a default value.

      14. -

        To indicate that an item is inserted or deleted, an ins or del - element can be wrapped around the contents of the li element. To indicate that an - item has been replaced by another, a single li element can have one or more - del elements followed by one or more ins elements.

        +

        Adjust filename to be suitable for the local file system.

        -
        +

        For example, this could involve removing characters that are not legal in + file names, or trimming leading and trailing whitespace.

        -

        In the following example, a list that started empty had items added and removed from it over - time. The bits in the example that have been emphasized show the parts that are the "current" - state of the list. The list item numbers don't take into account the edits, though.

        +

      15. If the platform conventions do not in any way use extensions to determine the types of file on the file system, + then return filename as the file name and abort these steps.

      16. Let claimed type be the type given by the resource's Content-Type metadata, if any is known. Let named + type be the type given by filename's extension, if any is known. For the purposes of this step, a + type is a mapping of a MIME type to an extension.

      17. If named type is consistent with the user's preferences (e.g. because + the value of filename was determined by prompting the user), then return filename as the file name and abort these steps.

      18. If claimed type and named type are the same type + (i.e. the type given by the resource's Content-Type metadata is + consistent with the type given by filename's extension), then return filename as the file + name and abort these steps.

      19. - 
        <h1>Stop-ship bugs</h1>
-<ol>
- <li><ins datetime="2008-02-12T15:20Z">Bug 225:
- Rain detector doesn't work in snow</ins></li>
- <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
- Water buffer overflows in April</ins></del></li>
- <li><ins datetime="2008-02-16T13:50Z">Bug 230:
- Water heater doesn't use renewable fuels</ins></li>
- <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
- Carbon dioxide emissions detected after startup</ins></del></li>
-</ol>
        +

        If the claimed type is known, then alter filename to + add an extension corresponding to claimed + type.

        - +

        Otherwise, if named type is known to be potentially dangerous (e.g. it + will be treated by the platform conventions as a native executable, shell script, HTML + application, or executable-macro-capable document) then optionally alter filename to add a known-safe extension + (e.g. ".txt").

        -
        +

        This last step would make it impossible to download executables, which might not + be desirable. As always, implementors are forced to balance security and usability in this + matter.

        -

        In the following example, a list that started with just fruit was replaced by a list with just - colours.

        +

      20. Return filename as the file name.

      - 
      <h1>List of <del>fruits</del><ins>colours</ins></h1>
-<ul>
- <li><del>Lime</del><ins>Green</ins></li>
- <li><del>Apple</del></li>
- <li>Orange</li>
- <li><del>Pear</del></li>
- <li><ins>Teal</ins></li>
- <li><del>Lemon</del><ins>Yellow</ins></li>
- <li>Olive</li>
- <li><ins>Purple</ins></li>
-</ul>
      +

      For the purposes of this algorithm, a file extension + consists of any part of the file name that platform conventions dictate will be used for + identifying the type of the file. For example, many operating systems use the part of the file + name following the last dot (".") in the file name to determine the type of + the file, and from that the manner in which the file is to be opened or executed.

      - +

      User agents should ignore any directory or path information provided by the resource itself, + its URL, and any download attribute, in + deciding where to store the resulting file in the user's file system.

      + -

      4.6.6 Edits and tables

      -

      This section is non-normative.

      -

      The elements that form part of the table model have complicated content model requirements that - do not allow for the ins and del elements, so indicating edits to a - table can be difficult.

      -

      To indicate that an entire row or an entire column has been added or removed, the entire - contents of each cell in that row or column can be wrapped in ins or del - elements (respectively).

      + -
      + -

      Here, a table's row has been added:

      +

      If a hyperlink created by an a or area element has a + ping attribute, and the user follows the hyperlink, and + the value of the element's href attribute can be resolved, relative to the element, without failure, then the user + agent must take the ping attribute's value, split that string on spaces, resolve each resulting token relative to the element, and then each resulting absolute URL ping URL should + be fetched from the origin of the + Document containing the hyperlink (as described below). (Tokens that fail to resolve are ignored.) This may be done in parallel + with the primary request, and is independent of the result of that request.

      - 
      <table>
- <thead>
-  <tr> <th> Game name           <th> Game publisher   <th> Verdict
- <tbody>
-  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
-  <tr> <td> Portal              <td> Valve            <td> 10/10
-  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
-</table>
      +

      User agents should allow the user to adjust this behavior, for example in conjunction with a + setting that disables the sending of HTTP Referer (sic) + headers. Based on the user's preferences, UAs may either ignore the ping attribute altogether, or selectively ignore URLs in the + list (e.g. ignoring any third-party URLs).

      -

      Here, a column has been removed (the time at which it was removed is given also, as is a link - to the page explaining why):

      +

      For each ping URL that is an HTTP URL, the request must be performed using + the POST method, with an entity body with the MIME type text/ping + consisting of the four-character string "PING". All relevant cookie and + HTTP authentication headers must be included in the request. Which other headers are required + depends on the URLs involved, as follows. For the purposes of these requirements, target URL is the resulting absolute URL obtained from resolving the value of the element's href attribute.

      - 
      <table>
- <thead>
-  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
- <tbody>
-  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
-  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
-  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
-</table>
      +
      If both the address of the Document + object containing the hyperlink being audited and ping URL have the + same origin
      The request must include a Ping-From HTTP header with, + as its value, the address of the document containing + the hyperlink, and a Ping-To HTTP header with, as its value, + the target URL. The request must not include a Referer (sic) HTTP header.
      Otherwise, if the origins are different, but the document containing the hyperlink being + audited was not retrieved over an encrypted connection
      The request must include a Referer (sic) HTTP header with, + as its value, the address of the document containing + the hyperlink, a Ping-From HTTP header with the same value, + and a Ping-To HTTP header with, as its value, target URL.
      Otherwise, the origins are different and the document containing the hyperlink being audited + was retrieved over an encrypted connection
      The request must include a Ping-To HTTP header with, as + its value, target URL. The request must neither include a Referer (sic) HTTP header nor include a Ping-From HTTP header.
      -
      +

      To save bandwidth, implementors might also wish to consider omitting optional + headers such as Accept from these requests.

      -

      Generally speaking, there is no good way to indicate more complicated edits (e.g. that a cell - was removed, moving all subsequent cells up or to the left).

      +

      User agents must, unless otherwise specified by the user, honor the HTTP headers (including, in + particular, redirects and HTTP cookie headers), but must ignore any entity bodies returned in the + responses. User agents may close the connection prematurely once they start receiving an entity + body. [COOKIES]

      + +

      When the ping attribute is present, user agents + should clearly indicate to the user that following the hyperlink will also cause secondary + requests to be sent in the background, possibly including listing the actual target URLs.

      +

      For example, a visual user agent could include the hostnames of the target ping + URLs along with the hyperlink's actual URL in a status bar or tooltip.

      + +
      -

      4.7 Embedded content

      +

      The ping attribute is redundant with pre-existing + technologies like HTTP redirects and JavaScript in allowing Web pages to track which off-site + links are most popular or allowing advertisers to track click-through rates.

      +

      However, the ping attribute provides these advantages + to the user over those alternatives:

      +
      • It allows the user to see the final target URL unobscured.
      • It allows the UA to inform the user about the out-of-band notifications.
      • It allows the user to disable the notifications without losing the underlying link + functionality.
      • It allows the UA to optimise the use of available network bandwidth so that the target page + loads faster.
      +

      Thus, while it is possible to track users without this feature, authors are encouraged to use + the ping attribute so that the user agent can make the + user experience more transparent.

      +
      -

      4.7.1 Introduction

      -

      This section is non-normative.

      -

      To embed an image in HTML, when there is only a single image resource, - use the img element and its src attribute.

      +

      4.6.5 Link types

      -
      +

      The following table summarizes the link types that are defined by this specification. This + table is non-normative; the actual definitions for the link types are given in the next few + sections.

      -
      <h2>From today's featured article</h2>
-<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
-<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
-was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
      +

      In this section, the term referenced document refers to the resource identified by the + element representing the link, and the term current document refers to the resource within + which the element representing the link finds itself.

      -
      + -

      However, there are a number of situations for which the author might wish - to use multiple image resources that the user agent can choose from:

      +

      To determine which link types apply to a link, a, or + area element, the element's rel attribute must be split on spaces. The resulting tokens are the link types + that apply to that element.

      -
      • + -

        Different users might have different environmental characteristics:

        +

        Except where otherwise specified, a keyword must not be specified more than once per rel attribute.

        -
        • +

          Link types are always ASCII case-insensitive, and must be + compared as such.

          -

          The users' physical screen size might be different from one another.

          +

          Thus, rel="next" is the same as rel="NEXT".

          -

          A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14 inches diagonally.

          +
          Link typeEffect on...Brief description
          linka and area
          alternateHyperlinkHyperlinkGives alternate representations of the current document.
          authorHyperlinkHyperlinkGives a link to the author of the current document or article.
          bookmarknot allowedHyperlinkGives the permalink for the nearest ancestor section.
          externalnot allowedAnnotationIndicates that the referenced document is not part of the same site as the current document.
          helpHyperlinkHyperlinkProvides a link to context-sensitive help.
          iconExternal Resourcenot allowedImports an icon to represent the current document.
          licenseHyperlinkHyperlinkIndicates that the main content of the current document is covered by the copyright license described by the referenced document.
          nextHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the next document in the series is the referenced document.
          nofollownot allowedAnnotationIndicates that the current document's original author or publisher does not endorse the referenced document.
          noreferrernot allowedAnnotationRequires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.
          pingbackExternal Resourcenot allowedGives the address of the pingback server that handles pingbacks to the current document.
          prefetchExternal ResourceExternal ResourceSpecifies that the target resource should be preemptively cached.
          prevHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
          searchHyperlinkHyperlinkGives a link to a resource that can be used to search through the current document and its related pages.
          sidebarHyperlinkHyperlinkSpecifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).
          stylesheetExternal Resourcenot allowedImports a stylesheet.
          tagnot allowedHyperlinkGives a tag (identified by the given address) that applies to the current document.
          -

          This is only relevant when an image's rendered size depends on the viewport size.

          + -
        • +

          Some of the types described below list synonyms for these values. These are to be handled as specified by user agents, but must not be used + in documents.

          -

          The users' screen pixel density might be different from one another.

          + -

          A mobile phone's screen might have three times as many physical pixels per inch - compared to another mobile phone's screen, regardless of their physical screen size.

          + -
        • -

          The users' zoom level might be different from one another, or might change for a single user over time.

          +
          4.6.5.1 Link type "alternate"
          -

          A user might zoom in to a particular image to be able to get a more detailed look.

          +

          The alternate keyword may be used with link, + a, and area elements.

          -

          The zoom level and the screen pixel density (the previous point) can both affect the number of physical screen pixels per CSS pixel. - This ratio is usually referred to as device-pixel-ratio.

          +

          The meaning of this keyword depends on the values of the other attributes.

          -
        • +
          If the element is a link element and the rel + attribute also contains the keyword stylesheet
          -

          The users' screen orientation might be different from one another, or might change for a single user over time.

          +

          The alternate keyword modifies the meaning of the stylesheet keyword in the way described for that keyword. The + alternate keyword does not create a link of its own.

          -

          A tablet can be held upright or rotated 90 degrees, so that the screen is either "portrait" or "landscape".

          +
          If the alternate keyword is used with the type attribute set to the value application/rss+xml or the value application/atom+xml
          -
        • +

          The keyword creates a hyperlink referencing a syndication feed (though not + necessarily syndicating exactly the same content as the current page).

          -

          The users' network speed, network latency and bandwidth cost might be different from one another, or might change for a single user over time.

          + -

          A user might be on a fast, low-latency and constant-cost connection while at work, - on a slow, low-latency and constant-cost connection while at home, - and on a variable-speed, high-latency and variable-cost connection anywhere else.

          +

          The first link, a, or area element in the document (in + tree order) with the alternate keyword used with the type attribute set to the value application/rss+xml or the value application/atom+xml must + be treated as the default syndication feed for the purposes of feed autodiscovery.

          -
        +
        +

        The following link element gives the syndication + feed for the current page:

        + 
        <link rel="alternate" type="application/atom+xml" href="data.xml">
        +

        The following extract offers various different syndication + feeds:

        + 
        <p>You can access the planets database using Atom feeds:</p>
+<ul>
+ <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
+ <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
+ <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
+</ul>
        +
        -
      • + -

        Authors might want to show different image content depending on the rendered size of the image. - This is usually referred to as art direction.

        +
        Otherwise
        -

        When a Web page is viewed on a screen with a large physical size (assuming a maximized browser window), - the author might wish to include some less relevant parts surrounding the critical part of the image. - When the same Web page is viewed on a screen with a small physical size, - the author might wish to show only the critical part of the image.

        +

        The keyword creates a hyperlink referencing an alternate representation of the + current document.

        -
      • +

        The nature of the referenced document is given by the hreflang, and type attributes.

        -

        Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport. - This is usually referred to as viewport-based selection.

        +

        If the alternate keyword is used with the hreflang attribute, and that attribute's value differs + from the root element's language, it indicates that the referenced + document is a translation.

        -

        A Web page might have a banner at the top that always spans the entire viewport width. - In this case, the rendered size of the image depends on the physical size of the screen (assuming a maximized browser window).

        +

        If the alternate keyword is used with the type attribute, it indicates that the referenced document is + a reformulation of the current document in the specified format.

        -

        Another Web page might have images in columns, - with a single column for screens with a small physical size, - two columns for screens with medium physical size, - and three columns for screens with big physical size, - with the images varying in rendered size in each case to fill up the viewport. - In this case, the rendered size of an image might be bigger in the one-column layout compared to the two-column layout, - despite the screen being smaller.

        +

        The hreflang and type attributes can be combined when specified with the alternate keyword.

        -
      • +
        -

        Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports. - This is usually referred to as image format-based selection.

        +

        For example, the following link is a French translation that uses the PDF format:

        -

        A Web page might have some images in the JPEG, WebP and JPEG XR image formats, - with the latter two having better compression abilities compared to JPEG. - Since different user agents can support different image formats, - with some formats offering better compression ratios, - the author would like to serve the better formats to user agenst that support them, - while providing JPEG fallback for user agents that don't.

        + 
        <link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
        -
      + -

      The above situations are not mutually exclusive. - For example, it is reasonable to combine different resources for different device-pixel-ratio - with different resources for art direction.

      +

      This relationship is transitive — that is, if a document links to two other documents + with the link type "alternate", then, in addition to implying + that those documents are alternative representations of the first document, it is also implying + that those two documents are alternative representations of each other.

      -

      While it is possible to solve these problems using scripting, doing so introduces some other problems:

      + -

      • Some user agents agressively download images specified in the HTML markup, - before scripts have had a chance to run, - so that Web pages complete loading sooner. - If a script changes which image to download, - the user agent will potentially start two separate downloads, - which can instead cause worse page loading performance.

      • If the author avoids specifying any image in the HTML markup - and instead instantiates a single download from script, - that avoids the double download problem above - but instead it makes no image be downloaded at all for users with scripting disabled - and it disables the agressive image downloading optimization.

      -

      With this in mind, this specification introduces a number of features to address the above problems in a declarative manner.

      -
      Device-pixel-ratio-based selection when the rendered size of the image is fixed
      + -

      The src and srcset - attributes on the img element can be used, - using the x descriptor, - to provide multiple images that only vary in their size - (the smaller image is a scaled-down version of the bigger image).

      +

      The author keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

      -

      The x descriptor is not appropriate when the - rendered size of the image depends on the viewport width (viewport-based selection), - but can be used together with art direction.

      +

      For a and area elements, the author + keyword indicates that the referenced document provides further information about the author of + the nearest article element ancestor of the element defining the hyperlink, if there + is one, or of the page as a whole, otherwise.

      -
      +

      For link elements, the author keyword indicates + that the referenced document provides further information about the author for the page as a + whole.

      -
      <h2>From today's featured article</h2>
-<img src="/uploads/100-marie-lloyd.jpg"
-     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
-     alt="" width="100" height="150">
-<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
-was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
      +

      The "referenced document" can be, and often is, a mailto: URL giving the e-mail address of the author. [MAILTO]

      -

      The user agent can choose any of the given resources depending on - the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

      + -

      For backwards compatibility with older user agents that - don't yet understand the srcset attribute, - one of the URLs is specified in the img element's src attribute. - This will result in something useful (though perhaps lower-resolution than the user would like) - being displayed even in older user agents. - For new user agents, the src attribute participates in the resource selection, - as if it was specified in srcset with a 1x descriptor.

      +

      Synonyms: For historical reasons, user agents must also treat + link, a, and area elements that have a rev attribute with the value "made" as having the author keyword specified as a link relationship.

      -

      The image's rendered size is given in the - width and height attributes, - which allows the user agent to allocate space for the image before it is downloaded.

      + -
      -
      Art direction-based selection
      + -

      The picture element and the source element, - together with the media attribute, - can be used, to provide multiple images that vary the image content - (for intance the smaller image might be a cropped version of the bigger image).

      +

      The bookmark keyword may be used with a and + area elements. This keyword creates a hyperlink.

      -
      +

      The bookmark keyword gives a permalink for the nearest + ancestor article element of the linking element in question, or of the section the linking element is most closely associated with, if + there are no ancestor article elements.

      -
      <picture>
-  <source media="(min-width: 45em)" srcset="large.jpg">
-  <source media="(min-width: 32em)" srcset="med.jpg">
-  <img src="small.jpg" alt="The president giving an award.">
-</picture>
      +
      -

      The user agent will choose the first source element - for which the media query in the media attribute matches, - and then choose an appropriate URL from its srcset attribute.

      +

      The following snippet has three permalinks. A user agent could determine which permalink + applies to which part of the spec by looking at where the permalinks are given.

      -

      The rendered size of the image varies depending on which resource is chosen. - To specify dimensions that the user agent can use before having downloaded the image, - CSS can be used.

      + 
       ...
+ <body>
+  <h1>Example of permalinks</h1>
+  <div id="a">
+   <h2>First example</h2>
+   <p><a href="a.html" rel="bookmark">This permalink applies to
+   only the content from the first H2 to the second H2</a>. The DIV isn't
+   exactly that section, but it roughly corresponds to it.</p>
+  </div>
+  <h2>Second example</h2>
+  <article id="b">
+   <p><a href="b.html" rel="bookmark">This permalink applies to
+   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
+   <article id="c">
+    <p><a href="c.html" rel="bookmark">This permalink applies to
+    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
+   </article>
+  </article>
+ </body>
+ ...
      -
      img { width: 300px; height: 300px }
-@media (min-width: 32em) { img { width: 500px; height:300px } }
-@media (min-width: 45em) { img { width: 700px; height:400px } }
      +
      -
      -
      + + -

      This example combines art direction- and device-pixel-ratio-based selection. - A banner that takes half the viewport is provided in two versions, - one for wide screens and one for narrow screens.

      +

      The external keyword may be used with a and + area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the + implied hyperlink, if no other keywords create one).

      -
      <h1>
- <picture>
-  <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
-  <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
- </picture>
-</h1>
      +

      The external keyword indicates that the link is leading to a + document that is not part of the site that the current document forms a part of.

      -
      -
      Viewport-based selection
      + -

      The srcset and sizes attributes can be used, - using the w descriptor, - to provide multiple images that only vary in their size - (the smaller image is a scaled-down version of the bigger image).

      +

      The help keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

      -
      +

      For a and area elements, the help + keyword indicates that the referenced document provides further help information for the parent of + the element defining the hyperlink, and its children.

      -

      In this example, a banner image takes up the entire viewport width - (using appropriate CSS).

      +
      -
      <h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
-     src="wolf-400.jpg" alt="The rad wolf"></h1>
      +

      In the following example, the form control has associated context-sensitive help. The user + agent could use this information, for example, displaying the referenced document if the user + presses the "Help" or "F1" key.

      -

      The user agent will calculate the effective pixel density of each image - from the specified w descriptors and the specified rendered size in the sizes attribute. - It can then choose any of the given resources depending on - the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

      + 
       <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>
      -

      If the user's screen is 320 CSS pixels wide, this is equivalent to specifying - wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. - On the other hand, if the user's screen is 1200 CSS pixels wide, - this is equivalent to specifying - wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. - By using the w descriptors and the sizes attribute, - the user agent can choose the correct image source to download regardless of how large the user's device is.

      +
      -

      For backwards compatibility, - one of the URLs is specified in the img element's src attribute. - In new user agents, the src attribute is ignored - when the srcset attribute uses w descriptors.

      +

      For link elements, the help keyword indicates that + the referenced document provides help for the page as a whole.

      -

      In this example, the sizes attribute could be omitted - because the default value is 100vw.

      +

      For a and area elements, on some browsers, the help keyword causes the link to use a different cursor.

      -
      -
      +
      4.6.5.6 Link type "icon"
      -

      In this example, the Web page has three layouts depending on the width of the viewport. - The narrow layout has one column of images (the width of each image is about 100%), - the middle layout has two columns of images (the width of each image is about 50%), - and the widest layout has three columns of images, and some page margin (the width of each image is about 33%). - It breaks between these layouts when the viewport is 30em wide and 50em wide, respectively.

      +

      The icon keyword may be used with link elements. + This keyword creates an external resource link.

      -
      <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
-     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
-     src="swing-400.jpg" alt="Kettlebell Swing">
      + -

      The sizes attribute sets up the - layout breakpoints at 30em and 50em, - and declares the image sizes between these breakpoints to be - 100vw, 50vw, or calc(33vw - 100px). - These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.

      +

      The specified resource is an icon representing the page or site, and should be used by the user + agent when representing the page in the user interface.

      -

      The user agent will pick a width from the sizes attribute, - using the first item with a <media-condition> (the part in parentheses) that evaluates to true, - or using the last item (calc(33vw - 100px)) if they all evaluate to false.

      + -

      For example, if the viewport width is 29em, - then (max-width: 30em) evaluates to true and 100vw is used, - so the image size, for the purpose of resource selection, is 29em. - If the viewport width is instead 32em, - then (max-width: 30em) evaluates to false, - but (max-width: 50em) evaluates to true and 50vw is used, - so the image size, for the purpose of resource selection, is 16em (half the viewport width). - Notice that the slightly wider viewport results in a smaller image because of the different layout.

      +

      Icons could be auditory icons, visual icons, or other kinds of icons. If + multiple icons are provided, the user agent must select the most appropriate icon according to the + type, media, and sizes attributes. If there are multiple equally appropriate icons, + user agents must use the last one declared in tree order at the time that the user + agent collected the list of icons. If the user agent tries to use an icon but that icon is + determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an + unsupported format), then the user agent must try the next-most-appropriate icon as determined by + the attributes.

      -

      The user agent can then calculate the effective pixel density and choose an appropriate resource - similarly to the previous example.

      + -
      +

      User agents are not required to update icons when the list of icons changes, but + are encouraged to do so.

      -
      Image format-based selection
      +

      There is no default type for resources given by the icon keyword. + However, for the purposes of determining the type of the + resource, user agents must expect the resource to be an image.

      -

      The type attribute - on the source element can be used, - to provide multiple images in different formats.

      + -
      +

      The sizes attribute gives the sizes of icons + for visual media. Its value, if present, is merely advisory. User agents may use the value to + decide which icon(s) to use if multiple icons are available.

      -
      <h2>From today's featured article</h2>
-<picture>
- <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
- <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
- <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
-</picture>
-<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
-was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
      +

      If specified, the attribute must have a value that is an unordered set of unique + space-separated tokens which are ASCII case-insensitive. Each value must be + either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT + ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN + CAPITAL LETTER X character.

      -

      In this example, the user agent will choose the first source that has - a type attribute with a supported MIME type. - If the user agent supports WebP images, - the first source element will be chosen. - If not, but the user agent does support JPEG XR images, - the second source element will be chosen. - If neither of those formats are supported, - the img element will be chosen.

      +

      The keywords represent icon sizes in raw pixels (as opposed to CSS pixels).

      -
      +

      An icon that is 50 CSS pixels wide intended for displays with a device pixel + density of two device pixels per CSS pixel (2x, 192dpi) would have a width of 100 raw pixels. This + feature does not support indicating that a different resource is to be used for small + high-resolution icons vs large low-resolution icons (e.g. 50×50 2x vs 100×100 1x).

      -
      + +

      To parse and process the attribute's value, the user agent must first split the attribute's value on spaces, and must then parse each resulting + keyword to determine what it represents.

      -

      4.7.2 Dependencies

      + -
      Media Queries [MQ] Correct reference is http://dev.w3.org/csswg/mediaqueries-4/
      <media-condition>
      CSS Values and Units [CSSVALUES]
      <length>
      CSS Syntax [CSSSYNTAX]
      Parse a comma-separated list of component values
      component value
      <whitespace-token>
      +

      The any keyword represents that the + resource contains a scalable icon, e.g. as provided by an SVG image.

      + -

      4.7.3 The picture element

      +

      Other keywords must be further parsed as follows to determine what they represent:

      -
      Categories:
      Flow content.
      Phrasing content.
      Embedded content.
      Contexts in which this element can be used:
      Where embedded content is expected.
      Content model:
      Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      DOM interface:
      -
      interface HTMLPictureElement : HTMLElement {};
      -
      +

      • If the keyword doesn't contain exactly one U+0078 LATIN SMALL LETTER X or U+0058 LATIN + CAPITAL LETTER X character, then this keyword doesn't represent anything. Abort these steps for + that keyword.

      • Let width string be the string before the "x" or + "X".

      • Let height string be the string after the "x" or + "X".

      • If either width string or height string start with + a U+0030 DIGIT ZERO (0) character or contain any characters other than ASCII digits, + then this keyword doesn't represent anything. Abort these steps for that keyword.

      • Apply the rules for parsing non-negative integers to width + string to obtain width.

      • Apply the rules for parsing non-negative integers to height + string to obtain height.

      • The keyword represents that the resource contains a bitmap icon with a width of width device pixels and a height of height device + pixels.

      -

      The picture element is a container - which provides multiples sources to its contained img element - to allow authors to declaratively control or give hints to the user agent about which image resource to use, - based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

      + -

      The picture element is somewhat different - from the similar-looking video and audio elements. - While all of them contain source elements, - the source element's src attribute has no meaning - when the element is nested within a picture element, - and the resource selection algorithm is different. - As well, the picture element itself does not display anything; - it merely provides a context for its contained img element - that enables it to choose from multiple URLs.

      +

      The keywords specified on the sizes attribute must not + represent icon sizes that are not actually available in the linked resource.

      + -

      4.7.4 The source element when used with the picture element

      +

      In the absence of a link with the icon keyword, for + Documents obtained over HTTP or HTTPS, user agents may instead attempt to + fetch and use an icon with the absolute URL obtained by + resolving the URL "/favicon.ico" against the document's + address, as if the page had declared that icon using the icon + keyword.

      -
      Categories:
      Same as for the source element.
      Contexts in which this element can be used:
      As a child of a picture element, before the img element.
      Content model:
      Same as for the source element.
      Content attributes:
      Global attributes
      srcset
      sizes
      media
      type
      DOM interface:
      -
      partial interface HTMLSourceElement {
-           attribute DOMString srcset;
-           attribute DOMString sizes;
-           attribute DOMString media;
-};
      -
      + -

      The authoring requirements in this section only apply if the source element has - a parent that is a picture element.

      +
      -

      The source element allows authors to specify multiple alternative - source sets for img elements. - It does not represent anything on its own.

      +

      The following snippet shows the top part of an application with several icons.

      -

      The srcset attribute must be present, - and must consist of one or more image candidate strings, - each separated from the next by a U+002C COMMA character (,). - If an image candidate string contains no descriptors - and no space characters after the URL, - the following image candidate string, if there is one, - must begin with one or more space characters.

      + 
      <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>lsForums — Inbox</title>
+  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
+  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
+  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
+  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
+  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
+  <link rel=stylesheet href=lsforums.css>
+  <script src=lsforums.js></script>
+  <meta name=application-name content="lsForums">
+ </head>
+ <body>
+  ...
      -

      The sizes attribute may also be present. - If present, the value must be a valid source size list.

      +
      -

      The media attributes may also be present. - If present, the value must contain a valid media query.

      +

      For historical reasons, the icon keyword may be preceded by the + keyword "shortcut". If the "shortcut" keyword is + present, the rel attribute's entire value must be an + ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and + no other space characters).

      -

      The type attribute may also be present. - If present, the value must be a valid MIME type. - It gives the type of the images in the source set, - to allow the user agent to skip to the next source element - if it does not support the given type.

      -

      If the type attribute - is not specified, the user agent will not select a different - source element if it finds that it does not support - the image format after fetching it.

      + -

      When a source element has a following sibling - source element or img element with a - srcset attribute specified, it must have - at least one of the following:

      +

      The license keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

      - +

      The license keyword indicates that the referenced document + provides the copyright license terms under which the main content of the current document is + provided.

      -

      The src attribute must not be present.

      +

      This specification does not specify how to distinguish between the main content of a document + and content that is not deemed to be part of that main content. The distinction should be made + clear to the user.

      - +
      -

      The IDL attributes srcset, - sizes and - media must reflect the - respective content attributes of the same name.

      +

      Consider a photo sharing site. A page on that site might describe and show a photograph, and + the page might be marked up as follows:

      + + 
      <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>Exampl Pictures: Kissat</title>
+  <link rel="stylesheet" href="/style/default">
+ </head>
+ <body>
+  <h1>Kissat</h1>
+  <nav>
+   <a href="../">Return to photo index</a>
+  </nav>
+  <figure>
+   <img src="/pix/39627052_fd8dcd98b5.jpg">
+   <figcaption>Kissat</figcaption>
+  </figure>
+  <p>One of them has six toes!</p>
+  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
+  <footer>
+   <a href="/">Home</a> | <a href="../">Photo index</a>
+   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
+  </footer>
+ </body>
+</html>
      + +

      In this case the license applies to just the photo (the main + content of the document), not the whole document. In particular not the design of the page + itself, which is covered by the copyright given at the bottom of the document. This could be made + clearer in the styling (e.g. making the license link prominently positioned near the photograph, + while having the page copyright in light small text at the foot of the page.

      + +
      +

      Synonyms: For historical reasons, user agents must also treat the keyword + "copyright" like the license keyword.

      -

      4.7.5 The img element

      + -
      Categories:
      Flow content.
      Phrasing content.
      Embedded content.
      Form-associated element.
      If the element has a usemap attribute: Interactive content.
      Palpable content.
      Contexts in which this element can be used:
      Where embedded content is expected.
      Content model:
      Empty.
      Tag omission in text/html:
      No end tag.
      Content attributes:
      Global attributes
      alt — Replacement text for use when images are not available
      src — Address of the resource
      srcset — Images to use in different situations (e.g. high-resolution displays, small monitors, etc)
      sizes
      crossorigin — How the element handles crossorigin requests
      usemap — Name of image map to use
      ismap — Whether the image is a server-side image map
      width — Horizontal dimension
      height — Vertical dimension
      DOM interface:
      -
      [NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]
-interface HTMLImageElement : HTMLElement {
-           attribute DOMString alt;
-           attribute DOMString src;
-           attribute DOMString srcset;
-           attribute DOMString sizes;
-           attribute DOMString crossOrigin;
-           attribute DOMString useMap;
-           attribute boolean isMap;
-           attribute unsigned long width;
-           attribute unsigned long height;
-  readonly attribute unsigned long naturalWidth;
-  readonly attribute unsigned long naturalHeight;
-  readonly attribute boolean complete;
-  readonly attribute DOMString currentSrc;
 
-  // also has obsolete members
-};
      -
      + -

      An img element represents an image.

      +

      The nofollow keyword may be used with a and + area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the + implied hyperlink, if no other keywords create one).

      - +

      The nofollow keyword indicates that the link is not endorsed + by the original author or publisher of the page, or that the link to the referenced document was + included primarily because of a commercial relationship between people affiliated with the two + pages.

      -

      The image given by the src and srcset attributes, - and any previous sibling source elements' - srcset attributes if the parent is a picture element, - is the embedded content; the value of - the alt attribute provides equivalent content for - those who cannot process images or who have image loading disabled (i.e. it is the - img element's fallback content).

      -

      The requirements on the alt attribute's value are described - in the next section.

      + -

      The src attribute must be present, and must contain a - valid non-empty URL potentially surrounded by spaces referencing a non-interactive, - optionally animated, image resource that is neither paged nor scripted.

      +

      The noreferrer keyword may be used with a and + area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the + implied hyperlink, if no other keywords create one).

      -

      The srcset attribute may also be present. - If present, its value must consist of one or more - image candidate strings, - each separated from the next by a U+002C COMMA character (,). - If an image candidate string contains no descriptors - and no space characters after the URL, - the following image candidate string, if there is one, - must begin with one or more space characters.

      +

      It indicates that no referrer information is to be leaked when following the link.

      -

      An image candidate string consists of the following components, in order, with the - further restrictions described below this list:

      +

      If a user agent follows a link defined by an a or area element that + has the noreferrer keyword, the user agent must not include a + Referer (sic) HTTP header (or equivalent for other protocols) in the + request.

      -

      1. Zero or more space characters.

      2. A valid non-empty URL that does not start or end with a U+002C COMMA character (,), - referencing a non-interactive, optionally animated, image resource - that is neither paged nor scripted.

      3. Zero or more space characters.

      4. +

        This keyword also causes the opener + attribute to remain null if the hyperlink creates a new browsing context.

        -

        Zero or one of the following:

        + -

        • A width descriptor, consisting of: - a space character, - a valid non-negative integer giving a number greater than zero - representing the width descriptor value, - and a U+0077 LATIN SMALL LETTER W character.

        • A pixel density descriptor, consisting of: - a space character, - a valid floating-point number giving a number greater than zero - representing the pixel density descriptor value, - and a U+0078 LATIN SMALL LETTER X character.

        + -

      5. Zero or more space characters.

      -

      There must not be an image candidate string for an element that - has the same width descriptor value as another - image candidate string's width descriptor value for the same element.

      + -

      There must not be an image candidate string for an element that - has the same pixel density descriptor value as another - image candidate string's pixel density descriptor value for the same element. - For the purpose of this requirement, - an image candidate string with no descriptors is equivalent to - an image candidate string with a 1x descriptor.

      +

      The pingback keyword may be used with link + elements. This keyword creates an external resource + link.

      -

      If a source element has a sizes attribute present - or an img element has a sizes attribute present, - all image candidate strings for that - element must have the width descriptor specified.

      +

      For the semantics of the pingback keyword, see the Pingback + 1.0 specification. [PINGBACK]

      -

      If an image candidate string for an source or img element - has the width descriptor specified, - all other image candidate strings for that element - must also have the width descriptor specified.

      -

      The specified width in an image candidate string's width descriptor - must match the intrinsic width in the resource given by the image candidate string's URL.

      + -

      The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs, - JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element), - animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root - element that use declarative SMIL animation), and so forth. However, these definitions preclude - SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text - documents, and so forth. [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] - [MNG]

      +

      The prefetch keyword may be used with link, + a, and area elements. This keyword creates an external resource link.

      -

      If the srcset attribute is present, - the sizes attribute may also be present. - If present, its value must be a valid source size list.

      +

      The prefetch keyword indicates that preemptively fetching and + caching the specified resource is likely to be beneficial, as it is highly likely that the user + will require this resource.

      -

      A valid source size list is a string that matches the following grammar: - [CSSVALUES] [MQ]

      +

      There is no default type for resources given by the prefetch + keyword.

      -
      <source-size-list> = <source-size># [ , <source-size-value> ]? | <source-size-value>
-<source-size> = <media-condition> <source-size-value>
-<source-size-value> = <length>
      -

      A <source-size-value> must not be negative.

      + -

      The img element must not be used as a layout tool. In particular, img - elements should not be used to display transparent images, as such images rarely convey meaning and - rarely add anything useful to the document.

      +

      The search keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

      -
      +

      The search keyword indicates that the referenced document + provides an interface specifically for searching the document and its related resources.

      -

      The crossorigin attribute is a CORS - settings attribute. Its purpose is to allow images from third-party sites that allow - cross-origin access to be used with canvas.

      +

      OpenSearch description documents can be used with link elements and + the search link type to enable user agents to autodiscover search + interfaces. [OPENSEARCH]

      - -
      + -

      An img element has a current request and a pending request. - The current request is initially set to a new image request. - The pending request is initially set to null. - The current request is usually referred to as the img element itself.

      +

      The sidebar keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

      -

      An image request has a state, current URL and image data.

      +

      The sidebar keyword indicates that the referenced document, if + retrieved, is intended to be shown in a secondary browsing context (if possible), + instead of in the current browsing context.

      -

      An image request's state is one of the following:

      +

      A hyperlink with the sidebar keyword specified is + a sidebar hyperlink.

      -
      Unavailable
      The user agent hasn't obtained any image data, - or has obtained some or all of the image data but - hasn't yet decoded enough of the image to get the image dimensions.
      Partially available
      The user agent has obtained some of the image data and at least the image dimensions are - available.
      Completely available
      The user agent has obtained all of the image data and at least the image dimensions are - available.
      Broken
      The user agent has obtained all of the image data that it can, but it cannot even decode the - image enough to get the image dimensions (e.g. the image is corrupted, or the format is not - supported, or no data could be obtained).
      -

      An image request's current URL is initially the empty string.

      -

      An image request's image data is the decoded image data.

      + -

      When an image request is either in the partially - available state or in the completely available state, it is - said to be available.

      +

      The stylesheet keyword may be used with link + elements. This keyword creates an external resource + link that contributes to the styling processing model.

      -

      An image request is initially unavailable.

      +

      The specified resource is a resource that describes how to present the document. Exactly how + the resource is to be processed depends on the actual type of the resource.

      -

      When an img element is available, it - provides a paint source whose width is the image's intrinsic width, whose height is - the image's intrinsic height, and whose appearance is the intrinsic appearance of the image.

      +

      If the alternate keyword is also specified on the + link element, then the link is an alternative stylesheet; in this case, + the title attribute must be specified on the link + element, with a non-empty value.

      -

      In a browsing context where scripting is - disabled, user agents may obtain images immediately or on demand. In a browsing - context where scripting is enabled, user agents - must obtain images immediately.

      +

      The default type for resources given by the stylesheet + keyword is text/css.

      -

      A user agent that obtains images immediately must synchronously - update the image data of an img element, - with the restart animation flag set if so stated, - whenever that element is created, - or has experienced relevant mutations, - and whenever that element's adopting steps are run.

      + -

      A user agent that obtains images on demand must update the image data of an - img element whenever it needs the image data (i.e. on demand), - but only if the img element is in the - unavailable state. When an img element - has experienced relevant mutations, - and whenever that element's adopting steps are run, if the user - agent only obtains images on demand, the img element must return to the unavailable state.

      +

      The appropriate times to obtain the resource are: -

      The relevant mutations for an img element are as follows:

      + -

      • The element's src, - srcset - or sizes attributes are set, changed, or removed.

      • The element's src attribute is set to the same value as the previous value. - This must set the restart animation flag for the update the image data algorithm.

      • The element's crossorigin attribute's state is changed.

      • The element is inserted into or removed from a picture parent element.

      • The element's parent is a picture element and a - source element is inserted as a previous sibling.

      • The element's parent is a picture element and a - source element that was a previous sibling is removed.

      • The element's parent is a picture element and a - source element that is a previous sibling has its - srcset, - sizes, - media - or type attributes set, changed, or removed.

      +

      Quirk: If the document has been set to quirks mode, has the + same origin as the URL of the external resource, + and the Content-Type metadata of the external resource is not a + supported style sheet type, the user agent must instead assume it to be text/css.

      -

      Each img element has a last selected source, which must initially be - null.

      +

      Once a resource has been obtained, if its Content-Type metadata is text/css, the user + agent must run these steps:

      -

      Each image request has a current pixel density, which must initially be undefined.

      + + -

      When an img element has a current pixel density that is not 1.0, the - element's image data must be treated as if its resolution, in device pixels per CSS pixels, was - the current pixel density.

      +

      1. Let element be the link element that created the + external resource link.

      2. If element has an associated CSS style sheet, remove the CSS style sheet in question.

      3. If element no longer creates an external resource link + that contributes to the styling processing model, or if, since the resource in question was obtained, it has become appropriate to obtain it again (meaning this algorithm is about to be + invoked again for a newly obtained resource), then abort these steps.

      4. -

        For example, if the current pixel density is 3.125, that means - that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has an - intrinsic dimension of 96 CSS pixels by 192 CSS pixels.

        +

        Create a CSS style sheet with the following properties:

        -

        Each Document object must have a list of available images. Each image - in this list is identified by a tuple consisting of an absolute URL, a CORS - settings attribute mode, and, if the mode is not No - CORS, an origin. - Each image furthermore has an ignore higher-layer caching flag. - User agents may copy entries from one Document - object's list of available images to another at any time (e.g. when the - Document is created, user agents can add to it all the images that are loaded in - other Documents), but must not change the keys of entries copied in this way when - doing so, and must unset the ignore higher-layer caching flag for the copied entry. - User agents may also remove images from such lists at any time (e.g. to save - memory). - User agents must remove entries in the list of available images as appropriate - given higher-layer caching semantics for the resource (e.g. the HTTP Cache-Control - response header) when the ignore higher-layer caching is unset.

        +
        type

        text/css

        location
        -

        The user agent can also store the image data in a separatly from the list of available images.

        +

        The resulting absolute URL determined during the obtain algorithm.

        -

        For example, if a resource has the HTTP response header Cache-Control: must-revalidate, - the user agent would remove it from the list of available images but could keep the image data separately, - and use that if the server responds with a 204 No Content status.

        +

        This is before any redirects get applied.

        -

        When the user agent is to update the image data of an img element, - optionally with the restart animations flag set, - it must run the following steps:

        +
        owner node

        element

        media
        -

        1. If the element's Document is not the active document, - abort these steps.

        2. If the user agent cannot support images, or its support for images has been disabled, then - abort the image request for the current request and the pending request, - set current request to the unavailable state, - let pending request be null, - and abort these steps.

        3. +

          The media attribute of element.

          -

          If the element does not have a srcset attribute specified and - it does not have a parent or it has a parent but it is not a picture element, - and it has a src attribute specified and - its value is not the empty string, let selected source be the value of the - element's src attribute, and selected pixel - density be 1.0. Otherwise, let selected source be null and selected pixel density be undefined.

          +

          This is a reference to the (possibly absent at this time) attribute, rather + than a copy of the attribute's current value. The CSSOM specification defines what happens + when the attribute is dynamically set, changed, or removed.

          -

        4. Let the img element's last selected source be selected source.

        5. +
          title
          -

          If selected source is not null, run these substeps:

          +

          The title attribute of element.

          -

          1. Resolve selected source, relative - to the element, and let the result be absolute URL. If that is not successful, then - abort these inner set of steps.

          2. Let key be a tuple consisting of the resulting absolute - URL, the img element's crossorigin - attribute's mode, and, if that mode is not No CORS, - the Document object's origin.

          3. If the list of available images contains an entry for key, then - set the ignore higher-layer caching flag for that entry, - abort the image request for the current request and the pending request, - let pending request be null, - let current request be a new image request whose image data is that of the entry - and whose state is set to the completely available state, - update the presentation of the image appropriately, - let the current request's current pixel density be selected pixel density, - queue a task to restart the animation if restart animation is set, - change current request's current URL to absolute URL, - and then fire a simple event named load at the img element, - and abort these steps.

          +

          This is similarly a reference to the attribute, rather than a copy of the + attribute's current value.

          -

        6. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. - The synchronous - section consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

        7. +
          alternate flag

          Set if the link is an alternative stylesheet; unset otherwise.

          origin-clean flag

          Set if the resource is CORS-same-origin; unset otherwise.

          parent CSS style sheet
          owner CSS rule

          null

          disabled flag

          Left at its default value.

          CSS rules

          Left uninitialized.

        -

        ⌛ If another instance of this algorithm for this img element was started - after this instance (even if it aborted and is no longer running), then abort these steps.

        +

        The CSS environment encoding is the result of running the following steps: [CSSSYNTAX]

        -

        Only the last instance takes effect, to avoid multiple requests when, for - example, the src, srcset, - and crossorigin attributes are all set in - succession.

        +

        1. If the element has a charset attribute, get an encoding from that attribute's value. If that + succeeds, return the resulting encoding and abort these steps. [ENCODING]

        2. Otherwise, return the document's character encoding. [DOM]

        -
      5. +
      -

      ⌛ Let selected source and selected pixel density be the - URL and pixel density that results from selecting an image source, - respectively.

      + -
    • -

      ⌛ If selected source is null, run these substeps:

      -

      1. ⌛ Set the current request to the broken state, - abort the image request for the current request and the pending request, - and let pending request be null.

      2. ⌛ Queue a task to change the current request's current URL to the empty string, - and then, if the element has a src attribute - or a srcset attribute - or a parent that is a picture element, - fire a simple event named error at the img element.

      3. ⌛ Abort this algorithm.

      + -
    • +

      The tag keyword may be used with a and + area elements. This keyword creates a hyperlink.

      -

      ⌛ Queue a task to fire a progress event named loadstart at - the img element.

      +

      The tag keyword indicates that the tag that the + referenced document represents applies to the current document.

      -

    • Resolve selected source, relative - to the element, and let the result be absolute URL. If that is not successful, then - abort the image request for the current request and the pending request, - set the current request to the broken state, - let pending request be null, - queue a task to - change the current request's current URL to absolute URL, - fire a simple event named error at the img element - and then fire a simple event named loadend at the img element, - and abort these steps.

    • +

      Since it indicates that the tag applies to the current document, it would + be inappropriate to use this keyword in the markup of a tag cloud, which + lists the popular tags across a set of pages.

      -

      ⌛ If the pending request is not null, - and absolute URL is the same as the pending request's current URL, - then abort these steps.

      +
      -

      ⌛ If absolute URL is the same as the current request's current URL, - and current request is in the partially available state, - then abort the image request for the pending request, - queue a task to restart the animation if restart animation is set, - and abort these steps.

      +

      This document is about some gems, and so it is tagged with "http://en.wikipedia.org/wiki/Gemstone" to unambiguously categorise it as applying + to the "jewel" kind of gems, and not to, say, the towns in the US, the Ruby package format, or + the Swiss locomotive class:

      -

      ⌛ If the pending request is not null, - abort the image request for the pending request.

      + 
      <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>My Precious</title>
+ </head>
+ <body>
+  <header><h1>My precious</h1> <p>Summer 2012</p></header>
+  <p>Recently I managed to dispose of a red gem that had been
+  bothering me. I now have a much nicer blue sapphire.</p>
+  <p>The red gem had been found in a bauxite stone while I was digging
+  out the office level, but nobody was willing to haul it away. The
+  same red gem stayed there for literally years.</p>
+  <footer>
+   Tags: <a rel=tag href="http://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
+  </footer>
+ </body>
+</html>
      -

      ⌛ Let image request be a new image request - whose current URL is absolute URL.

      +
      -

      ⌛ Let the pending request be image request.

      +
      -

      ⌛ Do a potentially CORS-enabled fetch of absolute URL, - with the mode being the current state of - the element's crossorigin content attribute, - the origin being the origin of the img element's - Document, and the default origin behaviour set to taint. - Let this instance of the fetching algorithm be associated with image request.

      +

      In this document, there are two articles. The "tag" + link, however, applies to the whole page (and would do so wherever it was placed, including if it + was within the article elements).

      -

      The resource obtained in this fashion, if any, is image request's image data. - It can be either CORS-same-origin or CORS-cross-origin; this affects - the origin of the image itself (e.g. when used on a canvas).

      + 
      <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>Gem 4/4</title>
+ </head>
+ <body>
+  <article>
+   <h1>801: Steinbock</h1>
+   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
+  </article>
+  <article>
+   <h1>802: Murmeltier</h1>
+   <figure>
+    <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
+         alt="The 802 was red with pantographs and tall vents on the side.">
+    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
+   </figure>
+   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
+  </article>
+  <p class="topic"><a rel=tag href="http://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
+ </body>
+</html>
      - -

      Fetching the image must delay the load event of the element's document until the - task that is queued by the - networking task source once the resource has been fetched (defined below) has been run. -

      +
      -

      This, unfortunately, can be used to perform a rudimentary port scan of the - user's local network (especially in conjunction with scripting, though scripting isn't actually - necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those - described above to mitigate this attack, but unfortunately such policies are typically not - compatible with existing Web content.

      -

      If the resource is CORS-same-origin, each task - that is queued by the networking task source - while the image is being fetched, - if image request is the current request, - must fire a progress event named progress at the img element.

      -

    • End the synchronous section, continuing the remaining steps asynchronously, - but without missing any data from the fetch algorithm.

    • + -

      As soon as possible, jump to the first applicable entry from the following list:

      +

      Some documents form part of a sequence of documents.

      -
      If the resource type is multipart/x-mixed-replace
      +

      A sequence of documents is one where each document can have a previous sibling and a + next sibling. A document with no previous sibling is the start of its sequence, a + document with no next sibling is the end of its sequence.

      -

      The next task that is queued by the networking task source while the image is being fetched must run the following steps:

      +

      A document may be part of multiple sequences.

      -
      1. -

        If image request is the pending request - and the user agent is able to determine image request's image's width and height, - abort the image request for the current request, - upgrade the pending request to the current request and - set the current request's state to partially available.

        + -
      2. +

        The next keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

        -

        Otherwise, if image request is the pending request - and the user agent is able to determine that image request's image - is corrupted in some fatal way such that the image dimensions cannot be obtained, - abort the image request for the current request, - upgrade the pending request to the current request - and set the current request's state to broken.

        +

        The next keyword indicates that the document is part of a + sequence, and that the link is leading to the document that is the next logical document in the + sequence.

        -
      3. -

        Otherwise, if image request is the current request, - it is in the unavailable state, - and the user agent is able to determine image request's image's width and height, - set the current request's state to partially available.

        + -
      4. +

        The prev keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

        -

        Otherwise, if image request is the current request, - it is in the unavailable state, - and the user agent is able to determine that image request's image - is corrupted in some fatal way such that the image dimensions cannot be obtained, - set the current request's state to broken. -

        +

        The prev keyword indicates that the document is part of a + sequence, and that the link is leading to the document that is the previous logical document in + the sequence.

        -
      + -

      Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new body - part comes in, it must replace the previous image. Once one body part has been completely - decoded, the user agent must set the img element to the completely available state and queue a task to fire - a simple event named load at the img - element.

      +

      Synonyms: For historical reasons, user agents must also treat the keyword + "previous" like the prev keyword.

      -

      The progress and loadend events are not fired for - multipart/x-mixed-replace image streams.

      + -
      If the resource type and data corresponds to a supported image format, as described below
      -

      The next task that is queued by the networking task source while the image is being fetched must run the following steps:

      + -
      1. +

        Extensions to the predefined set of link types may be + registered in the microformats + wiki existing-rel-values page. [MFREL]

        -

        If the user agent is able to determine image request's image's width and height, - and image request is pending request, - abort the image request for the current request, - upgrade the pending request to the current request, - update the img element's presentation appropriately, - and set image request's state to partially available.

        +

        Anyone is free to edit the microformats wiki existing-rel-values page at + any time to add a type. Extension types must be specified with the following information:

        -
      2. +
        Keyword
        -

        Otherwise, if the user agent is able to determine image request's image's width and height, - and image request is current request, - update the img element's presentation appropriately - and set image request's state to partially available.

        +

        The actual value being defined. The value should not be confusingly similar to any other + defined value (e.g. differing only in case).

        -
      3. +

        If the value contains a U+003A COLON character (:), it must also be an absolute + URL.

        -

        Otherwise, if the user agent is able to determine that image request's image - is corrupted in some fatal way such that the image dimensions cannot be obtained, - and image request is pending request, - abort the image request for the current request and the pending request, - upgrade the pending request to the current request, - set current request to the broken state, - fire a simple event named error at the img element, - fire a simple event named loadend at the img element, - and abort these steps.

        +
        Effect on... link
        -
      4. +

        One of the following:

        -

        Otherwise, if the user agent is able to determine that image request's image - is corrupted in some fatal way such that the image dimensions cannot be obtained, - and image request is current request, - abort the image request for image request, - fire a simple event named error at the img element, - fire a simple event named loadend at the img element, - and abort these steps.

        +
        Not allowed
        The keyword must not be specified on link elements.
        Hyperlink
        The keyword may be specified on a link element; it creates a + hyperlink.
        External Resource
        The keyword may be specified on a link element; it creates an external + resource link.
        -
      +
      Effect on... a and area
      -

      That task, and each subsequent task, that is queued by the - networking task source while the image is being fetched, - if image request is the current request, - must update the presentation of the image appropriately (e.g. if - the image is a progressive JPEG, each packet can improve the resolution of the image).

      +

      One of the following:

      -

      Furthermore, the last task that is queued by the networking task source once the resource has been - fetched must additionally run these steps:

      +
      Not allowed
      The keyword must not be specified on a and area elements.
      Hyperlink
      The keyword may be specified on a and area elements; it creates a + hyperlink.
      External Resource
      The keyword may be specified on a and area elements; it creates + an external resource link.
      Hyperlink Annotation
      The keyword may be specified on a and area elements; it annotates other hyperlinks + created by the element.
      -

      1. Set image request to the completely - available state.

        +
        Brief description

        A short non-normative description of what the keyword's meaning is.

        Specification

        A link to a more detailed description of the keyword's semantics and requirements. It + could be another page on the Wiki, or a link to an external page.

        Synonyms

        A list of other keyword values that have exactly the same processing requirements. Authors + should not use the values defined to be synonyms, they are only intended to allow user agents to + support legacy content. Anyone may remove synonyms that are not used in practice; only names that + need to be processed as synonyms for compatibility with legacy content are to be registered in + this way.

        Status
        -

      2. Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.

      3. Fire a progress event or simple event named load - at the img element, depending on the resource in image request.

      4. Fire a progress event or simple event named loadend - at the img element, depending on the resource in image request.

      +

      One of the following:

      -
      Otherwise
      +
      Proposed
      The keyword has not received wide peer review and approval. Someone has proposed it and is, + or soon will be, using it.
      Ratified
      The keyword has received wide peer review and approval. It has a specification that + unambiguously defines how to handle pages that use the keyword, including when they use it in + incorrect ways.
      Discontinued
      The keyword has received wide peer review and it has been found wanting. Existing pages are + using this keyword, but new pages should avoid it. The "brief description" and "specification" + entries will give details of what authors should use instead, if anything.
      -

      The image data is not in a supported file format; the user agent must set - image request to the broken state, - abort the image request for the current request and the pending request, - upgrade the pending request to the current request, - and then queue a task to first fire a simple event named error at the img element and then fire a simple - event named loadend at the img - element.

      +

      If a keyword is found to be redundant with existing values, it should be removed and listed + as a synonym for the existing value.

      -
      +

      If a keyword is registered in the "proposed" state for a period of a month or more without + being used or specified, then it may be removed from the registry.

      - +

      If a keyword is added with the "proposed" status and found to be redundant with existing + values, it should be removed and listed as a synonym for the existing value. If a keyword is + added with the "proposed" status and found to be harmful, then it should be changed to + "discontinued" status.

      -

      To abort the image request for an image request image request means to run the following steps:

      +

      Anyone can change the status at any time, but should only do so in accordance with the + definitions above.

      -

      1. Forget image request's image data, if any.

      2. Abort any instance of the fetching algorithm for image request, - discarding any pending tasks generated by that algorithm.

      + -

      To upgrade the pending request to the current request for an img element means to run the following steps:

      + -

      1. Let the img element's current request be the pending request.

      2. Let the img element's pending request be null.

      +

      Conformance checkers must use the information given on the microformats wiki + existing-rel-values page to establish if a value is allowed or not: values defined in this + specification or marked as "proposed" or "ratified" must be accepted when used on the elements for + which they apply as described in the "Effect on..." field, whereas values marked as "discontinued" + or not listed in either this specification or on the aforementioned page must be rejected as + invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid + the use of unreliable network connectivity).

      -

      To fire a progress event or simple event named type at an element e, - depending on resource r, means to - fire a progress event named type at e if r is CORS-same-origin, - and otherwise fire a simple event named type at e.

      +

      When an author uses a new type not defined by either this specification or the Wiki page, + conformance checkers should offer to add the value to the Wiki, with the details described above, + with the "proposed" status.

      -

      To restart the animation for an img element means that, - if the image is an animated image, - all animated images with the same absolute URL and the same image data in the img element's Document - are expected to restart their animation.

      + -

      While a user agent is running the above algorithm for an element x, there - must be a strong reference from the element's Document to the element x, even if that element is not in its - Document.

      +

      Types defined as extensions in the microformats + wiki existing-rel-values page with the status "proposed" or "ratified" may be used with the + rel attribute on link, a, and area + elements in accordance to the "Effect on..." field. [MFREL]

      -

      When an img element is in the completely available - state and the user agent can decode the media data without errors, then the - img element is said to be fully decodable.

      -

      Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code - or equivalent) must be ignored when determining - the image's type and whether it is a valid image.

      -

      This allows servers to return images with error responses, and have them - displayed.

      +

      4.7 Edits

      -

      The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official - type. If these rules are not applied, then the type of the image must be the type given by - the image's associated Content-Type headers.

      +

      The ins and del elements represent edits to the document.

      -

      User agents must not support non-image resources with the img element (e.g. XML - files whose root element is an HTML element). User agents must not run executable code (e.g. - scripts) embedded in the image resource. User agents must only display the first page of a - multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an - interactive fashion, but should honor any animation in the resource.

      -

      This specification does not specify which image types are to be supported.

      +

      4.7.1 The ins element

      -
      +
      Categories:
      Flow content.
      Phrasing content.
      Palpable content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      cite — Link to the source of the quotation or more information about the edit
      datetime — Date and (optionally) time of the change
      DOM interface:
      Uses the HTMLModElement interface.
      -

      An img element is associated with a source set.

      +

      The ins element represents an addition to the document.

      -

      A source set is a set of zero or more image sources - and a source size.

      +
      -

      An image source is a URL, - and optionally either a density descriptor, or a width descriptor.

      +

      The following represents the addition of a single paragraph:

      -

      A source size is a <source-size-value>. - When a source size has a unit relative to the viewport, - it must be interpreted relative to the img element's document's viewport. - Other units must be interpreted the same as in Media Queries. [MQ]

      + 
      <aside>
+ <ins>
+  <p> I like fruit. </p>
+ </ins>
+</aside>
      -

      When asked to select an image source for a given img element el, - user agents must do the following:

      +

      As does the following, because everything in the aside element here counts as + phrasing content and therefore there is just one paragraph:

      -

      1. Update the source set for el.

      2. If el's source set is empty, - return null as the URL and undefined as the pixel density and abort these steps.

      3. Otherwise, take el's source set - and let it be source set.

      4. In a user agent-specific manner, - choose one image source from source set. - Let this be selected source.

      5. Return selected source and its associated pixel density.

      + 
      <aside>
+ <ins>
+  Apples are <em>tasty</em>.
+ </ins>
+ <ins>
+  So are pears.
+ </ins>
+</aside>
      -

      When asked to update the source set for a given img element el, - user agents must do the following:

      +
      -

      1. Set el's source set to an empty source set.

      2. If el has a parent node and that is a picture element, - let elements be an array containing el's parent node's child elements, retaining relative order. - Otherwise, let elements be array containing only el.

      3. +

        ins elements should not cross implied paragraph + boundaries.

        -

        Iterate through elements, - doing the following for each item child:

        +
        -
        1. +

          The following example represents the addition of two paragraphs, the second of which was + inserted in two parts. The first ins element in this example thus crosses a + paragraph boundary, which is considered poor form.

          -

          If child is el:

          + 
          <aside>
+ <!-- don't do this -->
+ <ins datetime="2005-03-16 00:00Z">
+  <p> I like fruit. </p>
+  Apples are <em>tasty</em>.
+ </ins>
+ <ins datetime="2007-12-19 00:00Z">
+  So are pears.
+ </ins>
+</aside>
          -

          1. If child has a srcset attribute, - parse child's srcset attribute - and let the returned source set be source set. - Otherwise, let source set be an empty source set.

          2. Parse child's sizes attribute and - let source set's source size be the returned value.

          3. If child has a src attribute - whose value is not the empty string - and source set does not contain an - image source with a density descriptor value of 1, - and no image source with a width descriptor, - append child's src attribute value to source set.

          4. Let el's source set be source set.

          5. Abort this algorithm.

          +

          Here is a better way of marking this up. It uses more elements, but none of the elements cross + implied paragraph boundaries.

          -

        2. If child is not a source element, - continue to the next child. - Otherwise, child is a source element.

        3. If child does not have a srcset attribute, - continue to the next child.

        4. Parse child's srcset attribute and - let the returned source set be source set.

        5. If source set has zero image sources, - continue to the next child.

        6. If child has a media attribute, - and its value is not a valid media query, - or is a valid media query that evaluates to false, - continue to the next child.

        7. Parse child's sizes attribute - and let source set's source size be the returned value.

        8. If child has a type attribute, - and its value is an unknown or unsupported MIME type, - continue to the next child.

        9. Normalize the source densities of source set.

        10. Let el's source set be source set.

        11. Abort this algorithm.

        + 
        <aside>
+ <ins datetime="2005-03-16 00:00Z">
+  <p> I like fruit. </p>
+ </ins>
+ <ins datetime="2005-03-16 00:00Z">
+  Apples are <em>tasty</em>.
+ </ins>
+ <ins datetime="2007-12-19 00:00Z">
+  So are pears.
+ </ins>
+</aside>
        -
      + -

      Each img element independently considers - its previous sibling source elements - plus the img element itself - for selecting an image source, ignoring any other (invalid) elements, - including other img elements in the same picture element, - or source elements that are following siblings - of the relevant img element.

      + -

      When asked to parse a srcset attribute from an element, - parse the value of the element's srcset attribute as follows:

      -

      1. Let input be the value passed to this algorithm.

      2. Let position be a pointer into input, - initially pointing at the start of the string.

      3. Let raw candidates be an initially empty - ordered list of URLs with associated unparsed descriptor list. - The order of entries in the lists is the order in which entries are added to the lists.

      4. Splitting loop: Collect a sequence of characters - that are space characters or U+002C COMMA characters.

      5. If position is past the end of input, - then jump to the step labeled descriptor parser.

      6. Collect a sequence of characters that are not - space characters, and let that be url.

      7. Let descriptors be a new empty list.

      8. +

        4.7.2 The del element

        -

        If url ends with a U+002C COMMA character (,), - follow these substeps:

        +
        Categories:
        Flow content.
        Phrasing content.
        Contexts in which this element can be used:
        Where phrasing content is expected.
        Content model:
        Transparent.
        Tag omission in text/html:
        Neither tag is omissible.
        Content attributes:
        Global attributes
        cite — Link to the source of the quotation or more information about the edit
        datetime — Date and (optionally) time of the change
        DOM interface:
        Uses the HTMLModElement interface.
        -

        1. Remove all trailing U+002C COMMA characters from url.

        2. If url is empty, - then jump to the step labeled splitting loop.

        +

        The del element represents a removal from the document.

        -

        Otherwise, follow these substeps:

        +

        del elements should not cross implied paragraph + boundaries.

        -

        1. Let current token be the empty string.

        2. Let state be start.

        3. +
          -

          Let c be the character at position. - Do the following depending on the value of state. - For the purpose of this step, "EOF" is a special character representing - that position is past the end of input.

          +

          The following shows a "to do" list where items that have been done are crossed-off with the + date and time of their completion.

          -
          Start
          + 
          <h1>To Do</h1>
+<ul>
+ <li>Empty the dishwasher</li>
+ <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
+ <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
+ <li>Buy a printer</li>
+</ul>
          -

          Do the following, depending on the value of c:

          +
          -
          Space character

          If current token is not empty, - append current token to descriptors - and let current token be the empty string. - Set state to after token.

          U+002C COMMA (,)

          Advance position to the next character in input. - If current token is not empty, - append current token to descriptors. - Jump to the step labeled add candidate.

          U+0028 LEFT PARANTHESIS (()

          Append c to current token. - Set state to in parens.

          EOF

          If current token is not empty, - append current token to descriptors. - Jump to the step labeled add candidate.

          Anything else

          Append c to current token.

          -
          In parens
          -

          Do the following, depending on the value of c:

          +

          4.7.3 Attributes common to ins and del elements

          -
          U+0029 RIGHT PARENTHESIS ())

          Append c to current token. - Set state to start.

          EOF

          Append current token to descriptors. - Jump to the step labeled add candidate.

          Anything else

          Append c to current token.

          +

          The cite attribute may be used to specify the + address of a document that explains the change. When that document is long, for instance the + minutes of a meeting, authors are encouraged to include a fragment identifier pointing to the + specific part of that document that discusses the change.

          -
          After token
          +

          If the cite attribute is present, it must be a valid + URL potentially surrounded by spaces that explains the change. To obtain + the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such + citation links, but they are primarily intended for private use (e.g. by server-side scripts + collecting statistics about a site's edits), not for readers.

          -

          Do the following, depending on the value of c:

          -
          Space character

          Stay in this state.

          EOF

          Jump to the step labeled add candidate.

          Anything else

          Set state to start. - Set position to the previous character in input.

          +

          The datetime attribute may be used to specify + the time and date of the change.

          - +

          If present, the datetime attribute's value must be a + valid date string with optional time.

          -

          Advance position to the next character in input. - Repeat this step.

          + -
        +

        User agents must parse the datetime attribute according + to the parse a date or time string algorithm. If that doesn't return a date or a global date and time, + then the modification has no associated timestamp (the value is non-conforming; it is not a + valid date string with optional time). Otherwise, the modification is marked as + having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated + time-zone offset information to determine which time zone to present the given datetime in.

        -

      9. Add candidate: Add url to raw candidates, - associated with descriptors.

      10. Return to the step labeled splitting loop.

      11. Descriptor parser: - Let candidates be an initially empty source set. - The order of entries in the list is the order in which entries are added to the list.

      12. + -

        For each entry in raw candidates with URL url - associated with the unparsed descriptor list descriptor list, - run these substeps:

        +

        This value may be shown to the user, but it is primarily intended for + private use.

        -

        1. Let error be no.

        2. Let width be absent.

        3. Let density be absent.

        4. Let future-compat-h be absent.

        5. +

          The ins and del elements must implement the + HTMLModElement interface:

          -

          For each token in descriptor list, - run the appropriate set of steps from the following list:

          + 
          interface HTMLModElement : HTMLElement {
+           attribute DOMString cite;
+           attribute DOMString dateTime;
+};
          -
          If the token consists of a valid non-negative integer - followed by a U+0077 LATIN SMALL LETTER W character
          + -

          1. If width and density - are not both absent, - then let error be yes.

          2. Apply the rules for parsing non-negative integers to the token. - If the result is zero, let error be yes. - Otherwise, let width be the result.

          +

          The cite IDL attribute must reflect + the element's cite content attribute. The dateTime IDL attribute must reflect the + element's datetime content attribute.

          -
          If the token consists of a valid floating-point number - followed by a U+0078 LATIN SMALL LETTER X character
          + -

          1. If width, density and future-compat-h - are not all absent, - then let error be yes.

          2. -

            Apply the rules for parsing floating-point number values to the token. - If the result is less than zero, let error be yes. - Otherwise, let density be the result.

            -

            If density is zero, - the intrinsic dimensions will be infinite. - User agents are expected to have limits in how big images can be rendered, - which is allowed by the hardware limitations clause.

            +

            4.7.4 Edits and paragraphs

            -
          +

          This section is non-normative.

          -
          If the token consists of a valid non-negative integer - followed by a U+0068 LATIN SMALL LETTER H character
          +

          Since the ins and del elements do not affect paragraphing, it is possible, in some cases where paragraphs are implied (without explicit p elements), for an + ins or del element to span both an entire paragraph or other + non-phrasing content elements and part of another paragraph. For example:

          -

          1. If future-compat-h and density - are not both absent, - then let error be yes.

          2. Apply the rules for parsing non-negative integers to the token. - If the result is zero, let error be yes. - Otherwise, let future-compat-h be the result.

          + 
          <section>
+ <ins>
+  <p>
+   This is a paragraph that was inserted.
+  </p>
+  This is another paragraph whose first sentence was inserted
+  at the same time as the paragraph above.
+ </ins>
+ This is a second sentence, which was there all along.
+</section>
          -
          +

          By only wrapping some paragraphs in p elements, one can even get the end of one + paragraph, a whole second paragraph, and the start of a third paragraph to be covered by the same + ins or del element (though this is very confusing, and not considered + good practice):

          -

        6. If error is still no, - then add a new image source to candidates - whose URL is url, - associated with a width width if not absent - and a pixel density density if not absent.

        + 
        <section>
+ This is the first paragraph. <ins>This sentence was
+ inserted.
+ <p>This second paragraph was inserted.</p>
+ This sentence was inserted too.</ins> This is the
+ third paragraph in this example.
+ <!-- (don't do this) -->
+</section>
        -

      13. Return candidates.

      +

      However, due to the way implied paragraphs are defined, it is + not possible to mark up the end of one paragraph and the start of the very next one using the same + ins or del element. You instead have to use one (or two) p + element(s) and two ins or del elements, as for example:

      -

      When asked to parse a sizes attribute from an element, - parse a comma-separated list of component values - from the value of the element's sizes attribute - (or the empty string, if the attribute is absent), - and let unparsed sizes list be the result. [CSSSYNTAX]

      + 
      <section>
+ <p>This is the first paragraph. <del>This sentence was
+ deleted.</del></p>
+ <p><del>This sentence was deleted too.</del> That
+ sentence needed a separate &lt;del&gt; element.</p>
+</section>
      -

      For each unparsed size in unparsed sizes list:

      +

      Partly because of the confusion described above, authors are strongly encouraged to always mark + up all paragraphs with the p element, instead of having ins or + del elements that cross implied paragraphs + boundaries.

      -

      1. Remove all consecutive <whitespace-token>s - from the end of unparsed size. - If unparsed size is now empty, - continue to the next iteration of this algorithm.

      2. If the last component value in unparsed size - is a valid non-negative <source-size-value>, - let size be its value - and remove the component value from unparsed size. - Otherwise, continue to the next iteration of this algorithm.

      3. Remove all consecutive <whitespace-token>s - from the end of unparsed size. - If unparsed size is now empty, - return size and exit this algorithm.

      4. Parse the remaining component values in unparsed size - as a <media-condition>. - If it does not parse correctly, - or it does parse correctly but the <media-condition> evaluates to false, - continue to the next iteration of this algorithm. [MQ]

      5. Return size and exit this algorithm.

      -

      If the above algorithm exhausts unparsed sizes list without returning a size value, - return 100vw.

      +

      4.7.5 Edits and lists

      -

      While a valid source size list only contains a bare <source-size-value> - (without an accompanying <media-condition>) - as the last entry in the <source-size-list>, - the parsing algorithm technically allows such at any point in the list, - and will accept it immediately as the size - if the preceding entries in the list weren't used. - This is to enable future extensions, - and protect against simple author errors such as a final trailing comma.

      +

      This section is non-normative.

      -

      An image source can have a density descriptor, - a width descriptor, - or no descriptor at all accompanying its URL. - Normalizing a source set gives every image source a density descriptor.

      +

      The content models of the ol and ul elements do not allow + ins and del elements as children. Lists always represent all their + items, including items that would otherwise have been marked as deleted.

      -

      When asked to normalize the source densities of a source set source set, - the user agent must do the following:

      +

      To indicate that an item is inserted or deleted, an ins or del + element can be wrapped around the contents of the li element. To indicate that an + item has been replaced by another, a single li element can have one or more + del elements followed by one or more ins elements.

      -

      1. Let source size be source set's source size.

      2. +
        -

        For each image source in source set:

        +

        In the following example, a list that started empty had items added and removed from it over + time. The bits in the example that have been emphasized show the parts that are the "current" + state of the list. The list item numbers don't take into account the edits, though.

        -

        1. If the image source has a density descriptor, - continue to the next image source.

        2. + 
          <h1>Stop-ship bugs</h1>
+<ol>
+ <li><ins datetime="2008-02-12T15:20Z">Bug 225:
+ Rain detector doesn't work in snow</ins></li>
+ <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
+ Water buffer overflows in April</ins></del></li>
+ <li><ins datetime="2008-02-16T13:50Z">Bug 230:
+ Water heater doesn't use renewable fuels</ins></li>
+ <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
+ Carbon dioxide emissions detected after startup</ins></del></li>
+</ol>
          -

          Otherwise, if the image source has a width descriptor, - replace the width descriptor with a density descriptor - with a value of the width descriptor divided by the source size - and a unit of x.

          +
        -

        If the source size is zero, - the density would be infinity, - which results in the intrinsic dimensions being zero by zero.

        +
        -

      3. Otherwise, give the image source a density descriptor of 1x.

      +

      In the following example, a list that started with just fruit was replaced by a list with just + colours.

      - + 
      <h1>List of <del>fruits</del><ins>colours</ins></h1>
+<ul>
+ <li><del>Lime</del><ins>Green</ins></li>
+ <li><del>Apple</del></li>
+ <li>Orange</li>
+ <li><del>Pear</del></li>
+ <li><ins>Teal</ins></li>
+ <li><del>Lemon</del><ins>Yellow</ins></li>
+ <li>Olive</li>
+ <li><ins>Purple</ins></li>
+</ul>
      -

      The user agent may at any time run the following algorithm to update an img - element's image in order to react to changes in the environment. (User agents are not - required to ever run this algorithm; for example, if the user is not looking at the page any - more, the user agent might want to wait until the user has returned to the page before determining - which image to use, in case the environment changes again in the meantime.)

      + -

      1. Asynchronously await a stable state. The synchronous section - consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

      2. ⌛ If the img element does not have a srcset attribute specified and it either has no parent - or it is not a picture element, is not in the completely available state, has image data whose resource type is - multipart/x-mixed-replace, or if its update the image data algorithm is - running, then abort this algorithm.

      3. ⌛ Let selected source and selected pixel - density be the URL and pixel density that results from selecting an image source, respectively.

      4. ⌛ If selected source is null, then abort these steps.

      5. ⌛ If selected source and selected pixel - density are the same as the element's last selected source and current - pixel density, then abort these steps.

      6. ⌛ Resolve selected source, - relative to the element.

      7. ⌛ Let CORS mode be the state of the element's crossorigin content attribute.

      8. ⌛ If the resolve a URL algorithm is not successful, abort these - steps.

        -

      9. End the synchronous section, continuing the remaining steps - asynchronously.

      10. +

        4.7.6 Edits and tables

        -

        Do a potentially CORS-enabled fetch of the resulting absolute - URL, with the mode being CORS mode, the origin - being the origin of the img element's Document, and the - default origin behaviour set to taint.

        +

        This section is non-normative.

        -

        If this download fails in any way (other than the response code not being a 2xx code, as - mentioned earlier), or if the image format is unsupported (as determined by applying the image sniffing rules, again as mentioned earlier), - or if the resource type is multipart/x-mixed-replace, then abort these steps.

        +

        The elements that form part of the table model have complicated content model requirements that + do not allow for the ins and del elements, so indicating edits to a + table can be difficult.

        -

        Otherwise, wait for the fetch algorithm to queue its last task, and then - continue with these steps. The data obtained in this way is used in the steps below.

        +

        To indicate that an entire row or an entire column has been added or removed, the entire + contents of each cell in that row or column can be wrapped in ins or del + elements (respectively).

        -
      11. +
        -

        Queue a task to run the following substeps:

        +

        Here, a table's row has been added:

        -

        1. If the img element has experienced relevant mutations - since this algorithm started, then abort these steps.

          - -

        2. Let the img element's last selected source be selected source and the img element's current pixel - density be selected pixel density.

        3. Let the img element's current request's - current URL be the resulting absolute URL from the earlier step.

        4. Replace the img element's image data with the resource obtained by the - earlier step of this algorithm. It can be either CORS-same-origin or - CORS-cross-origin; this affects the origin of the image itself (e.g. - when used on a canvas).

        5. Fire a simple event named load at the - img element.

        + 
        <table>
+ <thead>
+  <tr> <th> Game name           <th> Game publisher   <th> Verdict
+ <tbody>
+  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
+  <tr> <td> Portal              <td> Valve            <td> 10/10
+  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
+</table>
        -
      +

      Here, a column has been removed (the time at which it was removed is given also, as is a link + to the page explaining why):

      -
      + 
      <table>
+ <thead>
+  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
+ <tbody>
+  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
+  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
+  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
+</table>
      -

      The task source for the tasks queued by algorithms in this section is the DOM manipulation task - source.

      + -
      +

      Generally speaking, there is no good way to indicate more complicated edits (e.g. that a cell + was removed, moving all subsequent cells up or to the left).

      -

      What an img element represents depends on the src attribute and the alt - attribute.

      -
      If the src attribute is set and the alt attribute is set to the empty string
      -

      The image is either decorative or supplemental to the rest of the content, redundant with - some other information in the document.

      -

      If the image is available and the user agent is configured - to display that image, then the element represents the element's image data.

      +

      4.8 Embedded content

      -

      Otherwise, the element represents nothing, and may be omitted completely from - the rendering. User agents may provide the user with a notification that an image is present but - has been omitted from the rendering.

      -
      If the src attribute is set and the alt attribute is set to a value that isn't empty
      -

      The image is a key part of the content; the alt attribute - gives a textual equivalent or replacement for the image.

      -

      If the image is available and the user agent is configured - to display that image, then the element represents the element's image data.

      -

      Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification - that an image is present but has been omitted from the rendering.

      + -
      If the src attribute is set and the alt attribute is not
      +

      4.8.1 Introduction

      -

      The image might be a key part of the content, and there is no textual equivalent of the image - available.

      +

      This section is non-normative.

      -

      In a conforming document, the absence of the alt attribute indicates that the image is a key part of the content - but that a textual replacement for the image was not available when the image was generated.

      +

      To embed an image in HTML, when there is only a single image resource, + use the img element and its src attribute.

      -

      If the image is available and the user agent is configured - to display that image, then the element represents the element's image data.

      +
      -

      Otherwise, the user agent should display some sort of indicator that there is an image that - is not being rendered, and may, if requested by the user, or if so configured, or when required - to provide contextual information in response to navigation, provide caption information for the - image, derived as follows:

      +
      <h2>From today's featured article</h2>
+<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
+<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
+was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
      -

      1. If the image has a title attribute whose value is not - the empty string, then the value of that attribute is the caption information; abort these - steps.

      2. If the image is a descendant of a figure element that has a child - figcaption element, and, ignoring the figcaption element and its - descendants, the figure element has no flow content descendants other - than inter-element whitespace and the img element, then the contents of the first such - figcaption element are the caption information; abort these steps.

      3. There is no caption information.

      +
      -
      If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all
      +

      However, there are a number of situations for which the author might wish + to use multiple image resources that the user agent can choose from:

      -

      The element represents nothing.

      +
      • -
        Otherwise
        +

        Different users might have different environmental characteristics:

        -

        The element represents the text given by the alt attribute.

        +
        • -
      +

      The users' physical screen size might be different from one another.

      -

      The alt attribute does not represent advisory information. - User agents must not present the contents of the alt attribute - in the same way as content of the title attribute.

      +

      A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14 inches diagonally.

      -

      User agents may always provide the user with the option to display any image, or to prevent any - image from being displayed. User agents may also apply heuristics to help the user make use of the - image when the user is unable to see it, e.g. due to a visual disability or because they are using - a text terminal with no graphics capabilities. Such heuristics could include, for instance, - optical character recognition (OCR) of text found within the image.

      +

      This is only relevant when an image's rendered size depends on the viewport size.

      -

      While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described - in detail below.

      +
    • -

      The contents of img elements, if any, are ignored for the purposes of - rendering.

      +

      The users' screen pixel density might be different from one another.

      - +

      A mobile phone's screen might have three times as many physical pixels per inch + compared to another mobile phone's screen, regardless of their physical screen size.

      -
      +
    • -

      The usemap attribute, - if present, can indicate that the image has an associated - image map.

      +

      The users' zoom level might be different from one another, or might change for a single user over time.

      -

      The ismap - attribute, when used on an element that is a descendant of an - a element with an href attribute, indicates by its - presence that the element provides access to a server-side image - map. This affects how events are handled on the corresponding - a element.

      +

      A user might zoom in to a particular image to be able to get a more detailed look.

      -

      The ismap attribute is a - boolean attribute. The attribute must not be specified - on an element that does not have an ancestor a element - with an href attribute.

      +

      The zoom level and the screen pixel density (the previous point) can both affect the number of physical screen pixels per CSS pixel. + This ratio is usually referred to as device-pixel-ratio.

      -

      The usemap and - ismap attributes - can result in confusing behavior when used together with - source elements with the - media attribute specified - in a picture element.

      +
    • -

      The img element supports dimension - attributes.

      +

      The users' screen orientation might be different from one another, or might change for a single user over time.

      - +

      A tablet can be held upright or rotated 90 degrees, so that the screen is either "portrait" or "landscape".

      -

      The alt, src, srcset and sizes IDL attributes must reflect the - respective content attributes of the same name.

      +
    • -

      The crossOrigin IDL attribute must - reflect the crossorigin content attribute, - limited to only known values.

      +

      The users' network speed, network latency and bandwidth cost might be different from one another, or might change for a single user over time.

      -

      The useMap IDL attribute must - reflect the usemap content attribute.

      +

      A user might be on a fast, low-latency and constant-cost connection while at work, + on a slow, low-latency and constant-cost connection while at home, + and on a variable-speed, high-latency and variable-cost connection anywhere else.

      -

      The isMap IDL attribute must reflect - the ismap content attribute.

      +
    - +
  • +

    Authors might want to show different image content depending on the rendered size of the image. + This is usually referred to as art direction.

    -
    image . width [ = value ]
    image . height [ = value ]
    +

    When a Web page is viewed on a screen with a large physical size (assuming a maximized browser window), + the author might wish to include some less relevant parts surrounding the critical part of the image. + When the same Web page is viewed on a screen with a small physical size, + the author might wish to show only the critical part of the image.

    +
  • -

    These attributes return the actual rendered dimensions of the - image, or zero if the dimensions are not known.

    +

    Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport. + This is usually referred to as viewport-based selection.

    -

    They can be set, to change the corresponding content - attributes.

    +

    A Web page might have a banner at the top that always spans the entire viewport width. + In this case, the rendered size of the image depends on the physical size of the screen (assuming a maximized browser window).

    -
    image . naturalWidth
    image . naturalHeight
    +

    Another Web page might have images in columns, + with a single column for screens with a small physical size, + two columns for screens with medium physical size, + and three columns for screens with big physical size, + with the images varying in rendered size in each case to fill up the viewport. + In this case, the rendered size of an image might be bigger in the one-column layout compared to the two-column layout, + despite the screen being smaller.

    +
  • -

    These attributes return the intrinsic dimensions of the image, - or zero if the dimensions are not known.

    +

    Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports. + This is usually referred to as image format-based selection.

    -
    image . complete
    +

    A Web page might have some images in the JPEG, WebP and JPEG XR image formats, + with the latter two having better compression abilities compared to JPEG. + Since different user agents can support different image formats, + with some formats offering better compression ratios, + the author would like to serve the better formats to user agenst that support them, + while providing JPEG fallback for user agents that don't.

    + -

    Returns true if the image has been completely downloaded or if - no image is specified; otherwise, returns false.

    +

    The above situations are not mutually exclusive. + For example, it is reasonable to combine different resources for different device-pixel-ratio + with different resources for art direction.

    -
    image . currentSrc
    +

    While it is possible to solve these problems using scripting, doing so introduces some other problems:

    -

    Returns the image's absolute URL.

    +

    • Some user agents agressively download images specified in the HTML markup, + before scripts have had a chance to run, + so that Web pages complete loading sooner. + If a script changes which image to download, + the user agent will potentially start two separate downloads, + which can instead cause worse page loading performance.

    • If the author avoids specifying any image in the HTML markup + and instead instantiates a single download from script, + that avoids the double download problem above + but instead it makes no image be downloaded at all for users with scripting disabled + and it disables the agressive image downloading optimization.

    -
    image = new Image( [ width [, height ] ] )
    +

    With this in mind, this specification introduces a number of features to address the above problems in a declarative manner.

    +
    Device-pixel-ratio-based selection when the rendered size of the image is fixed
    -

    Returns a new img element, with the width and height attributes set to the values - passed in the relevant arguments, if applicable.

    +

    The src and srcset + attributes on the img element can be used, + using the x descriptor, + to provide multiple images that only vary in their size + (the smaller image is a scaled-down version of the bigger image).

    -
    +

    The x descriptor is not appropriate when the + rendered size of the image depends on the viewport width (viewport-based selection), + but can be used together with art direction.

    - +
    -

    The IDL attributes width and height must return the rendered width and height of the - image, in CSS pixels, if the image is being rendered, and is being rendered to a - visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is - available but not being rendered to a visual medium; or else 0, if - the image is not available. [CSS]

    +
    <h2>From today's featured article</h2>
+<img src="/uploads/100-marie-lloyd.jpg"
+     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
+     alt="" width="100" height="150">
+<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
+was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
    -

    On setting, they must act as if they reflected the respective - content attributes of the same name.

    +

    The user agent can choose any of the given resources depending on + the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

    -

    The IDL attributes naturalWidth and naturalHeight must return the intrinsic width and - height of the image, in CSS pixels, if the image is available, or - else 0. [CSS]

    +

    For backwards compatibility with older user agents that + don't yet understand the srcset attribute, + one of the URLs is specified in the img element's src attribute. + This will result in something useful (though perhaps lower-resolution than the user would like) + being displayed even in older user agents. + For new user agents, the src attribute participates in the resource selection, + as if it was specified in srcset with a 1x descriptor.

    -

    The IDL attribute complete must return true if - any of the following conditions is true:

    +

    The image's rendered size is given in the + width and height attributes, + which allows the user agent to allocate space for the image before it is downloaded.

    -
    • Both the src attribute and the srcset attribute are omitted. +
    -
  • The srcset attribute is omitted and the src attribute's value is the empty string. +
    Art direction-based selection
    -
  • The final task that is queued by the networking task source once the resource has been fetched has been queued. +

    The picture element and the source element, + together with the media attribute, + can be used, to provide multiple images that vary the image content + (for intance the smaller image might be a cropped version of the bigger image).

    -
  • The img element is completely available. +
    -
  • The img element is broken. +
    <picture>
+  <source media="(min-width: 45em)" srcset="large.jpg">
+  <source media="(min-width: 32em)" srcset="med.jpg">
+  <img src="small.jpg" alt="The president giving an award.">
+</picture>
    - +

    The user agent will choose the first source element + for which the media query in the media attribute matches, + and then choose an appropriate URL from its srcset attribute.

    -

    Otherwise, the attribute must return false.

    +

    The rendered size of the image varies depending on which resource is chosen. + To specify dimensions that the user agent can use before having downloaded the image, + CSS can be used.

    -

    The value of complete can thus change while - a script is executing.

    +
    img { width: 300px; height: 300px }
+@media (min-width: 32em) { img { width: 500px; height:300px } }
+@media (min-width: 45em) { img { width: 700px; height:400px } }
    -

    The currentSrc IDL attribute - must return the img element's current request's current URL.

    + -

    A constructor is provided for creating HTMLImageElement objects (in addition to - the factory methods from DOM such as createElement()): Image(width, height). - When invoked as a constructor, this must return a new HTMLImageElement object (a new - img element). If the width argument is present, the new object's - width content attribute must be set to width. If the height argument is also present, the new object's - height content attribute must be set to height. The element's document must be the active document of the - browsing context of the Window object on which the interface object of - the invoked constructor is found.

    +
    - +

    This example combines art direction- and device-pixel-ratio-based selection. + A banner that takes half the viewport is provided in two versions, + one for wide screens and one for narrow screens.

    +
    <h1>
+ <picture>
+  <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
+  <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
+ </picture>
+</h1>
    -
    +
    -

    A single image can have different appropriate alternative text depending on the context.

    +
    Viewport-based selection
    -

    In each of the following cases, the same image is used, yet the alt text is different each time. The image is the coat of arms of the - Carouge municipality in the canton Geneva in Switzerland.

    +

    The srcset and sizes attributes can be used, + using the w descriptor, + to provide multiple images that only vary in their size + (the smaller image is a scaled-down version of the bigger image).

    -

    Here it is used as a supplementary icon:

    - 
    <p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>
    +
    -

    Here it is used as an icon representing the town:

    - 
    <p>Home town: <img src="carouge.svg" alt="Carouge"></p>
    +

    In this example, a banner image takes up the entire viewport width + (using appropriate CSS).

    -

    Here it is used as part of a text on the town:

    +
    <h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
+     src="wolf-400.jpg" alt="The rad wolf"></h1>
    - 
    <p>Carouge has a coat of arms.</p>
-<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
-<p>It is used as decoration all over the town.</p>
    +

    The user agent will calculate the effective pixel density of each image + from the specified w descriptors and the specified rendered size in the sizes attribute. + It can then choose any of the given resources depending on + the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

    -

    Here it is used as a way to support a similar text where the description is given as well as, - instead of as an alternative to, the image:

    +

    If the user's screen is 320 CSS pixels wide, this is equivalent to specifying + wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. + On the other hand, if the user's screen is 1200 CSS pixels wide, + this is equivalent to specifying + wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. + By using the w descriptors and the sizes attribute, + the user agent can choose the correct image source to download regardless of how large the user's device is.

    - 
    <p>Carouge has a coat of arms.</p>
-<p><img src="carouge.svg" alt=""></p>
-<p>The coat of arms depicts a lion, sitting in front of a tree.
-It is used as decoration all over the town.</p>
    +

    For backwards compatibility, + one of the URLs is specified in the img element's src attribute. + In new user agents, the src attribute is ignored + when the srcset attribute uses w descriptors.

    -

    Here it is used as part of a story:

    +

    In this example, the sizes attribute could be omitted + because the default value is 100vw.

    - 
    <p>He picked up the folder and a piece of paper fell out.</p>
-<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
-red background, a green tree, and a yellow lion with its tongue
-hanging out and whose tail was shaped like an S."></p>
-<p>He stared at the folder. S! The answer he had been looking for all
-this time was simply the letter S! How had he not seen that before? It all
-came together now. The phone call where Hector had referred to a lion's tail,
-the time Marco had stuck his tongue out...</p>
    +
    -

    Here it is not known at the time of publication what the image will be, only that it will be a - coat of arms of some kind, and thus no replacement text can be provided, and instead only a brief - caption for the image is provided, in the title attribute:

    +
    - 
    <p>The last user to have uploaded a coat of arms uploaded this one:</p>
-<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>
    +

    In this example, the Web page has three layouts depending on the width of the viewport. + The narrow layout has one column of images (the width of each image is about 100%), + the middle layout has two columns of images (the width of each image is about 50%), + and the widest layout has three columns of images, and some page margin (the width of each image is about 33%). + It breaks between these layouts when the viewport is 30em wide and 50em wide, respectively.

    -

    Ideally, the author would find a way to provide real replacement text even in this case, e.g. - by asking the previous user. Not providing replacement text makes the document more difficult to - use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth - connections or who pay by the byte, or users who are forced to use a text-only Web browser.

    +
    <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
+     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
+     src="swing-400.jpg" alt="Kettlebell Swing">
    -
    +

    The sizes attribute sets up the + layout breakpoints at 30em and 50em, + and declares the image sizes between these breakpoints to be + 100vw, 50vw, or calc(33vw - 100px). + These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.

    -
    +

    The user agent will pick a width from the sizes attribute, + using the first item with a <media-condition> (the part in parentheses) that evaluates to true, + or using the last item (calc(33vw - 100px)) if they all evaluate to false.

    -

    Here are some more examples showing the same picture used in different contexts, with - different appropriate alternate texts each time.

    +

    For example, if the viewport width is 29em, + then (max-width: 30em) evaluates to true and 100vw is used, + so the image size, for the purpose of resource selection, is 29em. + If the viewport width is instead 32em, + then (max-width: 30em) evaluates to false, + but (max-width: 50em) evaluates to true and 50vw is used, + so the image size, for the purpose of resource selection, is 16em (half the viewport width). + Notice that the slightly wider viewport results in a smaller image because of the different layout.

    - 
    <article>
- <h1>My cats</h1>
- <h2>Fluffy</h2>
- <p>Fluffy is my favorite.</p>
- <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
- <p>She's just too cute.</p>
- <h2>Miles</h2>
- <p>My other cat, Miles just eats and sleeps.</p>
-</article>
    +

    The user agent can then calculate the effective pixel density and choose an appropriate resource + similarly to the previous example.

    - 
    <article>
- <h1>Photography</h1>
- <h2>Shooting moving targets indoors</h2>
- <p>The trick here is to know how to anticipate; to know at what speed and
- what distance the subject will pass by.</p>
- <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
- photographed quite nicely using this technique.">
- <h2>Nature by night</h2>
- <p>To achieve this, you'll need either an extremely sensitive film, or
- immense flash lights.</p>
-</article>
    +
    - 
    <article>
- <h1>About me</h1>
- <h2>My pets</h2>
- <p>I've got a cat named Fluffy and a dog named Miles.</p>
- <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
- <p>My dog Miles and I like go on long walks together.</p>
- <h2>music</h2>
- <p>After our walks, having emptied my mind, I like listening to Bach.</p>
-</article>
    +
    Image format-based selection
    - 
    <article>
- <h1>Fluffy and the Yarn</h1>
- <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
- <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
- <p>He would play in the morning, he would play in the evening.</p>
-</article>
    +

    The type attribute + on the source element can be used, + to provide multiple images in different formats.

    -
    +
    - +
    <h2>From today's featured article</h2>
+<picture>
+ <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
+ <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
+ <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
+</picture>
+<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
+was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
    +

    In this example, the user agent will choose the first source that has + a type attribute with a supported MIME type. + If the user agent supports WebP images, + the first source element will be chosen. + If not, but the user agent does support JPEG XR images, + the second source element will be chosen. + If neither of those formats are supported, + the img element will be chosen.

    -
    4.7.5.1 Requirements for providing text to act as an alternative for images
    +
    +
    • -
    4.7.5.1.1 General guidelines
    -

    Except where otherwise specified, the alt attribute must be - specified and its value must not be empty; the value must be an appropriate replacement for the - image. The specific requirements for the alt attribute depend on - what the image is intended to represent, as described in the following sections.

    +

    4.8.2 Dependencies

    -

    The most general rule to consider when writing alternative text is the following: the - intent is that replacing every image with the text of its alt - attribute not change the meaning of the page.

    +
    Media Queries [MQ] Correct reference is http://dev.w3.org/csswg/mediaqueries-4/
    <media-condition>
    CSS Values and Units [CSSVALUES]
    <length>
    CSS Syntax [CSSSYNTAX]
    Parse a comma-separated list of component values
    component value
    <whitespace-token>
    -

    So, in general, alternative text can be written by considering what one would have written had - one not been able to include the image.

    -

    A corollary to this is that the alt attribute's value should - never contain text that could be considered the image's caption, title, or - legend. It is supposed to contain replacement text that could be used by users - instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.

    +

    4.8.3 The picture element

    -

    Another corollary is that the alt attribute's value should - not repeat information that is already provided in the prose next to the image.

    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    DOM interface:
    +
    interface HTMLPictureElement : HTMLElement {};
    +
    -

    One way to think of alternative text is to think about how you would read the page - containing the image to someone over the phone, without mentioning that there is an image present. - Whatever you say instead of the image is typically a good start for writing the alternative - text.

    +

    The picture element is a container + which provides multiples sources to its contained img element + to allow authors to declaratively control or give hints to the user agent about which image resource to use, + based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

    +

    The picture element is somewhat different + from the similar-looking video and audio elements. + While all of them contain source elements, + the source element's src attribute has no meaning + when the element is nested within a picture element, + and the resource selection algorithm is different. + As well, the picture element itself does not display anything; + it merely provides a context for its contained img element + that enables it to choose from multiple URLs.

    - -

    When an a element that creates a hyperlink, or a button - element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of - the link or button.

    +

    4.8.4 The source element when used with the picture element

    -
    +
    Categories:
    Same as for the source element.
    Contexts in which this element can be used:
    As a child of a picture element, before the img element.
    Content model:
    Same as for the source element.
    Content attributes:
    Global attributes
    srcset
    sizes
    media
    type
    DOM interface:
    +
    partial interface HTMLSourceElement {
+           attribute DOMString srcset;
+           attribute DOMString sizes;
+           attribute DOMString media;
+};
    +
    -

    In this example, a user is asked to pick his preferred colour from a list of three. Each colour - is given by an image, but for users who have configured their user agent not to display images, - the colour names are used instead:

    +

    The authoring requirements in this section only apply if the source element has + a parent that is a picture element.

    - 
    <h1>Pick your colour</h1>
-<ul>
- <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
- <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
- <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
-</ul>
    +

    The source element allows authors to specify multiple alternative + source sets for img elements. + It does not represent anything on its own.

    -
    +

    The srcset attribute must be present, + and must consist of one or more image candidate strings, + each separated from the next by a U+002C COMMA character (,). + If an image candidate string contains no descriptors + and no space characters after the URL, + the following image candidate string, if there is one, + must begin with one or more space characters.

    -
    +

    The sizes attribute may also be present. + If present, the value must be a valid source size list.

    -

    In this example, each button has a set of images to indicate the kind of colour output desired - by the user. The first image is used in each case to give the alternative text.

    +

    The media attributes may also be present. + If present, the value must contain a valid media query.

    - 
    <button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
-<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
    +

    The type attribute may also be present. + If present, the value must be a valid MIME type. + It gives the type of the images in the source set, + to allow the user agent to skip to the next source element + if it does not support the given type.

    -

    Since each image represents one part of the text, it could also be written like this:

    - - 
    <button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
-<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>
    - -

    However, with other alternative text, this might not work, and putting all the alternative - text into one image in each case might make more sense:

    - - 
    <button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
-<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
    - -
    - - - -
    4.7.5.1.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
    - -

    Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a - diagram, a graph, or a simple map showing directions. In such cases, an image can be given using - the img element, but the lesser textual version must still be given, so that users - who are unable to view the image (e.g. because they have a very slow connection, or because they - are using a text-only browser, or because they are listening to the page being read out by a - hands-free automobile voice Web browser, or simply because they are blind) are still able to - understand the message being conveyed.

    - -

    The text must be given in the alt attribute, and must convey - the same message as the image specified in the src - attribute.

    - -

    It is important to realise that the alternative text is a replacement for the image, - not a description of the image.

    - -
    - -

    In the following example we have a flowchart - in image form, with text in the alt attribute rephrasing the - flowchart in prose form:

    - - 
    <p>In the common case, the data handled by the tokenization stage
-comes from the network, but it can also come from script.</p>
-<p><img src="images/parsing-model-overview.png" alt="The Network
-passes data to the Input Stream Preprocessor, which passes it to the
-Tokenizer, which passes it to the Tree Construction stage. From there,
-data goes to both the DOM and to Script Execution. Script Execution is
-linked to the DOM, and, using document.write(), passes data to the
-Tokenizer."></p>
    - -
    - -
    - -

    Here's another example, showing a good solution and a bad solution to the problem of including - an image in a description.

    - -

    First, here's the good solution. This sample shows how the alternative text should just be - what you would have put in the prose if the image had never existed.

    - - 
    <!-- This is the correct way to do things. -->
-<p>
- You are standing in an open field west of a house.
- <img src="house.jpeg" alt="The house is white, with a boarded front door.">
- There is a small mailbox here.
-</p>
    - -

    Second, here's the bad solution. In this incorrect way of doing things, the alternative text - is simply a description of the image, instead of a textual replacement for the image. It's bad - because when the image isn't shown, the text doesn't flow as well as in the first example.

    - - 
    <!-- This is the wrong way to do things. -->
-<p>
- You are standing in an open field west of a house.
- <img src="house.jpeg" alt="A white house, with a boarded front door.">
- There is a small mailbox here.
-</p>
    - -

    Text such as "Photo of white house with boarded door" would be equally bad alternative text - (though it could be suitable for the title attribute or in the - figcaption element of a figure with this image).

    - -
    - - -
    4.7.5.1.4 A short phrase or label with an alternative graphical representation: icons, logos
    - -

    A document can contain information in iconic form. The icon is intended to help users of visual - browsers to recognise features at a glance.

    - -

    In some cases, the icon is supplemental to a text label conveying the same meaning. In those - cases, the alt attribute must be present but must be empty.

    - -
    - -

    Here the icons are next to text that conveys the same meaning, so they have an empty alt attribute:

    - - 
    <nav>
- <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
- <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
- Configuration Tools</a></p>
-</nav>
    - -
    - -

    In other cases, the icon has no text next to it describing what it means; the icon is supposed - to be self-explanatory. In those cases, an equivalent textual label must be given in the alt attribute.

    - -
    - -

    Here, posts on a news site are labeled with an icon indicating their topic.

    - - 
    <body>
- <article>
-  <header>
-   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
-   <p><img src="movies.png" alt="Movies"></p>
-  </header>
-  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
-  making this its 8th win in the last 12 years.</p>
- </article>
- <article>
-  <header>
-   <h1>Latest TWiT episode is online</h1>
-   <p><img src="podcasts.png" alt="Podcasts"></p>
-  </header>
-  <p>The latest TWiT episode has been posted, in which we hear
-  several tech news stories as well as learning much more about the
-  iPhone. This week, the panelists compare how reflective their
-  iPhones' Apple logos are.</p>
- </article>
-</body>
    - -
    - -

    Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such - as a company, organization, project, band, software package, country, or some such.

    - -

    If the logo is being used to represent the entity, e.g. as a page heading, the alt attribute must contain the name of the entity being represented by - the logo. The alt attribute must not contain text like - the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity - itself.

    - -

    If the logo is being used next to the name of the entity that it represents, then the logo is - supplemental, and its alt attribute must instead be empty.

    - -

    If the logo is merely used as decorative material (as branding, or, for example, as a side - image in an article that mentions the entity to which the logo belongs), then the entry below on - purely decorative images applies. If the logo is actually being discussed, then it is being used - as a phrase or paragraph (the description of the logo) with an alternative graphical - representation (the logo itself), and the first entry above applies.

    - -
    - -

    In the following snippets, all four of the above cases are present. First, we see a logo used - to represent a company:

    - - 
    <h1><img src="XYZ.gif" alt="The XYZ company"></h1>
    - -

    Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have - any alternative text: - - 

    <article>
- <h2>News</h2>
- <p>We have recently been looking at buying the <img src="alpha.gif"
- alt=""> ΑΒΓ company, a small Greek company
- specializing in our type of product.</p>
    - -

    In this third snippet, we have a logo being used in an aside, as part of the larger article - discussing the acquisition:

    +

    If the type attribute + is not specified, the user agent will not select a different + source element if it finds that it does not support + the image format after fetching it.

    -
     <aside><p><img src="alpha-large.gif" alt=""></p></aside>
- <p>The ΑΒΓ company has had a good quarter, and our
- pie chart studies of their accounts suggest a much bigger blue slice
- than its green and orange slices, which is always a good sign.</p>
-</article>
    +

    When a source element has a following sibling + source element or img element with a + srcset attribute specified, it must have + at least one of the following:

    -

    Finally, we have an opinion piece talking about a logo, and the logo is therefore described in - detail in the alternative text.

    + - 
    <p>Consider for a moment their logo:</p>
+  
    The src attribute must not be present.
    
 
-<p><img src="/images/logo" alt="It consists of a green circle with a
-green question mark centered inside it."></p>
+  
 
-<p>How unoriginal can you get? I mean, oooooh, a question mark, how
-<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
-sure everyone will rush to adopt those specifications now! They could
-at least have tried for some sort of, I don't know, sequence of
-rounded squares with varying shades of green and bold white outlines,
-at least that would look good on the cover of a blue book.</p>
    +

    The IDL attributes srcset, + sizes and + media must reflect the + respective content attributes of the same name.

    -

    This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into - the surrounding text, as if the image had never been there in the first place.

    + -
    +

    4.8.5 The img element

    -
    4.7.5.1.5 Text that has been rendered to a graphic for typographical effect
    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Form-associated element.
    If the element has a usemap attribute: Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    alt — Replacement text for use when images are not available
    src — Address of the resource
    srcset — Images to use in different situations (e.g. high-resolution displays, small monitors, etc)
    sizes
    crossorigin — How the element handles crossorigin requests
    usemap — Name of image map to use
    ismap — Whether the image is a server-side image map
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    +
    [NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]
+interface HTMLImageElement : HTMLElement {
+           attribute DOMString alt;
+           attribute DOMString src;
+           attribute DOMString srcset;
+           attribute DOMString sizes;
+           attribute DOMString crossOrigin;
+           attribute DOMString useMap;
+           attribute boolean isMap;
+           attribute unsigned long width;
+           attribute unsigned long height;
+  readonly attribute unsigned long naturalWidth;
+  readonly attribute unsigned long naturalHeight;
+  readonly attribute boolean complete;
+  readonly attribute DOMString currentSrc;
 
-  
    Sometimes, an image just consists of text, and the purpose of the image is not to highlight the
-  actual typographic effects used to render the text, but just to convey the text itself.
    
+  // also has obsolete members
+};
    +
    -

    In such cases, the alt attribute must be present but must - consist of the same text as written in the image itself.

    +

    An img element represents an image.

    -
    + -

    Consider a graphic containing the text "Earth Day", but with the letters all decorated with - flowers and plants. If the text is merely being used as a heading, to spice up the page for - graphical users, then the correct alternative text is just the same text "Earth Day", and no - mention need be made of the decorations:

    +

    The image given by the src and srcset attributes, + and any previous sibling source elements' + srcset attributes if the parent is a picture element, + is the embedded content; the value of + the alt attribute provides equivalent content for + those who cannot process images or who have image loading disabled (i.e. it is the + img element's fallback content).

    - 
    <h1><img src="earthdayheading.png" alt="Earth Day"></h1>
    +

    The requirements on the alt attribute's value are described + in the next section.

    -
    +

    The src attribute must be present, and must contain a + valid non-empty URL potentially surrounded by spaces referencing a non-interactive, + optionally animated, image resource that is neither paged nor scripted.

    -
    +

    The srcset attribute may also be present. + If present, its value must consist of one or more + image candidate strings, + each separated from the next by a U+002C COMMA character (,). + If an image candidate string contains no descriptors + and no space characters after the URL, + the following image candidate string, if there is one, + must begin with one or more space characters.

    -

    An illuminated manuscript might use graphics for some of its images. The alternative text in - such a situation is just the character that the image represents.

    + - 
    <p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
-night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
-away, in a small house, on a hill, under a full moon...
    +

    An image candidate string consists of the following components, in order, with the + further restrictions described below this list:

    -
    +

    1. Zero or more space characters.

    2. A valid non-empty URL that does not start or end with a U+002C COMMA character (,), + referencing a non-interactive, optionally animated, image resource + that is neither paged nor scripted.

    3. Zero or more space characters.

    4. -

      When an image is used to represent a character that cannot otherwise be represented in Unicode, - for example gaiji, itaiji, or new characters such as novel currency symbols, the alternative text - should be a more conventional way of writing the same thing, e.g. using the phonetic hiragana or - katakana to give the character's pronunciation.

      +

      Zero or one of the following:

      -
      +

      • A width descriptor, consisting of: + a space character, + a valid non-negative integer giving a number greater than zero + representing the width descriptor value, + and a U+0077 LATIN SMALL LETTER W character.

      • A pixel density descriptor, consisting of: + a space character, + a valid floating-point number giving a number greater than zero + representing the pixel density descriptor value, + and a U+0078 LATIN SMALL LETTER X character.

      -

      In this example from 1997, a new-fangled currency symbol that looks like a curly E with two - bars in the middle instead of one is represented using an image. The alternative text gives the - character's pronunication.

      +

    5. Zero or more space characters.

    - 
    <p>Only <img src="euro.png" alt="euro ">5.99!
    +

    There must not be an image candidate string for an element that + has the same width descriptor value as another + image candidate string's width descriptor value for the same element.

    - +

    There must not be an image candidate string for an element that + has the same pixel density descriptor value as another + image candidate string's pixel density descriptor value for the same element. + For the purpose of this requirement, + an image candidate string with no descriptors is equivalent to + an image candidate string with a 1x descriptor.

    -

    An image should not be used if Unicode characters would serve an identical purpose. Only when - the text cannot be directly represented using Unicode, e.g. because of decorations or because the - character is not in the Unicode character set (as in the case of gaiji), would an image be - appropriate.

    +

    If a source element has a sizes attribute present + or an img element has a sizes attribute present, + all image candidate strings for that + element must have the width descriptor specified.

    -

    If an author is tempted to use an image because their default system font does not - support a given character, then Web Fonts are a better solution than images.

    +

    If an image candidate string for an source or img element + has the width descriptor specified, + all other image candidate strings for that element + must also have the width descriptor specified.

    +

    The specified width in an image candidate string's width descriptor + must match the intrinsic width in the resource given by the image candidate string's URL.

    +

    The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs, + JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element), + animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root + element that use declarative SMIL animation), and so forth. However, these definitions preclude + SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text + documents, and so forth. [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] + [MNG]

    -
    4.7.5.1.6 A graphical representation of some of the surrounding text
    +

    If the srcset attribute is present, + the sizes attribute may also be present. + If present, its value must be a valid source size list.

    -

    In many cases, the image is actually just supplementary, and its presence merely reinforces the - surrounding text. In these cases, the alt attribute must be - present but its value must be the empty string.

    +

    A valid source size list is a string that matches the following grammar: + [CSSVALUES] [MQ]

    -

    In general, an image falls into this category if removing the image doesn't make the page any - less useful, but including the image makes it a lot easier for users of visual browsers to - understand the concept.

    +
    <source-size-list> = <source-size># [ , <source-size-value> ]? | <source-size-value>
+<source-size> = <media-condition> <source-size-value>
+<source-size-value> = <length>
    -
    +

    A <source-size-value> must not be negative.

    -

    A flowchart that repeats the previous paragraph in graphical form:

    +

    The img element must not be used as a layout tool. In particular, img + elements should not be used to display transparent images, as such images rarely convey meaning and + rarely add anything useful to the document.

    - 
    <p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<p><img src="images/parsing-model-overview.png" alt=""></p>
    +
    -

    In these cases, it would be wrong to include alternative text that consists of just a caption. - If a caption is to be included, then either the title attribute - can be used, or the figure and figcaption elements can be used. In the - latter case, the image would in fact be a phrase or paragraph with an alternative graphical - representation, and would thus require alternative text.

    +

    The crossorigin attribute is a CORS + settings attribute. Its purpose is to allow images from third-party sites that allow + cross-origin access to be used with canvas.

    - 
    <!-- Using the title="" attribute -->
-<p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<p><img src="images/parsing-model-overview.png" alt=""
-        title="Flowchart representation of the parsing model."></p>
    + - 
    <!-- Using <figure> and <figcaption> -->
-<p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<figure>
- <img src="images/parsing-model-overview.png" alt="The Network leads to
- the Input Stream Preprocessor, which leads to the Tokenizer, which
- leads to the Tree Construction stage. The Tree Construction stage
- leads to two items. The first is Script Execution, which leads via
- document.write() back to the Tokenizer. The second item from which
- Tree Construction leads is the DOM. The DOM is related to the Script
- Execution.">
- <figcaption>Flowchart representation of the parsing model.</figcaption>
-</figure>
    +
    - 
    <!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
-<p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<p><img src="images/parsing-model-overview.png"
-        alt="Flowchart representation of the parsing model."></p>
-<!-- Never put the image's caption in the alt="" attribute! -->
    +

    An img element has a current request and a pending request. + The current request is initially set to a new image request. + The pending request is initially set to null. + The current request is usually referred to as the img element itself.

    -
    +

    An image request has a state, current URL and image data.

    -
    +

    An image request's state is one of the following:

    -

    A graph that repeats the previous paragraph in graphical form:

    +
    Unavailable
    The user agent hasn't obtained any image data, + or has obtained some or all of the image data but + hasn't yet decoded enough of the image to get the image dimensions.
    Partially available
    The user agent has obtained some of the image data and at least the image dimensions are + available.
    Completely available
    The user agent has obtained all of the image data and at least the image dimensions are + available.
    Broken
    The user agent has obtained all of the image data that it can, but it cannot even decode the + image enough to get the image dimensions (e.g. the image is corrupted, or the format is not + supported, or no data could be obtained).
    - 
    <p>According to a study covering several billion pages,
-about 62% of documents on the Web in 2007 triggered the Quirks
-rendering mode of Web browsers, about 30% triggered the Almost
-Standards mode, and about 9% triggered the Standards mode.</p>
-<p><img src="rendering-mode-pie-chart.png" alt=""></p>
    +

    An image request's current URL is initially the empty string.

    -
    +

    An image request's image data is the decoded image data.

    +

    When an image request is either in the partially + available state or in the completely available state, it is + said to be available.

    +

    An image request is initially unavailable.

    -
    4.7.5.1.7 A purely decorative image that doesn't add any information
    +

    When an img element is available, it + provides a paint source whose width is the image's intrinsic width, whose height is + the image's intrinsic height, and whose appearance is the intrinsic appearance of the image.

    -

    If an image is decorative but isn't especially page-specific — for example an image that - forms part of a site-wide design scheme — the image should be specified in the site's CSS, - not in the markup of the document.

    +

    In a browsing context where scripting is + disabled, user agents may obtain images immediately or on demand. In a browsing + context where scripting is enabled, user agents + must obtain images immediately.

    -

    However, a decorative image that isn't discussed by the surrounding text but still has some - relevance can be included in a page using the img element. Such images are - decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty - string.

    +

    A user agent that obtains images immediately must synchronously + update the image data of an img element, + with the restart animation flag set if so stated, + whenever that element is created, + or has experienced relevant mutations, + and whenever that element's adopting steps are run.

    -
    +

    A user agent that obtains images on demand must update the image data of an + img element whenever it needs the image data (i.e. on demand), + but only if the img element is in the + unavailable state. When an img element + has experienced relevant mutations, + and whenever that element's adopting steps are run, if the user + agent only obtains images on demand, the img element must return to the unavailable state.

    -

    Examples where the image is purely decorative despite being relevant would include things like - a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an - image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows - an example of the latter case (only the first verse is included in this snippet):

    +

    The relevant mutations for an img element are as follows:

    - 
    <h1>The Lady of Shalott</h1>
-<p><img src="shalott.jpeg" alt=""></p>
-<p>On either side the river lie<br>
-Long fields of barley and of rye,<br>
-That clothe the wold and meet the sky;<br>
-And through the field the road run by<br>
-To many-tower'd Camelot;<br>
-And up and down the people go,<br>
-Gazing where the lilies blow<br>
-Round an island there below,<br>
-The island of Shalott.</p>
    +

    • The element's src, + srcset + or sizes attributes are set, changed, or removed.

    • The element's src attribute is set to the same value as the previous value. + This must set the restart animation flag for the update the image data algorithm.

    • The element's crossorigin attribute's state is changed.

    • The element is inserted into or removed from a picture parent element.

    • The element's parent is a picture element and a + source element is inserted as a previous sibling.

    • The element's parent is a picture element and a + source element that was a previous sibling is removed.

    • The element's parent is a picture element and a + source element that is a previous sibling has its + srcset, + sizes, + media + or type attributes set, changed, or removed.

    -
    +

    Each img element has a last selected source, which must initially be + null.

    +

    Each image request has a current pixel density, which must initially be undefined.

    - +

    When an img element has a current pixel density that is not 1.0, the + element's image data must be treated as if its resolution, in device pixels per CSS pixels, was + the current pixel density.

    -

    When a picture has been sliced into smaller image files that are then displayed together to - form the complete picture again, one of the images must have its alt attribute set as per the relevant rules that would be appropriate - for the picture as a whole, and then all the remaining images must have their alt attribute set to the empty string.

    +

    For example, if the current pixel density is 3.125, that means + that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has an + intrinsic dimension of 96 CSS pixels by 192 CSS pixels.

    -
    +

    Each Document object must have a list of available images. Each image + in this list is identified by a tuple consisting of an absolute URL, a CORS + settings attribute mode, and, if the mode is not No + CORS, an origin. + Each image furthermore has an ignore higher-layer caching flag. + User agents may copy entries from one Document + object's list of available images to another at any time (e.g. when the + Document is created, user agents can add to it all the images that are loaded in + other Documents), but must not change the keys of entries copied in this way when + doing so, and must unset the ignore higher-layer caching flag for the copied entry. + User agents may also remove images from such lists at any time (e.g. to save + memory). + User agents must remove entries in the list of available images as appropriate + given higher-layer caching semantics for the resource (e.g. the HTTP Cache-Control + response header) when the ignore higher-layer caching is unset.

    -

    In the following example, a picture representing a company logo for XYZ - Corp has been split into two pieces, the first containing the letters "XYZ" and the second - with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.

    +

    The user agent can also store the image data in a separatly from the list of available images.

    - 
    <h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>
    +

    For example, if a resource has the HTTP response header Cache-Control: must-revalidate, + the user agent would remove it from the list of available images but could keep the image data separately, + and use that if the server responds with a 204 No Content status.

    -
    +

    When the user agent is to update the image data of an img element, + optionally with the restart animations flag set, + it must run the following steps:

    -
    +

    1. If the element's Document is not the active document, + abort these steps.

    2. If the user agent cannot support images, or its support for images has been disabled, then + abort the image request for the current request and the pending request, + set current request to the unavailable state, + let pending request be null, + and abort these steps.

    3. -

      In the following example, a rating is shown as three filled stars and two empty stars. While - the alternative text could have been "★★★☆☆", the author has - instead decided to more helpfully give the rating in the form "3 out of 5". That is the - alternative text of the first image, and the rest have blank alternative text.

      +

      If the element does not have a srcset attribute specified and + it does not have a parent or it has a parent but it is not a picture element, + and it has a src attribute specified and + its value is not the empty string, let selected source be the value of the + element's src attribute, and selected pixel + density be 1.0. Otherwise, let selected source be null and selected pixel density be undefined.

      - 
      <p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
-  ><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
-  ><img src="0" alt=""></meter></p>
      +

    4. Let the img element's last selected source be selected source.

    5. -
    +

    If selected source is not null, run these substeps:

    +

    1. Resolve selected source, relative + to the element, and let the result be absolute URL. If that is not successful, then + abort these inner set of steps.

    2. Let key be a tuple consisting of the resulting absolute + URL, the img element's crossorigin + attribute's mode, and, if that mode is not No CORS, + the Document object's origin.

    3. If the list of available images contains an entry for key, then + set the ignore higher-layer caching flag for that entry, + abort the image request for the current request and the pending request, + let pending request be null, + let current request be a new image request whose image data is that of the entry + and whose state is set to the completely available state, + update the presentation of the image appropriately, + let the current request's current pixel density be selected pixel density, + queue a task to restart the animation if restart animation is set, + change current request's current URL to absolute URL, + and then fire a simple event named load at the img element, + and abort these steps.

    +

  • Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. + The synchronous + section consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

  • - +

    ⌛ If another instance of this algorithm for this img element was started + after this instance (even if it aborted and is no longer running), then abort these steps.

    -

    Generally, image maps should be used instead of slicing an image - for links.

    +

    Only the last instance takes effect, to avoid multiple requests when, for + example, the src, srcset, + and crossorigin attributes are all set in + succession.

    -

    However, if an image is indeed sliced and any of the components of the sliced picture are the - sole contents of links, then one image per link must have alternative text in its alt attribute representing the purpose of the link.

    +
  • -
    +

    ⌛ Let selected source and selected pixel density be the + URL and pixel density that results from selecting an image source, + respectively.

    -

    In the following example, a picture representing the flying spaghetti monster emblem, with - each of the left noodly appendages and the right noodly appendages in different images, so that - the user can pick the left side or the right side in an adventure.

    +
  • - 
    <h1>The Church</h1>
-<p>You come across a flying spaghetti monster. Which side of His
-Noodliness do you wish to reach out for?</p>
-<p><a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a
-  ><img src="fsm-middle.png" alt=""
-  ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>
    +

    ⌛ If selected source is null, run these substeps:

    - +

    1. ⌛ Set the current request to the broken state, + abort the image request for the current request and the pending request, + and let pending request be null.

    2. ⌛ Queue a task to change the current request's current URL to the empty string, + and then, if the element has a src attribute + or a srcset attribute + or a parent that is a picture element, + fire a simple event named error at the img element.

    3. ⌛ Abort this algorithm.

    +
  • +

    ⌛ Queue a task to fire a progress event named loadstart at + the img element.

    -
    4.7.5.1.10 A key part of the content
    +

  • Resolve selected source, relative + to the element, and let the result be absolute URL. If that is not successful, then + abort the image request for the current request and the pending request, + set the current request to the broken state, + let pending request be null, + queue a task to + change the current request's current URL to absolute URL, + fire a simple event named error at the img element + and then fire a simple event named loadend at the img element, + and abort these steps.

  • -

    In some cases, the image is a critical part of the content. This could be the case, for - instance, on a page that is part of a photo gallery. The image is the whole point of the - page containing it.

    +

    ⌛ If the pending request is not null, + and absolute URL is the same as the pending request's current URL, + then abort these steps.

    -

    How to provide alternative text for an image that is a key part of the content depends on the - image's provenance.

    +

    ⌛ If absolute URL is the same as the current request's current URL, + and current request is in the partially available state, + then abort the image request for the pending request, + queue a task to restart the animation if restart animation is set, + and abort these steps.

    -
    The general case
    +

    ⌛ If the pending request is not null, + abort the image request for the pending request.

    -

    When it is possible for detailed alternative text to be provided, for example if the image is - part of a series of screenshots in a magazine review, or part of a comic strip, or is a - photograph in a blog entry about that photograph, text that can serve as a substitute for the - image must be given as the contents of the alt attribute.

    +

    ⌛ Let image request be a new image request + whose current URL is absolute URL.

    -
    +

    ⌛ Let the pending request be image request.

    -

    A screenshot in a gallery of screenshots for a new OS, with some alternative text:

    +

    ⌛ Do a potentially CORS-enabled fetch of absolute URL, + with the mode being the current state of + the element's crossorigin content attribute, + the origin being the origin of the img element's + Document, and the default origin behaviour set to taint. + Let this instance of the fetching algorithm be associated with image request.

    - 
    <figure>
- <img src="KDE%20Light%20desktop.png"
-      alt="The desktop is blue, with icons along the left hand side in
-           two columns, reading System, Home, K-Mail, etc. A window is
-           open showing that menus wrap to a second line if they
-           cannot fit in the window. The window has a list of icons
-           along the top, with an address bar below it, a list of
-           icons for tabs along the left edge, a status bar on the
-           bottom, and two panes in the middle. The desktop has a bar
-           at the bottom of the screen with a few buttons, a pager, a
-           list of open applications, and a clock.">
- <figcaption>Screenshot of a KDE desktop.</figcaption>
-</figure>
    +

    The resource obtained in this fashion, if any, is image request's image data. + It can be either CORS-same-origin or CORS-cross-origin; this affects + the origin of the image itself (e.g. when used on a canvas).

    -
    + +

    Fetching the image must delay the load event of the element's document until the + task that is queued by the + networking task source once the resource has been fetched (defined below) has been run. +

    -
    +

    This, unfortunately, can be used to perform a rudimentary port scan of the + user's local network (especially in conjunction with scripting, though scripting isn't actually + necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those + described above to mitigate this attack, but unfortunately such policies are typically not + compatible with existing Web content.

    -

    A graph in a financial report:

    +

    If the resource is CORS-same-origin, each task + that is queued by the networking task source + while the image is being fetched, + if image request is the current request, + must fire a progress event named progress at the img element.

    - 
    <img src="sales.gif"
-     title="Sales graph"
-     alt="From 1998 to 2005, sales increased by the following percentages
-     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">
    +

  • End the synchronous section, continuing the remaining steps asynchronously, + but without missing any data from the fetch algorithm.

  • -

    Note that "sales graph" would be inadequate alternative text for a sales graph. Text that - would be a good caption is not generally suitable as replacement text.

    +

    As soon as possible, jump to the first applicable entry from the following list:

    -
    • +
    If the resource type is multipart/x-mixed-replace
    -
    Images that defy a complete description
    +

    The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    -

    In certain cases, the nature of the image might be such that providing thorough alternative - text is impractical. For example, the image could be indistinct, or could be a complex fractal, - or could be a detailed topographical map.

    +
    1. -

      In these cases, the alt attribute must contain some - suitable alternative text, but it may be somewhat brief.

      +

      If image request is the pending request + and the user agent is able to determine image request's image's width and height, + abort the image request for the current request, + upgrade the pending request to the current request and + set the current request's state to partially available.

      -
      +
    2. -

      Sometimes there simply is no text that can do justice to an image. For example, there is - little that can be said to usefully describe a Rorschach inkblot test. However, a description, - even if brief, is still better than nothing:

      +

      Otherwise, if image request is the pending request + and the user agent is able to determine that image request's image + is corrupted in some fatal way such that the image dimensions cannot be obtained, + abort the image request for the current request, + upgrade the pending request to the current request + and set the current request's state to broken.

      - 
      <figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
- symmetry with indistinct edges, with a small gap in the center, two
- larger gaps offset slightly from the center, with two similar gaps
- under them. The outline is wider in the top half than the bottom
- half, with the sides extending upwards higher than the center, and
- the center extending below the sides.">
- <figcaption>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</figcaption>
-</figure>
      +
    3. -

      Note that the following would be a very bad use of alternative text:

      +

      Otherwise, if image request is the current request, + it is in the unavailable state, + and the user agent is able to determine image request's image's width and height, + set the current request's state to partially available.

      - 
      <!-- This example is wrong. Do not copy it. -->
-<figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
- of the first of the ten cards in the Rorschach inkblot test.">
- <figcaption>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</figcaption>
-</figure>
      +
    4. -

      Including the caption in the alternative text like this isn't useful because it effectively - duplicates the caption for users who don't have images, taunting them twice yet not helping - them any more than if they had only read or heard the caption once.

      +

      Otherwise, if image request is the current request, + it is in the unavailable state, + and the user agent is able to determine that image request's image + is corrupted in some fatal way such that the image dimensions cannot be obtained, + set the current request's state to broken. +

      - +
    -
    +

    Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new body + part comes in, it must replace the previous image. Once one body part has been completely + decoded, the user agent must set the img element to the completely available state and queue a task to fire + a simple event named load at the img + element.

    -

    Another example of an image that defies full description is a fractal, which, by definition, - is infinite in detail.

    +

    The progress and loadend events are not fired for + multipart/x-mixed-replace image streams.

    -

    The following example shows one possible way of providing alternative text for the full view - of an image of the Mandelbrot set.

    +
    If the resource type and data corresponds to a supported image format, as described below
    - 
    <img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
-its cusp on the real axis in the positive direction, with a smaller
-bulb aligned along the same center line, touching it in the negative
-direction, and with these two shapes being surrounded by smaller bulbs
-of various sizes.">
    +

    The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    - +
    1. -
      +

      If the user agent is able to determine image request's image's width and height, + and image request is pending request, + abort the image request for the current request, + upgrade the pending request to the current request, + update the img element's presentation appropriately, + and set image request's state to partially available.

      -

      Similarly, a photograph of a person's face, for example in a biography, can be considered - quite relevant and key to the content, but it can be hard to fully substitute text for

      +
    2. - 
      <section class="bio">
- <h1>A Biography of Isaac Asimov</h1>
- <p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
- <p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
- Later in life, he wore long white sideburns.">
- <p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
- <p>...
-</section>
      +

      Otherwise, if the user agent is able to determine image request's image's width and height, + and image request is current request, + update the img element's presentation appropriately + and set image request's state to partially available.

      -

      In such cases it is unnecessary (and indeed discouraged) to include a reference to the - presence of the image itself in the alternative text, since such text would be redundant with - the browser itself reporting the presence of the image. For example, if the alternative text - was "A photo of Isaac Asimov", then a conforming user agent might read that out as "(Image) A - photo of Isaac Asimov" rather than the more useful "(Image) Isaac Asimov had dark hair, a tall - forehead, and wore glasses...".

      +
    3. - +

      Otherwise, if the user agent is able to determine that image request's image + is corrupted in some fatal way such that the image dimensions cannot be obtained, + and image request is pending request, + abort the image request for the current request and the pending request, + upgrade the pending request to the current request, + set current request to the broken state, + fire a simple event named error at the img element, + fire a simple event named loadend at the img element, + and abort these steps.

      -
      Images whose contents are not known
      +
    4. -

      In some unfortunate cases, there might be no alternative text available at all, either - because the image is obtained in some automated fashion without any associated alternative text - (e.g. a Webcam), or because the page is being generated by a script using user-provided images - where the user did not provide suitable or usable alternative text (e.g. photograph sharing - sites), or because the author does not himself know what the images represent (e.g. a blind - photographer sharing an image on his blog).

      +

      Otherwise, if the user agent is able to determine that image request's image + is corrupted in some fatal way such that the image dimensions cannot be obtained, + and image request is current request, + abort the image request for image request, + fire a simple event named error at the img element, + fire a simple event named loadend at the img element, + and abort these steps.

      -

      In such cases, the alt attribute may be omitted, but one of - the following conditions must be met as well:

      +
    -

    • The img element is in a - figure element that contains a figcaption element that contains - content other than inter-element whitespace, and, ignoring the - figcaption element and its descendants, the figure element has no - flow content descendants other than inter-element whitespace and the - img element.

    • +

      That task, and each subsequent task, that is queued by the + networking task source while the image is being fetched, + if image request is the current request, + must update the presentation of the image appropriately (e.g. if + the image is a progressive JPEG, each packet can improve the resolution of the image).

      -

      The title attribute is present and has a non-empty - value.

      +

      Furthermore, the last task that is queued by the networking task source once the resource has been + fetched must additionally run these steps:

      - -

      Relying on the title attribute is currently - discouraged as many user agents do not expose the attribute in an accessible manner as - required by this specification (e.g. requiring a pointing device such as a mouse to cause a - tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone - with a modern phone or tablet).

      +

      1. Set image request to the completely + available state.

        -
    +

  • Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.

  • Fire a progress event or simple event named load + at the img element, depending on the resource in image request.

  • Fire a progress event or simple event named loadend + at the img element, depending on the resource in image request. -

    Such cases are to be kept to an absolute minimum. If there is even the slightest - possibility of the author having the ability to provide real alternative text, then it would not - be acceptable to omit the alt attribute.

    +
    Otherwise
    -
    +

    The image data is not in a supported file format; the user agent must set + image request to the broken state, + abort the image request for the current request and the pending request, + upgrade the pending request to the current request, + and then queue a task to first fire a simple event named error at the img element and then fire a simple + event named loadend at the img + element.

    -

    A photo on a photo-sharing site, if the site received the image with no metadata other than - the caption, could be marked up as follows:

    +
    • - 
    <figure>
- <img src="1100670787_6a7c664aef.jpg">
- <figcaption>Bubbles traveled everywhere with us.</figcaption>
-</figure>
    + -

    It would be better, however, if a detailed description of the important parts of the image - obtained from the user and included on the page.

    +

    To abort the image request for an image request image request means to run the following steps:

    - +

    1. Forget image request's image data, if any.

    2. Abort any instance of the fetching algorithm for image request, + discarding any pending tasks generated by that algorithm.

    -
    +

    To upgrade the pending request to the current request for an img element means to run the following steps:

    -

    A blind user's blog in which a photo taken by the user is shown. Initially, the user might - not have any idea what the photo he took shows:

    +

    1. Let the img element's current request be the pending request.

    2. Let the img element's pending request be null.

    - 
    <article>
- <h1>I took a photo</h1>
- <p>I went out today and took a photo!</p>
- <figure>
-  <img src="photo2.jpeg">
-  <figcaption>A photograph taken blindly from my front porch.</figcaption>
- </figure>
-</article>
    +

    To fire a progress event or simple event named type at an element e, + depending on resource r, means to + fire a progress event named type at e if r is CORS-same-origin, + and otherwise fire a simple event named type at e.

    -

    Eventually though, the user might obtain a description of the image from his friends and - could then include alternative text:

    +

    To restart the animation for an img element means that, + if the image is an animated image, + all animated images with the same absolute URL and the same image data in the img element's Document + are expected to restart their animation.

    - 
    <article>
- <h1>I took a photo</h1>
- <p>I went out today and took a photo!</p>
- <figure>
-  <img src="photo2.jpeg" alt="The photograph shows my squirrel
-  feeder hanging from the edge of my roof. It is half full, but there
-  are no squirrels around. In the background, out-of-focus trees fill the
-  shot. The feeder is made of wood with a metal grate, and it contains
-  peanuts. The edge of the roof is wooden too, and is painted white
-  with light blue streaks.">
-  <figcaption>A photograph taken blindly from my front porch.</figcaption>
- </figure>
-</article>
    +

    While a user agent is running the above algorithm for an element x, there + must be a strong reference from the element's Document to the element x, even if that element is not in its + Document.

    -
    +

    When an img element is in the completely available + state and the user agent can decode the media data without errors, then the + img element is said to be fully decodable.

    -
    +

    Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code + or equivalent) must be ignored when determining + the image's type and whether it is a valid image.

    -

    Sometimes the entire point of the image is that a textual description is not available, and - the user is to provide the description. For instance, the point of a CAPTCHA image is to see if - the user can literally read the graphic. Here is one way to mark up a CAPTCHA (note the title attribute):

    +

    This allows servers to return images with error responses, and have them + displayed.

    - 
    <p><label>What does this image say?
-<img src="captcha.cgi?id=8934" title="CAPTCHA">
-<input type=text name=captcha></label>
-(If you cannot see the image, you can use an <a
-href="?audio">audio</a> test instead.)</p>
    +

    The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official + type. If these rules are not applied, then the type of the image must be the type given by + the image's associated Content-Type headers.

    -

    Another example would be software that displays images and asks for alternative text - precisely for the purpose of then writing a page with correct alternative text. Such a page - could have a table of images, like this:

    +

    User agents must not support non-image resources with the img element (e.g. XML + files whose root element is an HTML element). User agents must not run executable code (e.g. + scripts) embedded in the image resource. User agents must only display the first page of a + multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an + interactive fashion, but should honor any animation in the resource.

    - 
    <table>
- <thead>
-  <tr> <th> Image <th> Description
- <tbody>
-  <tr>
-   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
-   <td> <input name="alt2421">
-  <tr>
-   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
-   <td> <input name="alt2422">
-</table>
    +

    This specification does not specify which image types are to be supported.

    -

    Notice that even in this example, as much useful information as possible is still included - in the title attribute.

    +
    -
    +

    An img element is associated with a source set.

    -

    Since some users cannot use images at all (e.g. because they have a very slow - connection, or because they are using a text-only browser, or because they are listening to the - page being read out by a hands-free automobile voice Web browser, or simply because they are - blind), the alt attribute is only allowed to be omitted rather - than being provided with replacement text when no alternative text is available and none can be - made available, as in the above examples. Lack of effort from the part of the author is not an - acceptable reason for omitting the alt attribute.

    +

    A source set is a set of zero or more image sources + and a source size.

    -
    +

    An image source is a URL, + and optionally either a density descriptor, or a width descriptor.

    +

    A source size is a <source-size-value>. + When a source size has a unit relative to the viewport, + it must be interpreted relative to the img element's document's viewport. + Other units must be interpreted the same as in Media Queries. [MQ]

    +

    When asked to select an image source for a given img element el, + user agents must do the following:

    -
    4.7.5.1.11 An image not intended for the user
    +

    1. Update the source set for el.

    2. If el's source set is empty, + return null as the URL and undefined as the pixel density and abort these steps.

    3. Otherwise, take el's source set + and let it be source set.

    4. In a user agent-specific manner, + choose one image source from source set. + Let this be selected source.

    5. Return selected source and its associated pixel density.

    -

    Generally authors should avoid using img elements for purposes other than showing - images.

    +

    When asked to update the source set for a given img element el, + user agents must do the following:

    -

    If an img element is being used for purposes other than showing an image, e.g. as - part of a service to count page views, then the alt attribute - must be the empty string.

    +

    1. Set el's source set to an empty source set.

    2. If el has a parent node and that is a picture element, + let elements be an array containing el's parent node's child elements, retaining relative order. + Otherwise, let elements be array containing only el.

    3. -

      In such cases, the width and height attributes should both be set to zero.

      +

      Iterate through elements, + doing the following for each item child:

      +
      1. -
        4.7.5.1.12 An image in an e-mail or private document intended for a specific person who is known to be able to view images
        +

        If child is el:

        -

        This section does not apply to documents that are publicly accessible, or whose target - audience is not necessarily personally known to the author, such as documents on a Web site, - e-mails sent to public mailing lists, or software documentation.

        +

        1. If child has a srcset attribute, + parse child's srcset attribute + and let the returned source set be source set. + Otherwise, let source set be an empty source set.

        2. Parse child's sizes attribute and + let source set's source size be the returned value.

        3. If child has a src attribute + whose value is not the empty string + and source set does not contain an + image source with a density descriptor value of 1, + and no image source with a width descriptor, + append child's src attribute value to source set.

        4. Let el's source set be source set.

        5. Abort this algorithm.

        -

        When an image is included in a private communication (such as an HTML e-mail) aimed at a - specific person who is known to be able to view images, the alt - attribute may be omitted. However, even in such cases authors are strongly urged to include - alternative text (as appropriate according to the kind of image involved, as described in the - above entries), so that the e-mail is still usable should the user use a mail client that does not - support images, or should the document be forwarded on to other users whose abilities might not - include easily seeing images.

        +

      2. If child is not a source element, + continue to the next child. + Otherwise, child is a source element.

      3. If child does not have a srcset attribute, + continue to the next child.

      4. Parse child's srcset attribute and + let the returned source set be source set.

      5. If source set has zero image sources, + continue to the next child.

      6. If child has a media attribute, + and its value is not a valid media query, + or is a valid media query that evaluates to false, + continue to the next child.

      7. Parse child's sizes attribute + and let source set's source size be the returned value.

      8. If child has a type attribute, + and its value is an unknown or unsupported MIME type, + continue to the next child.

      9. Normalize the source densities of source set.

      10. Let el's source set be source set.

      11. Abort this algorithm.

      +
    +

    Each img element independently considers + its previous sibling source elements + plus the img element itself + for selecting an image source, ignoring any other (invalid) elements, + including other img elements in the same picture element, + or source elements that are following siblings + of the relevant img element.

    +

    When asked to parse a srcset attribute from an element, + parse the value of the element's srcset attribute as follows:

    - +

    1. Let input be the value passed to this algorithm.

    2. Let position be a pointer into input, + initially pointing at the start of the string.

    3. Let raw candidates be an initially empty + ordered list of URLs with associated unparsed descriptor list. + The order of entries in the lists is the order in which entries are added to the lists.

    4. Splitting loop: Collect a sequence of characters + that are space characters or U+002C COMMA characters.

    5. If position is past the end of input, + then jump to the step labeled descriptor parser.

    6. Collect a sequence of characters that are not + space characters, and let that be url.

    7. Let descriptors be a new empty list.

    8. -
      4.7.5.1.13 Guidance for markup generators
      +

      If url ends with a U+002C COMMA character (,), + follow these substeps:

      -

      Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain - alternative text from their users. However, it is recognised that in many cases, this will not be - possible.

      +

      1. Remove all trailing U+002C COMMA characters from url.

      2. If url is empty, + then jump to the step labeled splitting loop.

      -

      For images that are the sole contents of links, markup generators should examine the link - target to determine the title of the target, or the URL of the target, and use information - obtained in this manner as the alternative text.

      +

      Otherwise, follow these substeps:

      -

      For images that have captions, markup generators should use the figure and - figcaption elements, or the title attribute, to - provide the image's caption.

      +

      1. Let current token be the empty string.

      2. Let state be start.

      3. -

        As a last resort, implementors should either set the alt - attribute to the empty string, under the assumption that the image is a purely decorative image - that doesn't add any information but is still specific to the surrounding content, or omit the - alt attribute altogether, under the assumption that the image is - a key part of the content.

        +

        Let c be the character at position. + Do the following depending on the value of state. + For the purpose of this step, "EOF" is a special character representing + that position is past the end of input.

        -

        Markup generators may specify a generator-unable-to-provide-required-alt - attribute on img elements for which they have been unable to obtain alternative text - and for which they have therefore omitted the alt attribute. The - value of this attribute must be the empty string. Documents containing such attributes are not - conforming, but conformance checkers will silently - ignore this error.

        +
        Start
        -

        This is intended to avoid markup generators from being pressured into replacing - the error of omitting the alt attribute with the even more - egregious error of providing phony alternative text, because state-of-the-art automated - conformance checkers cannot distinguish phony alternative text from correct alternative text.

        +

        Do the following, depending on the value of c:

        -

        Markup generators should generally avoid using the image's own file name as the alternative - text. Similarly, markup generators should avoid generating alternative text from any content that - will be equally available to presentation user agents (e.g. Web browsers).

        +
        Space character

        If current token is not empty, + append current token to descriptors + and let current token be the empty string. + Set state to after token.

        U+002C COMMA (,)

        Advance position to the next character in input. + If current token is not empty, + append current token to descriptors. + Jump to the step labeled add candidate.

        U+0028 LEFT PARANTHESIS (()

        Append c to current token. + Set state to in parens.

        EOF

        If current token is not empty, + append current token to descriptors. + Jump to the step labeled add candidate.

        Anything else

        Append c to current token.

        -

        This is because once a page is generated, it will typically not be updated, - whereas the browsers that later read the page can be updated by the user, therefore the browser is - likely to have more up-to-date and finely-tuned heuristics than the markup generator did when - generating the page.

        +
        In parens
        - +

        Do the following, depending on the value of c:

        - +
        U+0029 RIGHT PARENTHESIS ())

        Append c to current token. + Set state to start.

        EOF

        Append current token to descriptors. + Jump to the step labeled add candidate.

        Anything else

        Append c to current token.

        -
        4.7.5.1.14 Guidance for conformance checkers
        +
        After token
        -

        A conformance checker must report the lack of an alt - attribute as an error unless one of the conditions listed below applies:

        +

        Do the following, depending on the value of c:

        -

        • The img element is in a figure element that satisfies the conditions described above.

        • The img element has a title attribute with a - value that is not the empty string (also as described - above).

        • The conformance checker has been configured to assume that the document is an e-mail or - document intended for a specific person who is known to be able to view images.

        • The img element has a (non-conforming) generator-unable-to-provide-required-alt - attribute whose value is the empty string. A conformance checker that is not reporting the lack - of an alt attribute as an error must also not report the - presence of the empty generator-unable-to-provide-required-alt - attribute as an error. (This case does not represent a case where the document is conforming, - only that the generator could not determine appropriate alternative text — validators are - not required to show an error in this case, because such an error might encourage markup - generators to include bogus alternative text purely in an attempt to silence validators. - Naturally, conformance checkers may report the lack of an alt attribute as an error even in the presence of the generator-unable-to-provide-required-alt - attribute; for example, there could be a user option to report all conformance errors - even those that might be the more or less inevitable result of using a markup - generator.)

        +
        Space character

        Stay in this state.

        EOF

        Jump to the step labeled add candidate.

        Anything else

        Set state to start. + Set position to the previous character in input.

        - +
        +

        Advance position to the next character in input. + Repeat this step.

        +
      +

    9. Add candidate: Add url to raw candidates, + associated with descriptors.

    10. Return to the step labeled splitting loop.

    11. Descriptor parser: + Let candidates be an initially empty source set. + The order of entries in the list is the order in which entries are added to the list.

    12. +

      For each entry in raw candidates with URL url + associated with the unparsed descriptor list descriptor list, + run these substeps:

      -

      4.7.6 The iframe element

      +

      1. Let error be no.

      2. Let width be absent.

      3. Let density be absent.

      4. Let future-compat-h be absent.

      5. -
        Categories:
        Flow content.
        Phrasing content.
        Embedded content.
        Interactive content.
        Palpable content.
        Contexts in which this element can be used:
        Where embedded content is expected.
        Content model:
        Text that conforms to the requirements given in the prose.
        Tag omission in text/html:
        Neither tag is omissible.
        Content attributes:
        Global attributes
        src — Address of the resource
        srcdoc — A document to render in the iframe
        name — Name of nested browsing context
        sandbox — Security rules for nested content
        seamless — Whether to apply the document's styles to the nested content
        allowfullscreen — Whether to allow the iframe's contents to use requestFullscreen()
        width — Horizontal dimension
        height — Vertical dimension
        DOM interface:
        -
        interface HTMLIFrameElement : HTMLElement {
-           attribute DOMString src;
-           attribute DOMString srcdoc;
-           attribute DOMString name;
-  [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
-           attribute boolean seamless;
-           attribute boolean allowFullscreen;
-           attribute DOMString width;
-           attribute DOMString height;
-  readonly attribute Document? contentDocument;
-  readonly attribute WindowProxy? contentWindow;
+      
        For each token in descriptor list,
+      run the appropriate set of steps from the following list:
        
 
-  // also has obsolete members
-};
        -
        +
        If the token consists of a valid non-negative integer + followed by a U+0077 LATIN SMALL LETTER W character
        - +

        1. If width and density + are not both absent, + then let error be yes.

        2. Apply the rules for parsing non-negative integers to the token. + If the result is zero, let error be yes. + Otherwise, let width be the result.

        -

        The iframe element represents a nested browsing - context.

        +
        If the token consists of a valid floating-point number + followed by a U+0078 LATIN SMALL LETTER X character
        +

        1. If width, density and future-compat-h + are not all absent, + then let error be yes.

        2. - +

          Apply the rules for parsing floating-point number values to the token. + If the result is less than zero, let error be yes. + Otherwise, let density be the result.

          -

          The src attribute gives the address of a page - that the nested browsing context is to contain. The attribute, if present, must be a - valid non-empty URL potentially surrounded by spaces. If the itemprop is specified on an iframe element, then the - src attribute must also be specified.

          +

          If density is zero, + the intrinsic dimensions will be infinite. + User agents are expected to have limits in how big images can be rendered, + which is allowed by the hardware limitations clause.

          -

          The srcdoc attribute gives the content of - the page that the nested browsing context is to contain. The value of the attribute - is the source of an iframe srcdoc - document.

          +
        -

        For iframe elements in HTML documents, the srcdoc attribute, if present, must have a value using the - HTML syntax that consists of the following syntactic components, in the given order:

        +
        If the token consists of a valid non-negative integer + followed by a U+0068 LATIN SMALL LETTER H character
        -
        1. Any number of comments and space characters.
        2. Optionally, a DOCTYPE. +

          1. If future-compat-h and density + are not both absent, + then let error be yes.

          2. Apply the rules for parsing non-negative integers to the token. + If the result is zero, let error be yes. + Otherwise, let future-compat-h be the result.

          -
        3. Any number of comments and space characters.
        4. The root element, in the form of an html element.
        5. Any number of comments and space characters.
        +
        -

        For iframe elements in XML documents, the srcdoc attribute, if present, must have a value that matches the - production labeled document in the XML specification. [XML]

        +

      6. If error is still no, + then add a new image source to candidates + whose URL is url, + associated with a width width if not absent + and a pixel density density if not absent.

      -
      +

    13. Return candidates.

    -

    Here a blog uses the srcdoc attribute in conjunction - with the sandbox and seamless attributes described below to provide users of user - agents that support this feature with an extra layer of protection from script injection in the - blog post comments:

    +

    When asked to parse a sizes attribute from an element, + parse a comma-separated list of component values + from the value of the element's sizes attribute + (or the empty string, if the attribute is absent), + and let unparsed sizes list be the result. [CSSSYNTAX]

    - 
    <article>
- <h1>I got my own magazine!</h1>
- <p>After much effort, I've finally found a publisher, and so now I
- have my own magazine! Isn't that awesome?! The first issue will come
- out in September, and we have articles about getting food, and about
- getting in boxes, it's going to be great!</p>
- <footer>
-  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
- </footer>
- <article>
-  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
-  <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
- </article>
- <article>
-  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
-  <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
- </article>
- <article>
-  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
-  <iframe seamless sandbox srcdoc="<p>hey that's earl's table.
-<p>you should get earl&amp;amp;me on the next cover."></iframe>
- </article>
    +

    For each unparsed size in unparsed sizes list:

    -

    Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw - ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be - doubly escaped — once so that the ampersand is preserved when originally parsing - the srcdoc attribute, and once more to prevent the - ampersand from being misinterpreted when parsing the sandboxed content.

    +

    1. Remove all consecutive <whitespace-token>s + from the end of unparsed size. + If unparsed size is now empty, + continue to the next iteration of this algorithm.

    2. If the last component value in unparsed size + is a valid non-negative <source-size-value>, + let size be its value + and remove the component value from unparsed size. + Otherwise, continue to the next iteration of this algorithm.

    3. Remove all consecutive <whitespace-token>s + from the end of unparsed size. + If unparsed size is now empty, + return size and exit this algorithm.

    4. Parse the remaining component values in unparsed size + as a <media-condition>. + If it does not parse correctly, + or it does parse correctly but the <media-condition> evaluates to false, + continue to the next iteration of this algorithm. [MQ]

    5. Return size and exit this algorithm.

    -

    Furthermore, notice that since the DOCTYPE is optional in - iframe srcdoc documents, and the html, - head, and body elements have optional - start and end tags, and the title element is also optional in iframe srcdoc - documents, the markup in a srcdoc attribute can be - relatively succint despite representing an entire document, since only the contents of the - body element need appear literally in the syntax. The other elements are still - present, but only by implication.

    +

    If the above algorithm exhausts unparsed sizes list without returning a size value, + return 100vw.

    - +

    While a valid source size list only contains a bare <source-size-value> + (without an accompanying <media-condition>) + as the last entry in the <source-size-list>, + the parsing algorithm technically allows such at any point in the list, + and will accept it immediately as the size + if the preceding entries in the list weren't used. + This is to enable future extensions, + and protect against simple author errors such as a final trailing comma.

    -

    In the HTML syntax, authors need only remember to use U+0022 - QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0022 - QUOTATION MARK (") and U+0026 AMPERSAND (&) characters, and to specify the sandbox attribute, to ensure safe embedding of content.

    +

    An image source can have a density descriptor, + a width descriptor, + or no descriptor at all accompanying its URL. + Normalizing a source set gives every image source a density descriptor.

    -

    Due to restrictions of the XHTML syntax, in XML the U+003C LESS-THAN - SIGN character (<) needs to be escaped as well. In order to prevent attribute-value normalization, some of XML's - whitespace characters — specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED - (LF), and U+000D CARRIAGE RETURN (CR) — also need to be escaped. [XML]

    +

    When asked to normalize the source densities of a source set source set, + the user agent must do the following:

    -

    If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority. This allows authors to provide - a fallback URL for legacy user agents that do not support the srcdoc attribute.

    +

    1. Let source size be source set's source size.

    2. +

      For each image source in source set:

      - +

      1. If the image source has a density descriptor, + continue to the next image source.

      2. -
        +

        Otherwise, if the image source has a width descriptor, + replace the width descriptor with a density descriptor + with a value of the width descriptor divided by the source size + and a unit of x.

        -

        When an iframe element is inserted - into a document, the user agent must create a nested browsing context, and - then process the iframe attributes for the "first time".

        +

        If the source size is zero, + the density would be infinity, + which results in the intrinsic dimensions being zero by zero.

        -

        When an iframe element is removed - from a document, the user agent must discard the nested browsing context.

        +

      3. Otherwise, give the image source a density descriptor of 1x.

      -

      This happens without any unload events firing - (the nested browsing context and its Document are discarded, not data-x="unload a - document">unloaded).

      +
    - +

    The user agent may at any time run the following algorithm to update an img + element's image in order to react to changes in the environment. (User agents are not + required to ever run this algorithm; for example, if the user is not looking at the page any + more, the user agent might want to wait until the user has returned to the page before determining + which image to use, in case the environment changes again in the meantime.)

    -

    Whenever an iframe element with a nested browsing context has its - srcdoc attribute set, changed, or removed, the user agent - must process the iframe attributes.

    +

    1. Asynchronously await a stable state. The synchronous section + consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    2. ⌛ If the img element does not have a srcset attribute specified and it either has no parent + or it is not a picture element, is not in the completely available state, has image data whose resource type is + multipart/x-mixed-replace, or if its update the image data algorithm is + running, then abort this algorithm.

    3. ⌛ Let selected source and selected pixel + density be the URL and pixel density that results from selecting an image source, respectively.

    4. ⌛ If selected source is null, then abort these steps.

    5. ⌛ If selected source and selected pixel + density are the same as the element's last selected source and current + pixel density, then abort these steps.

    6. ⌛ Resolve selected source, + relative to the element.

    7. ⌛ Let CORS mode be the state of the element's crossorigin content attribute.

    8. ⌛ If the resolve a URL algorithm is not successful, abort these + steps.

      -

      Similarly, whenever an iframe element with a nested browsing context - but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must - process the iframe attributes.

      +

    9. End the synchronous section, continuing the remaining steps + asynchronously.

    10. -

      When the user agent is to process the iframe attributes, it must run - the first appropriate steps from the following list:

      +

      Do a potentially CORS-enabled fetch of the resulting absolute + URL, with the mode being CORS mode, the origin + being the origin of the img element's Document, and the + default origin behaviour set to taint.

      -
      If the srcdoc attribute is specified

      Navigate the element's child browsing context - to a resource whose Content-Type is text/html, whose URL - is about:srcdoc, and whose data consists of the value of the attribute. The - resulting Document must be considered an iframe srcdoc document.

      Otherwise, if the element has no src attribute - specified, and the user agent is processing the iframe's attributes for the "first - time"
      +

      If this download fails in any way (other than the response code not being a 2xx code, as + mentioned earlier), or if the image format is unsupported (as determined by applying the image sniffing rules, again as mentioned earlier), + or if the resource type is multipart/x-mixed-replace, then abort these steps.

      -

      Queue a task to run the iframe load event steps.

      +

      Otherwise, wait for the fetch algorithm to queue its last task, and then + continue with these steps. The data obtained in this way is used in the steps below.

      -

      The task source for this task is the - DOM manipulation task source.

      +
    11. -
      Otherwise
      +

      Queue a task to run the following substeps:

      -
      1. +

        1. If the img element has experienced relevant mutations + since this algorithm started, then abort these steps.

          -

          If the value of the src attribute is missing, or its - value is the empty string, let url be the string - "about:blank".

          - +

        2. Let the img element's last selected source be selected source and the img element's current pixel + density be selected pixel density.

        3. Let the img element's current request's + current URL be the resulting absolute URL from the earlier step.

        4. Replace the img element's image data with the resource obtained by the + earlier step of this algorithm. It can be either CORS-same-origin or + CORS-cross-origin; this affects the origin of the image itself (e.g. + when used on a canvas).

        5. Fire a simple event named load at the + img element.

        -

        Otherwise, resolve the value of the src attribute, relative to the iframe element.

        +
      -

      If that is not successful, then let url be the string - "about:blank". Otherwise, let url be the resulting - absolute URL.

      +
      -
    12. +

      The task source for the tasks queued by algorithms in this section is the DOM manipulation task + source.

      -

      If there exists an ancestor browsing context whose active - document's address, ignoring fragment - identifiers, is equal to url, then abort these steps.

      - - - +
      -
    13. +

      What an img element represents depends on the src attribute and the alt + attribute.

      -

      Navigate the element's child browsing context - to url.

      +
      If the src attribute is set and the alt attribute is set to the empty string
      -
    +

    The image is either decorative or supplemental to the rest of the content, redundant with + some other information in the document.

    - +

    If the image is available and the user agent is configured + to display that image, then the element represents the element's image data.

    -

    Any navigation required of the user agent in the process - the iframe attributes algorithm must be completed as an explicit - self-navigation override and with the iframe element's document's - browsing context as the source browsing context.

    +

    Otherwise, the element represents nothing, and may be omitted completely from + the rendering. User agents may provide the user with a notification that an image is present but + has been omitted from the rendering.

    -

    Furthermore, if the active document of the element's child browsing - context before such a navigation was not completely - loaded at the time of the new navigation, then the navigation must be completed with replacement enabled.

    +
    If the src attribute is set and the alt attribute is set to a value that isn't empty
    -

    Similarly, if the child browsing context's session history contained - only one Document when the process the iframe attributes - algorithm was invoked, and that was the about:blank Document created - when the child browsing context was created, then any navigation required of the user agent in that algorithm must be completed - with replacement enabled.

    +

    The image is a key part of the content; the alt attribute + gives a textual equivalent or replacement for the image.

    -

    When a Document in an iframe is marked as completely - loaded, the user agent must synchronously run the iframe load event steps.

    +

    If the image is available and the user agent is configured + to display that image, then the element represents the element's image data.

    -

    A load event is also fired at the - iframe element when it is created if no other data is loaded in it.

    +

    Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification + that an image is present but has been omitted from the rendering.

    -

    Each Document has an iframe load in progress flag and a mute - iframe load flag. When a Document is created, these flags must be unset for - that Document.

    +
    If the src attribute is set and the alt attribute is not
    -

    The iframe load event steps are as follows:

    +

    The image might be a key part of the content, and there is no textual equivalent of the image + available.

    -

    1. Let child document be the active document of the - iframe element's nested browsing context.

    2. If child document has its mute iframe load flag set, - abort these steps.

    3. Set child document's iframe load in progress - flag.

    4. Fire a simple event named load at the - iframe element.

    5. Unset child document's iframe load in progress - flag.

    +

    In a conforming document, the absence of the alt attribute indicates that the image is a key part of the content + but that a textual replacement for the image was not available when the image was generated.

    -

    This, in conjunction with scripting, can be used to probe the URL space of the - local network's HTTP servers. User agents may implement cross-origin - access control policies that are stricter than those described above to mitigate this attack, but - unfortunately such policies are typically not compatible with existing Web content.

    +

    If the image is available and the user agent is configured + to display that image, then the element represents the element's image data.

    -

    When the iframe's browsing context's active document is - not ready for post-load tasks, and when anything in the iframe is delaying the load event of the iframe's - browsing context's active document, and when the iframe's - browsing context is in the delaying load events - mode, the iframe must delay the load event of its document.

    +

    Otherwise, the user agent should display some sort of indicator that there is an image that + is not being rendered, and may, if requested by the user, or if so configured, or when required + to provide contextual information in response to navigation, provide caption information for the + image, derived as follows:

    -

    If, during the handling of the load event, the - browsing context in the iframe is again navigated, that will further delay the load event.

    +

    1. If the image has a title attribute whose value is not + the empty string, then the value of that attribute is the caption information; abort these + steps.

    2. If the image is a descendant of a figure element that has a child + figcaption element, and, ignoring the figcaption element and its + descendants, the figure element has no flow content descendants other + than inter-element whitespace and the img element, then the contents of the first such + figcaption element are the caption information; abort these steps.

    3. There is no caption information.

    - +
    If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all
    - +

    The element represents nothing.

    -

    If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be - resolved, the browsing context will remain at the initial - about:blank page.

    +
    Otherwise
    -

    If the user navigates away from this page, the - iframe's corresponding WindowProxy object will proxy new - Window objects for new Document objects, but the src attribute will not change.

    +

    The element represents the text given by the alt attribute.

    + -
    +

    The alt attribute does not represent advisory information. + User agents must not present the contents of the alt attribute + in the same way as content of the title attribute.

    -

    The name attribute, if present, must be a - valid browsing context name. The given value is used to name the nested - browsing context. When the browsing context is created, if the attribute - is present, the browsing context name must be set to the value of this attribute; - otherwise, the browsing context name must be set to the empty string.

    +

    User agents may always provide the user with the option to display any image, or to prevent any + image from being displayed. User agents may also apply heuristics to help the user make use of the + image when the user is unable to see it, e.g. due to a visual disability or because they are using + a text terminal with no graphics capabilities. Such heuristics could include, for instance, + optical character recognition (OCR) of text found within the image.

    - +

    While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described + in detail below.

    -

    Whenever the name attribute is set, the nested - browsing context's name must be changed to - the new value. If the attribute is removed, the browsing context name must be set to - the empty string.

    +

    The contents of img elements, if any, are ignored for the purposes of + rendering.

    +
    -
    - -

    The sandbox attribute, when specified, - enables a set of extra restrictions on any content hosted by the iframe. Its value - must be an unordered set of unique space-separated tokens that are ASCII - case-insensitive. The allowed values are allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation.

    - -

    When the attribute is set, the content is treated as being from a unique origin, - forms, scripts, and various potentially annoying APIs are disabled, links are prevented from - targeting other browsing contexts, and plugins are secured. - The allow-same-origin keyword causes - the content to be treated as being from its real origin instead of forcing it into a unique - origin; the allow-top-navigation - keyword allows the content to navigate its top-level browsing context; - and the allow-forms, allow-pointer-lock, allow-popups and allow-scripts keywords re-enable forms, the - pointer lock API, popups, and scripts respectively. [POINTERLOCK]

    +

    The usemap attribute, + if present, can indicate that the image has an associated + image map.

    -

    Setting both the allow-scripts and allow-same-origin keywords together when the - embedded page has the same origin as the page containing the iframe - allows the embedded page to simply remove the sandbox - attribute and then reload itself, effectively breaking out of the sandbox altogether.

    +

    The ismap + attribute, when used on an element that is a descendant of an + a element with an href attribute, indicates by its + presence that the element provides access to a server-side image + map. This affects how events are handled on the corresponding + a element.

    -

    These flags only take effect when the nested browsing context of - the iframe is navigated. Removing them, or removing the - entire sandbox attribute, has no effect on an - already-loaded page.

    +

    The ismap attribute is a + boolean attribute. The attribute must not be specified + on an element that does not have an ancestor a element + with an href attribute.

    -

    Potentially hostile files should not be served from the same server as the file - containing the iframe element. Sandboxing hostile content is of minimal help if an - attacker can convince the user to just visit the hostile content directly, rather than in the - iframe. To limit the damage that can be caused by hostile HTML content, it should be - served from a separate dedicated domain. Using a different domain ensures that scripts in the - files are unable to attack the site, even if the user is tricked into visiting those pages - directly, without the protection of the sandbox - attribute.

    +

    The usemap and + ismap attributes + can result in confusing behavior when used together with + source elements with the + media attribute specified + in a picture element.

    - +

    The img element supports dimension + attributes.

    -

    When an iframe element with a sandbox - attribute has its nested browsing context created (before the initial - about:blank Document is created), and when an iframe - element's sandbox attribute is set or changed while it - has a nested browsing context, the user agent must parse the sandboxing directive using the attribute's value as the input, the iframe element's nested browsing context's - iframe sandboxing flag set as the output, and, if the - iframe has an allowfullscreen - attribute, the allow fullscreen flag.

    +

    The alt, src, srcset and sizes IDL attributes must reflect the + respective content attributes of the same name.

    -

    When an iframe element's sandbox - attribute is removed while it has a nested browsing context, the user agent must - empty the iframe element's nested browsing context's - iframe sandboxing flag set as the output.

    +

    The crossOrigin IDL attribute must + reflect the crossorigin content attribute, + limited to only known values.

    - +

    The useMap IDL attribute must + reflect the usemap content attribute.

    -
    +

    The isMap IDL attribute must reflect + the ismap content attribute.

    -

    In this example, some completely-unknown, potentially hostile, user-provided HTML content is - embedded in a page. Because it is served from a separate domain, it is affected by all the normal - cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, - forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or - windows it itself embeds).

    + - 
    <p>We're not scared of you! Here is your content, unedited:</p>
-<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
    -

    It is important to use a separate domain so that if the attacker convinces the - user to visit that page directly, the page doesn't run in the context of the site's origin, which - would make the user vulnerable to any attack found in the page.

    +
    image . width [ = value ]
    image . height [ = value ]
    -
    -
    +

    These attributes return the actual rendered dimensions of the + image, or zero if the dimensions are not known.

    -

    In this example, a gadget from another site is embedded. The gadget has scripting and forms - enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with - its originating server. The sandbox is still useful, however, as it disables plugins and popups, - thus reducing the risk of the user being exposed to malware and other annoyances.

    +

    They can be set, to change the corresponding content + attributes.

    - 
    <iframe sandbox="allow-same-origin allow-forms allow-scripts"
-        src="http://maps.example.com/embedded.html"></iframe>
    +
    image . naturalWidth
    image . naturalHeight
    - -
    +

    These attributes return the intrinsic dimensions of the image, + or zero if the dimensions are not known.

    -

    Suppose a file A contained the following fragment:

    +
    image . complete
    - 
    <iframe sandbox="allow-same-origin allow-forms" src=B></iframe>
    -

    Suppose that file B contained an iframe also:

    +

    Returns true if the image has been completely downloaded or if + no image is specified; otherwise, returns false.

    - 
    <iframe sandbox="allow-scripts" src=C></iframe>
    +
    image . currentSrc
    -

    Further, suppose that file C contained a link:

    +

    Returns the image's absolute URL.

    - 
    <a href=D>Link</a>
    +
    image = new Image( [ width [, height ] ] )
    -

    For this example, suppose all the files were served as text/html.

    -

    Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the - iframe in A has scripts disabled, and this overrides the allow-scripts keyword set on the - iframe in B. Forms are also disabled, because the inner iframe (in B) - does not have the allow-forms keyword - set.

    +

    Returns a new img element, with the width and height attributes set to the values + passed in the relevant arguments, if applicable.

    -

    Suppose now that a script in A removes all the sandbox attributes in A and B. - This would change nothing immediately. If the user clicked the link in C, loading page D into the - iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the - state of the nested browsing context in the iframe in A when page B was - loaded.

    + -

    Generally speaking, dynamically removing or changing the sandbox attribute is ill-advised, because it can make it quite - hard to reason about what will be allowed and what will not.

    + - +

    The IDL attributes width and height must return the rendered width and height of the + image, in CSS pixels, if the image is being rendered, and is being rendered to a + visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is + available but not being rendered to a visual medium; or else 0, if + the image is not available. [CSS]

    +

    On setting, they must act as if they reflected the respective + content attributes of the same name.

    -
    +

    The IDL attributes naturalWidth and naturalHeight must return the intrinsic width and + height of the image, in CSS pixels, if the image is available, or + else 0. [CSS]

    -

    The seamless attribute is a boolean - attribute. When specified, it indicates that the iframe element's - browsing context is to be rendered in a manner that makes it appear to be part of the - containing document (seamlessly included in the parent document).

    +

    The IDL attribute complete must return true if + any of the following conditions is true:

    -
    +
    • Both the src attribute and the srcset attribute are omitted. -

      An HTML inclusion is effected using this attribute as in the following example. - In this case, the inclusion is of a site-wide navigation bar. Any links in the - iframe will, in new user agents, be automatically opened in the - iframe's parent browsing context; for legacy user agents, the site could also - include a base element with a target - attribute with the value _parent. Similarly, in new user agents the styles - of the parent page will be automatically applied to the contents of the frame, but to support - legacy user agents authors might wish to include the styles explicitly.

      +
    • The srcset attribute is omitted and the src attribute's value is the empty string. - 
      <!DOCTYPE HTML>
-<title>Mirror Mirror — MovieInfo™</title>
-<header>
- <hgroup>
-  <h1>Mirror Mirror</h1>
-  <h2>Part of the MovieInfo™ Database</h2>
- </hgroup>
- <nav>
-  <iframe seamless src="nav.inc"></iframe>
- </nav>
-</header>
-...
      +
    • The final task that is queued by the networking task source once the resource has been fetched has been queued. -
    +
  • The img element is completely available. - +
  • The img element is broken. -

    An iframe element is said to be in seamless mode when all of the - following conditions are met:

    + - +

    A single image can have different appropriate alternative text depending on the context.

    -

    When an iframe element is in seamless mode, the following - requirements apply:

    +

    In each of the following cases, the same image is used, yet the alt text is different each time. The image is the coat of arms of the + Carouge municipality in the canton Geneva in Switzerland.

    -

    • The user agent must set the seamless browsing context flag to true for that - browsing context. This will cause links to open in the - parent browsing context unless an explicit self-navigation override is used - (target="_self").

    • Media queries in the context of the iframe's browsing context - (e.g. on media attributes of style elements in - Documents in that iframe) must be evaluated with respect to the nearest - ancestor browsing context that is not itself being nested through an iframe that is in seamless - mode. [MQ]

    • In a CSS-supporting user agent: the user agent must add all the style sheets that apply to - the iframe element to the cascade of the active document of the - iframe element's nested browsing context, at the appropriate cascade - levels, before any style sheets specified by the document itself.

    • In a CSS-supporting user agent: the user agent must, for the purpose of CSS property - inheritance only, treat the root element of the active document of the - iframe element's nested browsing context as being a child of the - iframe element. (Thus inherited properties on the root element of the document in - the iframe will inherit the computed values of those properties on the - iframe element instead of taking their initial values.)

    • In visual media, in a CSS-supporting user agent: the user agent should set the intrinsic - width of the iframe to the width that the element would have if it was a - non-replaced block-level element with 'width: auto', unless that width would be zero (e.g. if the - element is floating or absolutely positioned), in which case the user agent should set the - intrinsic width of the iframe to the shrink-to-fit width of the root element (if - any) of the content rendered in the iframe.

    • In visual media, in a CSS-supporting user agent: the user agent should set the intrinsic - height of the iframe to the shortest height that would make the content rendered in - the iframe at its current width (as given in the previous bullet point) have no - scrollable overflow at its bottom edge. Scrollable overflow is any overflow that would increase the range to - which a scrollbar or other scrolling mechanism can scroll.

    • +

      Here it is used as a supplementary icon:

      + 
      <p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>
      -

      In visual media, in a CSS-supporting user agent: the user agent must force the height of the - initial containing block of the active document of the nested browsing - context of the iframe to zero.

      +

      Here it is used as an icon representing the town:

      + 
      <p>Home town: <img src="carouge.svg" alt="Carouge"></p>
      -

      This is intended to get around the otherwise circular dependency of percentage - dimensions that depend on the height of the containing block, thus affecting the height of the - document's bounding box, thus affecting the height of the viewport, thus affecting the size of - the initial containing block.

      +

      Here it is used as part of a text on the town:

      -

    • In speech media, the user agent should render the nested browsing context - without announcing that it is a separate document.

    • + 
      <p>Carouge has a coat of arms.</p>
+<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
+<p>It is used as decoration all over the town.</p>
      -

      User agents should, in general, act as if the active document of the - iframe's nested browsing context was part of the document that the - iframe is in, if any.

      +

      Here it is used as a way to support a similar text where the description is given as well as, + instead of as an alternative to, the image:

      -

      For example if the user agent supports listing all the links in a document, - links in "seamlessly" nested documents would be included in that list without being - significantly distinguished from links in the document itself.

      + 
      <p>Carouge has a coat of arms.</p>
+<p><img src="carouge.svg" alt=""></p>
+<p>The coat of arms depicts a lion, sitting in front of a tree.
+It is used as decoration all over the town.</p>
      -

    • The nested browsing context's Window object's - cross-boundary event parent is the browsing context container. [DOM]

    +

    Here it is used as part of a story:

    -

    If the attribute is not specified, or if the origin conditions listed above are - not met, then the user agent should render the nested browsing context in a manner - that is clearly distinguishable as a separate browsing context, and the - seamless browsing context flag must be set to false for that browsing - context.

    + 
    <p>He picked up the folder and a piece of paper fell out.</p>
+<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
+red background, a green tree, and a yellow lion with its tongue
+hanging out and whose tail was shaped like an S."></p>
+<p>He stared at the folder. S! The answer he had been looking for all
+this time was simply the letter S! How had he not seen that before? It all
+came together now. The phone call where Hector had referred to a lion's tail,
+the time Marco had stuck his tongue out...</p>
    -

    It is important that user agents recheck the above conditions whenever the - active document of the nested browsing context of the - iframe changes, such that the seamless browsing context flag gets unset - if the nested browsing context is navigated to another - origin.

    +

    Here it is not known at the time of publication what the image will be, only that it will be a + coat of arms of some kind, and thus no replacement text can be provided, and instead only a brief + caption for the image is provided, in the title attribute:

    - + 
    <p>The last user to have uploaded a coat of arms uploaded this one:</p>
+<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>
    -

    The attribute can be set or removed dynamically, with the rendering updating in - tandem.

    +

    Ideally, the author would find a way to provide real replacement text even in this case, e.g. + by asking the previous user. Not providing replacement text makes the document more difficult to + use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth + connections or who pay by the byte, or users who are forced to use a text-only Web browser.

    -

    The contenteditable attribute does not - propagate into seamless iframes.

    + +
    -
    +

    Here are some more examples showing the same picture used in different contexts, with + different appropriate alternate texts each time.

    -

    The allowfullscreen attribute is a - boolean attribute. When specified, it indicates that Document objects in - the iframe element's browsing context are to be allowed to use requestFullscreen() (if it's not blocked for other - reasons, e.g. there is another ancestor iframe without this attribute set).

    + 
    <article>
+ <h1>My cats</h1>
+ <h2>Fluffy</h2>
+ <p>Fluffy is my favorite.</p>
+ <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
+ <p>She's just too cute.</p>
+ <h2>Miles</h2>
+ <p>My other cat, Miles just eats and sleeps.</p>
+</article>
    -
    + 
    <article>
+ <h1>Photography</h1>
+ <h2>Shooting moving targets indoors</h2>
+ <p>The trick here is to know how to anticipate; to know at what speed and
+ what distance the subject will pass by.</p>
+ <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
+ photographed quite nicely using this technique.">
+ <h2>Nature by night</h2>
+ <p>To achieve this, you'll need either an extremely sensitive film, or
+ immense flash lights.</p>
+</article>
    -

    Here, an iframe is used to embed a player from a video site. The allowfullscreen attribute is needed to enable the - player to show its video full-screen.

    + 
    <article>
+ <h1>About me</h1>
+ <h2>My pets</h2>
+ <p>I've got a cat named Fluffy and a dog named Miles.</p>
+ <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
+ <p>My dog Miles and I like go on long walks together.</p>
+ <h2>music</h2>
+ <p>After our walks, having emptied my mind, I like listening to Bach.</p>
+</article>
    <article>
- <header>
-  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
-  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
- </header>
- <main>
-  <p>Check out my new ride!</p>
-  <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
- </main>
+ <h1>Fluffy and the Yarn</h1>
+ <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
+ <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
+ <p>He would play in the morning, he would play in the evening.</p>
 </article>
    + -
    -

    The iframe element supports dimension attributes for cases where the - embedded content has specific dimensions (e.g. ad units have well-defined dimensions).

    +
    4.8.5.1 Requirements for providing text to act as an alternative for images
    -

    An iframe element never has fallback content, as it will always - create a nested browsing context, regardless of whether the specified initial - contents are successfully used.

    +
    4.8.5.1.1 General guidelines
    -
    +

    Except where otherwise specified, the alt attribute must be + specified and its value must not be empty; the value must be an appropriate replacement for the + image. The specific requirements for the alt attribute depend on + what the image is intended to represent, as described in the following sections.

    -

    Descendants of iframe elements represent nothing. (In legacy user agents that do - not support iframe elements, the contents would be parsed as markup that could act as - fallback content.)

    +

    The most general rule to consider when writing alternative text is the following: the + intent is that replacing every image with the text of its alt + attribute not change the meaning of the page.

    -

    When used in HTML documents, the allowed content model - of iframe elements is text, except that invoking the HTML fragment parsing - algorithm with the iframe element as the context element and the text contents as the input must result in a list of nodes that are all phrasing content, - with no parse errors having occurred, with no script - elements being anywhere in the list or as descendants of elements in the list, and with all the - elements in the list (including their descendants) being themselves conforming.

    +

    So, in general, alternative text can be written by considering what one would have written had + one not been able to include the image.

    -

    The iframe element must be empty in XML documents.

    +

    A corollary to this is that the alt attribute's value should + never contain text that could be considered the image's caption, title, or + legend. It is supposed to contain replacement text that could be used by users + instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.

    -

    The HTML parser treats markup inside iframe elements as - text.

    +

    Another corollary is that the alt attribute's value should + not repeat information that is already provided in the prose next to the image.

    +

    One way to think of alternative text is to think about how you would read the page + containing the image to someone over the phone, without mentioning that there is an image present. + Whatever you say instead of the image is typically a good start for writing the alternative + text.

    - -
    + -

    The IDL attributes src, srcdoc, name, sandbox, and seamless must reflect the respective - content attributes of the same name.

    +

    When an a element that creates a hyperlink, or a button + element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of + the link or button.

    -

    The allowFullscreen IDL attribute - must reflect the allowfullscreen - content attribute.

    +
    -

    The contentDocument IDL attribute - must return the Document object of the active document of the - iframe element's nested browsing context, if any and if its - effective script origin is the same origin as the effective script - origin specified by the incumbent settings object, or null otherwise.

    +

    In this example, a user is asked to pick his preferred colour from a list of three. Each colour + is given by an image, but for users who have configured their user agent not to display images, + the colour names are used instead:

    -

    The contentWindow IDL attribute must - return the WindowProxy object of the iframe element's nested - browsing context, if any, or null otherwise.

    + 
    <h1>Pick your colour</h1>
+<ul>
+ <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
+ <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
+ <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
+</ul>
    - +
    -

    Here is an example of a page using an iframe to include advertising from an - advertising broker:

    +

    In this example, each button has a set of images to indicate the kind of colour output desired + by the user. The first image is used in each case to give the alternative text.

    - 
    <iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
-        width="468" height="60"></iframe>
    + 
    <button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
+<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
    -
    +

    Since each image represents one part of the text, it could also be written like this:

    + 
    <button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
+<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>
    +

    However, with other alternative text, this might not work, and putting all the alternative + text into one image in each case might make more sense:

    + 
    <button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
+<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
    -

    4.7.7 The embed element

    +
    -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    src — Address of the resource
    type — Type of embedded resource
    width — Horizontal dimension
    height — Vertical dimension
    Any other attribute that has no namespace (see prose).
    DOM interface:
    -
    interface HTMLEmbedElement : HTMLElement {
-           attribute DOMString src;
-           attribute DOMString type;
-           attribute DOMString width;
-           attribute DOMString height;
-  legacycaller any (any... arguments);
+  
    4.8.5.1.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
    
 
-  // also has obsolete members
-};
    - -

    Depending on the type of content instantiated by the - embed element, the node may also support other - interfaces.

    - -
    +

    Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a + diagram, a graph, or a simple map showing directions. In such cases, an image can be given using + the img element, but the lesser textual version must still be given, so that users + who are unable to view the image (e.g. because they have a very slow connection, or because they + are using a text-only browser, or because they are listening to the page being read out by a + hands-free automobile voice Web browser, or simply because they are blind) are still able to + understand the message being conveyed.

    -

    The embed element provides an integration point for an external (typically - non-HTML) application or interactive content.

    +

    The text must be given in the alt attribute, and must convey + the same message as the image specified in the src + attribute.

    -

    The src attribute gives the address of the - resource being embedded. The attribute, if present, must contain a valid non-empty URL - potentially surrounded by spaces.

    +

    It is important to realise that the alternative text is a replacement for the image, + not a description of the image.

    -

    If the itemprop attribute is specified on an - embed element, then the src attribute must also - be specified.

    +
    -

    The type attribute, if present, gives the - MIME type by which the plugin to instantiate is selected. The value must be a - valid MIME type. If both the type attribute and - the src attribute are present, then the type attribute must specify the same type as the explicit Content-Type metadata of the resource given by the src attribute.

    +

    In the following example we have a flowchart + in image form, with text in the alt attribute rephrasing the + flowchart in prose form:

    - + 
    <p>In the common case, the data handled by the tokenization stage
+comes from the network, but it can also come from script.</p>
+<p><img src="images/parsing-model-overview.png" alt="The Network
+passes data to the Input Stream Preprocessor, which passes it to the
+Tokenizer, which passes it to the Tree Construction stage. From there,
+data goes to both the DOM and to Script Execution. Script Execution is
+linked to the DOM, and, using document.write(), passes data to the
+Tokenizer."></p>
    -

    While any of the following conditions are occurring, any plugin instantiated for - the element must be removed, and the embed element represents - nothing:

    +
    - +
    -

    An embed element is said to be potentially - active when the following conditions are all met simultaneously:

    +

    Here's another example, showing a good solution and a bad solution to the problem of including + an image in a description.

    - +

    First, here's the good solution. This sample shows how the alternative text should just be + what you would have put in the prose if the image had never existed.

    -

    Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is - remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must - queue a task using the embed task source to run the - embed element setup steps.

    + 
    <!-- This is the correct way to do things. -->
+<p>
+ You are standing in an open field west of a house.
+ <img src="house.jpeg" alt="The house is white, with a boarded front door.">
+ There is a small mailbox here.
+</p>
    + +

    Second, here's the bad solution. In this incorrect way of doing things, the alternative text + is simply a description of the image, instead of a textual replacement for the image. It's bad + because when the image isn't shown, the text doesn't flow as well as in the first example.

    + + 
    <!-- This is the wrong way to do things. -->
+<p>
+ You are standing in an open field west of a house.
+ <img src="house.jpeg" alt="A white house, with a boarded front door.">
+ There is a small mailbox here.
+</p>
    -

    The embed element setup steps are as follows:

    +

    Text such as "Photo of white house with boarded door" would be equally bad alternative text + (though it could be suitable for the title attribute or in the + figcaption element of a figure with this image).

    -

    1. If another task has since been queued to run the - embed element setup steps for this element, then abort these steps.

    2. +
    -
    If the element has a src attribute set
    -

    The user agent must resolve the value of the element's - src attribute, relative to the element. If that is - successful, the user agent should fetch the resulting absolute - URL, from the element's browsing context scope origin if it has one. The task that - is queued by the networking task source once - the resource has been fetched must run the following steps:

    - +
    4.8.5.1.4 A short phrase or label with an alternative graphical representation: icons, logos
    -

    1. If another task has since been queued to run - the embed element setup steps for this element, then abort these - steps.

    2. +

      A document can contain information in iconic form. The icon is intended to help users of visual + browsers to recognise features at a glance.

      -

      Determine the type of the content being embedded, as - follows (stopping at the first substep that determines the type):

      +

      In some cases, the icon is supplemental to a text label conveying the same meaning. In those + cases, the alt attribute must be present but must be empty.

      -

      1. If the element has a type attribute, and that - attribute's value is a type that a plugin supports, then the value of the - type attribute is the content's type.

      2. +
        - +

        Here the icons are next to text that conveys the same meaning, so they have an empty alt attribute:

        -

        Otherwise, if applying the URL parser algorithm to the URL of - the specified resource (after any redirects) results in a parsed URL whose - path component matches a pattern that a - plugin supports, then the content's - type is the type that that plugin can handle.

        + 
        <nav>
+ <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
+ <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
+ Configuration Tools</a></p>
+</nav>
        -

        For example, a plugin might say that it can handle resources with path components that end with the four character string - ".swf".

        +
        - - +

        In other cases, the icon has no text next to it describing what it means; the icon is supposed + to be self-explanatory. In those cases, an equivalent textual label must be given in the alt attribute.

        -

      3. Otherwise, if the specified resource has explicit - Content-Type metadata, then that is the content's - type.

      4. Otherwise, the content has no type and there - can be no appropriate plugin for it.

      +
      -
    3. +

      Here, posts on a news site are labeled with an icon indicating their topic.

      -

      If the previous step determined that the content's - type is image/svg+xml, then run the following substeps:

      + 
      <body>
+ <article>
+  <header>
+   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
+   <p><img src="movies.png" alt="Movies"></p>
+  </header>
+  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
+  making this its 8th win in the last 12 years.</p>
+ </article>
+ <article>
+  <header>
+   <h1>Latest TWiT episode is online</h1>
+   <p><img src="podcasts.png" alt="Podcasts"></p>
+  </header>
+  <p>The latest TWiT episode has been posted, in which we hear
+  several tech news stories as well as learning much more about the
+  iPhone. This week, the panelists compare how reflective their
+  iPhones' Apple logos are.</p>
+ </article>
+</body>
      -

      1. If the embed element is not associated with a nested browsing - context, associate the element with a newly created nested browsing - context, and, if the element has a name - attribute, set the browsing context name of the element's nested - browsing context to the value of this attribute.

        - + -

      2. Navigate the nested browsing context to - the fetched resource, with replacement enabled, and with the - embed element's document's browsing context as the source - browsing context. (The src attribute of the - embed element doesn't get updated if the browsing context gets further - navigated to other locations.)

      3. The embed element now represents its associated - nested browsing context.

      +

      Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such + as a company, organization, project, band, software package, country, or some such.

      -
    4. +

      If the logo is being used to represent the entity, e.g. as a page heading, the alt attribute must contain the name of the entity being represented by + the logo. The alt attribute must not contain text like + the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity + itself.

      -

      Otherwise, find and instantiate an appropriate plugin based on the content's type, and hand that plugin the - content of the resource, replacing any previously instantiated plugin for the element. The - embed element now represents this plugin instance.

      +

      If the logo is being used next to the name of the entity that it represents, then the logo is + supplemental, and its alt attribute must instead be empty.

      -

    5. Once the resource or plugin has completely loaded, queue a task to - fire a simple event named load at the - element.

    +

    If the logo is merely used as decorative material (as branding, or, for example, as a side + image in an article that mentions the entity to which the logo belongs), then the entry below on + purely decorative images applies. If the logo is actually being discussed, then it is being used + as a phrase or paragraph (the description of the logo) with an alternative graphical + representation (the logo itself), and the first entry above applies.

    -

    Whether the resource is fetched successfully or not (e.g. whether the response code was a - 2xx code or equivalent) must be ignored - when determining the content's type and when handing - the resource to the plugin.

    +
    -

    This allows servers to return data for plugins even with error responses (e.g. - HTTP 500 Internal Server Error codes can still contain plugin data).

    +

    In the following snippets, all four of the above cases are present. First, we see a logo used + to represent a company:

    -

    Fetching the resource must delay the load event of the element's document.

    - - - + 
    <h1><img src="XYZ.gif" alt="The XYZ company"></h1>
    -
    If the element has no src attribute set
    +

    Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have + any alternative text: -

    The user agent should find and instantiate an appropriate plugin based on the - value of the type attribute. The embed - element now represents this plugin instance.

    + 
    <article>
+ <h2>News</h2>
+ <p>We have recently been looking at buying the <img src="alpha.gif"
+ alt=""> ΑΒΓ company, a small Greek company
+ specializing in our type of product.</p>
    -

    Once the plugin is completely loaded, queue a task to fire a simple - event named load at the element.

    +

    In this third snippet, we have a logo being used in an aside, as part of the larger article + discussing the acquisition:

    -
    +
     <aside><p><img src="alpha-large.gif" alt=""></p></aside>
+ <p>The ΑΒΓ company has had a good quarter, and our
+ pie chart studies of their accounts suggest a much bigger blue slice
+ than its green and orange slices, which is always a good sign.</p>
+</article>
    - +

    Finally, we have an opinion piece talking about a logo, and the logo is therefore described in + detail in the alternative text.

    -

    The embed element has no fallback content. If the user agent can't - find a suitable plugin when attempting to find and instantiate one for the algorithm above, then - the user agent must use a default plugin. This default could be as simple as saying "Unsupported - Format".

    + 
    <p>Consider for a moment their logo:</p>
 
-  
    Whenever an embed element that was potentially
-  active stops being potentially active, any
-  plugin that had been instantiated for that element must be unloaded.
    
+<p><img src="/images/logo" alt="It consists of a green circle with a
+green question mark centered inside it."></p>
 
-  
    When a plugin is to be instantiated but it cannot be secured and the sandboxed plugins browsing context
-  flag is set on the embed element's Document's active
-  sandboxing flag set, then the user agent must not instantiate the plugin, and
-  must instead render the embed element in a manner that conveys that the
-  plugin was disabled. The user agent may offer the user the option to override the
-  sandbox and instantiate the plugin anyway; if the user invokes such an option, the
-  user agent must act as if the conditions above did not apply for the purposes of this element.
    
+<p>How unoriginal can you get? I mean, oooooh, a question mark, how
+<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
+sure everyone will rush to adopt those specifications now! They could
+at least have tried for some sort of, I don't know, sequence of
+rounded squares with varying shades of green and bold white outlines,
+at least that would look good on the cover of a blue book.</p>
    -

    Plugins that cannot be secured are - disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by - the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User - agents should convey the danger of overriding the sandbox to the user if an option to do so is - provided.

    +

    This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into + the surrounding text, as if the image had never been there in the first place.

    -

    When an embed element represents a nested browsing context: if the - embed element's nested browsing context's active document - is not ready for post-load tasks, and when anything is delaying the load event of the embed element's browsing - context's active document, and when the embed element's - browsing context is in the delaying load - events mode, the embed must delay the load event of its - document.

    + -

    The task source for the tasks mentioned in this - section is the DOM manipulation task source.

    - +
    4.8.5.1.5 Text that has been rendered to a graphic for typographical effect
    -

    Any namespace-less attribute other than name, align, hspace, and vspace may be - specified on the embed element, so long as its name is XML-compatible - and contains no uppercase ASCII letters. These attributes are then passed as - parameters to the plugin.

    +

    Sometimes, an image just consists of text, and the purpose of the image is not to highlight the + actual typographic effects used to render the text, but just to convey the text itself.

    -

    All attributes in HTML documents get lowercased automatically, so the - restriction on uppercase letters doesn't affect such documents.

    +

    In such cases, the alt attribute must be present but must + consist of the same text as written in the image itself.

    -

    The four exceptions are to exclude legacy attributes that have side-effects beyond - just sending parameters to the plugin.

    +
    - +

    Consider a graphic containing the text "Earth Day", but with the letters all decorated with + flowers and plants. If the text is merely being used as a heading, to spice up the page for + graphical users, then the correct alternative text is just the same text "Earth Day", and no + mention need be made of the decorations:

    -

    The user agent should pass the names and values of all the attributes of the embed - element that have no namespace to the plugin used, when one is instantiated.

    + 
    <h1><img src="earthdayheading.png" alt="Earth Day"></h1>
    -

    The HTMLEmbedElement object representing the element must expose the scriptable - interface of the plugin instantiated for the embed element, if any. At a - minimum, this interface must implement the legacy caller - operation. (It is suggested that the default behavior of this legacy caller operation, e.g. - the behavior of the default plugin's legacy caller operation, be to throw a - NotSupportedError exception.)

    +
    - +
    -

    The embed element supports dimension attributes.

    +

    An illuminated manuscript might use graphics for some of its images. The alternative text in + such a situation is just the character that the image represents.

    - + 
    <p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
+night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
+away, in a small house, on a hill, under a full moon...
    -

    The IDL attributes src and type each must reflect the respective - content attributes of the same name.

    +
    - +

    When an image is used to represent a character that cannot otherwise be represented in Unicode, + for example gaiji, itaiji, or new characters such as novel currency symbols, the alternative text + should be a more conventional way of writing the same thing, e.g. using the phonetic hiragana or + katakana to give the character's pronunciation.

    -

    Here's a way to embed a resource that requires a proprietary plugin, like Flash:

    - - 
    <embed src="catgame.swf">
    +

    In this example from 1997, a new-fangled currency symbol that looks like a curly E with two + bars in the middle instead of one is represented using an image. The alternative text gives the + character's pronunication.

    -

    If the user does not have the plugin (for example if the plugin vendor doesn't support the - user's platform), then the user will be unable to use the resource.

    + 
    <p>Only <img src="euro.png" alt="euro ">5.99!
    -

    To pass the plugin a parameter "quality" with the value "high", an attribute can be - specified:

    +
    - 
    <embed src="catgame.swf" quality="high">
    +

    An image should not be used if Unicode characters would serve an identical purpose. Only when + the text cannot be directly represented using Unicode, e.g. because of decorations or because the + character is not in the Unicode character set (as in the case of gaiji), would an image be + appropriate.

    -

    This would be equivalent to the following, when using an object element - instead:

    +

    If an author is tempted to use an image because their default system font does not + support a given character, then Web Fonts are a better solution than images.

    - 
    <object data="catgame.swf">
- <param name="quality" value="high">
-</object>
    - +
    4.8.5.1.6 A graphical representation of some of the surrounding text
    +

    In many cases, the image is actually just supplementary, and its presence merely reinforces the + surrounding text. In these cases, the alt attribute must be + present but its value must be the empty string.

    +

    In general, an image falls into this category if removing the image doesn't make the page any + less useful, but including the image makes it a lot easier for users of visual browsers to + understand the concept.

    -

    4.7.8 The object element

    +
    -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a usemap attribute: Interactive content.
    Listed, submittable, and reassociateable form-associated element.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Zero or more param elements, then, transparent.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    data — Address of the resource
    type — Type of embedded resource
    typemustmatch — Whether the type attribute and the Content-Type value need to match for the resource to be used
    name — Name of nested browsing context
    usemap — Name of image map to use
    form — Associates the control with a form element
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    -
    interface HTMLObjectElement : HTMLElement {
-           attribute DOMString data;
-           attribute DOMString type;
-           attribute boolean typeMustMatch;
-           attribute DOMString name;
-           attribute DOMString useMap;
-  readonly attribute HTMLFormElement? form;
-           attribute DOMString width;
-           attribute DOMString height;
-  readonly attribute Document? contentDocument;
-  readonly attribute WindowProxy? contentWindow;
+   
    A flowchart that repeats the previous paragraph in graphical form:
    
 
-  readonly attribute boolean willValidate;
-  readonly attribute ValidityState validity;
-  readonly attribute DOMString validationMessage;
-  boolean checkValidity();
-  boolean reportValidity();
-  void setCustomValidity(DOMString error);
+   
    <p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<p><img src="images/parsing-model-overview.png" alt=""></p>
    
 
-  legacycaller any (any... arguments);
+   
    In these cases, it would be wrong to include alternative text that consists of just a caption.
+   If a caption is to be included, then either the title attribute
+   can be used, or the figure and figcaption elements can be used. In the
+   latter case, the image would in fact be a phrase or paragraph with an alternative graphical
+   representation, and would thus require alternative text.
    
 
-  // also has obsolete members
-};
    - -

    Depending on the type of content instantiated by the - object element, the node also supports other - interfaces.

    - -
    + 
    <!-- Using the title="" attribute -->
+<p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<p><img src="images/parsing-model-overview.png" alt=""
+        title="Flowchart representation of the parsing model."></p>
    -

    The object element can represent an external resource, which, depending on the - type of the resource, will either be treated as an image, as a nested browsing - context, or as an external resource to be processed by a plugin.

    + 
    <!-- Using <figure> and <figcaption> -->
+<p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<figure>
+ <img src="images/parsing-model-overview.png" alt="The Network leads to
+ the Input Stream Preprocessor, which leads to the Tokenizer, which
+ leads to the Tree Construction stage. The Tree Construction stage
+ leads to two items. The first is Script Execution, which leads via
+ document.write() back to the Tokenizer. The second item from which
+ Tree Construction leads is the DOM. The DOM is related to the Script
+ Execution.">
+ <figcaption>Flowchart representation of the parsing model.</figcaption>
+</figure>
    -

    The data attribute, if present, specifies the - address of the resource. If present, the attribute must be a valid non-empty URL potentially - surrounded by spaces.

    + 
    <!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
+<p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<p><img src="images/parsing-model-overview.png"
+        alt="Flowchart representation of the parsing model."></p>
+<!-- Never put the image's caption in the alt="" attribute! -->
    -

    Authors who reference resources from other origins - that they do not trust are urged to use the typemustmatch attribute defined below. Without that - attribute, it is possible in certain cases for an attacker on the remote host to use the plugin - mechanism to run arbitrary scripts, even if the author has used features such as the Flash - "allowScriptAccess" parameter.

    +
    -

    The type attribute, if present, specifies the - type of the resource. If present, the attribute must be a valid MIME type.

    +
    -

    At least one of either the data attribute or the type attribute must be present.

    +

    A graph that repeats the previous paragraph in graphical form:

    -

    If the itemprop attribute is specified on an object - element, then the data attribute must also be specified.

    + 
    <p>According to a study covering several billion pages,
+about 62% of documents on the Web in 2007 triggered the Quirks
+rendering mode of Web browsers, about 30% triggered the Almost
+Standards mode, and about 9% triggered the Standards mode.</p>
+<p><img src="rendering-mode-pie-chart.png" alt=""></p>
    -

    The typemustmatch attribute is a - boolean attribute whose presence indicates that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the - aforementioned resource match.

    +
    -

    The typemustmatch attribute must not be - specified unless both the data attribute and the type attribute are present.

    -

    The name attribute, if present, must be a - valid browsing context name. The given value is used to name the nested - browsing context, if applicable.

    - +
    4.8.5.1.7 A purely decorative image that doesn't add any information
    -

    Whenever one of the following conditions occur:

    +

    If an image is decorative but isn't especially page-specific — for example an image that + forms part of a site-wide design scheme — the image should be specified in the site's CSS, + not in the markup of the document.

    -
    • the element is created, +

      However, a decorative image that isn't discussed by the surrounding text but still has some + relevance can be included in a page using the img element. Such images are + decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty + string.

      -
    • the element is popped off the stack of open elements of an HTML - parser or XML parser, +
      -
    • the element is not on the stack of open elements of an HTML parser - or XML parser, and it is either inserted into a document or removed from a document, +

      Examples where the image is purely decorative despite being relevant would include things like + a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an + image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows + an example of the latter case (only the first verse is included in this snippet):

      -
    • the element's Document changes whether it is fully active, + 
      <h1>The Lady of Shalott</h1>
+<p><img src="shalott.jpeg" alt=""></p>
+<p>On either side the river lie<br>
+Long fields of barley and of rye,<br>
+That clothe the wold and meet the sky;<br>
+And through the field the road run by<br>
+To many-tower'd Camelot;<br>
+And up and down the people go,<br>
+Gazing where the lilies blow<br>
+Round an island there below,<br>
+The island of Shalott.</p>
      -
    • one of the element's ancestor object elements changes to or from showing its - fallback content, + -
    • the element's classid attribute is set, changed, or - removed, -
    • the element's classid attribute is not present, and - its data attribute is set, changed, or removed, + -
    • neither the element's classid attribute nor its - data attribute are present, and its type attribute is set, changed, or removed, +

      When a picture has been sliced into smaller image files that are then displayed together to + form the complete picture again, one of the images must have its alt attribute set as per the relevant rules that would be appropriate + for the picture as a whole, and then all the remaining images must have their alt attribute set to the empty string.

      -
    • the element changes from being rendered to not being rendered, or vice versa, +
      -
    +

    In the following example, a picture representing a company logo for XYZ + Corp has been split into two pieces, the first containing the letters "XYZ" and the second + with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.

    -

    ...the user agent must queue a task to run the following steps to (re)determine - what the object element represents. This task - being queued or actively running must delay the load - event of the element's document.

    + 
    <h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>
    -
    1. + -

      If the user has indicated a preference that this object element's fallback - content be shown instead of the element's usual behavior, then jump to the step below - labeled fallback.

      +
      -

      For example, a user could ask for the element's fallback content to - be shown because that content uses a format that the user finds more accessible.

      +

      In the following example, a rating is shown as three filled stars and two empty stars. While + the alternative text could have been "★★★☆☆", the author has + instead decided to more helpfully give the rating in the form "3 out of 5". That is the + alternative text of the first image, and the rest have blank alternative text.

      -
    2. + 
      <p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
+  ><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
+  ><img src="0" alt=""></meter></p>
      -

      If the element has an ancestor media element, or has an ancestor - object element that is not showing its fallback content, or - if the element is not in a Document with a - browsing context, or if the element's Document is not fully - active, or if the element is still in the stack of open elements of an - HTML parser or XML parser, or if the element is not being - rendered, then jump to the step below labeled fallback.

      + -
    3. - -

      If the classid attribute is present, and has a - value that isn't the empty string, then: if the user agent can find a plugin - suitable according to the value of the classid - attribute, and either plugins aren't being sandboxed or that - plugin can be secured, then that - plugin should be used, and the value of the data attribute, if any, should be passed to the - plugin. If no suitable plugin can be found, or if the - plugin reports an error, jump to the step below labeled fallback.

      + - +

      Generally, image maps should be used instead of slicing an image + for links.

      -

    4. If the data attribute is present and its value is - not the empty string, then:

      +

      However, if an image is indeed sliced and any of the components of the sliced picture are the + sole contents of links, then one image per link must have alternative text in its alt attribute representing the purpose of the link.

      -

      1. If the type attribute is present and its value is - not a type that the user agent supports, and is not a type that the user agent can find a - plugin for, then the user agent may jump to the step below labeled fallback - without fetching the content to examine its real type.

      2. Resolve the URL specified by the data attribute, relative to the element.

      3. If that failed, fire a simple event named error at the element, then jump to the step below labeled - fallback.

      4. +
        -

        Fetch the resulting absolute URL, from the element's - browsing context scope origin if it has one.

        +

        In the following example, a picture representing the flying spaghetti monster emblem, with + each of the left noodly appendages and the right noodly appendages in different images, so that + the user can pick the left side or the right side in an adventure.

        - -

        Fetching the resource must delay the load event of the element's document - until the task that is queued by the networking task source once the resource has been - fetched (defined next) has been run.

        + 
        <h1>The Church</h1>
+<p>You come across a flying spaghetti monster. Which side of His
+Noodliness do you wish to reach out for?</p>
+<p><a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a
+  ><img src="fsm-middle.png" alt=""
+  ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>
        -

        For the purposes of the application cache networking model, this - fetch operation is not for a child browsing context (though it might - end up being used for one after all, as defined below).

        +
        -

      5. If the resource is not yet available (e.g. because the resource was not available in the - cache, so that loading the resource required making a request over the network), then jump to - the step below labeled fallback. The task that is - queued by the networking task source once the - resource is available must restart this algorithm from this step. Resources can load - incrementally; user agents may opt to consider a resource "available" whenever enough data has - been obtained to begin processing the resource.

      6. If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire - a simple event named error at the element, then jump to - the step below labeled fallback.

      7. -

        Determine the resource type, as follows:

        +
        4.8.5.1.10 A key part of the content
        +

        In some cases, the image is a critical part of the content. This could be the case, for + instance, on a page that is part of a photo gallery. The image is the whole point of the + page containing it.

        -
        1. +

          How to provide alternative text for an image that is a key part of the content depends on the + image's provenance.

          -

          Let the resource type be unknown.

          +
          The general case
          -
        2. +

          When it is possible for detailed alternative text to be provided, for example if the image is + part of a series of screenshots in a magazine review, or part of a comic strip, or is a + photograph in a blog entry about that photograph, text that can serve as a substitute for the + image must be given as the contents of the alt attribute.

          -

          If the object element has a type - attribute and a typemustmatch attribute, and - the resource has associated Content-Type metadata, and the - type specified in the resource's Content-Type metadata is - an ASCII case-insensitive match for the value of the element's type attribute, then let resource type - be that type and jump to the step below labeled handler.

          +
          - +

          A screenshot in a gallery of screenshots for a new OS, with some alternative text:

          -
        3. + 
          <figure>
+ <img src="KDE%20Light%20desktop.png"
+      alt="The desktop is blue, with icons along the left hand side in
+           two columns, reading System, Home, K-Mail, etc. A window is
+           open showing that menus wrap to a second line if they
+           cannot fit in the window. The window has a list of icons
+           along the top, with an address bar below it, a list of
+           icons for tabs along the left edge, a status bar on the
+           bottom, and two panes in the middle. The desktop has a bar
+           at the bottom of the screen with a few buttons, a pager, a
+           list of open applications, and a clock.">
+ <figcaption>Screenshot of a KDE desktop.</figcaption>
+</figure>
          -

          If the object element has a typemustmatch attribute, jump to the step below - labeled handler.

          + -
        4. +
          - +

          A graph in a financial report:

          -

          If the user agent is configured to strictly obey Content-Type headers for this resource, - and the resource has associated Content-Type metadata, - then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below - labeled handler.

          + 
          <img src="sales.gif"
+     title="Sales graph"
+     alt="From 1998 to 2005, sales increased by the following percentages
+     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">
          -

          This can introduce a vulnerability, wherein a site is trying to embed a - resource that uses a particular plugin, but the remote site overrides that and instead - furnishes the user agent with a resource that triggers a different plugin with different - security characteristics.

          +

          Note that "sales graph" would be inadequate alternative text for a sales graph. Text that + would be a good caption is not generally suitable as replacement text.

          -
        5. + -

          If there is a type attribute present on the - object element, and that attribute's value is not a type that the user agent - supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled - handler.

          +
          Images that defy a complete description
          -
        6. +

          In certain cases, the nature of the image might be such that providing thorough alternative + text is impractical. For example, the image could be indistinct, or could be a complex fractal, + or could be a detailed topographical map.

          -

          Run the appropriate set of steps from the following - list:

          +

          In these cases, the alt attribute must contain some + suitable alternative text, but it may be somewhat brief.

          -
          If the resource has associated Content-Type - metadata
          +
          -
          1. +

            Sometimes there simply is no text that can do justice to an image. For example, there is + little that can be said to usefully describe a Rorschach inkblot test. However, a description, + even if brief, is still better than nothing:

            -

            Let binary be false.

            + 
            <figure>
+ <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
+ symmetry with indistinct edges, with a small gap in the center, two
+ larger gaps offset slightly from the center, with two similar gaps
+ under them. The outline is wider in the top half than the bottom
+ half, with the sides extending upwards higher than the center, and
+ the center extending below the sides.">
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
+</figure>
            -
          2. +

            Note that the following would be a very bad use of alternative text:

            -

            If the type specified in the resource's Content-Type - metadata is "text/plain", and the result of applying the rules for distinguishing if a resource is - text or binary to the resource is that the resource is not - text/plain, then set binary to true.

            + 
            <!-- This example is wrong. Do not copy it. -->
+<figure>
+ <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+ of the first of the ten cards in the Rorschach inkblot test.">
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
+</figure>
            -
          3. +

            Including the caption in the alternative text like this isn't useful because it effectively + duplicates the caption for users who don't have images, taunting them twice yet not helping + them any more than if they had only read or heard the caption once.

            -

            If the type specified in the resource's Content-Type - metadata is "application/octet-stream", then set binary to true.

            +
          -
        7. +
          -

          If binary is false, then let the resource - type be the type specified in the resource's - Content-Type metadata, and jump to the step below labeled handler.

          +

          Another example of an image that defies full description is a fractal, which, by definition, + is infinite in detail.

          -
        8. +

          The following example shows one possible way of providing alternative text for the full view + of an image of the Mandelbrot set.

          -

          If there is a type attribute present on the - object element, and its value is not application/octet-stream, - then run the following steps:

          + 
          <img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
+its cusp on the real axis in the positive direction, with a smaller
+bulb aligned along the same center line, touching it in the negative
+direction, and with these two shapes being surrounded by smaller bulbs
+of various sizes.">
          -
          1. + -

            If the attribute's value is a type that a plugin supports, or the - attribute's value is a type that starts with "image/" that is - not also an XML MIME type, then let the resource type be the - type specified in that type attribute.

            +
            -
          2. +

            Similarly, a photograph of a person's face, for example in a biography, can be considered + quite relevant and key to the content, but it can be hard to fully substitute text for

            -

            Jump to the step below labeled handler.

            + 
            <section class="bio">
+ <h1>A Biography of Isaac Asimov</h1>
+ <p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
+ <p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
+ Later in life, he wore long white sideburns.">
+ <p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
+ <p>...
+</section>
            -
          +

          In such cases it is unnecessary (and indeed discouraged) to include a reference to the + presence of the image itself in the alternative text, since such text would be redundant with + the browser itself reporting the presence of the image. For example, if the alternative text + was "A photo of Isaac Asimov", then a conforming user agent might read that out as "(Image) A + photo of Isaac Asimov" rather than the more useful "(Image) Isaac Asimov had dark hair, a tall + forehead, and wore glasses...".

          -
        + -
        Otherwise, if the resource does not have associated - Content-Type metadata
        +
        Images whose contents are not known
        -
        1. +

          In some unfortunate cases, there might be no alternative text available at all, either + because the image is obtained in some automated fashion without any associated alternative text + (e.g. a Webcam), or because the page is being generated by a script using user-provided images + where the user did not provide suitable or usable alternative text (e.g. photograph sharing + sites), or because the author does not himself know what the images represent (e.g. a blind + photographer sharing an image on his blog).

          -

          If there is a type attribute present on the - object element, then let the tentative type be the type - specified in that type attribute.

          +

          In such cases, the alt attribute may be omitted, but one of + the following conditions must be met as well:

          -

          Otherwise, let tentative type be the sniffed type of the resource.

          +

          • The img element is in a + figure element that contains a figcaption element that contains + content other than inter-element whitespace, and, ignoring the + figcaption element and its descendants, the figure element has no + flow content descendants other than inter-element whitespace and the + img element.

          • -
          • +

            The title attribute is present and has a non-empty + value.

            -

            If tentative type is not - application/octet-stream, then let resource type be - tentative type and jump to the step below labeled - handler.

            + +

            Relying on the title attribute is currently + discouraged as many user agents do not expose the attribute in an accessible manner as + required by this specification (e.g. requiring a pointing device such as a mouse to cause a + tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone + with a modern phone or tablet).

            -
        + - +

        Such cases are to be kept to an absolute minimum. If there is even the slightest + possibility of the author having the ability to provide real alternative text, then it would not + be acceptable to omit the alt attribute.

        -
      8. +
        - +

        A photo on a photo-sharing site, if the site received the image with no metadata other than + the caption, could be marked up as follows:

        -

        If applying the URL parser algorithm to the URL of the - specified resource (after any redirects) results in a parsed URL whose path component matches a pattern that a plugin - supports, then let resource type be the type that that plugin can - handle.

        + 
        <figure>
+ <img src="1100670787_6a7c664aef.jpg">
+ <figcaption>Bubbles traveled everywhere with us.</figcaption>
+</figure>
        -

        For example, a plugin might say that it can handle resources with path components that end with the four character string - ".swf".

        +

        It would be better, however, if a detailed description of the important parts of the image + obtained from the user and included on the page.

        - - +
        -
      +
      -

      It is possible for this step to finish, or for one of the substeps above to - jump straight to the next step, with resource type still being unknown. In - both cases, the next step will trigger fallback.

      +

      A blind user's blog in which a photo taken by the user is shown. Initially, the user might + not have any idea what the photo he took shows:

      -

    5. Handler: Handle the content as given by the first of the following cases that - matches:

      + 
      <article>
+ <h1>I took a photo</h1>
+ <p>I went out today and took a photo!</p>
+ <figure>
+  <img src="photo2.jpeg">
+  <figcaption>A photograph taken blindly from my front porch.</figcaption>
+ </figure>
+</article>
      -
      If the resource type is not a type that the user agent supports, but - it is a type that a plugin supports
      +

      Eventually though, the user might obtain a description of the image from his friends and + could then include alternative text:

      -

      If plugins are being sandboxed and the plugin that - supports resource type cannot be secured, jump to the step below labeled fallback.

      + 
      <article>
+ <h1>I took a photo</h1>
+ <p>I went out today and took a photo!</p>
+ <figure>
+  <img src="photo2.jpeg" alt="The photograph shows my squirrel
+  feeder hanging from the edge of my roof. It is half full, but there
+  are no squirrels around. In the background, out-of-focus trees fill the
+  shot. The feeder is made of wood with a metal grate, and it contains
+  peanuts. The edge of the roof is wooden too, and is painted white
+  with light blue streaks.">
+  <figcaption>A photograph taken blindly from my front porch.</figcaption>
+ </figure>
+</article>
      -

      Otherwise, the user agent should use the plugin that supports - resource type and pass the content of the resource to that - plugin. If the plugin reports an error, then jump to the step - below labeled fallback.

      + -
      If the resource type is an XML MIME type, or if the resource type - does not start with "image/"
      +
      -

      The object element must be associated with a newly created nested - browsing context, if it does not already have one.

      +

      Sometimes the entire point of the image is that a textual description is not available, and + the user is to provide the description. For instance, the point of a CAPTCHA image is to see if + the user can literally read the graphic. Here is one way to mark up a CAPTCHA (note the title attribute):

      -

      If the URL of the given resource is not about:blank, the - element's nested browsing context must then be navigated to that resource, with - replacement enabled, and with the object element's document's - browsing context as the source browsing context. (The data attribute of the object element doesn't - get updated if the browsing context gets further navigated to other locations.)

      + 
      <p><label>What does this image say?
+<img src="captcha.cgi?id=8934" title="CAPTCHA">
+<input type=text name=captcha></label>
+(If you cannot see the image, you can use an <a
+href="?audio">audio</a> test instead.)</p>
      -

      If the URL of the given resource is about:blank, then, - instead, the user agent must queue a task to fire a simple event - named load at the object element. No load event is fired at the - about:blank document itself.

      +

      Another example would be software that displays images and asks for alternative text + precisely for the purpose of then writing a page with correct alternative text. Such a page + could have a table of images, like this:

      -

      The object element represents the nested browsing - context.

      + 
      <table>
+ <thead>
+  <tr> <th> Image <th> Description
+ <tbody>
+  <tr>
+   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
+   <td> <input name="alt2421">
+  <tr>
+   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
+   <td> <input name="alt2422">
+</table>
      -

      If the name attribute is present, the - browsing context name must be set to the value of this attribute; otherwise, - the browsing context name must be set to the empty string.

      +

      Notice that even in this example, as much useful information as possible is still included + in the title attribute.

      -

      In certain situations, e.g. if the resource was fetched from an application cache but it is an HTML file - with a manifest attribute that points to a different - application cache manifest, the navigation of the browsing context will be restarted so - as to load the resource afresh from the network or a different application - cache. Even if the resource is then found to have a different type, it is still used - as part of a nested browsing context: only the navigate algorithm - is restarted, not this object algorithm.

      +
      - +

      Since some users cannot use images at all (e.g. because they have a very slow + connection, or because they are using a text-only browser, or because they are listening to the + page being read out by a hands-free automobile voice Web browser, or simply because they are + blind), the alt attribute is only allowed to be omitted rather + than being provided with replacement text when no alternative text is available and none can be + made available, as in the above examples. Lack of effort from the part of the author is not an + acceptable reason for omitting the alt attribute.

      -
      If the resource type starts with "image/", and support - for images has not been disabled
      +
      -

      Apply the image sniffing rules to - determine the type of the image.

      -

      The object element represents the specified image. The image is - not a nested browsing context.

      -

      If the image cannot be rendered, e.g. because it is malformed or in an unsupported - format, jump to the step below labeled fallback.

      +
      4.8.5.1.11 An image not intended for the user
      -
      Otherwise
      +

      Generally authors should avoid using img elements for purposes other than showing + images.

      -

      The given resource type is not supported. Jump to the step below - labeled fallback.

      +

      If an img element is being used for purposes other than showing an image, e.g. as + part of a service to count page views, then the alt attribute + must be the empty string.

      -

      If the previous step ended with the resource type being - unknown, this is the case that is triggered.

      +

      In such cases, the width and height attributes should both be set to zero.

      - -

    6. The element's contents are not part of what the object element - represents.

      +
      4.8.5.1.12 An image in an e-mail or private document intended for a specific person who is known to be able to view images
      -
    7. +

      This section does not apply to documents that are publicly accessible, or whose target + audience is not necessarily personally known to the author, such as documents on a Web site, + e-mails sent to public mailing lists, or software documentation.

      -

      Abort these steps. Once the resource is completely loaded, queue a task to - fire a simple event named load at the - element.

      +

      When an image is included in a private communication (such as an HTML e-mail) aimed at a + specific person who is known to be able to view images, the alt + attribute may be omitted. However, even in such cases authors are strongly urged to include + alternative text (as appropriate according to the kind of image involved, as described in the + above entries), so that the e-mail is still usable should the user use a mail client that does not + support images, or should the document be forwarded on to other users whose abilities might not + include easily seeing images.

      -
    -

  • If the data attribute is absent but the type attribute is present, and the user agent can find a - plugin suitable according to the value of the type attribute, and either plugins aren't being sandboxed or the plugin can be - secured, then that plugin should be used. If these conditions cannot be met, or if the - plugin reports an error, jump to the step below labeled fallback. Otherwise - abort these steps; once the plugin is completely loaded, queue a task to fire - a simple event named load at the element.

  • Fallback: The object element represents the element's - children, ignoring any leading param element children. This is the element's - fallback content. If the element has an instantiated plugin, then - unload it. -

    When the algorithm above instantiates a plugin, the user agent - should pass to the plugin used the names and values of all the attributes on the - element, in the order they were added to the element, with the attributes added by the parser - being ordered in source order, followed by a parameter named "PARAM" whose value is null, followed - by all the names and values of parameters given by - param elements that are children of the object element, in tree - order. If the plugin supports a scriptable interface, the - HTMLObjectElement object representing the element should expose that interface. The - object element represents the plugin. The - plugin is not a nested browsing context.

    -

    Plugins are considered sandboxed for the purpose of an - object element if the sandboxed plugins browsing context flag is set on - the object element's Document's active sandboxing flag - set.

    + -

    Due to the algorithm above, the contents of object elements act as fallback - content, used only when referenced resources can't be shown (e.g. because it returned a 404 - error). This allows multiple object elements to be nested inside each other, - targeting multiple user agents with different capabilities, with the user agent picking the first - one it supports.

    +
    4.8.5.1.13 Guidance for markup generators
    -

    When an object element represents a nested browsing context: if the - object element's nested browsing context's active document - is not ready for post-load tasks, and when anything is delaying the load event of the object element's browsing - context's active document, and when the object element's - browsing context is in the delaying load - events mode, the object must delay the load event of its - document.

    +

    Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain + alternative text from their users. However, it is recognised that in many cases, this will not be + possible.

    -

    The task source for the tasks mentioned in this - section is the DOM manipulation task source.

    +

    For images that are the sole contents of links, markup generators should examine the link + target to determine the title of the target, or the URL of the target, and use information + obtained in this manner as the alternative text.

    -

    Whenever the name attribute is set, if the - object element has a nested browsing context, its name must be changed to the new value. If the attribute is removed, if the - object element has a browsing context, the browsing context - name must be set to the empty string.

    +

    For images that have captions, markup generators should use the figure and + figcaption elements, or the title attribute, to + provide the image's caption.

    - +

    As a last resort, implementors should either set the alt + attribute to the empty string, under the assumption that the image is a purely decorative image + that doesn't add any information but is still specific to the surrounding content, or omit the + alt attribute altogether, under the assumption that the image is + a key part of the content.

    -

    The usemap attribute, if present while the - object element represents an image, can indicate that the object has an associated - image map. The attribute must be ignored if the - object element doesn't represent an image.

    +

    Markup generators may specify a generator-unable-to-provide-required-alt + attribute on img elements for which they have been unable to obtain alternative text + and for which they have therefore omitted the alt attribute. The + value of this attribute must be the empty string. Documents containing such attributes are not + conforming, but conformance checkers will silently + ignore this error.

    -

    The form attribute is used to explicitly associate the - object element with its form owner.

    +

    This is intended to avoid markup generators from being pressured into replacing + the error of omitting the alt attribute with the even more + egregious error of providing phony alternative text, because state-of-the-art automated + conformance checkers cannot distinguish phony alternative text from correct alternative text.

    - +

    Markup generators should generally avoid using the image's own file name as the alternative + text. Similarly, markup generators should avoid generating alternative text from any content that + will be equally available to presentation user agents (e.g. Web browsers).

    -

    Constraint validation: object elements are always barred - from constraint validation.

    +

    This is because once a page is generated, it will typically not be updated, + whereas the browsers that later read the page can be updated by the user, therefore the browser is + likely to have more up-to-date and finely-tuned heuristics than the markup generator did when + generating the page.

    -

    The object element supports dimension attributes.

    - -

    The IDL attributes data, type and name each must reflect the respective - content attributes of the same name. The typeMustMatch IDL attribute must - reflect the typemustmatch content - attribute. The useMap IDL attribute must - reflect the usemap content attribute.

    +
    4.8.5.1.14 Guidance for conformance checkers
    -

    The contentDocument IDL attribute - must return the Document object of the active document of the - object element's nested browsing context, if any and if its - effective script origin is the same origin as the effective script - origin specified by the incumbent settings object, or null otherwise.

    +

    A conformance checker must report the lack of an alt + attribute as an error unless one of the conditions listed below applies:

    -

    The contentWindow IDL attribute must - return the WindowProxy object of the object element's nested - browsing context, if it has one; otherwise, it must return null.

    +

    • The img element is in a figure element that satisfies the conditions described above.

    • The img element has a title attribute with a + value that is not the empty string (also as described + above).

    • The conformance checker has been configured to assume that the document is an e-mail or + document intended for a specific person who is known to be able to view images.

    • The img element has a (non-conforming) generator-unable-to-provide-required-alt + attribute whose value is the empty string. A conformance checker that is not reporting the lack + of an alt attribute as an error must also not report the + presence of the empty generator-unable-to-provide-required-alt + attribute as an error. (This case does not represent a case where the document is conforming, + only that the generator could not determine appropriate alternative text — validators are + not required to show an error in this case, because such an error might encourage markup + generators to include bogus alternative text purely in an attempt to silence validators. + Naturally, conformance checkers may report the lack of an alt attribute as an error even in the presence of the generator-unable-to-provide-required-alt + attribute; for example, there could be a user option to report all conformance errors + even those that might be the more or less inevitable result of using a markup + generator.)

    -

    The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the - constraint validation API. The form IDL attribute - is part of the element's forms API.

    + -

    All object elements have a legacy caller - operation. If the object element has an instantiated plugin that - supports a scriptable interface that defines a legacy caller operation, then that must be the - behavior of the object's legacy caller operation. Otherwise, the object's legacy caller operation - must be to throw a NotSupportedError exception.

    - -
    -

    In the following example, a Java applet is embedded in a page using the object - element. (Generally speaking, it is better to avoid using applets like these and instead use - native JavaScript and HTML to provide the functionality, since that way the application will work - on all Web browsers without requiring a third-party plugin. Many devices, especially embedded - devices, do not support third-party technologies like Java.)

    - 
    <figure>
- <object type="application/x-java-applet">
-  <param name="code" value="MyJavaClass">
-  <p>You do not have Java available, or it is disabled.</p>
- </object>
- <figcaption>My Java Clock</figcaption>
-</figure>
    +

    4.8.6 The iframe element

    -
    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Text that conforms to the requirements given in the prose.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    srcdoc — A document to render in the iframe
    name — Name of nested browsing context
    sandbox — Security rules for nested content
    seamless — Whether to apply the document's styles to the nested content
    allowfullscreen — Whether to allow the iframe's contents to use requestFullscreen()
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    +
    interface HTMLIFrameElement : HTMLElement {
+           attribute DOMString src;
+           attribute DOMString srcdoc;
+           attribute DOMString name;
+  [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
+           attribute boolean seamless;
+           attribute boolean allowFullscreen;
+           attribute DOMString width;
+           attribute DOMString height;
+  readonly attribute Document? contentDocument;
+  readonly attribute WindowProxy? contentWindow;
 
-  
    
+  // also has obsolete members
+};
    +
    -

    In this example, an HTML page is embedded in another using the object - element.

    + - 
    <figure>
- <object data="clock.html"></object>
- <figcaption>My HTML Clock</figcaption>
-</figure>
    +

    The iframe element represents a nested browsing + context.

    - -
    + -

    The following example shows how a plugin can be used in HTML (in this case the Flash plugin, - to show a video file). Fallback is provided for users who do not have Flash enabled, in this case - using the video element to show the video for those using user agents that support - video, and finally providing a link to the video for those who have neither Flash - nor a video-capable browser.

    +

    The src attribute gives the address of a page + that the nested browsing context is to contain. The attribute, if present, must be a + valid non-empty URL potentially surrounded by spaces. If the itemprop is specified on an iframe element, then the + src attribute must also be specified.

    - 
    <p>Look at my video:
- <object type="application/x-shockwave-flash">
-  <param name=movie value="http://video.example.com/library/watch.swf">
-  <param name=allowfullscreen value=true>
-  <param name=flashvars value="http://video.example.com/vids/315981">
-  <video controls src="http://video.example.com/vids/315981">
-   <a href="http://video.example.com/vids/315981">View video</a>.
-  </video>
- </object>
-</p>
    +

    The srcdoc attribute gives the content of + the page that the nested browsing context is to contain. The value of the attribute + is the source of an iframe srcdoc + document.

    -
    +

    For iframe elements in HTML documents, the srcdoc attribute, if present, must have a value using the + HTML syntax that consists of the following syntactic components, in the given order:

    +
    1. Any number of comments and space characters.
    2. Optionally, a DOCTYPE. +
    3. Any number of comments and space characters.
    4. The root element, in the form of an html element.
    5. Any number of comments and space characters.
    -

    4.7.9 The param element

    +

    For iframe elements in XML documents, the srcdoc attribute, if present, must have a value that matches the + production labeled document in the XML specification. [XML]

    -
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of an object element, before any flow content.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    name — Name of parameter
    value — Value of parameter
    DOM interface:
    -
    interface HTMLParamElement : HTMLElement {
-           attribute DOMString name;
-           attribute DOMString value;
+  
    
 
-  // also has obsolete members
-};
    -
    +

    Here a blog uses the srcdoc attribute in conjunction + with the sandbox and seamless attributes described below to provide users of user + agents that support this feature with an extra layer of protection from script injection in the + blog post comments:

    -

    The param element defines parameters for plugins invoked by object - elements. It does not represent anything on its own.

    + 
    <article>
+ <h1>I got my own magazine!</h1>
+ <p>After much effort, I've finally found a publisher, and so now I
+ have my own magazine! Isn't that awesome?! The first issue will come
+ out in September, and we have articles about getting food, and about
+ getting in boxes, it's going to be great!</p>
+ <footer>
+  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
+ </footer>
+ <article>
+  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
+  <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
+ </article>
+ <article>
+  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
+  <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
+ </article>
+ <article>
+  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
+  <iframe seamless sandbox srcdoc="<p>hey that's earl's table.
+<p>you should get earl&amp;amp;me on the next cover."></iframe>
+ </article>
    -

    The name attribute gives the name of the - parameter.

    +

    Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw + ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be + doubly escaped — once so that the ampersand is preserved when originally parsing + the srcdoc attribute, and once more to prevent the + ampersand from being misinterpreted when parsing the sandboxed content.

    -

    The value attribute gives the value of the - parameter.

    +

    Furthermore, notice that since the DOCTYPE is optional in + iframe srcdoc documents, and the html, + head, and body elements have optional + start and end tags, and the title element is also optional in iframe srcdoc + documents, the markup in a srcdoc attribute can be + relatively succint despite representing an entire document, since only the contents of the + body element need appear literally in the syntax. The other elements are still + present, but only by implication.

    -

    Both attributes must be present. They may have any value.

    + - +

    In the HTML syntax, authors need only remember to use U+0022 + QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0022 + QUOTATION MARK (") and U+0026 AMPERSAND (&) characters, and to specify the sandbox attribute, to ensure safe embedding of content.

    -

    If both attributes are present, and if the parent element of the param is an - object element, then the element defines a parameter with the given name-value pair.

    +

    Due to restrictions of the XHTML syntax, in XML the U+003C LESS-THAN + SIGN character (<) needs to be escaped as well. In order to prevent attribute-value normalization, some of XML's + whitespace characters — specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED + (LF), and U+000D CARRIAGE RETURN (CR) — also need to be escaped. [XML]

    -

    If either the name or value of a parameter defined - by a param element that is the child of an object element that - represents an instantiated plugin changes, and if that - plugin is communicating with the user agent using an API that features the ability to - update the plugin when the name or value of a parameter so changes, then the user agent must - appropriately exercise that ability to notify the plugin of the change.

    +

    If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority. This allows authors to provide + a fallback URL for legacy user agents that do not support the srcdoc attribute.

    -

    The IDL attributes name and value must both reflect the respective - content attributes of the same name.

    -
    - -

    The following example shows how the param element can be used to pass a parameter - to a plugin, in this case the O3D plugin.

    +
    - 
    <!DOCTYPE HTML>
-<html lang="en">
-  <head>
-   <title>O3D Utah Teapot</title>
-  </head>
-  <body>
-   <p>
-    <object type="application/vnd.o3d.auto">
-     <param name="o3d_features" value="FloatingPointTextures">
-     <img src="o3d-teapot.png"
-          title="3D Utah Teapot illustration rendered using O3D."
-          alt="When O3D renders the Utah Teapot, it appears as a squat
-          teapot with a shiny metallic finish on which the
-          surroundings are reflected, with a faint shadow caused by
-          the lighting.">
-     <p>To see the teapot actually rendered by O3D on your
-     computer, please download and install the <a
-     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
-    </object>
-    <script src="o3d-teapot.js"></script>
-   </p>
-  </body>
-</html>
    +

    When an iframe element is inserted + into a document, the user agent must create a nested browsing context, and + then process the iframe attributes for the "first time".

    -
    +

    When an iframe element is removed + from a document, the user agent must discard the nested browsing context.

    +

    This happens without any unload events firing + (the nested browsing context and its Document are discarded, not data-x="unload a + document">unloaded).

    + -

    4.7.10 The video element

    +

    Whenever an iframe element with a nested browsing context has its + srcdoc attribute set, changed, or removed, the user agent + must process the iframe attributes.

    -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a controls attribute: Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    If the element has a src attribute: - zero or more track elements, then - transparent, but with no media element descendants.
    If the element does not have a src attribute: zero or more source elements, then - zero or more track elements, then - transparent, but with no media element descendants.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    crossorigin — How the element handles crossorigin requests
    poster — Poster frame to show prior to video playback
    preload — Hints how much buffering the media resource will likely need
    autoplay — Hint that the media resource can be started automatically when the page is loaded
    mediagroup — Groups media elements together with an implicit MediaController
    loop — Whether to loop the media resource
    muted — Whether to mute the media resource by default
    controls — Show user agent controls
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    - 
    interface HTMLVideoElement : HTMLMediaElement {
-           attribute unsigned long width;
-           attribute unsigned long height;
-  readonly attribute unsigned long videoWidth;
-  readonly attribute unsigned long videoHeight;
-           attribute DOMString poster;
-};
    -
    +

    Similarly, whenever an iframe element with a nested browsing context + but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must + process the iframe attributes.

    -

    A video element is used for playing videos or movies, and audio files with - captions.

    +

    When the user agent is to process the iframe attributes, it must run + the first appropriate steps from the following list:

    -

    Content may be provided inside the video element. User agents - should not show this content to the user; it is intended for older Web browsers which do - not support video, so that legacy video plugins can be tried, or to show text to the - users of these older browsers informing them of how to access the video contents.

    +
    If the srcdoc attribute is specified

    Navigate the element's child browsing context + to a resource whose Content-Type is text/html, whose URL + is about:srcdoc, and whose data consists of the value of the attribute. The + resulting Document must be considered an iframe srcdoc document.

    Otherwise, if the element has no src attribute + specified, and the user agent is processing the iframe's attributes for the "first + time"
    -

    In particular, this content is not intended to address accessibility concerns. To - make video content accessible to the partially sighted, the blind, the hard-of-hearing, the deaf, - and those with other physical or cognitive disabilities, a variety of features are available. - Captions can be provided, either embedded in the video stream or as external files using the - track element. Sign-language tracks can be provided, again either embedded in the - video stream or by synchronizing multiple video elements using the mediagroup attribute or a MediaController - object. Audio descriptions can be provided, either as a separate track embedded in the video - stream, or a separate audio track in an audio element slaved to the same controller as the video element(s), or in text - form using a WebVTT file referenced using the track element and - synthesized into speech by the user agent. WebVTT can also be used to provide chapter titles. For - users who would rather not use a media element at all, transcripts or other textual alternatives - can be provided by simply linking to them in the prose near the video element. [WEBVTT]

    +

    Queue a task to run the iframe load event steps.

    -

    The video element is a media element whose media data is - ostensibly video data, possibly with associated audio data.

    +

    The task source for this task is the + DOM manipulation task source.

    -

    The src, preload, - autoplay, mediagroup, loop, muted, and controls - attributes are the attributes common to all media - elements.

    +
    Otherwise
    -

    The poster attribute gives the address of an - image file that the user agent can show while no video data is available. The attribute, if - present, must contain a valid non-empty URL potentially surrounded by spaces.

    +
    1. - +

      If the value of the src attribute is missing, or its + value is the empty string, let url be the string + "about:blank".

      + -

      If the specified resource is to be used, then, when the element is created or when the poster attribute is set, changed, or removed, the user agent must - run the following steps to determine the element's poster frame (regardless of the - value of the element's show poster flag):

      +

      Otherwise, resolve the value of the src attribute, relative to the iframe element.

      -

      1. If there is an existing instance of this algorithm running for this video - element, abort that instance of this algorithm without changing the poster - frame.

      2. If the poster attribute's value is the empty string - or if the attribute is absent, then there is no poster frame; abort these - steps.

      3. Resolve the poster attribute's value relative to the element. If this fails, - then there is no poster frame; abort these steps.

      4. Fetch the resulting absolute URL, from the element's - Document's origin. This must delay the load event of the - element's document.

      5. If an image is thus obtained, the poster frame is that image. Otherwise, - there is no poster frame.

      +

      If that is not successful, then let url be the string + "about:blank". Otherwise, let url be the resulting + absolute URL.

      - +
    2. -

      The image given by the poster attribute, - the poster frame, is intended to be a representative frame of the - video (typically one of the first non-blank frames) that gives the user an idea of what the video - is like.

      +

      If there exists an ancestor browsing context whose active + document's address, ignoring fragment + identifiers, is equal to url, then abort these steps.

      + + + - +
    3. -
      +

      Navigate the element's child browsing context + to url.

      -

      A video element represents what is given for the first matching condition in the - list below:

      +
    -
    When no video data is available (the element's readyState attribute is either HAVE_NOTHING, or HAVE_METADATA but no video data has yet been obtained at - all, or the element's readyState attribute is any - subsequent value but the media resource does not have a video channel)
    The video element represents its poster frame, if any, - or else transparent black with no intrinsic dimensions.
    When the video element is paused, the current playback position is the first frame of video, - and the element's show poster flag is set
    The video element represents its poster frame, if any, - or else the first frame of the video.
    When the video element is paused, and the - frame of video corresponding to the current playback - position is not available (e.g. because the video is seeking or buffering)
    When the video element is neither potentially playing nor paused (e.g. when seeking or stalled)
    The video element represents the last frame of the video to have - been rendered.
    When the video element is paused
    The video element represents the frame of video corresponding to - the current playback position.
    Otherwise (the video element has a video channel and is potentially - playing)
    The video element represents the frame of video at the continuously - increasing "current" position. When the - current playback position changes such that the last frame rendered is no longer the - frame corresponding to the current playback position in the video, the new frame - must be rendered.
    +
    -

    Frames of video must be obtained from the video track that was selected when the event loop last reached - step 1.

    +

    Any navigation required of the user agent in the process + the iframe attributes algorithm must be completed as an explicit + self-navigation override and with the iframe element's document's + browsing context as the source browsing context.

    -

    Which frame in a video stream corresponds to a particular playback position is - defined by the video stream's format.

    +

    Furthermore, if the active document of the element's child browsing + context before such a navigation was not completely + loaded at the time of the new navigation, then the navigation must be completed with replacement enabled.

    -

    The video element also represents any text track cues whose text track cue active flag is set and whose - text track is in the showing mode, and any - audio from the media resource, at the current playback position.

    +

    Similarly, if the child browsing context's session history contained + only one Document when the process the iframe attributes + algorithm was invoked, and that was the about:blank Document created + when the child browsing context was created, then any navigation required of the user agent in that algorithm must be completed + with replacement enabled.

    -

    Any audio associated with the media resource must, if played, be played - synchronised with the current playback position, at the element's effective - media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step - 1.

    +

    When a Document in an iframe is marked as completely + loaded, the user agent must synchronously run the iframe load event steps.

    -

    In addition to the above, the user agent may provide messages to the user (such as "buffering", - "no video loaded", "error", or more detailed information) by overlaying text or icons on the video - or other areas of the element's playback area, or in another appropriate manner.

    +

    A load event is also fired at the + iframe element when it is created if no other data is loaded in it.

    -

    User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video - data itself.

    +

    Each Document has an iframe load in progress flag and a mute + iframe load flag. When a Document is created, these flags must be unset for + that Document.

    -

    When a video element's media resource has a video channel, the - element provides a paint source whose width is the media resource's - intrinsic width, whose height is the - media resource's intrinsic - height, and whose appearance is the frame of video corresponding to the current playback position, if that is available, or else - (e.g. when the video is seeking or buffering) its previous appearance, if any, or else (e.g. - because the video is still loading the first frame) blackness.

    +

    The iframe load event steps are as follows:

    -
    +

    1. Let child document be the active document of the + iframe element's nested browsing context.

    2. If child document has its mute iframe load flag set, + abort these steps.

    3. Set child document's iframe load in progress + flag.

    4. Fire a simple event named load at the + iframe element.

    5. Unset child document's iframe load in progress + flag.

    - +

    This, in conjunction with scripting, can be used to probe the URL space of the + local network's HTTP servers. User agents may implement cross-origin + access control policies that are stricter than those described above to mitigate this attack, but + unfortunately such policies are typically not compatible with existing Web content.

    -
    video . videoWidth
    video . videoHeight
    +

    When the iframe's browsing context's active document is + not ready for post-load tasks, and when anything in the iframe is delaying the load event of the iframe's + browsing context's active document, and when the iframe's + browsing context is in the delaying load events + mode, the iframe must delay the load event of its document.

    -

    These attributes return the intrinsic dimensions of the video, - or zero if the dimensions are not known.

    +

    If, during the handling of the load event, the + browsing context in the iframe is again navigated, that will further delay the load event.

    -
    + -

    The intrinsic width and intrinsic height of the media resource - are the dimensions of the resource in CSS pixels after taking into account the resource's - dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used - by the resource. If an anamorphic format does not define how to apply the aspect ratio to the - video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the - ratio by increasing one dimension and leaving the other unchanged.

    +

    If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be + resolved, the browsing context will remain at the initial + about:blank page.

    -

    The videoWidth IDL attribute must return - the intrinsic width of the video in CSS pixels. - The videoHeight IDL attribute must return - the intrinsic height of the video in CSS - pixels. If the element's readyState attribute is HAVE_NOTHING, then the attributes must return 0.

    +

    If the user navigates away from this page, the + iframe's corresponding WindowProxy object will proxy new + Window objects for new Document objects, but the src attribute will not change.

    -

    Whenever the intrinsic width - or intrinsic height of the video changes - (including, for example, because the selected video - track was changed), if the element's readyState - attribute is not HAVE_NOTHING, the user agent must - queue a task to fire a simple event named resize at the media element.

    + +
    + +

    The name attribute, if present, must be a + valid browsing context name. The given value is used to name the nested + browsing context. When the browsing context is created, if the attribute + is present, the browsing context name must be set to the value of this attribute; + otherwise, the browsing context name must be set to the empty string.

    -

    The video element supports dimension attributes.

    +

    Whenever the name attribute is set, the nested + browsing context's name must be changed to + the new value. If the attribute is removed, the browsing context name must be set to + the empty string.

    -

    In the absence of style rules to the contrary, video content should be rendered inside the - element's playback area such that the video content is shown centered in the playback area at the - largest possible size that fits completely within it, with the video content's aspect ratio being - preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the - video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area - that do not contain the video represent nothing.

    -

    In user agents that implement CSS, the above requirement can be implemented by - using the style rule suggested in the rendering section.

    +
    -

    The intrinsic width of a video element's playback area is the intrinsic width of - the poster frame, if that is available and the element currently - represents its poster frame; otherwise, it is the intrinsic width of the video resource, if that is - available; otherwise the intrinsic width is missing.

    +

    The sandbox attribute, when specified, + enables a set of extra restrictions on any content hosted by the iframe. Its value + must be an unordered set of unique space-separated tokens that are ASCII + case-insensitive. The allowed values are allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation.

    -

    The intrinsic height of a video element's playback area is the intrinsic height of - the poster frame, if that is available and the element currently - represents its poster frame; otherwise it is the intrinsic height of the video resource, if that is - available; otherwise the intrinsic height is missing.

    +

    When the attribute is set, the content is treated as being from a unique origin, + forms, scripts, and various potentially annoying APIs are disabled, links are prevented from + targeting other browsing contexts, and plugins are secured. + The allow-same-origin keyword causes + the content to be treated as being from its real origin instead of forcing it into a unique + origin; the allow-top-navigation + keyword allows the content to navigate its top-level browsing context; + and the allow-forms, allow-pointer-lock, allow-popups and allow-scripts keywords re-enable forms, the + pointer lock API, popups, and scripts respectively. [POINTERLOCK]

    -

    The default object size is a width of 300 CSS pixels and a height of 150 CSS - pixels. [CSSIMAGES]

    +

    Setting both the allow-scripts and allow-same-origin keywords together when the + embedded page has the same origin as the page containing the iframe + allows the embedded page to simply remove the sandbox + attribute and then reload itself, effectively breaking out of the sandbox altogether.

    -
    +

    These flags only take effect when the nested browsing context of + the iframe is navigated. Removing them, or removing the + entire sandbox attribute, has no effect on an + already-loaded page.

    -

    User agents should provide controls to enable or disable the display of closed captions, audio - description tracks, and other additional data associated with the video stream, though such - features should, again, not interfere with the page's normal rendering.

    +

    Potentially hostile files should not be served from the same server as the file + containing the iframe element. Sandboxing hostile content is of minimal help if an + attacker can convince the user to just visit the hostile content directly, rather than in the + iframe. To limit the damage that can be caused by hostile HTML content, it should be + served from a separate dedicated domain. Using a different domain ensures that scripts in the + files are unable to attack the site, even if the user is tricked into visiting those pages + directly, without the protection of the sandbox + attribute.

    -

    User agents may allow users to view the video content in manners more suitable to the user - (e.g. full-screen or in an independent resizable window). As for the other user interface - features, controls to enable this should not interfere with the page's normal rendering unless the - user agent is exposing a user interface. - In such an independent context, however, user agents may make full user interfaces visible, with, - e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

    + -

    User agents may allow video playback to affect system features that could interfere with the - user's experience; for example, user agents could disable screensavers while video playback is in - progress.

    + -
    +

    When an iframe element with a sandbox + attribute has its nested browsing context created (before the initial + about:blank Document is created), and when an iframe + element's sandbox attribute is set or changed while it + has a nested browsing context, the user agent must parse the sandboxing directive using the attribute's value as the input, the iframe element's nested browsing context's + iframe sandboxing flag set as the output, and, if the + iframe has an allowfullscreen + attribute, the allow fullscreen flag.

    -

    The poster IDL attribute must - reflect the poster content attribute.

    +

    When an iframe element's sandbox + attribute is removed while it has a nested browsing context, the user agent must + empty the iframe element's nested browsing context's + iframe sandboxing flag set as the output.

    -

    This example shows how to detect when a video has failed to play correctly:

    +

    In this example, some completely-unknown, potentially hostile, user-provided HTML content is + embedded in a page. Because it is served from a separate domain, it is affected by all the normal + cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, + forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or + windows it itself embeds).

    - 
    <script>
- function failed(e) {
-   // video playback failed - show a message saying why
-   switch (e.target.error.code) {
-     case e.target.error.MEDIA_ERR_ABORTED:
-       alert('You aborted the video playback.');
-       break;
-     case e.target.error.MEDIA_ERR_NETWORK:
-       alert('A network error caused the video download to fail part-way.');
-       break;
-     case e.target.error.MEDIA_ERR_DECODE:
-       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
-       break;
-     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
-       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
-       break;
-     default:
-       alert('An unknown error occurred.');
-       break;
-   }
- }
-</script>
-<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
-<p><a href="tgif.vid">Download the video file</a>.</p>
    + 
    <p>We're not scared of you! Here is your content, unedited:</p>
+<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
    + +

    It is important to use a separate domain so that if the attacker convinces the + user to visit that page directly, the page doesn't run in the context of the site's origin, which + would make the user vulnerable to any attack found in the page.

    +
    +

    In this example, a gadget from another site is embedded. The gadget has scripting and forms + enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with + its originating server. The sandbox is still useful, however, as it disables plugins and popups, + thus reducing the risk of the user being exposed to malware and other annoyances.

    + 
    <iframe sandbox="allow-same-origin allow-forms allow-scripts"
+        src="http://maps.example.com/embedded.html"></iframe>
    - +
    +
    +

    Suppose a file A contained the following fragment:

    + 
    <iframe sandbox="allow-same-origin allow-forms" src=B></iframe>
    +

    Suppose that file B contained an iframe also:

    -

    4.7.11 The audio element

    + 
    <iframe sandbox="allow-scripts" src=C></iframe>
    -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a controls attribute: Interactive content.
    If the element has a controls attribute: Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    If the element has a src attribute: -zero or more track elements, then -transparent, but with no media element descendants.
    If the element does not have a src attribute: zero or more source elements, then - zero or more track elements, then - transparent, but with no media element descendants.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    crossorigin — How the element handles crossorigin requests
    preload — Hints how much buffering the media resource will likely need
    autoplay — Hint that the media resource can be started automatically when the page is loaded
    mediagroup — Groups media elements together with an implicit MediaController
    loop — Whether to loop the media resource
    muted — Whether to mute the media resource by default
    controls — Show user agent controls
    DOM interface:
    - 
    [NamedConstructor=Audio(optional DOMString src)]
-interface HTMLAudioElement : HTMLMediaElement {};
    -
    +

    Further, suppose that file C contained a link:

    + + 
    <a href=D>Link</a>
    + +

    For this example, suppose all the files were served as text/html.

    + +

    Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the + iframe in A has scripts disabled, and this overrides the allow-scripts keyword set on the + iframe in B. Forms are also disabled, because the inner iframe (in B) + does not have the allow-forms keyword + set.

    -

    An audio element represents a sound or audio stream.

    +

    Suppose now that a script in A removes all the sandbox attributes in A and B. + This would change nothing immediately. If the user clicked the link in C, loading page D into the + iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the + state of the nested browsing context in the iframe in A when page B was + loaded.

    - +

    Generally speaking, dynamically removing or changing the sandbox attribute is ill-advised, because it can make it quite + hard to reason about what will be allowed and what will not.

    -

    Content may be provided inside the audio element. User agents - should not show this content to the user; it is intended for older Web browsers which do - not support audio, so that legacy audio plugins can be tried, or to show text to the - users of these older browsers informing them of how to access the audio contents.

    +
    -

    In particular, this content is not intended to address accessibility concerns. To - make audio content accessible to the deaf or to those with other physical or cognitive - disabilities, a variety of features are available. If captions or a sign language video are - available, the video element can be used instead of the audio element to - play the audio, allowing users to enable the visual alternatives. Chapter titles can be provided - to aid navigation, using the track element and a WebVTT file. And, - naturally, transcripts or other textual alternatives can be provided by simply linking to them in - the prose near the audio element. [WEBVTT]

    -

    The audio element is a media element whose media data is - ostensibly audio data.

    +
    -

    The src, preload, - autoplay, mediagroup, loop, muted, and controls - attributes are the attributes common to all media - elements.

    +

    The seamless attribute is a boolean + attribute. When specified, it indicates that the iframe element's + browsing context is to be rendered in a manner that makes it appear to be part of the + containing document (seamlessly included in the parent document).

    - +
    -

    When an audio element is potentially playing, it must have its audio - data played synchronised with the current playback position, at the element's - effective media volume. The user agent must play the audio from audio tracks that - were enabled when the event loop last reached step 1.

    +

    An HTML inclusion is effected using this attribute as in the following example. + In this case, the inclusion is of a site-wide navigation bar. Any links in the + iframe will, in new user agents, be automatically opened in the + iframe's parent browsing context; for legacy user agents, the site could also + include a base element with a target + attribute with the value _parent. Similarly, in new user agents the styles + of the parent page will be automatically applied to the contents of the frame, but to support + legacy user agents authors might wish to include the styles explicitly.

    -

    When an audio element is not potentially playing, audio must not play - for the element.

    + 
    <!DOCTYPE HTML>
+<title>Mirror Mirror — MovieInfo™</title>
+<header>
+ <hgroup>
+  <h1>Mirror Mirror</h1>
+  <h2>Part of the MovieInfo™ Database</h2>
+ </hgroup>
+ <nav>
+  <iframe seamless src="nav.inc"></iframe>
+ </nav>
+</header>
+...
    - +
    -
    audio = new Audio( [ url ] )
    + -

    Returns a new audio element, with the src - attribute set to the value passed in the argument, if applicable.

    +

    An iframe element is said to be in seamless mode when all of the + following conditions are met:

    -
    + +

    When an iframe element is in seamless mode, the following + requirements apply:

    -

    4.7.12 The source element

    + -
    +

    If the attribute is not specified, or if the origin conditions listed above are + not met, then the user agent should render the nested browsing context in a manner + that is clearly distinguishable as a separate browsing context, and the + seamless browsing context flag must be set to false for that browsing + context.

    -

    The following list shows some examples of how to use the codecs= MIME - parameter in the type attribute.

    +

    It is important that user agents recheck the above conditions whenever the + active document of the nested browsing context of the + iframe changes, such that the seamless browsing context flag gets unset + if the nested browsing context is navigated to another + origin.

    -
    H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
    H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
    MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
    MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
    MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
    <source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
    Theora video and Vorbis audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
    Theora video and Speex audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
    Vorbis audio alone in Ogg container
    <source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
    Speex audio alone in Ogg container
    <source src='audio.spx' type='audio/ogg; codecs=speex'>
    FLAC audio alone in Ogg container
    <source src='audio.oga' type='audio/ogg; codecs=flac'>
    Dirac video and Vorbis audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
    + -
    +

    The attribute can be set or removed dynamically, with the rendering updating in + tandem.

    - +

    The contenteditable attribute does not + propagate into seamless iframes.

    -

    If a source element is inserted as a child of a media element that - has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media - element's resource selection - algorithm.

    -

    The IDL attributes src and type must reflect the respective content - attributes of the same name.

    +
    - +

    The allowfullscreen attribute is a + boolean attribute. When specified, it indicates that Document objects in + the iframe element's browsing context are to be allowed to use requestFullscreen() (if it's not blocked for other + reasons, e.g. there is another ancestor iframe without this attribute set).

    -

    If the author isn't sure if user agents will all be able to render the media resources - provided, the author can listen to the error event on the last - source element and trigger fallback behavior:

    +

    Here, an iframe is used to embed a player from a video site. The allowfullscreen attribute is needed to enable the + player to show its video full-screen.

    - 
    <script>
- function fallback(video) {
-   // replace <video> with its contents
-   while (video.hasChildNodes()) {
-     if (video.firstChild instanceof HTMLSourceElement)
-       video.removeChild(video.firstChild);
-     else
-       video.parentNode.insertBefore(video.firstChild, video);
-   }
-   video.parentNode.removeChild(video);
- }
-</script>
-<video controls autoplay>
- <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
- <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
-         onerror="fallback(parentNode)">
- ...
-</video>
    + 
    <article>
+ <header>
+  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
+  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
+ </header>
+ <main>
+  <p>Check out my new ride!</p>
+  <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
+ </main>
+</article>
    +
    -

    4.7.13 The track element

    +

    The iframe element supports dimension attributes for cases where the + embedded content has specific dimensions (e.g. ad units have well-defined dimensions).

    -
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of a media element, before any flow content.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    kind — The type of text track
    src — Address of the resource
    srclang — Language of the text track
    label — User-visible label
    default — Enable the track if no other text track is more suitable
    DOM interface:
    -
    interface HTMLTrackElement : HTMLElement {
-           attribute DOMString kind;
-           attribute DOMString src;
-           attribute DOMString srclang;
-           attribute DOMString label;
-           attribute boolean default;
+  
    An iframe element never has fallback content, as it will always
+  create a nested browsing context, regardless of whether the specified initial
+  contents are successfully used.
    
 
-  const unsigned short NONE = 0;
-  const unsigned short LOADING = 1;
-  const unsigned short LOADED = 2;
-  const unsigned short ERROR = 3;
-  readonly attribute unsigned short readyState;
 
-  readonly attribute TextTrack track;
-};
    -
    +
    -

    The track element allows authors to specify explicit external timed text tracks for media elements. It - does not represent anything on its own.

    +

    Descendants of iframe elements represent nothing. (In legacy user agents that do + not support iframe elements, the contents would be parsed as markup that could act as + fallback content.)

    -

    The kind attribute is an enumerated - attribute. The following table lists the keywords defined for this attribute. The keyword - given in the first cell of each row maps to the state given in the second cell.

    +

    When used in HTML documents, the allowed content model + of iframe elements is text, except that invoking the HTML fragment parsing + algorithm with the iframe element as the context element and the text contents as the input must result in a list of nodes that are all phrasing content, + with no parse errors having occurred, with no script + elements being anywhere in the list or as descendants of elements in the list, and with all the + elements in the list (including their descendants) being themselves conforming.

    -
    Keyword - State - Brief description -
    subtitles - Subtitles - - Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the media resource's audio track). - Overlaid on the video. -
    captions - Captions - - Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf). - Overlaid on the video; labeled as appropriate for the hard-of-hearing. -
    descriptions - Descriptions - - Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). - Synthesized as audio. -
    chapters - Chapters - - Chapter titles, intended to be used for navigating the media resource. - Displayed as an interactive (potentially nested) list in the user agent's interface. -
    metadata - Metadata - - Tracks intended for use from script. - Not displayed by the user agent. -
    +

    The iframe element must be empty in XML documents.

    -

    The attribute may be omitted. The missing value default is the subtitles state.

    +

    The HTML parser treats markup inside iframe elements as + text.

    -

    The src attribute gives the address of the text - track data. The value must be a valid non-empty URL potentially surrounded by spaces. - This attribute must be present.

    -

    If the element has a src attribute whose value is not the - empty string and whose value, when the attribute was set, could be successfully resolved relative to the element, then the element's track - URL is the resulting absolute URL. Otherwise, the element's track - URL is the empty string.

    +
    - +

    The IDL attributes src, srcdoc, name, sandbox, and seamless must reflect the respective + content attributes of the same name.

    -

    If the element's track URL identifies a WebVTT resource, and the - element's kind attribute is not in the metadata state, then the WebVTT file must be - a WebVTT file using cue text. [WEBVTT]

    +

    The allowFullscreen IDL attribute + must reflect the allowfullscreen + content attribute.

    -

    Furthermore, if the element's track URL identifies a WebVTT resource, - and the element's kind attribute is in the chapters state, then the WebVTT file must be - both a WebVTT file using chapter title text and a WebVTT file using only nested - cues. [WEBVTT]

    +

    The contentDocument IDL attribute + must return the Document object of the active document of the + iframe element's nested browsing context, if any and if its + effective script origin is the same origin as the effective script + origin specified by the incumbent settings object, or null otherwise.

    -

    The srclang attribute gives the language of - the text track data. The value must be a valid BCP 47 language tag. This attribute must be present - if the element's kind attribute is in the subtitles state. [BCP47]

    +

    The contentWindow IDL attribute must + return the WindowProxy object of the iframe element's nested + browsing context, if any, or null otherwise.

    -

    If the element has a srclang attribute whose value is - not the empty string, then the element's track language is the value of the attribute. - Otherwise, the element has no track language.

    +
    - +

    Here is an example of a page using an iframe to include advertising from an + advertising broker:

    -

    The label attribute gives a user-readable - title for the track. This title is used by user agents when listing subtitle, caption, and audio description tracks in their user interface.

    + 
    <iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
+        width="468" height="60"></iframe>
    -

    The value of the label attribute, if the attribute is - present, must not be the empty string. Furthermore, there must not be two track - element children of the same media element whose kind attributes are in the same state, whose srclang attributes are both missing or have values that - represent the same language, and whose label attributes are - again both missing or both have the same value.

    +
    - -

    If the element has a label attribute whose value is not - the empty string, then the element's track label is the value of the attribute. - Otherwise, the element's track label is an empty string.

    - -

    The default attribute is a boolean - attribute, which, if specified, indicates that the track is to be enabled if the user's - preferences do not indicate that another track would be more appropriate.

    +

    4.8.7 The embed element

    -

    Each media element must have no more than one track element child - whose kind attribute is in the subtitles or captions state and whose default attribute is specified.

    -

    Each media element must have no more than one track element child - whose kind attribute is in the description state and whose default attribute is specified.

    -

    Each media element must have no more than one track element child - whose kind attribute is in the chapters state and whose default attribute is specified.

    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    src — Address of the resource
    type — Type of embedded resource
    width — Horizontal dimension
    height — Vertical dimension
    Any other attribute that has no namespace (see prose).
    DOM interface:
    +
    interface HTMLEmbedElement : HTMLElement {
+           attribute DOMString src;
+           attribute DOMString type;
+           attribute DOMString width;
+           attribute DOMString height;
+  legacycaller any (any... arguments);
 
-  
    There is no limit on the number of track elements whose kind attribute is in the metadata state and whose default attribute is specified.
    
+  // also has obsolete members
+};
    + +

    Depending on the type of content instantiated by the + embed element, the node may also support other + interfaces.

    + +
    -
    track . readyState
    -

    Returns the text track readiness state, - represented by a number from the following list:

    -
    track . NONE (0)
    -

    The text track not loaded state.

    -
    track . LOADING (1)
    -

    The text track loading state.

    -
    track . LOADED (2)
    -

    The text track loaded state.

    -
    track . ERROR (3)
    -

    The text track failed to load state.

    -
    -
    track . track
    +

    The embed element provides an integration point for an external (typically + non-HTML) application or interactive content.

    -

    Returns the TextTrack object corresponding to the text track of the track element.

    +

    The src attribute gives the address of the + resource being embedded. The attribute, if present, must contain a valid non-empty URL + potentially surrounded by spaces.

    -
    +

    If the itemprop attribute is specified on an + embed element, then the src attribute must also + be specified.

    - +

    The type attribute, if present, gives the + MIME type by which the plugin to instantiate is selected. The value must be a + valid MIME type. If both the type attribute and + the src attribute are present, then the type attribute must specify the same type as the explicit Content-Type metadata of the resource given by the src attribute.

    -

    The readyState attribute must return the - numeric value corresponding to the text track readiness state of the - track element's text track, as defined by the following list:

    + -
    NONE (numeric value 0)
    The text track not loaded state.
    LOADING (numeric value 1)
    The text track loading state.
    LOADED (numeric value 2)
    The text track loaded state.
    ERROR (numeric value 3)
    The text track failed to load state.
    +

    While any of the following conditions are occurring, any plugin instantiated for + the element must be removed, and the embed element represents + nothing:

    -

    The track IDL attribute must, on getting, - return the track element's text track's corresponding - TextTrack object.

    + -

    The src, srclang, label, and default IDL attributes must reflect the - respective content attributes of the same name. The kind IDL attribute must reflect the content - attribute of the same name, limited to only known values.

    +

    An embed element is said to be potentially + active when the following conditions are all met simultaneously:

    - + -
    +

    Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is + remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must + queue a task using the embed task source to run the + embed element setup steps.

    -

    This video has subtitles in several languages:

    +

    The embed element setup steps are as follows:

    - 
    <video src="brave.webm">
- <track kind=subtitles src=brave.en.vtt srclang=en label="English">
- <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
- <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
- <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
-</video>
    +

    1. If another task has since been queued to run the + embed element setup steps for this element, then abort these steps.

    2. -

      (The lang attributes on the last two describe the language of - the label attribute, not the language of the subtitles - themselves. The language of the subtitles is given by the srclang attribute.)

      +
      If the element has a src attribute set
      -
    +

    The user agent must resolve the value of the element's + src attribute, relative to the element. If that is + successful, the user agent should fetch the resulting absolute + URL, from the element's browsing context scope origin if it has one. The task that + is queued by the networking task source once + the resource has been fetched must run the following steps:

    + +

    1. If another task has since been queued to run + the embed element setup steps for this element, then abort these + steps.

    2. -

      4.7.14 Media elements

      +

      Determine the type of the content being embedded, as + follows (stopping at the first substep that determines the type):

      -

      Media elements (audio and video, in - this specification) implement the following interface:

      +

      1. If the element has a type attribute, and that + attribute's value is a type that a plugin supports, then the value of the + type attribute is the content's type.

      2. - 
        enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
-interface HTMLMediaElement : HTMLElement {
+          
 
-  // error state
-  readonly attribute MediaError? error;
+          
        Otherwise, if applying the URL parser algorithm to the URL of
+          the specified resource (after any redirects) results in a parsed URL whose
+          path component matches a pattern that a
+          plugin supports, then the content's
+          type is the type that that plugin can handle.
        
 
-  // network state
-           attribute DOMString src;
-  readonly attribute DOMString currentSrc;
-           attribute DOMString crossOrigin;
-  const unsigned short NETWORK_EMPTY = 0;
-  const unsigned short NETWORK_IDLE = 1;
-  const unsigned short NETWORK_LOADING = 2;
-  const unsigned short NETWORK_NO_SOURCE = 3;
-  readonly attribute unsigned short networkState;
-           attribute DOMString preload;
-  readonly attribute TimeRanges buffered;
-  void load();
-  CanPlayTypeResult canPlayType(DOMString type);
+          
        For example, a plugin might say that it can handle resources with path components that end with the four character string
+          ".swf".
        
 
-  // ready state
-  const unsigned short HAVE_NOTHING = 0;
-  const unsigned short HAVE_METADATA = 1;
-  const unsigned short HAVE_CURRENT_DATA = 2;
-  const unsigned short HAVE_FUTURE_DATA = 3;
-  const unsigned short HAVE_ENOUGH_DATA = 4;
-  readonly attribute unsigned short readyState;
-  readonly attribute boolean seeking;
+          
+          
 
-  // playback state
-           attribute double currentTime;
-  void fastSeek(double time);
-  readonly attribute unrestricted double duration;
-  Date getStartDate();
-  readonly attribute boolean paused;
-           attribute double defaultPlaybackRate;
-           attribute double playbackRate;
-  readonly attribute TimeRanges played;
-  readonly attribute TimeRanges seekable;
-  readonly attribute boolean ended;
-           attribute boolean autoplay;
-           attribute boolean loop;
-  void play();
-  void pause();
+         
      3. Otherwise, if the specified resource has explicit
+         Content-Type metadata, then that is the content's
+         type.
      4. Otherwise, the content has no type and there
+         can be no appropriate plugin for it.
      - // media controller - attribute DOMString mediaGroup; - attribute MediaController? controller; +
    3. - // controls - attribute boolean controls; - attribute double volume; - attribute boolean muted; - attribute boolean defaultMuted; +

      If the previous step determined that the content's + type is image/svg+xml, then run the following substeps:

      - // tracks - readonly attribute AudioTrackList audioTracks; - readonly attribute VideoTrackList videoTracks; - readonly attribute TextTrackList textTracks; - TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = ""); -}; +

      1. If the embed element is not associated with a nested browsing + context, associate the element with a newly created nested browsing + context, and, if the element has a name + attribute, set the browsing context name of the element's nested + browsing context to the value of this attribute.

        + -

        The media element attributes, src, crossorigin, preload, autoplay, - mediagroup, loop, - muted, and controls, apply to all media - elements. They are defined in this section.

        +

      2. Navigate the nested browsing context to + the fetched resource, with replacement enabled, and with the + embed element's document's browsing context as the source + browsing context. (The src attribute of the + embed element doesn't get updated if the browsing context gets further + navigated to other locations.)

      3. The embed element now represents its associated + nested browsing context.

      - +
    4. - +

      Otherwise, find and instantiate an appropriate plugin based on the content's type, and hand that plugin the + content of the resource, replacing any previously instantiated plugin for the element. The + embed element now represents this plugin instance.

      -

      Media elements are used to present audio data, or video and - audio data, to the user. This is referred to as media data in this section, since this - section applies equally to media elements for audio or for - video. +

    5. Once the resource or plugin has completely loaded, queue a task to + fire a simple event named load at the + element.

    - The term media resource is used to refer to the complete set of media data, e.g. the - complete video file, or complete audio file. +

    Whether the resource is fetched successfully or not (e.g. whether the response code was a + 2xx code or equivalent) must be ignored + when determining the content's type and when handing + the resource to the plugin.

    -

    +

    This allows servers to return data for plugins even with error responses (e.g. + HTTP 500 Internal Server Error codes can still contain plugin data).

    -

    A media resource can have multiple audio and video tracks. For the purposes of a - media element, the video data of the media resource is only that of the - currently selected track (if any) as given by the element's videoTracks attribute when the event loop last - reached step 1, and the audio data of the media resource is the result of mixing all - the currently enabled tracks (if any) given by the element's audioTracks attribute when the event loop last - reached step 1.

    +

    Fetching the resource must delay the load event of the element's document.

    + + + -

    Both audio and video elements can be used for both audio - and video. The main difference between the two is simply that the audio element has - no playback area for visual content (such as video or captions), whereas the video - element does.

    +
    If the element has no src attribute set
    - +

    The user agent should find and instantiate an appropriate plugin based on the + value of the type attribute. The embed + element now represents this plugin instance.

    -

    Except where otherwise explicitly specified, the task source for all the tasks - queued in this section and its subsections is the media - element event task source of the media element in question.

    +

    Once the plugin is completely loaded, queue a task to fire a simple + event named load at the element.

    - + + +

    The embed element has no fallback content. If the user agent can't + find a suitable plugin when attempting to find and instantiate one for the algorithm above, then + the user agent must use a default plugin. This default could be as simple as saying "Unsupported + Format".

    -
    4.7.14.1 Error codes
    +

    Whenever an embed element that was potentially + active stops being potentially active, any + plugin that had been instantiated for that element must be unloaded.

    -
    media . error
    +

    When a plugin is to be instantiated but it cannot be secured and the sandboxed plugins browsing context + flag is set on the embed element's Document's active + sandboxing flag set, then the user agent must not instantiate the plugin, and + must instead render the embed element in a manner that conveys that the + plugin was disabled. The user agent may offer the user the option to override the + sandbox and instantiate the plugin anyway; if the user invokes such an option, the + user agent must act as if the conditions above did not apply for the purposes of this element.

    -

    Returns a MediaError object representing the current error state of the - element.

    +

    Plugins that cannot be secured are + disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by + the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User + agents should convey the danger of overriding the sandbox to the user if an option to do so is + provided.

    -

    Returns null if there is no error.

    +

    When an embed element represents a nested browsing context: if the + embed element's nested browsing context's active document + is not ready for post-load tasks, and when anything is delaying the load event of the embed element's browsing + context's active document, and when the embed element's + browsing context is in the delaying load + events mode, the embed must delay the load event of its + document.

    -
    +

    The task source for the tasks mentioned in this + section is the DOM manipulation task source.

    -

    All media elements have an associated error status, which - records the last error the element encountered since its resource selection algorithm was last invoked. The - error attribute, on getting, must return the - MediaError object created for this last error, or null if there has not been an - error.

    +

    Any namespace-less attribute other than name, align, hspace, and vspace may be + specified on the embed element, so long as its name is XML-compatible + and contains no uppercase ASCII letters. These attributes are then passed as + parameters to the plugin.

    + +

    All attributes in HTML documents get lowercased automatically, so the + restriction on uppercase letters doesn't affect such documents.

    + +

    The four exceptions are to exclude legacy attributes that have side-effects beyond + just sending parameters to the plugin.

    - 
    interface MediaError {
-  const unsigned short MEDIA_ERR_ABORTED = 1;
-  const unsigned short MEDIA_ERR_NETWORK = 2;
-  const unsigned short MEDIA_ERR_DECODE = 3;
-  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
-  readonly attribute unsigned short code;
-};
    +

    The user agent should pass the names and values of all the attributes of the embed + element that have no namespace to the plugin used, when one is instantiated.

    -
    media . error . code
    +

    The HTMLEmbedElement object representing the element must expose the scriptable + interface of the plugin instantiated for the embed element, if any. At a + minimum, this interface must implement the legacy caller + operation. (It is suggested that the default behavior of this legacy caller operation, e.g. + the behavior of the default plugin's legacy caller operation, be to throw a + NotSupportedError exception.)

    -

    Returns the current error's error code, from the list below.

    + -
    +

    The embed element supports dimension attributes.

    -

    The code attribute of a - MediaError object must return the code for the error, which must be one of the - following:

    +

    The IDL attributes src and type each must reflect the respective + content attributes of the same name.

    -
    MEDIA_ERR_ABORTED (numeric value 1)
    The fetching process for the media resource was aborted by the user agent at the - user's request.
    MEDIA_ERR_NETWORK (numeric value 2)
    A network error of some description caused the user agent to stop fetching the media - resource, after the resource was established to be usable.
    MEDIA_ERR_DECODE (numeric value 3)
    An error of some description occurred while decoding the media resource, after - the resource was established to be usable.
    MEDIA_ERR_SRC_NOT_SUPPORTED (numeric value 4)
    The media resource indicated by the src - attribute was not suitable.
    +
    +

    Here's a way to embed a resource that requires a proprietary plugin, like Flash:

    + 
    <embed src="catgame.swf">
    -
    4.7.14.2 Location of the media resource
    +

    If the user does not have the plugin (for example if the plugin vendor doesn't support the + user's platform), then the user will be unable to use the resource.

    -

    The src content attribute on media elements gives the address of the media resource (video, audio) to show. The - attribute, if present, must contain a valid non-empty URL potentially surrounded by - spaces.

    +

    To pass the plugin a parameter "quality" with the value "high", an attribute can be + specified:

    -

    If the itemprop attribute is specified on the media - element, then the src attribute must also be - specified.

    + 
    <embed src="catgame.swf" quality="high">
    -

    The crossorigin content attribute on - media elements is a CORS settings attribute.

    +

    This would be equivalent to the following, when using an object element + instead:

    - + 
    <object data="catgame.swf">
+ <param name="quality" value="high">
+</object>
    -

    If a media element is created with a - src attribute, the user agent must synchronously invoke the - media element's resource selection - algorithm.

    +
    -

    If a src attribute of a media element is set - or changed, the user agent must invoke the media element's media element load - algorithm. (Removing the src attribute does - not do this, even if there are source elements present.)

    -

    The src IDL attribute on media elements must reflect the content attribute of the same - name.

    -

    The crossOrigin IDL attribute must - reflect the crossorigin content - attribute, limited to only known values.

    - +

    4.8.8 The object element

    -
    media . currentSrc
    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a usemap attribute: Interactive content.
    Listed, submittable, and reassociateable form-associated element.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Zero or more param elements, then, transparent.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    data — Address of the resource
    type — Type of embedded resource
    typemustmatch — Whether the type attribute and the Content-Type value need to match for the resource to be used
    name — Name of nested browsing context
    usemap — Name of image map to use
    form — Associates the control with a form element
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    +
    interface HTMLObjectElement : HTMLElement {
+           attribute DOMString data;
+           attribute DOMString type;
+           attribute boolean typeMustMatch;
+           attribute DOMString name;
+           attribute DOMString useMap;
+  readonly attribute HTMLFormElement? form;
+           attribute DOMString width;
+           attribute DOMString height;
+  readonly attribute Document? contentDocument;
+  readonly attribute WindowProxy? contentWindow;
 
-    
    Returns the address of the current media resource.
    
+  readonly attribute boolean willValidate;
+  readonly attribute ValidityState validity;
+  readonly attribute DOMString validationMessage;
+  boolean checkValidity();
+  boolean reportValidity();
+  void setCustomValidity(DOMString error);
 
-    
    Returns the empty string when there is no media resource.
    
+  legacycaller any (any... arguments);
 
+  // also has obsolete members
+};
    + +

    Depending on the type of content instantiated by the + object element, the node also supports other + interfaces.

    +
    - +

    The object element can represent an external resource, which, depending on the + type of the resource, will either be treated as an image, as a nested browsing + context, or as an external resource to be processed by a plugin.

    -

    The currentSrc IDL attribute is initially - the empty string. Its value is changed by the resource - selection algorithm defined below.

    +

    The data attribute, if present, specifies the + address of the resource. If present, the attribute must be a valid non-empty URL potentially + surrounded by spaces.

    - +

    Authors who reference resources from other origins + that they do not trust are urged to use the typemustmatch attribute defined below. Without that + attribute, it is possible in certain cases for an attacker on the remote host to use the plugin + mechanism to run arbitrary scripts, even if the author has used features such as the Flash + "allowScriptAccess" parameter.

    -

    There are two ways to specify a media resource, the src attribute, or source elements. The attribute - overrides the elements.

    +

    The type attribute, if present, specifies the + type of the resource. If present, the attribute must be a valid MIME type.

    + +

    At least one of either the data attribute or the type attribute must be present.

    + +

    If the itemprop attribute is specified on an object + element, then the data attribute must also be specified.

    +

    The typemustmatch attribute is a + boolean attribute whose presence indicates that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the + aforementioned resource match.

    +

    The typemustmatch attribute must not be + specified unless both the data attribute and the type attribute are present.

    -
    4.7.14.3 MIME types
    +

    The name attribute, if present, must be a + valid browsing context name. The given value is used to name the nested + browsing context, if applicable.

    -

    A media resource can be described in terms of its type, specifically a - MIME type, in some cases with a codecs parameter. (Whether the - codecs parameter is allowed or not depends on the MIME type.) [RFC4281]

    + -

    Types are usually somewhat incomplete descriptions; for example "video/mpeg" doesn't say anything except what the container type is, and even a - type like "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" doesn't - include information like the actual bitrate (only the maximum bitrate). Thus, given a type, a user - agent can often only know whether it might be able to play media of that type (with - varying levels of confidence), or whether it definitely cannot play media of that - type.

    +

    Whenever one of the following conditions occur:

    -

    A type that the user agent knows it cannot render is one that describes a resource - that the user agent definitely does not support, for example because it doesn't recognise the - container type, or it doesn't support the listed codecs.

    + -

    This script tests to see if the user agent supports a (fictional) new format to dynamically - decide whether to use a video element or a plugin:

    +

    ...the user agent must queue a task to run the following steps to (re)determine + what the object element represents. This task + being queued or actively running must delay the load + event of the element's document.

    - 
    <section id="video">
- <p><a href="playing-cats.nfv">Download video</a></p>
-</section>
-<script>
- var videoSection = document.getElementById('video');
- var videoElement = document.createElement('video');
- var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
- if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
-   // not confident of browser support
-   // but we have a plugin
-   // so use plugin instead
-   videoElement = document.createElement("embed");
- } else if (support == "") {
-   // no support from browser and no plugin
-   // do nothing
-   videoElement = null;
- }
- if (videoElement) {
-   while (videoSection.hasChildNodes())
-     videoSection.removeChild(videoSection.firstChild);
-   videoElement.setAttribute("src", "playing-cats.nfv");
-   videoSection.appendChild(videoElement);
- }
-</script>
    +
    1. - +

      If the user has indicated a preference that this object element's fallback + content be shown instead of the element's usual behavior, then jump to the step below + labeled fallback.

      -

      The type attribute of the - source element allows the user agent to avoid downloading resources that use formats - it cannot render.

      +

      For example, a user could ask for the element's fallback content to + be shown because that content uses a format that the user finds more accessible.

      +
    2. -
      4.7.14.4 Network states
      +

      If the element has an ancestor media element, or has an ancestor + object element that is not showing its fallback content, or + if the element is not in a Document with a + browsing context, or if the element's Document is not fully + active, or if the element is still in the stack of open elements of an + HTML parser or XML parser, or if the element is not being + rendered, then jump to the step below labeled fallback.

      -
      media . networkState
      +
    3. -

      Returns the current state of network activity for the element, from the codes in the list - below.

      + -
      4. +

      If the classid attribute is present, and has a + value that isn't the empty string, then: if the user agent can find a plugin + suitable according to the value of the classid + attribute, and either plugins aren't being sandboxed or that + plugin can be secured, then that + plugin should be used, and the value of the data attribute, if any, should be passed to the + plugin. If no suitable plugin can be found, or if the + plugin reports an error, jump to the step below labeled fallback.

      - + -

      As media elements interact with the network, their current - network activity is represented by the networkState attribute. On getting, it must - return the current network state of the element, which must be one of the following values:

      +

    4. If the data attribute is present and its value is + not the empty string, then:

      - +

      1. If the type attribute is present and its value is + not a type that the user agent supports, and is not a type that the user agent can find a + plugin for, then the user agent may jump to the step below labeled fallback + without fetching the content to examine its real type.

      2. Resolve the URL specified by the data attribute, relative to the element.

      3. If that failed, fire a simple event named error at the element, then jump to the step below labeled + fallback.

      4. -
        NETWORK_EMPTY (numeric value 0)
        The element has not yet been initialized. All attributes are in their initial states.
        NETWORK_IDLE (numeric value 1)
        The element's resource - selection algorithm is active and has selected a resource, but it is not actually using the network at this time.
        NETWORK_LOADING (numeric value 2)
        The user agent is actively trying to download data.
        NETWORK_NO_SOURCE (numeric value 3)
        The element's resource - selection algorithm is active, but it has not yet found a resource to use.
        +

        Fetch the resulting absolute URL, from the element's + browsing context scope origin if it has one.

        - + +

        Fetching the resource must delay the load event of the element's document + until the task that is queued by the networking task source once the resource has been + fetched (defined next) has been run.

        -

        The resource selection algorithm defined - below describes exactly when the networkState - attribute changes value and what events fire to indicate changes in this state.

        +

        For the purposes of the application cache networking model, this + fetch operation is not for a child browsing context (though it might + end up being used for one after all, as defined below).

        - +

      5. If the resource is not yet available (e.g. because the resource was not available in the + cache, so that loading the resource required making a request over the network), then jump to + the step below labeled fallback. The task that is + queued by the networking task source once the + resource is available must restart this algorithm from this step. Resources can load + incrementally; user agents may opt to consider a resource "available" whenever enough data has + been obtained to begin processing the resource.

      6. If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire + a simple event named error at the element, then jump to + the step below labeled fallback.

      7. +

        Determine the resource type, as follows:

        -
        4.7.14.5 Loading the media resource
        +
        1. -
          media . load()
          +

          Let the resource type be unknown.

          -

          Causes the element to reset and start selecting and loading a new media resource - from scratch.

          +
        2. -
          3. +

          If the object element has a type + attribute and a typemustmatch attribute, and + the resource has associated Content-Type metadata, and the + type specified in the resource's Content-Type metadata is + an ASCII case-insensitive match for the value of the element's type attribute, then let resource type + be that type and jump to the step below labeled handler.

          - + -

          All media elements have an autoplaying flag, - which must begin in the true state, and a delaying-the-load-event flag, which must - begin in the false state. While the delaying-the-load-event flag is true, the element - must delay the load event of its document.

          +
        3. -

          When the load() method on a media - element is invoked, the user agent must run the media element load - algorithm.

          +

          If the object element has a typemustmatch attribute, jump to the step below + labeled handler.

          -

          The media element load algorithm consists of the following steps.

          +
        4. -

          1. Abort any already-running instance of the resource selection algorithm for this - element.

          2. + -

            If there are any tasks from the media - element's media element event task source in one of the task queues, then remove those tasks.

            +

            If the user agent is configured to strictly obey Content-Type headers for this resource, + and the resource has associated Content-Type metadata, + then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below + labeled handler.

            +

            This can introduce a vulnerability, wherein a site is trying to embed a + resource that uses a particular plugin, but the remote site overrides that and instead + furnishes the user agent with a resource that triggers a different plugin with different + security characteristics.

            +
          3. -

            Basically, pending events and callbacks for the media element are discarded when - the media element starts loading a new resource.

            +

            If there is a type attribute present on the + object element, and that attribute's value is not a type that the user agent + supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled + handler.

            -

          4. If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a task to fire a - simple event named abort at the media - element.

          5. +
          6. -

            If the media element's networkState - is not set to NETWORK_EMPTY, then run these - substeps:

            +

            Run the appropriate set of steps from the following + list:

            -

            1. Queue a task to fire a simple event named emptied at the media element.

            2. If a fetching process is in progress for the media - element, the user agent should stop it.

            3. Forget the media element's media-resource-specific tracks.

            4. If readyState is not set to HAVE_NOTHING, then set it to that state. - -

            5. If the paused attribute is false, then set it to - true.

            6. If seeking is true, set it to false.

            7. +
              If the resource has associated Content-Type + metadata
              -

              Set the current playback position to 0.

              +
              1. -

                Set the official playback position to 0.

                +

                Let binary be false.

                -

                If this changed the official playback position, then queue a task - to fire a simple event named timeupdate at the media element.

                +
              2. -

              3. Set the initial playback position to 0.

              4. Set the timeline offset to Not-a-Number (NaN).

              5. +

                If the type specified in the resource's Content-Type + metadata is "text/plain", and the result of applying the rules for distinguishing if a resource is + text or binary to the resource is that the resource is not + text/plain, then set binary to true.

                -

                Update the duration attribute to Not-a-Number - (NaN).

                +
              6. -

                The user agent will not fire a durationchange event for this particular change of - the duration.

                +

                If the type specified in the resource's Content-Type + metadata is "application/octet-stream", then set binary to true.

                -
              +
            8. -

            9. Set the playbackRate attribute to the value of - the defaultPlaybackRate attribute.

            10. Set the error attribute to null and the - autoplaying flag to true.

            11. Invoke the media element's resource selection algorithm.

            12. +

              If binary is false, then let the resource + type be the type specified in the resource's + Content-Type metadata, and jump to the step below labeled handler.

              -

              Playback of any previously playing media resource for this element - stops.

              +
            13. + +

              If there is a type attribute present on the + object element, and its value is not application/octet-stream, + then run the following steps:

              -
            +
            1. -

              The resource selection algorithm for a - media element is as follows. This algorithm is always invoked synchronously, but one - of the first steps in the algorithm is to return and continue running the remaining steps - asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts - closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop - algorithm). Steps in such sections are marked with ⌛.

              +

              If the attribute's value is a type that a plugin supports, or the + attribute's value is a type that starts with "image/" that is + not also an XML MIME type, then let the resource type be the + type specified in that type attribute.

              -

              1. Set the element's networkState attribute to - the NETWORK_NO_SOURCE value.

              2. Set the element's show poster flag to true.

              3. Set the media element's delaying-the-load-event flag to true - (this delays the load event).

              4. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous - section consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

              5. +
              6. -

                ⌛ If the media element's blocked-on-parser flag is false, - then populate the list of pending text tracks.

                +

                Jump to the step below labeled handler.

                -
              7. +
              -

              ⌛ If the media element has a src - attribute, then let mode be attribute.

              +
            -

            ⌛ Otherwise, if the media element does not have a src attribute but has a source element child, then - let mode be children and let candidate - be the first such source element child in tree order.

            +
            Otherwise, if the resource does not have associated + Content-Type metadata
            -

            ⌛ Otherwise the media element has neither a src attribute nor a source element child: set the - networkState to NETWORK_EMPTY, and abort these steps; the - synchronous section ends.

            +
            1. -

            2. ⌛ Set the media element's networkState to NETWORK_LOADING.

            3. ⌛ Queue a task to fire a simple event named loadstart at the media element.

            4. +

              If there is a type attribute present on the + object element, then let the tentative type be the type + specified in that type attribute.

              -

              If mode is attribute, then run these substeps:

              +

              Otherwise, let tentative type be the sniffed type of the resource.

              -

              1. ⌛ If the src - attribute's value is the empty string, then end the synchronous section, and jump - down to the failed with attribute step below.

              2. ⌛ Let absolute URL be the absolute URL that - would have resulted from resolving the URL - specified by the src attribute's value relative to the - media element when the src attribute was last - changed.

                +
              3. -

              4. ⌛ If absolute URL was obtained successfully, set the currentSrc attribute to absolute - URL.

              5. End the synchronous section, continuing the remaining steps - asynchronously.

              6. If absolute URL was obtained successfully, run the resource fetch algorithm with absolute - URL. If that algorithm returns without aborting this one, then the load - failed.

              7. +

                If tentative type is not + application/octet-stream, then let resource type be + tentative type and jump to the step below labeled + handler.

                -

                Failed with attribute: Reaching this step indicates that the media resource - failed to load or that the given URL could not be resolved. Queue a task to run the following steps:

                +
              -

              1. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_SRC_NOT_SUPPORTED.

              2. Forget the media element's media-resource-specific tracks.

              3. Set the element's networkState attribute - to the NETWORK_NO_SOURCE value.

              4. Set the element's show poster flag to true.

              5. Fire a simple event named error at - the media element.

              6. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

              +
    -

  • Wait for the task queued by the previous step to have - executed.

  • Abort these steps. Until the load() method is - invoked or the src attribute is changed, the element won't - attempt to load another resource. +

  • -

    Otherwise, the source elements will be used; run these substeps:

    + -
    1. +

      If applying the URL parser algorithm to the URL of the + specified resource (after any redirects) results in a parsed URL whose path component matches a pattern that a plugin + supports, then let resource type be the type that that plugin can + handle.

      -

      ⌛ Let pointer be a position defined by two adjacent nodes in the - media element's child list, treating the start of the list (before the first - child in the list, if any) and end of the list (after the last child in the list, if any) as - nodes in their own right. One node is the node before pointer, and the - other node is the node after pointer. Initially, let pointer be the position between the candidate node and the - next node, if there are any, or the end of the list, if it is the last node.

      +

      For example, a plugin might say that it can handle resources with path components that end with the four character string + ".swf".

      -

      As nodes are inserted and removed into the media element, pointer must be updated as follows:

      + + -
      If a new node is inserted between the two nodes that define pointer
      Let pointer be the point between the node before pointer and the new node. In other words, insertions at pointer go after pointer.
      If the node before pointer is removed
      Let pointer be the point between the node after pointer and the node before the node after pointer. In - other words, pointer doesn't move relative to the remaining nodes.
      If the node after pointer is removed
      Let pointer be the point between the node before pointer and the node after the node before pointer. Just - as with the previous case, pointer doesn't move relative to the remaining - nodes.
      +
    -

    Other changes don't affect pointer.

    +

    It is possible for this step to finish, or for one of the substeps above to + jump straight to the next step, with resource type still being unknown. In + both cases, the next step will trigger fallback.

    -

  • ⌛ Process candidate: If candidate does not have a - src attribute, or if its src attribute's value is the empty string, then end the - synchronous section, and jump down to the failed with elements step - below.

  • ⌛ Let absolute URL be the absolute URL that - would have resulted from resolving the URL - specified by candidate's src - attribute's value relative to the candidate when the src attribute was last changed.

    +

  • Handler: Handle the content as given by the first of the following cases that + matches:

    -

  • ⌛ If absolute URL was not obtained successfully, then end the - synchronous section, and jump down to the failed with elements step - below.

  • ⌛ If candidate has a type attribute whose value, when parsed as a MIME - type (including any codecs described by the codecs parameter, for - types that define that parameter), represents a type that the user agent knows it cannot - render, then end the synchronous section, and jump down to the failed with elements step below.

  • ⌛ Set the currentSrc attribute to absolute URL.

  • End the synchronous section, continuing the remaining steps - asynchronously.

  • Run the resource fetch algorithm with - absolute URL. If that algorithm returns without aborting this one, - then the load failed.

  • Failed with elements: Queue a task to fire a simple - event named error at the candidate element.

  • Asynchronously await a stable state. The synchronous section - consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

  • ⌛ Forget the media element's media-resource-specific - tracks.

  • ⌛ Find next candidate: Let candidate be - null.

  • ⌛ Search loop: If the node after pointer is - the end of the list, then jump to the waiting step below.

  • ⌛ If the node after pointer is a source element, - let candidate be that element.

  • ⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node - after pointer is the node after the node that used to be after pointer, if any.

  • ⌛ If candidate is null, jump back to the search - loop step. Otherwise, jump back to the process candidate step.

  • ⌛ Waiting: Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

  • ⌛ Set the element's show poster flag to true.

  • ⌛ Queue a task to set the element's delaying-the-load-event - flag to false. This stops delaying the load - event.

  • End the synchronous section, continuing the remaining steps - asynchronously.

  • Wait until the node after pointer is a node other than the end of - the list. (This step might wait forever.)

  • Asynchronously await a stable state. The synchronous section - consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

  • ⌛ Set the element's delaying-the-load-event flag back to true (this - delays the load event again, in case it hasn't been - fired yet).

    +
    If the resource type is not a type that the user agent supports, but + it is a type that a plugin supports
    -

  • ⌛ Set the networkState back to NETWORK_LOADING.

  • ⌛ Jump back to the find next candidate step above. +

    If plugins are being sandboxed and the plugin that + supports resource type cannot be secured, jump to the step below labeled fallback.

    - +

    Otherwise, the user agent should use the plugin that supports + resource type and pass the content of the resource to that + plugin. If the plugin reports an error, then jump to the step + below labeled fallback.

    -

    The resource fetch algorithm for a media - element and a given absolute URL is as follows:

    +
    If the resource type is an XML MIME type, or if the resource type + does not start with "image/"
    -

    1. Let the current media resource be the resource given by the - absolute URL passed to this algorithm. This is now the element's media - resource.

    2. Remove all media-resource-specific text - tracks from the media element's list of pending text tracks, if - any.

      +

      The object element must be associated with a newly created nested + browsing context, if it does not already have one.

      -

    3. Optionally, run the following substeps. This is the expected behavior if the user agent - intends to not attempt to fetch the resource until the user requests it explicitly (e.g. as a way - to implement the preload attribute's none keyword).

      +

      If the URL of the given resource is not about:blank, the + element's nested browsing context must then be navigated to that resource, with + replacement enabled, and with the object element's document's + browsing context as the source browsing context. (The data attribute of the object element doesn't + get updated if the browsing context gets further navigated to other locations.)

      -

      1. Set the networkState to NETWORK_IDLE.

      2. Queue a task to fire a simple event named suspend at the element.

      3. Queue a task to set the element's delaying-the-load-event flag - to false. This stops delaying the load - event.

      4. Wait for the task to be run.

      5. Wait for an implementation-defined event (e.g. the user requesting that the media - element begin playback).

      6. Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired - yet).

        +

        If the URL of the given resource is about:blank, then, + instead, the user agent must queue a task to fire a simple event + named load at the object element. No load event is fired at the + about:blank document itself.

        -

      7. Set the networkState to NETWORK_LOADING.

      +

      The object element represents the nested browsing + context.

      -
    4. +

      If the name attribute is present, the + browsing context name must be set to the value of this attribute; otherwise, + the browsing context name must be set to the empty string.

      -

      Perform a potentially CORS-enabled fetch of the current media resource's absolute URL, with the mode being - the state of the media element's crossorigin content attribute, the origin - being the origin of the media element's Document, and the - default origin behaviour set to taint.

      +

      In certain situations, e.g. if the resource was fetched from an application cache but it is an HTML file + with a manifest attribute that points to a different + application cache manifest, the navigation of the browsing context will be restarted so + as to load the resource afresh from the network or a different application + cache. Even if the resource is then found to have a different type, it is still used + as part of a nested browsing context: only the navigate algorithm + is restarted, not this object algorithm.

      -

      The resource obtained in this fashion, if any, contains the media data. It can - be CORS-same-origin or CORS-cross-origin; this affects whether - subtitles referenced in the media data are exposed in the API and, for - video elements, whether a canvas gets tainted when the video is drawn - on it.

      + -

      While the load is not suspended (see below), every 350ms (±200ms) or for every byte - received, whichever is least frequent, queue a task to fire a simple - event named progress at the element.

      +
      If the resource type starts with "image/", and support + for images has not been disabled
      -

      The stall timeout is a user-agent defined length of time, which should be about - three seconds. When a media element that is actively attempting to obtain - media data has failed to receive any data for a duration equal to the stall - timeout, the user agent must queue a task to fire a simple - event named stalled at the element.

      +

      Apply the image sniffing rules to + determine the type of the image.

      -

      User agents may allow users to selectively block or slow media data downloads. - When a media element's download has been blocked altogether, the user agent must - act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the - download may also be throttled automatically by the user agent, e.g. to balance the download - with other connections sharing the same bandwidth.

      +

      The object element represents the specified image. The image is + not a nested browsing context.

      -

      User agents may decide to not download more content at any time, e.g. - after buffering five minutes of a one hour media resource, while waiting for the user to decide - whether to play the resource or not, while waiting for user input in an interactive resource, or - when the user navigates away from the page. When a media element's download has - been suspended, the user agent must queue a task, to set the networkState to NETWORK_IDLE and fire a simple event named - suspend at the element. If and when downloading of the - resource resumes, the user agent must queue a task to set the networkState to NETWORK_LOADING. Between the queuing of these tasks, - the load is suspended (so progress events don't fire, - as described above).

      +

      If the image cannot be rendered, e.g. because it is malformed or in an unsupported + format, jump to the step below labeled fallback.

      -

      The preload attribute provides a hint - regarding how much buffering the author thinks is advisable, even in the absence of the autoplay attribute.

      +
      Otherwise
      -

      When a user agent decides to completely stall a download, e.g. if it is waiting until the - user starts playback before downloading any further content, the user agent must queue a - task to set the element's delaying-the-load-event flag to false. This stops - delaying the load event.

      +

      The given resource type is not supported. Jump to the step below + labeled fallback.

      -

      The user agent may use whatever means necessary to fetch the resource (within the constraints - put forward by this and other specifications); for example, reconnecting to the server in the - face of network errors, using HTTP range retrieval requests, or switching to a streaming - protocol. The user agent must consider a resource erroneous only if it has given up trying to - fetch it.

      +

      If the previous step ended with the resource type being + unknown, this is the case that is triggered.

      -

      This specification does not currently say whether or how to check the MIME - types of the media resources, or whether or how to perform file type sniffing using the actual - file data. Implementors differ in their intentions on this matter and it is therefore unclear - what the right solution is. In the absence of any requirement here, the HTTP specification's - strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media - type of the underlying data." ... "If and only if the media type is not given by a Content-Type - field, the recipient MAY attempt to guess the media type via inspection of its content - and/or the name extension(s) of the URI used to identify the resource.").

      +
    • -

    The networking task source tasks to process - the data as it is being fetched must each immediately queue a task to run the first - appropriate steps from the following list. (A new task is used for this so that the work - described below occurs relative to the media element event task source rather than - the networking task source.)

    +

  • The element's contents are not part of what the object element + represents.

    -
    If the media data cannot be fetched at all, due to network errors, causing the - user agent to give up trying to fetch the resource
    If the media data can be fetched but is found by inspection to be in an - unsupported format, or can otherwise not be rendered at all
    +
  • -

    DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal - network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported - container format, or using unsupported codecs for all the data, must cause the user agent to - execute the following steps:

    +

    Abort these steps. Once the resource is completely loaded, queue a task to + fire a simple event named load at the + element.

    -

    1. The user agent should cancel the fetching process.

    2. Abort this subalgorithm, returning to the resource selection algorithm.

      +
    - +

  • If the data attribute is absent but the type attribute is present, and the user agent can find a + plugin suitable according to the value of the type attribute, and either plugins aren't being sandboxed or the plugin can be + secured, then that plugin should be used. If these conditions cannot be met, or if the + plugin reports an error, jump to the step below labeled fallback. Otherwise + abort these steps; once the plugin is completely loaded, queue a task to fire + a simple event named load at the element.

  • Fallback: The object element represents the element's + children, ignoring any leading param element children. This is the element's + fallback content. If the element has an instantiated plugin, then + unload it. -

    If the media resource is found to have an audio - track
    +

    When the algorithm above instantiates a plugin, the user agent + should pass to the plugin used the names and values of all the attributes on the + element, in the order they were added to the element, with the attributes added by the parser + being ordered in source order, followed by a parameter named "PARAM" whose value is null, followed + by all the names and values of parameters given by + param elements that are children of the object element, in tree + order. If the plugin supports a scriptable interface, the + HTMLObjectElement object representing the element should expose that interface. The + object element represents the plugin. The + plugin is not a nested browsing context.

    -

    1. Create an AudioTrack object to represent the audio track.

    2. Update the media element's audioTracks attribute's AudioTrackList - object with the new AudioTrack object.

    3. Let enable be unknown.

    4. +

      Plugins are considered sandboxed for the purpose of an + object element if the sandboxed plugins browsing context flag is set on + the object element's Document's active sandboxing flag + set.

      -

      If either the media resource or the address of the current - media resource indicate a particular set of audio tracks to enable, or if the user - agent has information that would facilitate the selection of specific audio tracks to - improve the user's experience, then: if this audio track is one of the ones to enable, then - set enable to true, otherwise, set enable - to false.

      +

      Due to the algorithm above, the contents of object elements act as fallback + content, used only when referenced resources can't be shown (e.g. because it returned a 404 + error). This allows multiple object elements to be nested inside each other, + targeting multiple user agents with different capabilities, with the user agent picking the first + one it supports.

      -

      This could be triggered by Media Fragments URI fragment - identifier syntax, but it could also be triggered e.g. by the user agent selecting a 5.1 - surround sound audio track over a stereo audio track. [MEDIAFRAG]

      +

      When an object element represents a nested browsing context: if the + object element's nested browsing context's active document + is not ready for post-load tasks, and when anything is delaying the load event of the object element's browsing + context's active document, and when the object element's + browsing context is in the delaying load + events mode, the object must delay the load event of its + document.

      -

    5. If enable is still unknown, then, if the media - element does not yet have an enabled - audio track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then enable this audio track, - otherwise, do not enable this audio track.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, - and that uses the TrackEvent interface, with the track attribute initialised to the new - AudioTrack object, at this AudioTrackList object.

    +

    The task source for the tasks mentioned in this + section is the DOM manipulation task source.

    -
    If the media resource is found to have a video - track
    +

    Whenever the name attribute is set, if the + object element has a nested browsing context, its name must be changed to the new value. If the attribute is removed, if the + object element has a browsing context, the browsing context + name must be set to the empty string.

    -

    1. Create a VideoTrack object to represent the video track.

    2. Update the media element's videoTracks attribute's VideoTrackList - object with the new VideoTrack object.

    3. Let enable be unknown.

    4. + -

      If either the media resource or the address of the current - media resource indicate a particular set of video tracks to enable, or if the user - agent has information that would facilitate the selection of specific video tracks to - improve the user's experience, then: if this video track is the first such video track, then - set enable to true, otherwise, set enable - to false.

      +

      The usemap attribute, if present while the + object element represents an image, can indicate that the object has an associated + image map. The attribute must be ignored if the + object element doesn't represent an image.

      -

      This could again be triggered by Media Fragments URI - fragment identifier syntax.

      +

      The form attribute is used to explicitly associate the + object element with its form owner.

      -

    5. If enable is still unknown, then, if the media - element does not yet have a selected - video track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then select this track and unselect any - previously selected video tracks, otherwise, do not select this video track. If other tracks - are unselected, then a change event will be fired.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, - and that uses the TrackEvent interface, with the track attribute initialised to the new - VideoTrack object, at this VideoTrackList object.

    + -
    Once enough of the media data has been fetched to - determine the duration of the media resource, its dimensions, and other - metadata
    +

    Constraint validation: object elements are always barred + from constraint validation.

    -

    This indicates that the resource is usable. The user agent must follow these substeps:

    + -
    1. +

      The object element supports dimension attributes.

      -

      Establish the media timeline for the purposes of the current playback - position, the earliest possible position, and the initial playback - position, based on the media data.

      + -
    2. +

      The IDL attributes data, type and name each must reflect the respective + content attributes of the same name. The typeMustMatch IDL attribute must + reflect the typemustmatch content + attribute. The useMap IDL attribute must + reflect the usemap content attribute.

      -

      Update the timeline offset to the date and time that corresponds to the zero - time in the media timeline established in the previous step, if any. If no - explicit time and date is given by the media resource, the timeline - offset must be set to Not-a-Number (NaN).

      +

      The contentDocument IDL attribute + must return the Document object of the active document of the + object element's nested browsing context, if any and if its + effective script origin is the same origin as the effective script + origin specified by the incumbent settings object, or null otherwise.

      -

    3. Set the current playback position and the official playback - position to the earliest possible position.

    4. +

      The contentWindow IDL attribute must + return the WindowProxy object of the object element's nested + browsing context, if it has one; otherwise, it must return null.

      -

      Update the duration attribute with the time of - the last frame of the resource, if known, on the media timeline established - above. If it is not known (e.g. a stream that is in principle infinite), update the duration attribute to the value positive Infinity.

      +

      The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the + constraint validation API. The form IDL attribute + is part of the element's forms API.

      -

      The user agent will queue a task - to fire a simple event named durationchange at the element at this point.

      +

      All object elements have a legacy caller + operation. If the object element has an instantiated plugin that + supports a scriptable interface that defines a legacy caller operation, then that must be the + behavior of the object's legacy caller operation. Otherwise, the object's legacy caller operation + must be to throw a NotSupportedError exception.

      -
    5. + -

      For video elements, set the videoWidth and videoHeight attributes, and queue a task - to fire a simple event named resize at - the media element.

      +
      -

      Further resize events will be fired - if the dimensions subsequently change.

      +

      In the following example, a Java applet is embedded in a page using the object + element. (Generally speaking, it is better to avoid using applets like these and instead use + native JavaScript and HTML to provide the functionality, since that way the application will work + on all Web browsers without requiring a third-party plugin. Many devices, especially embedded + devices, do not support third-party technologies like Java.)

      -
    6. + 
      <figure>
+ <object type="application/x-java-applet">
+  <param name="code" value="MyJavaClass">
+  <p>You do not have Java available, or it is disabled.</p>
+ </object>
+ <figcaption>My Java Clock</figcaption>
+</figure>
      -

      Set the readyState attribute to HAVE_METADATA.

      + -

      A loadedmetadata DOM event - will be fired as part of setting the readyState attribute to a new value.

      +
      - +

      In this example, an HTML page is embedded in another using the object + element.

      -

    7. Let jumped be false.

    8. If the media element's default playback start position is - greater than zero, then seek to that time, and let jumped be true.

    9. Let the media element's default playback - start position be zero.

    10. + 
      <figure>
+ <object data="clock.html"></object>
+ <figcaption>My HTML Clock</figcaption>
+</figure>
      -

      If either the media resource or the address of the current - media resource indicate a particular start time, then set the initial playback - position to that time and, if jumped is still false, seek to that time and let jumped be - true.

      + -

      For example, with media formats that support the Media Fragments - URI fragment identifier syntax, the fragment identifier can be used to indicate a - start position. [MEDIAFRAG]

      +
      -

    11. If there is no enabled audio track, then - enable an audio track. This will cause a change event to be fired.

    12. If there is no selected video track, - then select a video track. This will cause a change event to be fired.

    13. If the media element has a current media controller, then: - if jumped is true and the initial playback position, - relative to the current media controller's timeline, is greater than the - current media controller's media controller position, then - seek the media controller to the media element's initial - playback position, relative to the current media controller's timeline; - otherwise, seek the media element to the - media controller position, relative to the media element's - timeline.

    +

    The following example shows how a plugin can be used in HTML (in this case the Flash plugin, + to show a video file). Fallback is provided for users who do not have Flash enabled, in this case + using the video element to show the video for those using user agents that support + video, and finally providing a link to the video for those who have neither Flash + nor a video-capable browser.

    -

    Once the readyState attribute reaches HAVE_CURRENT_DATA, after - the loadeddata event has been fired, set the - element's delaying-the-load-event flag to false. This stops delaying the load event.

    + 
    <p>Look at my video:
+ <object type="application/x-shockwave-flash">
+  <param name=movie value="http://video.example.com/library/watch.swf">
+  <param name=allowfullscreen value=true>
+  <param name=flashvars value="http://video.example.com/vids/315981">
+  <video controls src="http://video.example.com/vids/315981">
+   <a href="http://video.example.com/vids/315981">View video</a>.
+  </video>
+ </object>
+</p>
    -

    A user agent that is attempting to reduce network usage while still fetching - the metadata for each media resource would also stop buffering at this point, - following the rules described previously, which involve the - networkState attribute switching to the NETWORK_IDLE value and a suspend event firing.

    + -

    The user agent is required to determine the duration of the - media resource and go through this step before playing.

    -
    Once the entire media resource has been fetched - (but potentially before any of it has been decoded)
    -

    Fire a simple event named progress - at the media element.

    +

    4.8.9 The param element

    -

    Set the networkState to NETWORK_IDLE and fire a simple event named - suspend at the media element.

    +
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of an object element, before any flow content.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    name — Name of parameter
    value — Value of parameter
    DOM interface:
    +
    interface HTMLParamElement : HTMLElement {
+           attribute DOMString name;
+           attribute DOMString value;
 
-      
    If the user agent ever discards any media data and then needs to resume the
-      network activity to obtain it again, then it must queue a task to set the networkState to NETWORK_LOADING.
    
+  // also has obsolete members
+};
    +
    -

    If the user agent can keep the media resource loaded, then the - algorithm will continue to its final step below, which aborts the algorithm.

    +

    The param element defines parameters for plugins invoked by object + elements. It does not represent anything on its own.

    -
    If the connection is interrupted after some media data has been received, - causing the user agent to give up trying to fetch the resource
    +

    The name attribute gives the name of the + parameter.

    -

    Fatal network errors that occur after the user agent has established whether the current media resource is usable (i.e. once the media element's - readyState attribute is no longer HAVE_NOTHING) must cause the user agent to execute the - following steps:

    +

    The value attribute gives the value of the + parameter.

    -

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_NETWORK.

    3. Fire a simple event named error at - the media element.

    4. Set the element's networkState attribute - to the NETWORK_IDLE value.

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection - algorithm.

    +

    Both attributes must be present. They may have any value.

    -
    If the media data is corrupted
    + -

    Fatal errors in decoding the media data that occur after the user agent has - established whether the current media resource is usable must cause the - user agent to execute the following steps:

    +

    If both attributes are present, and if the parent element of the param is an + object element, then the element defines a parameter with the given name-value pair.

    -

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_DECODE.

    3. Fire a simple event named error at - the media element.

    4. +

      If either the name or value of a parameter defined + by a param element that is the child of an object element that + represents an instantiated plugin changes, and if that + plugin is communicating with the user agent using an API that features the ability to + update the plugin when the name or value of a parameter so changes, then the user agent must + appropriately exercise that ability to notify the plugin of the change.

      -

      If the media element's readyState - attribute has a value equal to HAVE_NOTHING, set - the element's networkState attribute to the - NETWORK_EMPTY value, set the element's - show poster flag to true, and fire a simple event named emptied at the element.

      +

      The IDL attributes name and value must both reflect the respective + content attributes of the same name.

      -

      Otherwise, set the element's networkState - attribute to the NETWORK_IDLE value.

      + -

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection - algorithm.

    +
    -
    If the media data fetching process is aborted by the user
    +

    The following example shows how the param element can be used to pass a parameter + to a plugin, in this case the O3D plugin.

    -

    The fetching process is aborted by the user, e.g. because the user - pressed a "stop" button, the user agent must execute the following steps. These steps are not - followed if the load() method itself is invoked while - these steps are running, as the steps above handle that particular kind of abort.

    + 
    <!DOCTYPE HTML>
+<html lang="en">
+  <head>
+   <title>O3D Utah Teapot</title>
+  </head>
+  <body>
+   <p>
+    <object type="application/vnd.o3d.auto">
+     <param name="o3d_features" value="FloatingPointTextures">
+     <img src="o3d-teapot.png"
+          title="3D Utah Teapot illustration rendered using O3D."
+          alt="When O3D renders the Utah Teapot, it appears as a squat
+          teapot with a shiny metallic finish on which the
+          surroundings are reflected, with a faint shadow caused by
+          the lighting.">
+     <p>To see the teapot actually rendered by O3D on your
+     computer, please download and install the <a
+     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
+    </object>
+    <script src="o3d-teapot.js"></script>
+   </p>
+  </body>
+</html>
    -

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_ABORTED.

    3. Fire a simple event named abort at - the media element.

    4. + -

      If the media element's readyState - attribute has a value equal to HAVE_NOTHING, set - the element's networkState attribute to the - NETWORK_EMPTY value, set the element's - show poster flag to true, and fire a simple event named emptied at the element.

      -

      Otherwise, set the element's networkState - attribute to the NETWORK_IDLE value.

      -

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection - algorithm.

    +

    4.8.10 The video element

    -
    If the media data can be fetched but has non-fatal - errors or uses, in part, codecs that are unsupported, preventing the user agent from rendering - the content completely correctly but not preventing playback altogether
    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a controls attribute: Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    If the element has a src attribute: + zero or more track elements, then + transparent, but with no media element descendants.
    If the element does not have a src attribute: zero or more source elements, then + zero or more track elements, then + transparent, but with no media element descendants.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    crossorigin — How the element handles crossorigin requests
    poster — Poster frame to show prior to video playback
    preload — Hints how much buffering the media resource will likely need
    autoplay — Hint that the media resource can be started automatically when the page is loaded
    mediagroup — Groups media elements together with an implicit MediaController
    loop — Whether to loop the media resource
    muted — Whether to mute the media resource by default
    controls — Show user agent controls
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    + 
    interface HTMLVideoElement : HTMLMediaElement {
+           attribute unsigned long width;
+           attribute unsigned long height;
+  readonly attribute unsigned long videoWidth;
+  readonly attribute unsigned long videoHeight;
+           attribute DOMString poster;
+};
    +
    -

    The server returning data that is partially usable but cannot be optimally rendered must - cause the user agent to render just the bits it can handle, and ignore the rest.

    +

    A video element is used for playing videos or movies, and audio files with + captions.

    - +

    Content may be provided inside the video element. User agents + should not show this content to the user; it is intended for older Web browsers which do + not support video, so that legacy video plugins can be tried, or to show text to the + users of these older browsers informing them of how to access the video contents.

    -
    If the media resource is - found to declare a media-resource-specific text track that the user agent - supports
    +

    In particular, this content is not intended to address accessibility concerns. To + make video content accessible to the partially sighted, the blind, the hard-of-hearing, the deaf, + and those with other physical or cognitive disabilities, a variety of features are available. + Captions can be provided, either embedded in the video stream or as external files using the + track element. Sign-language tracks can be provided, again either embedded in the + video stream or by synchronizing multiple video elements using the mediagroup attribute or a MediaController + object. Audio descriptions can be provided, either as a separate track embedded in the video + stream, or a separate audio track in an audio element slaved to the same controller as the video element(s), or in text + form using a WebVTT file referenced using the track element and + synthesized into speech by the user agent. WebVTT can also be used to provide chapter titles. For + users who would rather not use a media element at all, transcripts or other textual alternatives + can be provided by simply linking to them in the prose near the video element. [WEBVTT]

    -

    If the media data is CORS-same-origin, run the steps to - expose a media-resource-specific text track with the relevant data.

    +

    The video element is a media element whose media data is + ostensibly video data, possibly with associated audio data.

    -

    Cross-origin videos do not expose their subtitles, since that would allow - attacks such as hostile sites reading subtitles from confidential videos on a user's - intranet.

    +

    The src, preload, + autoplay, mediagroup, loop, muted, and controls + attributes are the attributes common to all media + elements.

    -
    • +

    The poster attribute gives the address of an + image file that the user agent can show while no video data is available. The attribute, if + present, must contain a valid non-empty URL potentially surrounded by spaces.

    -

    When the networking task source has queued the - last task as part of fetching the - media resource (i.e. once the download has completed), if the fetching process - completes without errors, including decoding the media data, and if all of the data is available - to the user agent without network access, then, the user agent must move on to the next step. - This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the - resource is longer than the user agent's ability to cache data.

    + -

    While the user agent might still need network access to obtain parts of the media - resource, the user agent must remain on this step.

    +

    If the specified resource is to be used, then, when the element is created or when the poster attribute is set, changed, or removed, the user agent must + run the following steps to determine the element's poster frame (regardless of the + value of the element's show poster flag):

    -

    For example, if the user agent has discarded the first half of a video, the - user agent will remain at this step even once the playback has - ended, because there is always the chance the user will seek back to the start. In fact, - in this situation, once playback has ended, the user agent - will end up firing a suspend event, as described - earlier.

    +

    1. If there is an existing instance of this algorithm running for this video + element, abort that instance of this algorithm without changing the poster + frame.

    2. If the poster attribute's value is the empty string + or if the attribute is absent, then there is no poster frame; abort these + steps.

    3. Resolve the poster attribute's value relative to the element. If this fails, + then there is no poster frame; abort these steps.

    4. Fetch the resulting absolute URL, from the element's + Document's origin. This must delay the load event of the + element's document.

    5. If an image is thus obtained, the poster frame is that image. Otherwise, + there is no poster frame.

    -

  • If the user agent ever reaches this step (which can only happen if the entire resource - gets loaded and kept available): abort the overall resource selection algorithm. + -

    When a media element is to forget the media element's media-resource-specific - tracks, the user agent must remove from the media element's list of text - tracks all the media-resource-specific - text tracks, then empty the media element's audioTracks attribute's AudioTrackList object, - then empty the media element's videoTracks - attribute's VideoTrackList object. No events (in particular, no removetrack events) are fired as part of this; the error and emptied - events, fired by the algorithms that invoke this one, can be used instead.

    +

    The image given by the poster attribute, + the poster frame, is intended to be a representative frame of the + video (typically one of the first non-blank frames) that gives the user an idea of what the video + is like.

    -

    The preload attribute is an enumerated - attribute. The following table lists the keywords and states for the attribute — the - keywords in the left column map to the states in the cell in the second column on the same row as - the keyword. The attribute can be changed even once the media resource is being - buffered or played; the descriptions in the table below are to be interpreted with that in - mind.

    +

    A video element represents what is given for the first matching condition in the + list below:

    -
    Keyword - State - Brief description -
    none - None - Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic. - This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play"). -
    metadata - Metadata - Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, track list, duration, etc), and maybe even the first few frames, is reasonable. If the user agent precisely fetches no more than the metadata, then the media element will end up with its readyState attribute set to HAVE_METADATA; typically though, some frames will be obtained as well and it will probably be HAVE_CURRENT_DATA or HAVE_FUTURE_DATA. - When the media resource is playing, hints to the user agent that bandwidth is to be considered scarce, e.g. suggesting throttling the download so that the media data is obtained at the slowest possible rate that still maintains consistent playback. -
    auto - Automatic - Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource. -
    +
    When no video data is available (the element's readyState attribute is either HAVE_NOTHING, or HAVE_METADATA but no video data has yet been obtained at + all, or the element's readyState attribute is any + subsequent value but the media resource does not have a video channel)
    The video element represents its poster frame, if any, + or else transparent black with no intrinsic dimensions.
    When the video element is paused, the current playback position is the first frame of video, + and the element's show poster flag is set
    The video element represents its poster frame, if any, + or else the first frame of the video.
    When the video element is paused, and the + frame of video corresponding to the current playback + position is not available (e.g. because the video is seeking or buffering)
    When the video element is neither potentially playing nor paused (e.g. when seeking or stalled)
    The video element represents the last frame of the video to have + been rendered.
    When the video element is paused
    The video element represents the frame of video corresponding to + the current playback position.
    Otherwise (the video element has a video channel and is potentially + playing)
    The video element represents the frame of video at the continuously + increasing "current" position. When the + current playback position changes such that the last frame rendered is no longer the + frame corresponding to the current playback position in the video, the new frame + must be rendered.
    -

    The empty string is also a valid keyword, and maps to the Automatic state. The attribute's missing value default is user-agent defined, though the Metadata state is suggested as a compromise - between reducing server load and providing an optimal user experience.

    +

    Frames of video must be obtained from the video track that was selected when the event loop last reached + step 1.

    -

    Authors might switch the attribute from "none" or "metadata" to "auto" dynamically once the user begins playback. For - example, on a page with many videos this might be used to indicate that the many videos are not to - be downloaded unless requested, but that once one is requested it is to be downloaded - aggressively.

    +

    Which frame in a video stream corresponds to a particular playback position is + defined by the video stream's format.

    - +

    The video element also represents any text track cues whose text track cue active flag is set and whose + text track is in the showing mode, and any + audio from the media resource, at the current playback position.

    -

    The preload attribute is intended to provide a hint to - the user agent about what the author thinks will lead to the best user experience. The attribute - may be ignored altogether, for example based on explicit user preferences or based on the - available connectivity.

    +

    Any audio associated with the media resource must, if played, be played + synchronised with the current playback position, at the element's effective + media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step + 1.

    -

    The preload IDL attribute must - reflect the content attribute of the same name, limited to only known - values.

    +

    In addition to the above, the user agent may provide messages to the user (such as "buffering", + "no video loaded", "error", or more detailed information) by overlaying text or icons on the video + or other areas of the element's playback area, or in another appropriate manner.

    - +

    User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video + data itself.

    -

    The autoplay attribute can override the - preload attribute (since if the media plays, it naturally - has to buffer first, regardless of the hint given by the preload attribute). Including both is not an error, however.

    +

    When a video element's media resource has a video channel, the + element provides a paint source whose width is the media resource's + intrinsic width, whose height is the + media resource's intrinsic + height, and whose appearance is the frame of video corresponding to the current playback position, if that is available, or else + (e.g. when the video is seeking or buffering) its previous appearance, if any, or else (e.g. + because the video is still loading the first frame) blackness.

    + +
    video . videoWidth
    video . videoHeight
    -
    media . buffered
    - -

    Returns a TimeRanges object that represents the ranges of the media - resource that the user agent has buffered.

    +

    These attributes return the intrinsic dimensions of the video, + or zero if the dimensions are not known.

    -

    The buffered attribute must return a new - static normalised TimeRanges object that represents the ranges of the - media resource, if any, that the user agent has buffered, at the time the attribute - is evaluated. Users agents must accurately determine the ranges available, even for media streams - where this can only be determined by tedious inspection.

    - -

    Typically this will be a single range anchored at the zero point, but if, e.g. the - user agent uses HTTP range requests in response to seeking, then there could be multiple - ranges.

    +

    The intrinsic width and intrinsic height of the media resource + are the dimensions of the resource in CSS pixels after taking into account the resource's + dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used + by the resource. If an anamorphic format does not define how to apply the aspect ratio to the + video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the + ratio by increasing one dimension and leaving the other unchanged.

    -

    User agents may discard previously buffered data.

    +

    The videoWidth IDL attribute must return + the intrinsic width of the video in CSS pixels. + The videoHeight IDL attribute must return + the intrinsic height of the video in CSS + pixels. If the element's readyState attribute is HAVE_NOTHING, then the attributes must return 0.

    -

    Thus, a time position included within a range of the objects return by the buffered attribute at one time can end up being not included in - the range(s) of objects returned by the same attribute at later times.

    +

    Whenever the intrinsic width + or intrinsic height of the video changes + (including, for example, because the selected video + track was changed), if the element's readyState + attribute is not HAVE_NOTHING, the user agent must + queue a task to fire a simple event named resize at the media element.

    +

    The video element supports dimension attributes.

    + -
    4.7.14.6 Offsets into the media resource
    +

    In the absence of style rules to the contrary, video content should be rendered inside the + element's playback area such that the video content is shown centered in the playback area at the + largest possible size that fits completely within it, with the video content's aspect ratio being + preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the + video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area + that do not contain the video represent nothing.

    -
    media . duration
    +

    In user agents that implement CSS, the above requirement can be implemented by + using the style rule suggested in the rendering section.

    -

    Returns the length of the media resource, in seconds, assuming that the start of - the media resource is at time zero.

    +

    The intrinsic width of a video element's playback area is the intrinsic width of + the poster frame, if that is available and the element currently + represents its poster frame; otherwise, it is the intrinsic width of the video resource, if that is + available; otherwise the intrinsic width is missing.

    -

    Returns NaN if the duration isn't available.

    +

    The intrinsic height of a video element's playback area is the intrinsic height of + the poster frame, if that is available and the element currently + represents its poster frame; otherwise it is the intrinsic height of the video resource, if that is + available; otherwise the intrinsic height is missing.

    -

    Returns Infinity for unbounded streams.

    +

    The default object size is a width of 300 CSS pixels and a height of 150 CSS + pixels. [CSSIMAGES]

    -
    media . currentTime [ = value ]
    +
    -

    Returns the official playback position, in seconds.

    +

    User agents should provide controls to enable or disable the display of closed captions, audio + description tracks, and other additional data associated with the video stream, though such + features should, again, not interfere with the page's normal rendering.

    -

    Can be set, to seek to the given time.

    +

    User agents may allow users to view the video content in manners more suitable to the user + (e.g. full-screen or in an independent resizable window). As for the other user interface + features, controls to enable this should not interfere with the page's normal rendering unless the + user agent is exposing a user interface. + In such an independent context, however, user agents may make full user interfaces visible, with, + e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

    -

    Will throw an InvalidStateError exception if there is no selected media - resource or if there is a current media controller.

    +

    User agents may allow video playback to affect system features that could interfere with the + user's experience; for example, user agents could disable screensavers while video playback is in + progress.

    -
    +
    + +

    The poster IDL attribute must + reflect the poster content attribute.

    -

    A media resource has a media timeline that maps times (in seconds) to - positions in the media resource. The origin of a timeline is its earliest defined - position. The duration of a timeline is its last defined position.

    +
    -

    Establishing the media - timeline: If the media resource somehow specifies an explicit timeline whose - origin is not negative (i.e. gives each frame a specific time offset and gives the first frame a - zero or positive offset), then the media timeline should be that timeline. (Whether - the media resource can specify a timeline or not depends on the media resource's format.) If the media resource specifies an - explicit start time and date, then that time and date should be considered the zero point - in the media timeline; the timeline offset will be the time and date, - exposed using the getStartDate() method.

    +

    This example shows how to detect when a video has failed to play correctly:

    -

    If the media resource has a discontinuous timeline, the user agent must extend the - timeline used at the start of the resource across the entire resource, so that the media - timeline of the media resource increases linearly starting from the - earliest possible position (as defined below), even if the underlying media - data has out-of-order or even overlapping time codes.

    + 
    <script>
+ function failed(e) {
+   // video playback failed - show a message saying why
+   switch (e.target.error.code) {
+     case e.target.error.MEDIA_ERR_ABORTED:
+       alert('You aborted the video playback.');
+       break;
+     case e.target.error.MEDIA_ERR_NETWORK:
+       alert('A network error caused the video download to fail part-way.');
+       break;
+     case e.target.error.MEDIA_ERR_DECODE:
+       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
+       break;
+     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
+       break;
+     default:
+       alert('An unknown error occurred.');
+       break;
+   }
+ }
+</script>
+<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
+<p><a href="tgif.vid">Download the video file</a>.</p>
    -

    For example, if two clips have been concatenated into one video file, but the - video format exposes the original times for the two clips, the video data might expose a timeline - that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those - times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.

    +
    -

    In the rare case of a media resource that does not have an explicit timeline, the - zero time on the media timeline should correspond to the first frame of the - media resource. In the even rarer case of a media resource with no - explicit timings of any kind, not even frame durations, the user agent must itself determine the - time for each frame in a user-agent-defined manner. - (This is a fingerprinting vector.) -

    -

    An example of a file format with no explicit timeline but with explicit frame - durations is the Animated GIF format. An example of a file format with no explicit timings at all - is the JPEG-push format (multipart/x-mixed-replace with JPEG frames, often - used as the format for MJPEG streams).

    -

    If, in the case of a resource with no timing information, the user agent will nonetheless be - able to seek to an earlier point than the first frame originally provided by the server, then the - zero time should correspond to the earliest seekable time of the media resource; - otherwise, it should correspond to the first frame received from the server (the point in the - media resource at which the user agent began receiving the stream).

    -

    At the time of writing, there is no known format that lacks explicit frame time - offsets yet still supports seeking to a frame before the first frame sent by the server.

    + -
    -

    Consider a stream from a TV broadcaster, which begins streaming on a sunny Friday afternoon in - October, and always sends connecting user agents the media data on the same media timeline, with - its zero time set to the start of this stream. Months later, user agents connecting to this - stream will find that the first frame they receive has a time with millions of seconds. The getStartDate() method would always return the date that the - broadcast started; this would allow controllers to display real times in their scrubber (e.g. - "2:30pm") rather than a time relative to when the broadcast began ("8 months, 4 hours, 12 - minutes, and 23 seconds").

    -

    Consider a stream that carries a video with several concatenated fragments, broadcast by a - server that does not allow user agents to request specific times but instead just streams the - video data in a predetermined order, with the first frame delivered always being identified as - the frame with time zero. If a user agent connects to this stream and receives fragments defined - as covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 - UTC to 2010-02-12 14:35:00 UTC, it would expose this with a media timeline starting - at 0s and extending to 3,600s (one hour). Assuming the streaming server disconnected at the end - of the second clip, the duration attribute would then - return 3,600. The getStartDate() method would return a - Date object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a - different user agent connected five minutes later, it would (presumably) receive - fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 - 14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a media timeline - starting at 0s and extending to 3,300s (fifty five minutes). In this case, the getStartDate() method would return a Date object - with a time corresponding to 2010-03-20 23:20:00 UTC.

    -

    In both of these examples, the seekable attribute - would give the ranges that the controller would want to actually display in its UI; typically, if - the servers don't support seeking to arbitrary times, this would be the range of time from the - moment the user agent connected to the stream up to the latest frame that the user agent has - obtained; however, if the user agent starts discarding earlier information, the actual range - might be shorter.

    -
    +

    4.8.11 The audio element

    -

    In any case, the user agent must ensure that the earliest possible position (as - defined below) using the established media timeline, is greater than or equal to - zero.

    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a controls attribute: Interactive content.
    If the element has a controls attribute: Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    If the element has a src attribute: +zero or more track elements, then +transparent, but with no media element descendants.
    If the element does not have a src attribute: zero or more source elements, then + zero or more track elements, then + transparent, but with no media element descendants.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    crossorigin — How the element handles crossorigin requests
    preload — Hints how much buffering the media resource will likely need
    autoplay — Hint that the media resource can be started automatically when the page is loaded
    mediagroup — Groups media elements together with an implicit MediaController
    loop — Whether to loop the media resource
    muted — Whether to mute the media resource by default
    controls — Show user agent controls
    DOM interface:
    + 
    [NamedConstructor=Audio(optional DOMString src)]
+interface HTMLAudioElement : HTMLMediaElement {};
    +
    -

    The media timeline also has an associated clock. Which clock is used is user-agent - defined, and may be media resource-dependent, but it should approximate the user's - wall clock.

    +

    An audio element represents a sound or audio stream.

    -

    All the media elements that share current - media controller use the same clock for their media timeline.

    + -

    Media elements have a current playback position, - which must initially (i.e. in the absence of media data) be zero seconds. The - current playback position is a time on the media timeline.

    +

    Content may be provided inside the audio element. User agents + should not show this content to the user; it is intended for older Web browsers which do + not support audio, so that legacy audio plugins can be tried, or to show text to the + users of these older browsers informing them of how to access the audio contents.

    -

    Media elements also have an official playback - position, which must initially be set to zero seconds. The official playback - position is an approximation of the current playback position that is kept - stable while scripts are running.

    +

    In particular, this content is not intended to address accessibility concerns. To + make audio content accessible to the deaf or to those with other physical or cognitive + disabilities, a variety of features are available. If captions or a sign language video are + available, the video element can be used instead of the audio element to + play the audio, allowing users to enable the visual alternatives. Chapter titles can be provided + to aid navigation, using the track element and a WebVTT file. And, + naturally, transcripts or other textual alternatives can be provided by simply linking to them in + the prose near the audio element. [WEBVTT]

    -

    Media elements also have a default playback start - position, which must initially be set to zero seconds. This time is used to allow the - element to be seeked even before the media is loaded.

    +

    The audio element is a media element whose media data is + ostensibly audio data.

    -

    Each media element has a show poster flag. When a media - element is created, this flag must be set to true. This flag is used to control when the - user agent is to show a poster frame for a video element instead of showing the video - contents.

    +

    The src, preload, + autoplay, mediagroup, loop, muted, and controls + attributes are the attributes common to all media + elements.

    -

    The currentTime attribute must, on - getting, return the media element's default playback start position, - unless that is zero, in which case it must return the element's official playback - position. The returned value must be expressed in seconds. On setting, if the media - element has a current media controller, then the user agent must throw an - InvalidStateError exception; otherwise, if the media element's readyState is HAVE_NOTHING, then it must set the media - element's default playback start position to the new value; otherwise, it must - set the official playback position to the new value and then seek to the new value. The new value must be interpreted as being in - seconds.

    + + +

    When an audio element is potentially playing, it must have its audio + data played synchronised with the current playback position, at the element's + effective media volume. The user agent must play the audio from audio tracks that + were enabled when the event loop last reached step 1.

    + +

    When an audio element is not potentially playing, audio must not play + for the element.

    + + -

    Media elements have an initial playback position, - which must initially (i.e. in the absence of media data) be zero seconds. The - initial playback position is updated when a media resource is loaded. - The initial playback position is a time on the media timeline.

    +
    audio = new Audio( [ url ] )
    -

    If the media resource is a streaming resource, then the user agent might be unable - to obtain certain parts of the resource after it has expired from its buffer. Similarly, some - media resources might have a media timeline that - doesn't start at zero. The earliest possible position is the earliest position in the - stream or resource that the user agent can ever obtain again. It is also a time on the media - timeline.

    +

    Returns a new audio element, with the src + attribute set to the value passed in the argument, if applicable.

    -

    The earliest possible position is not explicitly exposed in the API; - it corresponds to the start time of the first range in the seekable attribute's TimeRanges object, if any, or - the current playback position otherwise.

    +
    -

    When the earliest possible position changes, then: if the current playback - position is before the earliest possible position, the user agent must seek to the earliest possible position; otherwise, if - the user agent has not fired a timeupdate event at the - element in the past 15 to 250ms and is not still running event handlers for such an event, then - the user agent must queue a task to fire a simple event named timeupdate at the element.

    + -

    Because of the above requirement and the requirement in the resource fetch algorithm that kicks in when the metadata of the clip becomes known, the current - playback position can never be less than the earliest possible position.

    +

    A constructor is provided for creating HTMLAudioElement objects (in addition to + the factory methods from DOM such as createElement()): Audio(src). When invoked as a + constructor, it must return a new HTMLAudioElement object (a new audio + element). The element must be created with its preload + attribute set to the literal value "auto". If the + src argument is present, the object created must be created with its src content attribute set to the provided value (this will cause the user agent to invoke the object's + resource selection algorithm before returning). + The element's document must be the active document of the browsing + context of the Window object on which the interface object of the invoked + constructor is found.

    + + + -

    If at any time the user agent learns that an audio or video track has ended and all media - data relating to that track corresponds to parts of the media timeline that - are before the earliest possible position, the user agent may queue a - task to first remove the track from the audioTracks - attribute's AudioTrackList object or the videoTracks attribute's VideoTrackList object as - appropriate and then fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that - uses the TrackEvent interface, with the track attribute initialised to the AudioTrack or - VideoTrack object representing the track, at the media element's - aforementioned AudioTrackList or VideoTrackList object.

    -

    The duration attribute must return the time - of the end of the media resource, in seconds, on the media timeline. If - no media data is available, then the attributes must return the Not-a-Number (NaN) - value. If the media resource is not known to be bounded (e.g. streaming radio, or a - live event with no announced end time), then the attribute must return the positive Infinity - value.

    -

    The user agent must determine the duration of the media resource before playing - any part of the media data and before setting readyState to a value equal to or greater than HAVE_METADATA, even if doing so requires fetching multiple - parts of the resource.

    +

    4.8.12 The source element

    -

    When the length of the media resource changes to a known value - (e.g. from being unknown to known, or from a previously established length to a new length) the - user agent must queue a task to fire a simple event named durationchange at the media element. (The - event is not fired when the duration is reset as part of loading a new media resource.) If the - duration is changed such that the current playback position ends up being greater - than the time of the end of the media resource, then the user agent must also seek to the time of the end of the media resource.

    +
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of a media element, before any flow content + or track elements.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    src — Address of the resource
    type — Type of embedded resource
    DOM interface:
    +
    interface HTMLSourceElement : HTMLElement {
+           attribute DOMString src;
+           attribute DOMString type;
 
-  
    If an "infinite" stream ends for some reason, then the duration would change
-  from positive Infinity to the time of the last frame or sample in the stream, and the durationchange event would be fired. Similarly, if the
-  user agent initially estimated the media resource's duration instead of determining
-  it precisely, and later revises the estimate based on new information, then the duration would
-  change and the durationchange event would be
-  fired.
    
+  // also has obsolete members
+};
    +
    -

    Some video files also have an explicit date and time corresponding to the zero time in the - media timeline, known as the timeline offset. Initially, the - timeline offset must be set to Not-a-Number (NaN).

    +

    The source element allows authors to specify multiple alternative media resources for media + elements. It does not represent anything on its own.

    -

    The getStartDate() method must return a new Date object representing the current - timeline offset.

    +

    The src attribute gives the address of the + media resource. The value must be a valid non-empty URL potentially surrounded + by spaces. This attribute must be present.

    - +

    Dynamically modifying a source element and its attribute when the + element is already inserted in a video or audio element will have no + effect. To change what is playing, just use the src attribute + on the media element directly, possibly making use of the canPlayType() method to pick from amongst available + resources. Generally, manipulating source elements manually after the document has + been parsed is an unnecessarily complicated approach.

    -
    +

    The type attribute gives the type of the + media resource, to help the user agent determine if it can play this media + resource before fetching it. If specified, its value must be a valid MIME + type. The codecs parameter, which certain MIME types define, might be + necessary to specify exactly how the resource is encoded. [RFC4281]

    -

    The loop attribute is a boolean - attribute that, if specified, indicates that the media element is to seek back - to the start of the media resource upon reaching the end.

    +
    -

    The loop attribute has no effect while the element has a - current media controller.

    +

    The following list shows some examples of how to use the codecs= MIME + parameter in the type attribute.

    - +
    H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
    H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
    MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
    MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
    MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
    <source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
    Theora video and Vorbis audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
    Theora video and Speex audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
    Vorbis audio alone in Ogg container
    <source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
    Speex audio alone in Ogg container
    <source src='audio.spx' type='audio/ogg; codecs=speex'>
    FLAC audio alone in Ogg container
    <source src='audio.oga' type='audio/ogg; codecs=flac'>
    Dirac video and Vorbis audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
    -

    The loop IDL attribute must reflect - the content attribute of the same name.

    +
    +

    If a source element is inserted as a child of a media element that + has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media + element's resource selection + algorithm.

    +

    The IDL attributes src and type must reflect the respective content + attributes of the same name.

    -
    4.7.14.7 Ready states
    + -
    media . readyState
    +
    -

    Returns a value that expresses the current state of the element with respect to rendering the - current playback position, from the codes in the list below.

    +

    If the author isn't sure if user agents will all be able to render the media resources + provided, the author can listen to the error event on the last + source element and trigger fallback behavior:

    -
    + 
    <script>
+ function fallback(video) {
+   // replace <video> with its contents
+   while (video.hasChildNodes()) {
+     if (video.firstChild instanceof HTMLSourceElement)
+       video.removeChild(video.firstChild);
+     else
+       video.parentNode.insertBefore(video.firstChild, video);
+   }
+   video.parentNode.removeChild(video);
+ }
+</script>
+<video controls autoplay>
+ <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+ <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
+         onerror="fallback(parentNode)">
+ ...
+</video>
    - + -

    Media elements have a ready state, which describes to - what degree they are ready to be rendered at the current playback position. The - possible values are as follows; the ready state of a media element at any particular time is the - greatest value describing the state of the element:

    - -
    HAVE_NOTHING (numeric value 0)

    No information regarding the media resource is available. No data for the - current playback position is available. Media - elements whose networkState attribute are set - to NETWORK_EMPTY are always in the HAVE_NOTHING state.

    HAVE_METADATA (numeric value 1)

    Enough of the resource has been obtained that the duration of the resource is available. - In the case of a video element, the dimensions of the video are also available. The - API will no longer throw an exception when seeking. No media data is available for - the immediate current playback position.

    HAVE_CURRENT_DATA (numeric value 2)

    Data for the immediate current playback position is available, but either not - enough data is available that the user agent could successfully advance the current - playback position in the direction of playback at all without immediately - reverting to the HAVE_METADATA state, or there is no - more data to obtain in the direction of playback. For example, in video this - corresponds to the user agent having data from the current frame, but not the next frame, when - the current playback position is at the end of the current frame; and to when playback has ended.

    HAVE_FUTURE_DATA (numeric value 3)

    Data for the immediate current playback position is available, as well as - enough data for the user agent to advance the current playback position in the - direction of playback at least a little without immediately reverting to the HAVE_METADATA state, and the text tracks are - ready. For example, in video this corresponds to the user agent having data for at least - the current frame and the next frame when the current playback position is at the - instant in time between the two frames, or to the user agent having the video data for the - current frame and audio data to keep playing at least a little when the current playback - position is in the middle of a frame. The user agent cannot be in this state if playback has ended, as the current playback position - can never advance in this case.

    HAVE_ENOUGH_DATA (numeric value 4)
    +

    4.8.13 The track element

    -

    All the conditions described for the HAVE_FUTURE_DATA state are met, and, in addition, - either of the following conditions is also true:

    +
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of a media element, before any flow content.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    kind — The type of text track
    src — Address of the resource
    srclang — Language of the text track
    label — User-visible label
    default — Enable the track if no other text track is more suitable
    DOM interface:
    +
    interface HTMLTrackElement : HTMLElement {
+           attribute DOMString kind;
+           attribute DOMString src;
+           attribute DOMString srclang;
+           attribute DOMString label;
+           attribute boolean default;
 
-    
    • The user agent estimates that data is being fetched at a rate where the current
-     playback position, if it were to advance at the effective playback rate,
-     would not overtake the available data before playback reaches the end of the media
-     resource.
    • The user agent has entered a state where waiting longer will not result in further data
-     being obtained, and therefore nothing would be gained by delaying playback any further. (For
-     example, the buffer might be full.)
    
+  const unsigned short NONE = 0;
+  const unsigned short LOADING = 1;
+  const unsigned short LOADED = 2;
+  const unsigned short ERROR = 3;
+  readonly attribute unsigned short readyState;
 
+  readonly attribute TextTrack track;
+};
    -

    In practice, the difference between HAVE_METADATA and HAVE_CURRENT_DATA is negligible. Really the only time - the difference is relevant is when painting a video element onto a - canvas, where it distinguishes the case where something will be drawn (HAVE_CURRENT_DATA or greater) from the case where - nothing is drawn (HAVE_METADATA or less). Similarly, - the difference between HAVE_CURRENT_DATA (only - the current frame) and HAVE_FUTURE_DATA (at least - this frame and the next) can be negligible (in the extreme, only one frame). The only time that - distinction really matters is when a page provides an interface for "frame-by-frame" - navigation.

    +

    The track element allows authors to specify explicit external timed text tracks for media elements. It + does not represent anything on its own.

    - +

    The kind attribute is an enumerated + attribute. The following table lists the keywords defined for this attribute. The keyword + given in the first cell of each row maps to the state given in the second cell.

    -

    When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the user agent must follow the steps - given below:

    +
    Keyword + State + Brief description +
    subtitles + Subtitles + + Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the media resource's audio track). + Overlaid on the video. +
    captions + Captions + + Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf). + Overlaid on the video; labeled as appropriate for the hard-of-hearing. +
    descriptions + Descriptions + + Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). + Synthesized as audio. +
    chapters + Chapters + + Chapter titles, intended to be used for navigating the media resource. + Displayed as an interactive (potentially nested) list in the user agent's interface. +
    metadata + Metadata + + Tracks intended for use from script. + Not displayed by the user agent. +
    -
    1. +

      The attribute may be omitted. The missing value default is the subtitles state.

      -

      Apply the first applicable set of substeps from the following list:

      +

      The src attribute gives the address of the text + track data. The value must be a valid non-empty URL potentially surrounded by spaces. + This attribute must be present.

      + -
      If the previous ready state was HAVE_NOTHING, - and the new ready state is HAVE_METADATA
      +

      If the element has a src attribute whose value is not the + empty string and whose value, when the attribute was set, could be successfully resolved relative to the element, then the element's track + URL is the resulting absolute URL. Otherwise, the element's track + URL is the empty string.

      -

      Queue a task to fire a simple event named loadedmetadata at the element.

      + -

      Before this task is run, as part of the event loop mechanism, the - rendering will have been updated to resize the video element if appropriate.

      +

      If the element's track URL identifies a WebVTT resource, and the element's kind attribute is not in the metadata state, then the WebVTT file must be a + WebVTT file using cue text. [WEBVTT]

      -
      If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater
      +

      Furthermore, if the element's track URL identifies a WebVTT resource, and the + element's kind attribute is in the chapters state, then the WebVTT file must be both a + WebVTT file using chapter title text and a WebVTT file using only nested + cues. [WEBVTT]

      -

      If this is the first time this occurs for this media - element since the load() algorithm was last - invoked, the user agent must queue a task to fire a simple event - named loadeddata at the element.

      +

      The srclang attribute gives the language of + the text track data. The value must be a valid BCP 47 language tag. This attribute must be present + if the element's kind attribute is in the subtitles state. [BCP47]

      -

      If the new ready state is HAVE_FUTURE_DATA - or HAVE_ENOUGH_DATA, then the relevant steps - below must then be run also.

      + -
      If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready state is - HAVE_CURRENT_DATA or less
      +

      If the element has a srclang attribute whose value is + not the empty string, then the element's track language is the value of the attribute. + Otherwise, the element has no track language.

      -

      If the media element was potentially - playing before its readyState attribute - changed to a value lower than HAVE_FUTURE_DATA, and the element has not - ended playback, and playback has not stopped due to errors, - paused for user interaction, or paused for in-band content, the user - agent must queue a task to fire a simple event named timeupdate at the element, and queue a task - to fire a simple event named waiting at - the element.

      + -
      If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state - is HAVE_FUTURE_DATA
      +

      The label attribute gives a user-readable + title for the track. This title is used by user agents when listing subtitle, caption, and audio description tracks in their user interface.

      -

      The user agent must queue a task to fire a simple event named - canplay at the element.

      +

      The value of the label attribute, if the attribute is + present, must not be the empty string. Furthermore, there must not be two track + element children of the same media element whose kind attributes are in the same state, whose srclang attributes are both missing or have values that + represent the same language, and whose label attributes are + again both missing or both have the same value.

      -

      If the element's paused attribute is false, the user - agent must queue a task to fire a simple event named playing at the element.

      + -
      If the new ready state is HAVE_ENOUGH_DATA
      +

      If the element has a label attribute whose value is not + the empty string, then the element's track label is the value of the attribute. + Otherwise, the element's track label is an empty string.

      -

      If the previous ready state was HAVE_CURRENT_DATA or less, the user agent must - queue a task to fire a simple event named canplay at the element, and, if the element's paused attribute is false, queue a task to - fire a simple event named playing - at the element.

      + -

      If the autoplaying flag is true, and the paused attribute is true, and the media element - has an autoplay attribute specified, and the - media element's Document's active sandboxing flag set - does not have the sandboxed automatic features browsing context flag set, then - the user agent may also run the following substeps:

      +

      The default attribute is a boolean + attribute, which, if specified, indicates that the track is to be enabled if the user's + preferences do not indicate that another track would be more appropriate.

      -
      1. Set the paused attribute to false.
      2. If the element's show poster flag is true, set it to false and run the - time marches on steps.
      3. Queue a task to fire a simple event named play at the element.
      4. Queue a task to fire a simple event named playing at the element.
      +

      Each media element must have no more than one track element child + whose kind attribute is in the subtitles or captions state and whose default attribute is specified.

      -

      User agents do not need to support autoplay, and it is suggested that user - agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the - video to play, so as to allow the user to override the behavior if so desired.

      +

      Each media element must have no more than one track element child + whose kind attribute is in the description state and whose default attribute is specified.

      -

      In any case, the user agent must finally queue a task to fire a simple - event named canplaythrough at the element.

      +

      Each media element must have no more than one track element child + whose kind attribute is in the chapters state and whose default attribute is specified.

      + +

      There is no limit on the number of track elements whose kind attribute is in the metadata state and whose default attribute is specified.

      +
      track . readyState
      +

      Returns the text track readiness state, + represented by a number from the following list:

      +
      track . NONE (0)
      +

      The text track not loaded state.

      +
      track . LOADING (1)
      +

      The text track loading state.

      +
      track . LOADED (2)
      +

      The text track loaded state.

      +
      track . ERROR (3)
      +

      The text track failed to load state.

      +
      track . track
      -

    2. If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

    +

    Returns the TextTrack object corresponding to the text track of the track element.

    + +
    -

    It is possible for the ready state of a media element to jump between these states - discontinuously. For example, the state of a media element can jump straight from HAVE_METADATA to HAVE_ENOUGH_DATA without passing through the HAVE_CURRENT_DATA and HAVE_FUTURE_DATA states.

    +

    The readyState attribute must return the + numeric value corresponding to the text track readiness state of the + track element's text track, as defined by the following list:

    - +
    NONE (numeric value 0)
    The text track not loaded state.
    LOADING (numeric value 1)
    The text track loading state.
    LOADED (numeric value 2)
    The text track loaded state.
    ERROR (numeric value 3)
    The text track failed to load state.
    -

    The readyState IDL attribute must, on - getting, return the value described above that describes the current ready state of the - media element.

    +

    The track IDL attribute must, on getting, + return the track element's text track's corresponding + TextTrack object.

    + +

    The src, srclang, label, and default IDL attributes must reflect the + respective content attributes of the same name. The kind IDL attribute must reflect the content + attribute of the same name, limited to only known values.

    -

    The autoplay attribute is a boolean - attribute. When present, the user agent (as described in the algorithm - described herein) will automatically begin playback of the media resource as - soon as it can do so without stopping.

    +
    -

    Authors are urged to use the autoplay - attribute rather than using script to trigger automatic playback, as this allows the user to - override the automatic playback when it is not desired, e.g. when using a screen reader. Authors - are also encouraged to consider not using the automatic playback behavior at all, and instead to - let the user agent wait for the user to start playback explicitly.

    +

    This video has subtitles in several languages:

    - + 
    <video src="brave.webm">
+ <track kind=subtitles src=brave.en.vtt srclang=en label="English">
+ <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
+ <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
+ <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
+</video>
    -

    The autoplay IDL attribute must - reflect the content attribute of the same name.

    +

    (The lang attributes on the last two describe the language of + the label attribute, not the language of the subtitles + themselves. The language of the subtitles is given by the srclang attribute.)

    - +
    +

    4.8.14 Media elements

    -
    4.7.14.8 Playing the media resource
    +

    Media elements (audio and video, in + this specification) implement the following interface:

    -
    media . paused
    + 
    enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
+interface HTMLMediaElement : HTMLElement {
 
-    
    Returns true if playback is paused; false otherwise.
    
+  // error state
+  readonly attribute MediaError? error;
 
-   
    media . ended
    
+  // network state
+           attribute DOMString src;
+  readonly attribute DOMString currentSrc;
+           attribute DOMString crossOrigin;
+  const unsigned short NETWORK_EMPTY = 0;
+  const unsigned short NETWORK_IDLE = 1;
+  const unsigned short NETWORK_LOADING = 2;
+  const unsigned short NETWORK_NO_SOURCE = 3;
+  readonly attribute unsigned short networkState;
+           attribute DOMString preload;
+  readonly attribute TimeRanges buffered;
+  void load();
+  CanPlayTypeResult canPlayType(DOMString type);
 
-    
    Returns true if playback has reached the end of the media resource.
    
+  // ready state
+  const unsigned short HAVE_NOTHING = 0;
+  const unsigned short HAVE_METADATA = 1;
+  const unsigned short HAVE_CURRENT_DATA = 2;
+  const unsigned short HAVE_FUTURE_DATA = 3;
+  const unsigned short HAVE_ENOUGH_DATA = 4;
+  readonly attribute unsigned short readyState;
+  readonly attribute boolean seeking;
 
-   
    media . defaultPlaybackRate [ = value ]
    
+  // playback state
+           attribute double currentTime;
+  void fastSeek(double time);
+  readonly attribute unrestricted double duration;
+  Date getStartDate();
+  readonly attribute boolean paused;
+           attribute double defaultPlaybackRate;
+           attribute double playbackRate;
+  readonly attribute TimeRanges played;
+  readonly attribute TimeRanges seekable;
+  readonly attribute boolean ended;
+           attribute boolean autoplay;
+           attribute boolean loop;
+  void play();
+  void pause();
 
-    
    Returns the default rate of playback, for when the user is not fast-forwarding or reversing
-    through the media resource.
    
+  // media controller
+           attribute DOMString mediaGroup;
+           attribute MediaController? controller;
 
-    
    Can be set, to change the default rate of playback.
    
+  // controls
+           attribute boolean controls;
+           attribute double volume;
+           attribute boolean muted;
+           attribute boolean defaultMuted;
 
-    
    The default rate has no direct effect on playback, but if the user switches to a fast-forward
-    mode, when they return to the normal playback mode, it is expected that the rate of playback
-    will be returned to the default rate of playback.
    
+  // tracks
+  readonly attribute AudioTrackList audioTracks;
+  readonly attribute VideoTrackList videoTracks;
+  readonly attribute TextTrackList textTracks;
+  TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = "");
+};
    -

    When the element has a current media controller, the defaultPlaybackRate attribute is ignored and the - current media controller's defaultPlaybackRate is used instead.

    +

    The media element attributes, src, crossorigin, preload, autoplay, + mediagroup, loop, + muted, and controls, apply to all media + elements. They are defined in this section.

    -
    media . playbackRate [ = value ]
    + -

    Returns the current rate playback, where 1.0 is normal speed.

    + -

    Can be set, to change the rate of playback.

    +

    Media elements are used to present audio data, or video and + audio data, to the user. This is referred to as media data in this section, since this + section applies equally to media elements for audio or for + video. -

    When the element has a current media controller, the playbackRate attribute is ignored and the current - media controller's playbackRate is - used instead.

    + The term media resource is used to refer to the complete set of media data, e.g. the + complete video file, or complete audio file. -
    media . played
    +

    -

    Returns a TimeRanges object that represents the ranges of the media - resource that the user agent has played.

    +

    A media resource can have multiple audio and video tracks. For the purposes of a + media element, the video data of the media resource is only that of the + currently selected track (if any) as given by the element's videoTracks attribute when the event loop last + reached step 1, and the audio data of the media resource is the result of mixing all + the currently enabled tracks (if any) given by the element's audioTracks attribute when the event loop last + reached step 1.

    -
    media . play()
    +

    Both audio and video elements can be used for both audio + and video. The main difference between the two is simply that the audio element has + no playback area for visual content (such as video or captions), whereas the video + element does.

    -

    Sets the paused attribute to false, loading the - media resource and beginning playback if necessary. If the playback had ended, will - restart it from the start.

    + -
    media . pause()
    +

    Except where otherwise explicitly specified, the task source for all the tasks + queued in this section and its subsections is the media + element event task source of the media element in question.

    + + + + + +
    4.8.14.1 Error codes
    + +
    media . error
    + +

    Returns a MediaError object representing the current error state of the + element.

    -

    Sets the paused attribute to true, loading the - media resource if necessary.

    +

    Returns null if there is no error.

    -

    The paused attribute represents whether the - media element is paused or not. The attribute must initially be true.

    +

    All media elements have an associated error status, which + records the last error the element encountered since its resource selection algorithm was last invoked. The + error attribute, on getting, must return the + MediaError object created for this last error, or null if there has not been an + error.

    -

    A media element is a blocked media element if its readyState attribute is in the HAVE_NOTHING state, the HAVE_METADATA state, or the HAVE_CURRENT_DATA state, or if the element has - paused for user interaction or paused for in-band content.

    + -

    A media element is said to be potentially playing when its paused attribute is false, the element has not ended - playback, playback has not stopped due to errors, the element either has no - current media controller or has a current media controller but is not - blocked on its media controller, and the element is not a blocked media - element.

    + 
    interface MediaError {
+  const unsigned short MEDIA_ERR_ABORTED = 1;
+  const unsigned short MEDIA_ERR_NETWORK = 2;
+  const unsigned short MEDIA_ERR_DECODE = 3;
+  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+  readonly attribute unsigned short code;
+};
    -

    A waiting DOM event can be fired as a result of an element that is - potentially playing stopping playback due to its readyState attribute changing to a value lower than HAVE_FUTURE_DATA.

    +
    media . error . code
    -

    A media element is said to have ended playback when:

    +

    Returns the current error's error code, from the list below.

    -
    -
  • + -

    Either: +

    The code attribute of a + MediaError object must return the code for the error, which must be one of the + following:

    - -

    Or: +

    4.8.14.2 Location of the media resource
    - +

    The crossorigin content attribute on + media elements is a CORS settings attribute.

    - + -

    The ended attribute must return true if, the - last time the event loop reached step 1, the media element had - ended playback and the direction of playback was forwards, and false - otherwise.

    +

    If a media element is created with a + src attribute, the user agent must synchronously invoke the + media element's resource selection + algorithm.

    -

    A media element is said to have stopped due to errors when the - element's readyState attribute is HAVE_METADATA or greater, and the user agent encounters a non-fatal error during the processing of the - media data, and due to that error, is not able to play the content at the - current playback position.

    +

    If a src attribute of a media element is set + or changed, the user agent must invoke the media element's media element load + algorithm. (Removing the src attribute does + not do this, even if there are source elements present.)

    -

    A media element is said to have paused for user interaction when its - paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a point - in the media resource where the user has to make a selection for the resource to - continue. If the media element has a current media controller when this - happens, then the user agent must report the controller state for the media - element's current media controller. If the media element has a - current media controller when the user makes a selection, allowing playback to - resume, the user agent must similarly report the controller state for the media - element's current media controller.

    +

    The src IDL attribute on media elements must reflect the content attribute of the same + name.

    -

    It is possible for a media element to have both ended playback and - paused for user interaction at the same time.

    +

    The crossOrigin IDL attribute must + reflect the crossorigin content + attribute, limited to only known values.

    -

    When a media element that is potentially playing stops playing - because it has paused for user interaction, the user agent must queue a - task to fire a simple event named timeupdate at the element.

    + -

    A media element is said to have paused for in-band content when its - paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has suspended - playback of the media resource in order to play content that is temporally anchored - to the media resource and has a non-zero length, or to play content that is - temporally anchored to a segment of the media resource but has a length longer than - that segment. If the media element has a current media controller when - this happens, then the user agent must report the controller state for the - media element's current media controller. If the media - element has a current media controller when the user agent unsuspends - playback, the user agent must similarly report the controller state for the - media element's current media controller.

    +
    media . currentSrc
    -

    One example of when a media element would be paused for - in-band content is when the user agent is playing audio descriptions from an external WebVTT file, and - the synthesized speech generated for a cue is longer than the time between the text track - cue start time and the text track cue end time.

    +

    Returns the address of the current media resource.

    -
    +

    Returns the empty string when there is no media resource.

    -

    When the current playback position reaches the end of the - media resource when the direction of playback is forwards, then the user - agent must follow these steps:

    +
    -

    1. If the media element has a loop - attribute specified and does not have a current media controller, then seek to the earliest possible position of the - media resource and abort these steps.

    2. As defined above, the ended IDL attribute starts - returning true once the event loop returns to step 1.

    3. Queue a task to fire a simple event named timeupdate at the media element.

    4. Queue a task that, if the media element does not have a - current media controller, and the media element has still ended - playback, and the direction of playback is still forwards, and paused is false, changes paused to true and fires a - simple event named pause at the media - element.

    5. Queue a task to fire a simple event named ended at the media element.

    6. If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

    + -

    When the current playback position reaches the earliest possible - position of the media resource when the direction of playback is - backwards, then the user agent must only queue a task to fire a simple - event named timeupdate at the element.

    +

    The currentSrc IDL attribute is initially + the empty string. Its value is changed by the resource + selection algorithm defined below.

    -

    The word "reaches" here does not imply that the current playback - position needs to have changed during normal playback; it could be via seeking, for instance.

    + -
    +

    There are two ways to specify a media resource, the src attribute, or source elements. The attribute + overrides the elements.

    -

    The defaultPlaybackRate attribute - gives the desired speed at which the media resource is to play, as a multiple of its - intrinsic speed. The attribute is mutable: on getting it must return the last value it was set to, - or 1.0 if it hasn't yet been set; on setting the attribute must be set to the new value.

    -

    The defaultPlaybackRate is used - by the user agent when it exposes a user - interface to the user.

    -

    The playbackRate attribute gives the - effective playback rate (assuming there is no current media controller - overriding it), which is the speed at which the media resource plays, as a multiple - of its intrinsic speed. If it is not equal to the defaultPlaybackRate, then the implication is that the - user is using a feature such as fast forward or slow motion playback. The attribute is mutable: on - getting it must return the last value it was set to, or 1.0 if it hasn't yet been set; on setting - the attribute must be set to the new value, and the playback will change speed (if the element is - potentially playing and there is no current media controller).

    +
    4.8.14.3 MIME types
    -

    When the defaultPlaybackRate - or playbackRate attributes change value (either by - being set by script or by being changed directly by the user agent, e.g. in response to user - control) the user agent must queue a task to fire a simple event named - ratechange at the media element.

    +

    A media resource can be described in terms of its type, specifically a + MIME type, in some cases with a codecs parameter. (Whether the + codecs parameter is allowed or not depends on the MIME type.) [RFC4281]

    -

    The defaultPlaybackRate and - playbackRate attributes have no effect when the - media element has a current media controller; the namesake attributes on - the MediaController object are used instead in that situation.

    +

    Types are usually somewhat incomplete descriptions; for example "video/mpeg" doesn't say anything except what the container type is, and even a + type like "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" doesn't + include information like the actual bitrate (only the maximum bitrate). Thus, given a type, a user + agent can often only know whether it might be able to play media of that type (with + varying levels of confidence), or whether it definitely cannot play media of that + type.

    -
    +

    A type that the user agent knows it cannot render is one that describes a resource + that the user agent definitely does not support, for example because it doesn't recognise the + container type, or it doesn't support the listed codecs.

    -

    The played attribute must return a new static - normalised TimeRanges object that represents the ranges of points on the - media timeline of the media resource reached through the usual monotonic - increase of the current playback position during normal playback, if any, at the time - the attribute is evaluated.

    +

    The MIME type "application/octet-stream" with no parameters is never + a type that the user agent knows it cannot render. User agents must treat that type + as equivalent to the lack of any explicit Content-Type metadata + when it is used to label a potential media resource.

    -
    +

    Only the MIME type "application/octet-stream" with no + parameters is special-cased here; if any parameter appears with it, it will be treated just like + any other MIME type. This is a deviation from the rule that unknown MIME type parameters should be ignored.

    -

    When the play() method on a media - element is invoked, the user agent must run the following steps.

    +
    media . canPlayType(type)
    -

    1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's - resource selection algorithm.

    2. +

      Returns the empty string (a negative response), "maybe", or "probably" based on how confident + the user agent is that it can play media resources of the given type.

      -

      If the playback has ended and the direction of - playback is forwards, and the media element does not have a current - media controller, seek to the earliest possible - position of the media resource.

      +
    -

    This will cause the user agent to queue a - task to fire a simple event named timeupdate at the media element.

    - + -

  • If the media element has a current media controller, then - bring the media element up to speed with its new media controller.

    +

    The canPlayType(type) method must return the + empty string if type is a type that the user agent knows it cannot + render or is the type "application/octet-stream"; it must return "probably" if the user agent is confident + that the type represents a media resource that it can render if used in with this + audio or video element; and it must return "maybe" otherwise. Implementors are encouraged + to return "maybe" unless the type can be + confidently established as being supported or not. Generally, a user agent should never return + "probably" for a type that allows the codecs parameter if that parameter is not present.

    -
  • + -

    If the media element's paused attribute is - true, run the following substeps:

    +
    -

    1. Change the value of paused to false.

    2. If the show poster flag is true, set the element's show poster - flag to false and run the time marches on steps.

    3. Queue a task to fire a simple event named play at the element.

    4. +

      This script tests to see if the user agent supports a (fictional) new format to dynamically + decide whether to use a video element or a plugin:

      -

      If the media element's readyState - attribute has the value HAVE_NOTHING, HAVE_METADATA, or HAVE_CURRENT_DATA, queue a task to - fire a simple event named waiting at the - element.

      + 
      <section id="video">
+ <p><a href="playing-cats.nfv">Download video</a></p>
+</section>
+<script>
+ var videoSection = document.getElementById('video');
+ var videoElement = document.createElement('video');
+ var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
+ if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
+   // not confident of browser support
+   // but we have a plugin
+   // so use plugin instead
+   videoElement = document.createElement("embed");
+ } else if (support == "") {
+   // no support from browser and no plugin
+   // do nothing
+   videoElement = null;
+ }
+ if (videoElement) {
+   while (videoSection.hasChildNodes())
+     videoSection.removeChild(videoSection.firstChild);
+   videoElement.setAttribute("src", "playing-cats.nfv");
+   videoSection.appendChild(videoElement);
+ }
+</script>
      -

      Otherwise, the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA: queue a task to - fire a simple event named playing at the - element.

      +
    - +

    The type attribute of the + source element allows the user agent to avoid downloading resources that use formats + it cannot render.

    -

  • Set the media element's autoplaying flag to false.

  • If the media element has a current media controller, then - report the controller state for the media element's current media - controller. -

    +
    4.8.14.4 Network states
    -

    When the pause() method is invoked, and when - the user agent is required to pause the media element, the user agent must run the - following steps:

    +
    media . networkState
    -

    1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's - resource selection algorithm.

    2. Run the internal pause steps for the media element.

    +

    Returns the current state of network activity for the element, from the codes in the list + below.

    -

    The internal pause steps for a media element are as follows:

    +
    -

    1. Set the media element's autoplaying flag to false.

    2. If the media element's paused attribute - is false, run the following steps:

      + -

      1. Change the value of paused to true.

      2. Queue a task to fire a simple - event named timeupdate at the - element.

      3. Queue a task to fire a simple - event named pause - at the element.

      4. Set the official playback position to the current playback - position.

      +

      As media elements interact with the network, their current + network activity is represented by the networkState attribute. On getting, it must + return the current network state of the element, which must be one of the following values:

      -

    3. If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

    + -
    +
    NETWORK_EMPTY (numeric value 0)
    The element has not yet been initialized. All attributes are in their initial states.
    NETWORK_IDLE (numeric value 1)
    The element's resource + selection algorithm is active and has selected a resource, but it is not actually using the network at this time.
    NETWORK_LOADING (numeric value 2)
    The user agent is actively trying to download data.
    NETWORK_NO_SOURCE (numeric value 3)
    The element's resource + selection algorithm is active, but it has not yet found a resource to use.
    -

    The effective playback rate is not necessarily the element's playbackRate. When a media element has a - current media controller, its effective playback rate is the - MediaController's media controller playback rate. Otherwise, the - effective playback rate is just the element's playbackRate. Thus, the current media - controller overrides the media element.

    + -

    If the effective playback rate is positive or zero, then the direction of - playback is forwards. Otherwise, it is backwards.

    +

    The resource selection algorithm defined + below describes exactly when the networkState + attribute changes value and what events fire to indicate changes in this state.

    -

    When a media element is potentially playing and - its Document is a fully active Document, its current - playback position must increase monotonically at effective playback rate units - of media time per unit time of the media timeline's clock. (This specification always - refers to this as an increase, but that increase could actually be a decrease if - the effective playback rate is negative.)

    + -

    The effective playback rate can be 0.0, in which case the - current playback position doesn't move, despite playback not being paused (paused doesn't become true, and the pause event doesn't fire).

    -

    This specification doesn't define how the user agent achieves the appropriate - playback rate — depending on the protocol and media available, it is plausible that the user - agent could negotiate with the server to have the server provide the media data at the appropriate - rate, so that (except for the period between when the rate is changed and when the server updates - the stream's playback rate) the client doesn't actually have to drop or interpolate any - frames.

    -

    Any time the user agent provides a stable state, - the official playback position must be set to the current playback - position.

    -

    While the direction of playback is backwards, any corresponding audio must be - muted. While the effective playback rate is - so low or so high that the user agent cannot play audio usefully, the corresponding audio must - also be muted. If the effective playback - rate is not 1.0, the user agent may apply pitch adjustments to the audio as necessary to - render it faithfully.

    +
    4.8.14.5 Loading the media resource
    -

    Media elements that are potentially playing - while not in a Document must not play any video, but should play any - audio component. Media elements must not stop playing just because all references to them have - been removed; only once a media element is in a state where no further audio could ever be played - by that element may the element be garbage collected.

    +
    media . load()
    -

    It is possible for an element to which no explicit references exist to play audio, - even if such an element is not still actively playing: for instance, it could have a current - media controller that still has references and can still be unpaused, or it could be - unpaused but stalled waiting for content to buffer.

    +

    Causes the element to reset and start selecting and loading a new media resource + from scratch.

    -
    +
    -

    Each media element has a list of newly introduced cues, which must be - initially empty. Whenever a text track cue is added to the list of cues of a text track that is in the list of text - tracks for a media element, that cue must - be added to the media element's list of newly introduced cues. Whenever - a text track is added to the list of text tracks for a media - element, all of the cues in that text - track's list of cues must be added to the - media element's list of newly introduced cues. When a media - element's list of newly introduced cues has new cues added while the - media element's show poster flag is not set, then the user agent must - run the time marches on steps.

    + -

    When a text track cue is removed from the list of cues of a text track that is in the list of text - tracks for a media element, and whenever a text track is removed - from the list of text tracks of a media element, if the media - element's show poster flag is not set, then the user agent must run the - time marches on steps.

    +

    All media elements have an autoplaying flag, + which must begin in the true state, and a delaying-the-load-event flag, which must + begin in the false state. While the delaying-the-load-event flag is true, the element + must delay the load event of its document.

    -

    When the current playback position of a media element changes (e.g. - due to playback or seeking), the user agent must run the time marches on steps. If the - current playback position changes while the steps are running, then the user agent - must wait for the steps to complete, and then must immediately rerun the steps. (These steps are - thus run as often as possible or needed — if one iteration takes a long time, this can cause - certain cues to be skipped over as the user agent rushes ahead - to "catch up".)

    +

    When the load() method on a media + element is invoked, the user agent must run the media element load + algorithm.

    -

    The time marches on steps are as follows:

    +

    The media element load algorithm consists of the following steps.

    -

    1. Let current cues be a list of cues, initialised to contain all the cues of all - the hidden or showing text tracks of the media - element (not the disabled ones) whose start times are less than or equal to the current - playback position and whose end times are - greater than the current playback position.

    2. Let other cues be a list of cues, - initialised to contain all the cues of hidden and showing text tracks of the media element that are not present in current cues.

    3. Let last time be the current playback position at the - time this algorithm was last run for this media element, if this is not the first - time it has run.

    4. If the current playback position has, since the last time this algorithm was - run, only changed through its usual monotonic increase during normal playback, then let missed cues be the list of cues in other cues whose start times are - greater than or equal to last time and whose end times are less than or equal to the current playback position. - Otherwise, let missed cues be an empty list.

    5. Remove all the cues in missed cues - that are also in the media element's list of newly introduced cues, and - then empty the element's list of newly introduced cues.

    6. If the time was reached through the usual monotonic increase of the current playback - position during normal playback, and if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and - is not still running event handlers for such an event, then the user agent must queue a - task to fire a simple event named timeupdate at the element. (In the other cases, such as - explicit seeks, relevant events get fired as part of the overall process of changing the - current playback position.)

      +

      1. Abort any already-running instance of the resource selection algorithm for this + element.

      2. -

        The event thus is not to be fired faster than about 66Hz or slower than 4Hz - (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to - vary the frequency of the event based on the system load and the average cost of processing the - event each time, so that the UI updates are not any more frequent than the user agent can - comfortably handle while decoding the video.

      3. If all of the cues in current cues - have their text track cue active flag set, none of the cues in other cues have their text track cue active - flag set, and missed cues is empty, then abort these steps.

      4. +

        If there are any tasks from the media + element's media element event task source in one of the task queues, then remove those tasks.

        -

        If the time was reached through the usual monotonic increase of the current playback - position during normal playback, and there are cues - in other cues that have their text track cue pause-on-exit flag - set and that either have their text track cue active flag set or are also in missed cues, then immediately pause the - media element.

        -

        In the other cases, such as explicit seeks, playback is not paused by going past - the end time of a cue, even if that cue has its text track cue pause-on-exit flag set.

        -
      5. +

        Basically, pending events and callbacks for the media element are discarded when + the media element starts loading a new resource.

        -

        Let events be a list of tasks, - initially empty. Each task in this list will be associated - with a text track, a text track cue, and a time, which are used to - sort the list before the tasks are queued.

        +

      6. If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a task to fire a + simple event named abort at the media + element.

      7. -

        Let affected tracks be a list of text - tracks, initially empty.

        +

        If the media element's networkState + is not set to NETWORK_EMPTY, then run these + substeps:

        -

        When the steps below say to prepare an event named event for a - text track cue target with a time time, the - user agent must run these substeps:

        +

        1. Queue a task to fire a simple event named emptied at the media element.

        2. If a fetching process is in progress for the media + element, the user agent should stop it.

        3. Forget the media element's media-resource-specific tracks.

        4. If readyState is not set to HAVE_NOTHING, then set it to that state. + +

        5. If the paused attribute is false, then set it to + true.

        6. If seeking is true, set it to false.

        7. -

          1. Let track be the text track with which the text - track cue target is associated.

          2. Create a task to fire a simple event - named event at target.

          3. Add the newly created task to events, associated with the time time, the text - track track, and the text track cue target.

          4. Add track to affected tracks.

          +

          Set the current playback position to 0.

          -

        8. For each text track cue in missed - cues, prepare an event named enter for the - TextTrackCue object with the text track cue start time.

        9. For each text track cue in other - cues that either has its text track cue active flag set or is in missed cues, prepare an event named exit for the TextTrackCue object with the later of the - text track cue end time and the text track cue start time.

        10. For each text track cue in current - cues that does not have its text track cue active flag set, prepare an - event named enter for the TextTrackCue - object with the text track cue start time.

        11. +

          Set the official playback position to 0.

          -

          Sort the tasks in events in ascending - time order (tasks with earlier times first).

          +

          If this changed the official playback position, then queue a task + to fire a simple event named timeupdate at the media element.

          -

          Further sort tasks in events that have - the same time by the relative text track cue order of the text track cues associated with these tasks.

          +

        12. Set the initial playback position to 0.

        13. Set the timeline offset to Not-a-Number (NaN).

        14. -

          Finally, sort tasks in events that have - the same time and same text track cue order by placing tasks that fire enter events before - those that fire exit events.

          +

          Update the duration attribute to Not-a-Number + (NaN).

          -

        15. Queue each task in - events, in list order.

        16. Sort affected tracks in the same order as the text tracks appear in the media element's list of text - tracks, and remove duplicates.

          +

          The user agent will not fire a durationchange event for this particular change of + the duration.

          -

        17. For each text track in affected tracks, in the list - order, queue a task to fire a simple event named cuechange at the TextTrack object, and, if the - text track has a corresponding track element, to then fire a - simple event named cuechange at the - track element as well.

        18. Set the text track cue active flag of all the cues in the current cues, and unset the text track cue - active flag of all the cues in the other - cues.

        19. Run the rules for updating the text track rendering of each of the text tracks in affected tracks that are showing. For example, for text - tracks based on WebVTT, the rules for updating the display of WebVTT - text tracks. [WEBVTT]

        +
      -

      For the purposes of the algorithm above, a text track cue is considered to be part - of a text track only if it is listed in the text track list of cues, not - merely if it is associated with the text track.

      +

    7. Set the playbackRate attribute to the value of + the defaultPlaybackRate attribute.

    8. Set the error attribute to null and the + autoplaying flag to true.

    9. Invoke the media element's resource selection algorithm.

    10. -

      If the media element's Document stops being a - fully active document, then the playback will stop - until the document is active again.

      +

      Playback of any previously playing media resource for this element + stops.

      -

      When a media element is removed - from a Document, the user agent must run the following steps:

      +
    + +

    The resource selection algorithm for a + media element is as follows. This algorithm is always invoked synchronously, but one + of the first steps in the algorithm is to return and continue running the remaining steps + asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts + closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop + algorithm). Steps in such sections are marked with ⌛.

    + +

    1. Set the element's networkState attribute to + the NETWORK_NO_SOURCE value.

    2. Set the element's show poster flag to true.

    3. Set the media element's delaying-the-load-event flag to true + (this delays the load event).

    4. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous + section consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    5. + +

      ⌛ If the media element's blocked-on-parser flag is false, + then populate the list of pending text tracks.

      -

      1. Asynchronously await a stable state, allowing the task that removed the media element from the - Document to continue. The synchronous section consists of all the - remaining steps of this algorithm. (Steps in the synchronous section are marked with - ⌛.)

      2. ⌛ If the media element is in a Document, - abort these steps.

      3. ⌛ Run the internal pause steps for the media element.

        +
      4. -
      +

      ⌛ If the media element has a src + attribute, then let mode be attribute.

      - +

      ⌛ Otherwise, if the media element does not have a src attribute but has a source element child, then + let mode be children and let candidate + be the first such source element child in tree order.

      +

      ⌛ Otherwise the media element has neither a src attribute nor a source element child: set the + networkState to NETWORK_EMPTY, and abort these steps; the + synchronous section ends.

      +

    6. ⌛ Set the media element's networkState to NETWORK_LOADING.

    7. ⌛ Queue a task to fire a simple event named loadstart at the media element.

    8. -
      4.7.14.9 Seeking
      +

      If mode is attribute, then run these substeps:

      -
      media . seeking
      +

      1. ⌛ If the src + attribute's value is the empty string, then end the synchronous section, and jump + down to the failed with attribute step below.

      2. ⌛ Let absolute URL be the absolute URL that + would have resulted from resolving the URL + specified by the src attribute's value relative to the + media element when the src attribute was last + changed.

        -

        Returns true if the user agent is currently seeking.

        +

      3. ⌛ If absolute URL was obtained successfully, set the currentSrc attribute to absolute + URL.

      4. End the synchronous section, continuing the remaining steps + asynchronously.

      5. If absolute URL was obtained successfully, run the resource fetch algorithm with absolute + URL. If that algorithm returns without aborting this one, then the load + failed.

      6. -
        media . seekable
        +

        Failed with attribute: Reaching this step indicates that the media resource + failed to load or that the given URL could not be resolved. Queue a task to run the following steps:

        -

        Returns a TimeRanges object that represents the ranges of the media - resource to which it is possible for the user agent to seek.

        +

        1. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_SRC_NOT_SUPPORTED.

        2. Forget the media element's media-resource-specific tracks.

        3. Set the element's networkState attribute + to the NETWORK_NO_SOURCE value.

        4. Set the element's show poster flag to true.

        5. Fire a simple event named error at + the media element.

        6. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

        -
        media . fastSeek( time )
        +

      7. Wait for the task queued by the previous step to have + executed.

      8. Abort these steps. Until the load() method is + invoked or the src attribute is changed, the element won't + attempt to load another resource.

      -

      Seeks to near the given time as fast as possible, trading precision for - speed. (To seek to a precise time, use the currentTime attribute.)

      +

      Otherwise, the source elements will be used; run these substeps:

      -

      This does nothing if the media resource has not been loaded.

      +
      1. -
      +

      ⌛ Let pointer be a position defined by two adjacent nodes in the + media element's child list, treating the start of the list (before the first + child in the list, if any) and end of the list (after the last child in the list, if any) as + nodes in their own right. One node is the node before pointer, and the + other node is the node after pointer. Initially, let pointer be the position between the candidate node and the + next node, if there are any, or the end of the list, if it is the last node.

      - +

      As nodes are inserted and removed into the media element, pointer must be updated as follows:

      -

      The seeking attribute must initially have the - value false.

      +
      If a new node is inserted between the two nodes that define pointer
      Let pointer be the point between the node before pointer and the new node. In other words, insertions at pointer go after pointer.
      If the node before pointer is removed
      Let pointer be the point between the node after pointer and the node before the node after pointer. In + other words, pointer doesn't move relative to the remaining nodes.
      If the node after pointer is removed
      Let pointer be the point between the node before pointer and the node after the node before pointer. Just + as with the previous case, pointer doesn't move relative to the remaining + nodes.
      -

      The fastSeek() method must seek to the time given by the method's argument, with the - approximate-for-speed flag set.

      +

      Other changes don't affect pointer.

      -

      When the user agent is required to seek to a particular new playback position in the media resource, optionally with the - approximate-for-speed flag set, it means that the user agent must run the following steps. - This algorithm interacts closely with the event loop mechanism; in particular, it has - a synchronous section (which is triggered as part of the event loop - algorithm). Steps in that section are marked with ⌛.

      +

    9. ⌛ Process candidate: If candidate does not have a + src attribute, or if its src attribute's value is the empty string, then end the + synchronous section, and jump down to the failed with elements step + below.

    10. ⌛ Let absolute URL be the absolute URL that + would have resulted from resolving the URL + specified by candidate's src + attribute's value relative to the candidate when the src attribute was last changed.

      -

      1. Set the media element's show poster flag to false.

      2. If the media element's readyState - is HAVE_NOTHING, abort these steps.

      3. If the element's seeking IDL attribute is true, - then another instance of this algorithm is already running. Abort that other instance of the - algorithm without waiting for the step that it is running to complete.

      4. Set the seeking IDL attribute to true.

      5. If the seek was in response to a DOM method call or setting of an IDL attribute, then - continue the script. The remainder of these steps must be run asynchronously. With the exception - of the steps marked with ⌛, they could be aborted at any time by another instance of this - algorithm being invoked.

      6. If the new playback position is later than the end of the media - resource, then let it be the end of the media resource instead.

      7. If the new playback position is less than the earliest possible - position, let it be that position instead.

      8. If the (possibly now changed) new playback position is not in one of - the ranges given in the seekable attribute, then let it - be the position in one of the ranges given in the seekable attribute that is the nearest to the new - playback position. If two positions both satisfy that constraint (i.e. the new playback position is exactly in the middle between two ranges in the seekable attribute) then use the position that is closest to - the current playback position. If there are no ranges given in the seekable attribute then set the seeking IDL attribute to false and abort these steps.

      9. +

      10. ⌛ If absolute URL was not obtained successfully, then end the + synchronous section, and jump down to the failed with elements step + below.

      11. ⌛ If candidate has a type attribute whose value, when parsed as a MIME + type (including any codecs described by the codecs parameter, for + types that define that parameter), represents a type that the user agent knows it cannot + render, then end the synchronous section, and jump down to the failed with elements step below.

      12. ⌛ Set the currentSrc attribute to absolute URL.

      13. End the synchronous section, continuing the remaining steps + asynchronously.

      14. Run the resource fetch algorithm with + absolute URL. If that algorithm returns without aborting this one, + then the load failed.

      15. Failed with elements: Queue a task to fire a simple + event named error at the candidate element.

      16. Asynchronously await a stable state. The synchronous section + consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

      17. ⌛ Forget the media element's media-resource-specific + tracks.

      18. ⌛ Find next candidate: Let candidate be + null.

      19. ⌛ Search loop: If the node after pointer is + the end of the list, then jump to the waiting step below.

      20. ⌛ If the node after pointer is a source element, + let candidate be that element.

      21. ⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node + after pointer is the node after the node that used to be after pointer, if any.

      22. ⌛ If candidate is null, jump back to the search + loop step. Otherwise, jump back to the process candidate step.

      23. ⌛ Waiting: Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

      24. ⌛ Set the element's show poster flag to true.

      25. ⌛ Queue a task to set the element's delaying-the-load-event + flag to false. This stops delaying the load + event.

      26. End the synchronous section, continuing the remaining steps + asynchronously.

      27. Wait until the node after pointer is a node other than the end of + the list. (This step might wait forever.)

      28. Asynchronously await a stable state. The synchronous section + consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

      29. ⌛ Set the element's delaying-the-load-event flag back to true (this + delays the load event again, in case it hasn't been + fired yet).

        -

        If the approximate-for-speed flag is set, adjust the new playback - position to a value that will allow for playback to resume promptly. If new - playback position before this step is before current playback position, then - the adjusted new playback position must also be before the current - playback position. Similarly, if the new playback position before - this step is after current playback position, then the adjusted new - playback position must also be after the current playback position.

        +

      30. ⌛ Set the networkState back to NETWORK_LOADING.

      31. ⌛ Jump back to the find next candidate step above.

      -

      For example, the user agent could snap to the nearest key frame, so that it - doesn't have to spend time decoding then discarding intermediate frames before resuming - playback.

      +
    -

  • Queue a task to fire a simple event named seeking at the element.

  • +

    The resource fetch algorithm for a media + element and a given absolute URL is as follows:

    -

    Set the current playback position to the given new playback - position.

    +

    1. Let the current media resource be the resource given by the + absolute URL passed to this algorithm. This is now the element's media + resource.

    2. Remove all media-resource-specific text + tracks from the media element's list of pending text tracks, if + any.

      -

      If the media element was potentially playing - immediately before it started seeking, but seeking caused its readyState attribute to change to a value lower than HAVE_FUTURE_DATA, then a waiting will be - fired at the element.

      - +

    3. Optionally, run the following substeps. This is the expected behavior if the user agent + intends to not attempt to fetch the resource until the user requests it explicitly (e.g. as a way + to implement the preload attribute's none keyword).

      -

      This step sets the current playback position, and thus can - immediately trigger other conditions, such as the rules regarding when playback "reaches the end of the media resource" (part of the logic that - handles looping), even before the user agent is actually able to render the media data for that - position (as determined in the next step).

      +

      1. Set the networkState to NETWORK_IDLE.

      2. Queue a task to fire a simple event named suspend at the element.

      3. Queue a task to set the element's delaying-the-load-event flag + to false. This stops delaying the load + event.

      4. Wait for the task to be run.

      5. Wait for an implementation-defined event (e.g. the user requesting that the media + element begin playback).

      6. Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired + yet).

        -

        The currentTime attribute does not - get updated asynchronously, as it returns the official playback position, not the - current playback position.

        +

      7. Set the networkState to NETWORK_LOADING.

      -

    4. Wait until the user agent has established whether or not the media data for - the new playback position is available, and, if it is, until it has decoded - enough data to play back that position.

      - -

    5. Await a stable state. The synchronous section consists of all - the remaining steps of this algorithm. (Steps in the synchronous section are marked - with ⌛.)

    6. ⌛ Set the seeking IDL attribute to - false.

    7. ⌛ Run the time marches on steps.

    8. ⌛ Queue a task to fire a simple event - named timeupdate at the element.

    9. ⌛ Queue a task to fire a simple event named seeked at the element.

    +
  • -
    +

    Perform a potentially CORS-enabled fetch of the current media resource's absolute URL, with the mode being + the state of the media element's crossorigin content attribute, the origin + being the origin of the media element's Document, and the + default origin behaviour set to taint.

    -

    The seekable attribute must return a new - static normalised TimeRanges object that represents the ranges of the - media resource, if any, that the user agent is able to seek to, at the time the - attribute is evaluated.

    +

    The resource obtained in this fashion, if any, contains the media data. It can + be CORS-same-origin or CORS-cross-origin; this affects whether + subtitles referenced in the media data are exposed in the API and, for + video elements, whether a canvas gets tainted when the video is drawn + on it.

    -

    If the user agent can seek to anywhere in the media resource, e.g. - because it is a simple movie file and the user agent and the server support HTTP Range requests, - then the attribute would return an object with one range, whose start is the time of the first - frame (the earliest possible position, typically zero), and whose end is the same as - the time of the first frame plus the duration attribute's - value (which would equal the time of the last frame, and might be positive Infinity).

    +

    While the load is not suspended (see below), every 350ms (±200ms) or for every byte + received, whichever is least frequent, queue a task to fire a simple + event named progress at the element.

    -

    The range might be continuously changing, e.g. if the user agent is buffering a - sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for - instance.

    +

    The stall timeout is a user-agent defined length of time, which should be about + three seconds. When a media element that is actively attempting to obtain + media data has failed to receive any data for a duration equal to the stall + timeout, the user agent must queue a task to fire a simple + event named stalled at the element.

    -

    Media resources might be internally scripted or - interactive. Thus, a media element could play in a non-linear fashion. If this - happens, the user agent must act as if the algorithm for seeking was used whenever the current playback position - changes in a discontinuous fashion (so that the relevant events fire). If the media - element has a current media controller, then the user agent must seek - the media controller appropriately instead.

    +

    User agents may allow users to selectively block or slow media data downloads. + When a media element's download has been blocked altogether, the user agent must + act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the + download may also be throttled automatically by the user agent, e.g. to balance the download + with other connections sharing the same bandwidth.

    - +

    User agents may decide to not download more content at any time, e.g. + after buffering five minutes of a one hour media resource, while waiting for the user to decide + whether to play the resource or not, while waiting for user input in an interactive resource, or + when the user navigates away from the page. When a media element's download has + been suspended, the user agent must queue a task, to set the networkState to NETWORK_IDLE and fire a simple event named + suspend at the element. If and when downloading of the + resource resumes, the user agent must queue a task to set the networkState to NETWORK_LOADING. Between the queuing of these tasks, + the load is suspended (so progress events don't fire, + as described above).

    +

    The preload attribute provides a hint + regarding how much buffering the author thinks is advisable, even in the absence of the autoplay attribute.

    -
    4.7.14.10 Media resources with multiple media tracks
    +

    When a user agent decides to completely stall a download, e.g. if it is waiting until the + user starts playback before downloading any further content, the user agent must queue a + task to set the element's delaying-the-load-event flag to false. This stops + delaying the load event.

    -

    A media resource can have multiple embedded audio and video tracks. For example, - in addition to the primary video and audio tracks, a media resource could have - foreign-language dubbed dialogues, director's commentaries, audio descriptions, alternative - angles, or sign-language overlays.

    +

    The user agent may use whatever means necessary to fetch the resource (within the constraints + put forward by this and other specifications); for example, reconnecting to the server in the + face of network errors, using HTTP range retrieval requests, or switching to a streaming + protocol. The user agent must consider a resource erroneous only if it has given up trying to + fetch it.

    -
    media . audioTracks
    +

    This specification does not currently say whether or how to check the MIME + types of the media resources, or whether or how to perform file type sniffing using the actual + file data. Implementors differ in their intentions on this matter and it is therefore unclear + what the right solution is. In the absence of any requirement here, the HTTP specification's + strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media + type of the underlying data." ... "If and only if the media type is not given by a Content-Type + field, the recipient MAY attempt to guess the media type via inspection of its content + and/or the name extension(s) of the URI used to identify the resource.").

    -

    Returns an AudioTrackList object representing the audio tracks available in the - media resource.

    +

    The networking task source tasks to process + the data as it is being fetched must each immediately queue a task to run the first + appropriate steps from the following list. (A new task is used for this so that the work + described below occurs relative to the media element event task source rather than + the networking task source.)

    -
    media . videoTracks
    +
    If the media data cannot be fetched at all, due to network errors, causing the + user agent to give up trying to fetch the resource
    If the media data can be fetched but is found by inspection to be in an + unsupported format, or can otherwise not be rendered at all
    -

    Returns a VideoTrackList object representing the video tracks available in the - media resource.

    +

    DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal + network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported + container format, or using unsupported codecs for all the data, must cause the user agent to + execute the following steps:

    -
    +

    1. The user agent should cancel the fetching process.

    2. Abort this subalgorithm, returning to the resource selection algorithm.

      - +
    -

    The audioTracks attribute of a - media element must return a live AudioTrackList object - representing the audio tracks available in the media element's media - resource. The same object must be returned each time.

    +
    If the media resource is found to have an audio + track
    -

    The videoTracks attribute of a - media element must return a live VideoTrackList object - representing the video tracks available in the media element's media - resource. The same object must be returned each time.

    +

    1. Create an AudioTrack object to represent the audio track.

    2. Update the media element's audioTracks attribute's AudioTrackList + object with the new AudioTrack object.

    3. Let enable be unknown.

    4. -

      There are only ever one AudioTrackList object and one - VideoTrackList object per media element, even if another media - resource is loaded into the element: the objects are reused. (The AudioTrack - and VideoTrack objects are not, though.)

      +

      If either the media resource or the address of the current + media resource indicate a particular set of audio tracks to enable, or if the user + agent has information that would facilitate the selection of specific audio tracks to + improve the user's experience, then: if this audio track is one of the ones to enable, then + set enable to true, otherwise, set enable + to false.

      - +

      This could be triggered by Media Fragments URI fragment + identifier syntax, but it could also be triggered e.g. by the user agent selecting a 5.1 + surround sound audio track over a stereo audio track. [MEDIAFRAG]

      -
      +

    5. If enable is still unknown, then, if the media + element does not yet have an enabled + audio track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then enable this audio track, + otherwise, do not enable this audio track.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, + and that uses the TrackEvent interface, with the track attribute initialised to the new + AudioTrack object, at this AudioTrackList object.

    -

    In this example, a script defines a function that takes a URL to a video and a reference to an - element where the video is to be placed. That function then tries to load the video, and, once it - is loaded, checks to see if there is a sign-language track available. If there is, it also - displays that track. Both tracks are just placed in the given container; it's assumed that styles - have been applied to make this work in a pretty way!

    +
    If the media resource is found to have a video + track
    - 
    <script>
- function loadVideo(url, container) {
-   var controller = new MediaController();
-   var video = document.createElement('video');
-   video.src = url;
-   video.autoplay = true;
-   video.controls = true;
-   video.controller = controller;
-   container.appendChild(video);
-   video.onloadedmetadata = function (event) {
-     for (var i = 0; i < video.videoTracks.length; i += 1) {
-       if (video.videoTracks[i].kind == 'sign') {
-         var sign = document.createElement('video');
-         sign.src = url + '#track=' + video.videoTracks[i].id; 
-         sign.autoplay = true;
-         sign.controller = controller;
-         container.appendChild(sign);
-         return;
-       }
-     }
-   };
- }
-</script>
    +

    1. Create a VideoTrack object to represent the video track.

    2. Update the media element's videoTracks attribute's VideoTrackList + object with the new VideoTrack object.

    3. Let enable be unknown.

    4. - +

      If either the media resource or the address of the current + media resource indicate a particular set of video tracks to enable, or if the user + agent has information that would facilitate the selection of specific video tracks to + improve the user's experience, then: if this video track is the first such video track, then + set enable to true, otherwise, set enable + to false.

      +

      This could again be triggered by Media Fragments URI + fragment identifier syntax.

      -
      4.7.14.10.1 AudioTrackList and VideoTrackList objects
      +

    5. If enable is still unknown, then, if the media + element does not yet have a selected + video track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then select this track and unselect any + previously selected video tracks, otherwise, do not select this video track. If other tracks + are unselected, then a change event will be fired.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, + and that uses the TrackEvent interface, with the track attribute initialised to the new + VideoTrack object, at this VideoTrackList object.

    -

    The AudioTrackList and VideoTrackList interfaces are used by - attributes defined in the previous section.

    +
    Once enough of the media data has been fetched to + determine the duration of the media resource, its dimensions, and other + metadata
    - 
    interface AudioTrackList : EventTarget {
-  readonly attribute unsigned long length;
-  getter AudioTrack (unsigned long index);
-  AudioTrack? getTrackById(DOMString id);
+      
    This indicates that the resource is usable. The user agent must follow these substeps:
    
 
-           attribute EventHandler onchange;
-           attribute EventHandler onaddtrack;
-           attribute EventHandler onremovetrack;
-};
+      
    1. 
 
-interface AudioTrack {
-  readonly attribute DOMString id;
-  readonly attribute DOMString kind;
-  readonly attribute DOMString label;
-  readonly attribute DOMString language;
-           attribute boolean enabled;
-};
+        
      Establish the media timeline for the purposes of the current playback
+        position, the earliest possible position, and the initial playback
+        position, based on the media data.
      
 
-interface VideoTrackList : EventTarget {
-  readonly attribute unsigned long length;
-  getter VideoTrack (unsigned long index);
-  VideoTrack? getTrackById(DOMString id);
-  readonly attribute long selectedIndex;
+       
    2. 
 
-           attribute EventHandler onchange;
-           attribute EventHandler onaddtrack;
-           attribute EventHandler onremovetrack;
-};
+        
      Update the timeline offset to the date and time that corresponds to the zero
+        time in the media timeline established in the previous step, if any. If no
+        explicit time and date is given by the media resource, the timeline
+        offset must be set to Not-a-Number (NaN).
      
 
-interface VideoTrack {
-  readonly attribute DOMString id;
-  readonly attribute DOMString kind;
-  readonly attribute DOMString label;
-  readonly attribute DOMString language;
-           attribute boolean selected;
-};
    +

  • Set the current playback position and the official playback + position to the earliest possible position.

  • -
    media . audioTracks . length
    media . videoTracks . length
    +

    Update the duration attribute with the time of + the last frame of the resource, if known, on the media timeline established + above. If it is not known (e.g. a stream that is in principle infinite), update the duration attribute to the value positive Infinity.

    -

    Returns the number of tracks in the list.

    +

    The user agent will queue a task + to fire a simple event named durationchange at the element at this point.

    -
    audioTrack = media . audioTracks[index]
    videoTrack = media . videoTracks[index]
    +
  • -

    Returns the specified AudioTrack or VideoTrack object.

    +

    For video elements, set the videoWidth and videoHeight attributes, and queue a task + to fire a simple event named resize at + the media element.

    -
    audioTrack = media . audioTracks . getTrackById( id )
    videoTrack = media . videoTracks . getTrackById( id )
    +

    Further resize events will be fired + if the dimensions subsequently change.

    -

    Returns the AudioTrack or VideoTrack object with the given identifier, or null if no track has that identifier.

    +
  • -
    audioTrack . id
    videoTrack . id
    +

    Set the readyState attribute to HAVE_METADATA.

    -

    Returns the ID of the given track. This is the ID that can be used with a fragment identifier - if the format supports the Media Fragments URI syntax, and that can be used with - the getTrackById() method. [MEDIAFRAG]

    +

    A loadedmetadata DOM event + will be fired as part of setting the readyState attribute to a new value.

    -
    audioTrack . kind
    videoTrack . kind
    + -

    Returns the category the given track falls into. The possible track categories are given below.

    +

  • Let jumped be false.

  • If the media element's default playback start position is + greater than zero, then seek to that time, and let jumped be true.

  • Let the media element's default playback + start position be zero.

  • -
    audioTrack . label
    videoTrack . label
    +

    If either the media resource or the address of the current + media resource indicate a particular start time, then set the initial playback + position to that time and, if jumped is still false, seek to that time and let jumped be + true.

    -

    Returns the label of the given track, if known, or the empty string otherwise.

    +

    For example, with media formats that support the Media Fragments + URI fragment identifier syntax, the fragment identifier can be used to indicate a + start position. [MEDIAFRAG]

    -
    audioTrack . language
    videoTrack . language
    +

  • If there is no enabled audio track, then + enable an audio track. This will cause a change event to be fired.

  • If there is no selected video track, + then select a video track. This will cause a change event to be fired.

  • If the media element has a current media controller, then: + if jumped is true and the initial playback position, + relative to the current media controller's timeline, is greater than the + current media controller's media controller position, then + seek the media controller to the media element's initial + playback position, relative to the current media controller's timeline; + otherwise, seek the media element to the + media controller position, relative to the media element's + timeline. -

    Returns the language of the given track, if known, or the empty string otherwise.

    +

    Once the readyState attribute reaches HAVE_CURRENT_DATA, after + the loadeddata event has been fired, set the + element's delaying-the-load-event flag to false. This stops delaying the load event.

    -
    audioTrack . enabled [ = value ]
    +

    A user agent that is attempting to reduce network usage while still fetching + the metadata for each media resource would also stop buffering at this point, + following the rules described previously, which involve the + networkState attribute switching to the NETWORK_IDLE value and a suspend event firing.

    -

    Returns true if the given track is active, and false otherwise.

    +

    The user agent is required to determine the duration of the + media resource and go through this step before playing.

    -

    Can be set, to change whether the track is enabled or not. If multiple audio tracks are - enabled simultaneously, they are mixed.

    +
    Once the entire media resource has been fetched + (but potentially before any of it has been decoded)
    -
    media . videoTracks . selectedIndex
    +

    Fire a simple event named progress + at the media element.

    -

    Returns the index of the currently selected track, if any, or −1 otherwise.

    +

    Set the networkState to NETWORK_IDLE and fire a simple event named + suspend at the media element.

    -
    videoTrack . selected [ = value ]
    +

    If the user agent ever discards any media data and then needs to resume the + network activity to obtain it again, then it must queue a task to set the networkState to NETWORK_LOADING.

    -

    Returns true if the given track is active, and false otherwise.

    +

    If the user agent can keep the media resource loaded, then the + algorithm will continue to its final step below, which aborts the algorithm.

    -

    Can be set, to change whether the track is selected or not. Either zero or one video track is - selected; selecting a new track while a previous one is selected will unselect the previous - one.

    +
    If the connection is interrupted after some media data has been received, + causing the user agent to give up trying to fetch the resource
    -
    • +

    Fatal network errors that occur after the user agent has established whether the current media resource is usable (i.e. once the media element's + readyState attribute is no longer HAVE_NOTHING) must cause the user agent to execute the + following steps:

    - +

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_NETWORK.

    3. Fire a simple event named error at + the media element.

    4. Set the element's networkState attribute + to the NETWORK_IDLE value.

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection + algorithm.

    -

    An AudioTrackList object represents a dynamic list of zero or more audio tracks, - of which zero or more can be enabled at a time. Each audio track is represented by an - AudioTrack object.

    +
    If the media data is corrupted
    -

    A VideoTrackList object represents a dynamic list of zero or more video tracks, of - which zero or one can be selected at a time. Each video track is represented by a - VideoTrack object.

    +

    Fatal errors in decoding the media data that occur after the user agent has + established whether the current media resource is usable must cause the + user agent to execute the following steps:

    -

    Tracks in AudioTrackList and VideoTrackList objects must be - consistently ordered. If the media resource is in a format that defines an order, - then that order must be used; otherwise, the order must be the relative order in which the tracks - are declared in the media resource. The order used is called the natural order - of the list.

    +

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_DECODE.

    3. Fire a simple event named error at + the media element.

    4. -

      Each track in one of these objects thus has an index; the first has the index - 0, and each subsequent track is numbered one higher than the previous one. If a media - resource dynamically adds or removes audio or video tracks, then the indices of the tracks - will change dynamically. If the media resource changes entirely, then all the - previous tracks will be removed and replaced with new tracks.

      +

      If the media element's readyState + attribute has a value equal to HAVE_NOTHING, set + the element's networkState attribute to the + NETWORK_EMPTY value, set the element's + show poster flag to true, and fire a simple event named emptied at the element.

      -

      The AudioTrackList.length and VideoTrackList.length attributes must return - the number of tracks represented by their objects at the time of getting.

      +

      Otherwise, set the element's networkState + attribute to the NETWORK_IDLE value.

      -

      The supported property indices of AudioTrackList and - VideoTrackList objects at any instant are the numbers from zero to the number of - tracks represented by the respective object minus one, if any tracks are represented. If an - AudioTrackList or VideoTrackList object represents no tracks, it has no - supported property indices.

      +

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection + algorithm.

    -

    To determine the value of an indexed property for a given index index in an AudioTrackList or VideoTrackList object list, the user agent must return the AudioTrack or - VideoTrack object that represents the indexth track in list.

    +
    If the media data fetching process is aborted by the user
    -

    The AudioTrackList.getTrackById(id) and VideoTrackList.getTrackById(id) methods must return the first AudioTrack or - VideoTrack object (respectively) in the AudioTrackList or - VideoTrackList object (respectively) whose identifier is equal to the value of the - id argument (in the natural order of the list, as defined above). When no - tracks match the given argument, the methods must return null.

    +

    The fetching process is aborted by the user, e.g. because the user + pressed a "stop" button, the user agent must execute the following steps. These steps are not + followed if the load() method itself is invoked while + these steps are running, as the steps above handle that particular kind of abort.

    -

    The AudioTrack and VideoTrack objects represent specific tracks of a - media resource. Each track can have an identifier, category, label, and language. - These aspects of a track are permanent for the lifetime of the track; even if a track is removed - from a media resource's AudioTrackList or VideoTrackList - objects, those aspects do not change.

    +

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_ABORTED.

    3. Fire a simple event named abort at + the media element.

    4. -

      In addition, AudioTrack objects can each be enabled or disabled; this is the audio - track's enabled state. When an AudioTrack is created, its enabled state - must be set to false (disabled). The resource fetch - algorithm can override this.

      +

      If the media element's readyState + attribute has a value equal to HAVE_NOTHING, set + the element's networkState attribute to the + NETWORK_EMPTY value, set the element's + show poster flag to true, and fire a simple event named emptied at the element.

      -

      Similarly, a single VideoTrack object per VideoTrackList object can - be selected, this is the video track's selection state. When a VideoTrack is - created, its selection state must be set to false (not selected). The resource fetch algorithm can override this.

      +

      Otherwise, set the element's networkState + attribute to the NETWORK_IDLE value.

      -

      The AudioTrack.id and VideoTrack.id attributes must return the identifier - of the track, if it has one, or the empty string otherwise. If the media resource is - in a format that supports the Media Fragments URI fragment identifier syntax, the - identifier returned for a particular track must be the same identifier that would enable the track - if used as the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

      +

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection + algorithm.

    -

    For example, in Ogg files, this would be the Name header field of the track. [OGGSKELETONHEADERS]

    +
    If the media data can be fetched but has non-fatal + errors or uses, in part, codecs that are unsupported, preventing the user agent from rendering + the content completely correctly but not preventing playback altogether
    -

    The AudioTrack.kind and VideoTrack.kind attributes must return the category - of the track, if it has one, or the empty string otherwise.

    +

    The server returning data that is partially usable but cannot be optimally rendered must + cause the user agent to render just the bits it can handle, and ignore the rest.

    -

    The category of a track is the string given in the first column of the table below that is the - most appropriate for the track based on the definitions in the table's second and third columns, - as determined by the metadata included in the track in the media resource. The cell - in the third column of a row says what the category given in the cell in the first column of that - row applies to; a category is only appropriate for an audio track if it applies to audio tracks, - and a category is only appropriate for video tracks if it applies to video tracks. Categories must - only be returned for AudioTrack objects if they are appropriate for audio, and must - only be returned for VideoTrack objects if they are appropriate for video.

    + -

    For Ogg files, the Role header field of the track gives the relevant metadata. For DASH media - resources, the Role element conveys the information. For WebM, only the - FlagDefault element currently maps to a value. [OGGSKELETONHEADERS] [DASH] [WEBMCG]

    +
    If the media resource is + found to declare a media-resource-specific text track that the user agent + supports
    - +

    If the media data is CORS-same-origin, run the steps to + expose a media-resource-specific text track with the relevant data.

    - - + -

    The alternate keyword may be used with link, - a, and area elements.

    + + -
    +
    -
    If the alternate keyword is used with the type attribute set to the value application/rss+xml or the value application/atom+xml
    + -

    The first link, a, or area element in the document (in - tree order) with the alternate keyword used with the type attribute set to the value application/rss+xml or the value application/atom+xml must - be treated as the default syndication feed for the purposes of feed autodiscovery.

    + + -

    The nature of the referenced document is given by the hreflang, and type attributes.

    + -
    +
    Return values for AudioTrack.kind and VideoTrack.kind
    Category - Definition - Applies to...Examples -
    "alternative" - A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video). - Audio and video. - Ogg: "audio/alternate" or "video/alternate"; DASH: "alternate" without "main" and "commentary" roles, and, for audio, without the "dub" role (other roles ignored). +

    Cross-origin videos do not expose their subtitles, since that would allow + attacks such as hostile sites reading subtitles from confidential videos on a user's + intranet.

    -
    "captions" - A version of the main video track with captions burnt in. (For legacy content; new content would use text tracks.) - Video only. - DASH: "caption" and "main" roles together (other roles ignored). + -
    "descriptions" - An audio description of a video track. - Audio only. - Ogg: "audio/audiodesc". +

    When the networking task source has queued the + last task as part of fetching the + media resource (i.e. once the download has completed), if the fetching process + completes without errors, including decoding the media data, and if all of the data is available + to the user agent without network access, then, the user agent must move on to the next step. + This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the + resource is longer than the user agent's ability to cache data.

    -
    "main" - The primary audio or video track. - Audio and video. - Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set; DASH: "main" role without "caption", "subtitle", and "dub" roles (other roles ignored). +

    While the user agent might still need network access to obtain parts of the media + resource, the user agent must remain on this step.

    -
    "main-desc" - The primary audio track, mixed with audio descriptions. - Audio only. - AC3 audio in MPEG-2 TS: bsmod=2 and full_svc=1. +

    For example, if the user agent has discarded the first half of a video, the + user agent will remain at this step even once the playback has + ended, because there is always the chance the user will seek back to the start. In fact, + in this situation, once playback has ended, the user agent + will end up firing a suspend event, as described + earlier.

    -
    "sign" - A sign-language interpretation of an audio track. - Video only. - Ogg: "video/sign". +

  • If the user agent ever reaches this step (which can only happen if the entire resource + gets loaded and kept available): abort the overall resource selection algorithm. -

    • "subtitles" - A version of the main video track with subtitles burnt in. (For legacy content; new content would use text tracks.) - Video only. - DASH: "subtitle" and "main" roles together (other roles ignored). +

    When a media element is to forget the media element's media-resource-specific + tracks, the user agent must remove from the media element's list of text + tracks all the media-resource-specific + text tracks, then empty the media element's audioTracks attribute's AudioTrackList object, + then empty the media element's videoTracks + attribute's VideoTrackList object. No events (in particular, no removetrack events) are fired as part of this; the error and emptied + events, fired by the algorithms that invoke this one, can be used instead.

    -
    "translation" - A translated version of the main audio track. - Audio only. - Ogg: "audio/dub". DASH: "dub" and "main" roles together (other roles ignored). + -
    "commentary" - Commentary on the primary audio or video track, e.g. a director's commentary. - Audio and video. - DASH: "commentary" role without "main" role (other roles ignored). +
    -
    "" (empty string) - No explicit kind, or the kind given by the track's metadata is not recognised by the user agent. - Audio and video. - Any other track type, track role, or combination of track roles not described above. +

    The preload attribute is an enumerated + attribute. The following table lists the keywords and states for the attribute — the + keywords in the left column map to the states in the cell in the second column on the same row as + the keyword. The attribute can be changed even once the media resource is being + buffered or played; the descriptions in the table below are to be interpreted with that in + mind.

    +
    Keyword + State + Brief description +
    none + None + Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic. + This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play"). +
    metadata + Metadata + Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, track list, duration, etc), and maybe even the first few frames, is reasonable. If the user agent precisely fetches no more than the metadata, then the media element will end up with its readyState attribute set to HAVE_METADATA; typically though, some frames will be obtained as well and it will probably be HAVE_CURRENT_DATA or HAVE_FUTURE_DATA. + When the media resource is playing, hints to the user agent that bandwidth is to be considered scarce, e.g. suggesting throttling the download so that the media data is obtained at the slowest possible rate that still maintains consistent playback. +
    auto + Automatic + Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource.
    +

    The empty string is also a valid keyword, and maps to the Automatic state. The attribute's missing value default is user-agent defined, though the Metadata state is suggested as a compromise + between reducing server load and providing an optimal user experience.

    + +

    Authors might switch the attribute from "none" or "metadata" to "auto" dynamically once the user begins playback. For + example, on a page with many videos this might be used to indicate that the many videos are not to + be downloaded unless requested, but that once one is requested it is to be downloaded + aggressively.

    + -

    The AudioTrack.label and VideoTrack.label attributes must return the label - of the track, if it has one, or the empty string otherwise.

    +

    The preload attribute is intended to provide a hint to + the user agent about what the author thinks will lead to the best user experience. The attribute + may be ignored altogether, for example based on explicit user preferences or based on the + available connectivity.

    -

    The AudioTrack.language and VideoTrack.language attributes must return the - BCP 47 language tag of the language of the track, if it has one, or the empty string otherwise. If - the user agent is not able to express that language as a BCP 47 language tag (for example because - the language information in the media resource's format is a free-form string without - a defined interpretation), then the method must return the empty string, as if the track had no - language.

    +

    The preload IDL attribute must + reflect the content attribute of the same name, limited to only known + values.

    -

    The AudioTrack.enabled attribute, on - getting, must return true if the track is currently enabled, and false otherwise. On setting, it - must enable the track if the new value is true, and disable it otherwise. (If the track is no - longer in an AudioTrackList object, then the track being enabled or disabled has no - effect beyond changing the value of the attribute on the AudioTrack object.)

    + -

    Whenever an audio track in an AudioTrackList that was - disabled is enabled, and whenever one that was enabled is disabled, the user agent must - queue a task to fire a simple event named change at the AudioTrackList object.

    +

    The autoplay attribute can override the + preload attribute (since if the media plays, it naturally + has to buffer first, regardless of the hint given by the preload attribute). Including both is not an error, however.

    -

    The VideoTrackList.selectedIndex attribute - must return the index of the currently selected track, if any. If the VideoTrackList - object does not currently represent any tracks, or if none of the tracks are selected, it must - instead return −1.

    +
    -

    The VideoTrack.selected attribute, on - getting, must return true if the track is currently selected, and false otherwise. On setting, it - must select the track if the new value is true, and unselect it otherwise. If the track is in a - VideoTrackList, then all the other VideoTrack objects in that list must - be unselected. (If the track is no longer in a VideoTrackList object, then the track - being selected or unselected has no effect beyond changing the value of the attribute on the - VideoTrack object.)

    -

    Whenever a track in a VideoTrackList that was previously - not selected is selected, the user agent must queue a task to fire a simple - event named change at the - VideoTrackList object. This task must be queued before the task that fires - the resize event, if any.

    -
    +
    media . buffered
    -

    The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, - by all objects implementing the AudioTrackList and VideoTrackList - interfaces:

    +

    Returns a TimeRanges object that represents the ranges of the media + resource that the user agent has buffered.

    -
    Event handler Event handler event type -
    onchange change -
    onaddtrack addtrack -
    onremovetrack removetrack -
    +
    - +

    The buffered attribute must return a new + static normalised TimeRanges object that represents the ranges of the + media resource, if any, that the user agent has buffered, at the time the attribute + is evaluated. Users agents must accurately determine the ranges available, even for media streams + where this can only be determined by tedious inspection.

    + +

    Typically this will be a single range anchored at the zero point, but if, e.g. the + user agent uses HTTP range requests in response to seeking, then there could be multiple + ranges.

    +

    User agents may discard previously buffered data.

    -
    4.7.14.10.2 Selecting specific audio and video tracks declaratively
    +

    Thus, a time position included within a range of the objects return by the buffered attribute at one time can end up being not included in + the range(s) of objects returned by the same attribute at later times.

    -

    The audioTracks and videoTracks attributes allow scripts to select which track - should play, but it is also possible to select specific tracks declaratively, by specifying - particular tracks in the fragment identifier of the URL of the media - resource. The format of the fragment identifier depends on the MIME type of - the media resource. [RFC2046] [URL]

    + -
    -

    In this example, a video that uses a format that supports the Media Fragments URI - fragment identifier syntax is embedded in such a way that the alternative angles labeled - "Alternative" are enabled instead of the default video track. [MEDIAFRAG]

    - 
    <video src="myvideo#track=Alternative"></video>
    +
    4.8.14.6 Offsets into the media resource
    -
    +
    media . duration
    +

    Returns the length of the media resource, in seconds, assuming that the start of + the media resource is at time zero.

    -
    4.7.14.11 Synchronising multiple media elements
    +

    Returns NaN if the duration isn't available.

    -
    4.7.14.11.1 Introduction
    +

    Returns Infinity for unbounded streams.

    -

    Each media element can have a MediaController. A - MediaController is an object that coordinates the playback of multiple media elements, for instance so that a sign-language interpreter - track can be overlaid on a video track, with the two being kept in sync.

    +
    media . currentTime [ = value ]
    -

    By default, a media element has no MediaController. An implicit - MediaController can be assigned using the mediagroup content attribute. An explicit - MediaController can be assigned directly using the controller IDL attribute.

    +

    Returns the official playback position, in seconds.

    -

    Media elements with a MediaController are said - to be slaved to their controller. The MediaController modifies the playback - rate and the playback volume of each of the media elements - slaved to it, and ensures that when any of its slaved media - elements unexpectedly stall, the others are stopped at the same time.

    +

    Can be set, to seek to the given time.

    -

    When a media element is slaved to a MediaController, its playback - rate is fixed to that of the other tracks in the same MediaController, and any - looping is disabled.

    +

    Will throw an InvalidStateError exception if there is no selected media + resource or if there is a current media controller.

    +
    + +

    A media resource has a media timeline that maps times (in seconds) to + positions in the media resource. The origin of a timeline is its earliest defined + position. The duration of a timeline is its last defined position.

    -
    4.7.14.11.2 Media controllers
    +

    Establishing the media + timeline: If the media resource somehow specifies an explicit timeline whose + origin is not negative (i.e. gives each frame a specific time offset and gives the first frame a + zero or positive offset), then the media timeline should be that timeline. (Whether + the media resource can specify a timeline or not depends on the media resource's format.) If the media resource specifies an + explicit start time and date, then that time and date should be considered the zero point + in the media timeline; the timeline offset will be the time and date, + exposed using the getStartDate() method.

    - 
    enum MediaControllerPlaybackState { "waiting", "playing", "ended" };
-[Constructor]
-interface MediaController : EventTarget {
-  readonly attribute unsigned short readyState; // uses HTMLMediaElement.readyState's values
+  
    If the media resource has a discontinuous timeline, the user agent must extend the
+  timeline used at the start of the resource across the entire resource, so that the media
+  timeline of the media resource increases linearly starting from the
+  earliest possible position (as defined below), even if the underlying media
+  data has out-of-order or even overlapping time codes.
    
 
-  readonly attribute TimeRanges buffered;
-  readonly attribute TimeRanges seekable;
-  readonly attribute unrestricted double duration;
-           attribute double currentTime;
+  
    For example, if two clips have been concatenated into one video file, but the
+  video format exposes the original times for the two clips, the video data might expose a timeline
+  that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those
+  times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.
    
 
-  readonly attribute boolean paused;
-  readonly attribute MediaControllerPlaybackState playbackState;
-  readonly attribute TimeRanges played;
-  void pause();
-  void unpause();
-  void play(); // calls play() on all media elements as well
+  
    In the rare case of a media resource that does not have an explicit timeline, the
+  zero time on the media timeline should correspond to the first frame of the
+  media resource. In the even rarer case of a media resource with no
+  explicit timings of any kind, not even frame durations, the user agent must itself determine the
+  time for each frame in a user-agent-defined manner.
+  (This is a fingerprinting vector.)
+  
    
 
-           attribute double defaultPlaybackRate;
-           attribute double playbackRate;
+  
    An example of a file format with no explicit timeline but with explicit frame
+  durations is the Animated GIF format. An example of a file format with no explicit timings at all
+  is the JPEG-push format (multipart/x-mixed-replace with JPEG frames, often
+  used as the format for MJPEG streams).
    
 
-           attribute double volume;
-           attribute boolean muted;
+  
    If, in the case of a resource with no timing information, the user agent will nonetheless be
+  able to seek to an earlier point than the first frame originally provided by the server, then the
+  zero time should correspond to the earliest seekable time of the media resource;
+  otherwise, it should correspond to the first frame received from the server (the point in the
+  media resource at which the user agent began receiving the stream).
    
 
-           attribute EventHandler onemptied;
-           attribute EventHandler onloadedmetadata;
-           attribute EventHandler onloadeddata;
-           attribute EventHandler oncanplay;
-           attribute EventHandler oncanplaythrough;
-           attribute EventHandler onplaying;
-           attribute EventHandler onended;
-           attribute EventHandler onwaiting;
+  
    At the time of writing, there is no known format that lacks explicit frame time
+  offsets yet still supports seeking to a frame before the first frame sent by the server.
    
 
-           attribute EventHandler ondurationchange;
-           attribute EventHandler ontimeupdate;
-           attribute EventHandler onplay;
-           attribute EventHandler onpause;
-           attribute EventHandler onratechange;
-           attribute EventHandler onvolumechange;
-};
    +
    -
    controller = new MediaController()
    +

    Consider a stream from a TV broadcaster, which begins streaming on a sunny Friday afternoon in + October, and always sends connecting user agents the media data on the same media timeline, with + its zero time set to the start of this stream. Months later, user agents connecting to this + stream will find that the first frame they receive has a time with millions of seconds. The getStartDate() method would always return the date that the + broadcast started; this would allow controllers to display real times in their scrubber (e.g. + "2:30pm") rather than a time relative to when the broadcast began ("8 months, 4 hours, 12 + minutes, and 23 seconds").

    -

    Returns a new MediaController object.

    +

    Consider a stream that carries a video with several concatenated fragments, broadcast by a + server that does not allow user agents to request specific times but instead just streams the + video data in a predetermined order, with the first frame delivered always being identified as + the frame with time zero. If a user agent connects to this stream and receives fragments defined + as covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 + UTC to 2010-02-12 14:35:00 UTC, it would expose this with a media timeline starting + at 0s and extending to 3,600s (one hour). Assuming the streaming server disconnected at the end + of the second clip, the duration attribute would then + return 3,600. The getStartDate() method would return a + Date object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a + different user agent connected five minutes later, it would (presumably) receive + fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 + 14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a media timeline + starting at 0s and extending to 3,300s (fifty five minutes). In this case, the getStartDate() method would return a Date object + with a time corresponding to 2010-03-20 23:20:00 UTC.

    -
    media . controller [ = controller ]
    +

    In both of these examples, the seekable attribute + would give the ranges that the controller would want to actually display in its UI; typically, if + the servers don't support seeking to arbitrary times, this would be the range of time from the + moment the user agent connected to the stream up to the latest frame that the user agent has + obtained; however, if the user agent starts discarding earlier information, the actual range + might be shorter.

    -

    Returns the current MediaController for the media element, if any; - returns null otherwise.

    +
    -

    Can be set, to set an explicit MediaController. Doing so removes the mediagroup attribute, if any.

    +

    In any case, the user agent must ensure that the earliest possible position (as + defined below) using the established media timeline, is greater than or equal to + zero.

    -
    controller . readyState
    +

    The media timeline also has an associated clock. Which clock is used is user-agent + defined, and may be media resource-dependent, but it should approximate the user's + wall clock.

    -

    Returns the state that the MediaController was in the last time it fired events - as a result of reporting the controller state. - The values of this attribute are the same as for the readyState attribute of media - elements.

    +

    All the media elements that share current + media controller use the same clock for their media timeline.

    -
    controller . buffered
    +

    Media elements have a current playback position, + which must initially (i.e. in the absence of media data) be zero seconds. The + current playback position is a time on the media timeline.

    -

    Returns a TimeRanges object that represents the intersection of the time ranges - for which the user agent has all relevant media data for all the slaved media elements.

    +

    Media elements also have an official playback + position, which must initially be set to zero seconds. The official playback + position is an approximation of the current playback position that is kept + stable while scripts are running.

    -
    controller . seekable
    +

    Media elements also have a default playback start + position, which must initially be set to zero seconds. This time is used to allow the + element to be seeked even before the media is loaded.

    -

    Returns a TimeRanges object that represents the intersection of the time ranges - into which the user agent can seek for all the slaved media - elements.

    +

    Each media element has a show poster flag. When a media + element is created, this flag must be set to true. This flag is used to control when the + user agent is to show a poster frame for a video element instead of showing the video + contents.

    -
    controller . duration
    +

    The currentTime attribute must, on + getting, return the media element's default playback start position, + unless that is zero, in which case it must return the element's official playback + position. The returned value must be expressed in seconds. On setting, if the media + element has a current media controller, then the user agent must throw an + InvalidStateError exception; otherwise, if the media element's readyState is HAVE_NOTHING, then it must set the media + element's default playback start position to the new value; otherwise, it must + set the official playback position to the new value and then seek to the new value. The new value must be interpreted as being in + seconds.

    -

    Returns the difference between the earliest playable moment and the latest playable moment - (not considering whether the data in question is actually buffered or directly seekable, but not - including time in the future for infinite streams). Will return zero if there is no media.

    +

    Media elements have an initial playback position, + which must initially (i.e. in the absence of media data) be zero seconds. The + initial playback position is updated when a media resource is loaded. + The initial playback position is a time on the media timeline.

    -
    controller . currentTime [ = value ]
    +

    If the media resource is a streaming resource, then the user agent might be unable + to obtain certain parts of the resource after it has expired from its buffer. Similarly, some + media resources might have a media timeline that + doesn't start at zero. The earliest possible position is the earliest position in the + stream or resource that the user agent can ever obtain again. It is also a time on the media + timeline.

    -

    Returns the current playback position, in seconds, as a position between zero - time and the current duration.

    +

    The earliest possible position is not explicitly exposed in the API; + it corresponds to the start time of the first range in the seekable attribute's TimeRanges object, if any, or + the current playback position otherwise.

    -

    Can be set, to seek to the given time.

    +

    When the earliest possible position changes, then: if the current playback + position is before the earliest possible position, the user agent must seek to the earliest possible position; otherwise, if + the user agent has not fired a timeupdate event at the + element in the past 15 to 250ms and is not still running event handlers for such an event, then + the user agent must queue a task to fire a simple event named timeupdate at the element.

    -
    controller . paused
    +

    Because of the above requirement and the requirement in the resource fetch algorithm that kicks in when the metadata of the clip becomes known, the current + playback position can never be less than the earliest possible position.

    -

    Returns true if playback is paused; false otherwise. When this attribute is true, any - media element slaved to this controller will be stopped.

    + + -
    controller . playbackState
    +

    If at any time the user agent learns that an audio or video track has ended and all media + data relating to that track corresponds to parts of the media timeline that + are before the earliest possible position, the user agent may queue a + task to first remove the track from the audioTracks + attribute's AudioTrackList object or the videoTracks attribute's VideoTrackList object as + appropriate and then fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that + uses the TrackEvent interface, with the track attribute initialised to the AudioTrack or + VideoTrack object representing the track, at the media element's + aforementioned AudioTrackList or VideoTrackList object.

    -

    Returns the state that the MediaController was in the last time it fired events - as a result of reporting the controller state. - The value of this attribute is either "playing", indicating that the media is actively - playing, "ended", indicating that the media is - not playing because playback has reached the end of all the slaved media elements, - or "waiting", indicating that the media is not - playing for some other reason (e.g. the MediaController is paused).

    +

    The duration attribute must return the time + of the end of the media resource, in seconds, on the media timeline. If + no media data is available, then the attributes must return the Not-a-Number (NaN) + value. If the media resource is not known to be bounded (e.g. streaming radio, or a + live event with no announced end time), then the attribute must return the positive Infinity + value.

    -
    controller . pause()
    +

    The user agent must determine the duration of the media resource before playing + any part of the media data and before setting readyState to a value equal to or greater than HAVE_METADATA, even if doing so requires fetching multiple + parts of the resource.

    + +

    When the length of the media resource changes to a known value + (e.g. from being unknown to known, or from a previously established length to a new length) the + user agent must queue a task to fire a simple event named durationchange at the media element. (The + event is not fired when the duration is reset as part of loading a new media resource.) If the + duration is changed such that the current playback position ends up being greater + than the time of the end of the media resource, then the user agent must also seek to the time of the end of the media resource.

    + +

    If an "infinite" stream ends for some reason, then the duration would change + from positive Infinity to the time of the last frame or sample in the stream, and the durationchange event would be fired. Similarly, if the + user agent initially estimated the media resource's duration instead of determining + it precisely, and later revises the estimate based on new information, then the duration would + change and the durationchange event would be + fired.

    -

    Sets the paused attribute to true.

    +

    Some video files also have an explicit date and time corresponding to the zero time in the + media timeline, known as the timeline offset. Initially, the + timeline offset must be set to Not-a-Number (NaN).

    -
    controller . unpause()
    +

    The getStartDate() method must return a new Date object representing the current + timeline offset.

    -

    Sets the paused attribute to false.

    + -
    controller . play()
    +
    -

    Sets the paused attribute to false and - invokes the play() method of each slaved media element.

    +

    The loop attribute is a boolean + attribute that, if specified, indicates that the media element is to seek back + to the start of the media resource upon reaching the end.

    -
    controller . played
    +

    The loop attribute has no effect while the element has a + current media controller.

    -

    Returns a TimeRanges object that represents the union of the time ranges in all - the slaved media elements that have been played.

    + -
    controller . defaultPlaybackRate [ = value ]
    +

    The loop IDL attribute must reflect + the content attribute of the same name.

    -

    Returns the default rate of playback.

    + -

    Can be set, to change the default rate of playback.

    -

    This default rate has no direct effect on playback, but if the user switches to a - fast-forward mode, when they return to the normal playback mode, it is expected that rate of - playback (playbackRate) will be returned - to this default rate.

    -
    controller . playbackRate [ = value ]
    +
    4.8.14.7 Ready states
    -

    Returns the current rate of playback.

    +
    media . readyState
    -

    Can be set, to change the rate of playback.

    +

    Returns a value that expresses the current state of the element with respect to rendering the + current playback position, from the codes in the list below.

    -
    controller . volume [ = value ]
    +
    -

    Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where - 0.0 is the quietest and 1.0 the loudest.

    + -

    Can be set, to change the volume multiplier.

    +

    Media elements have a ready state, which describes to + what degree they are ready to be rendered at the current playback position. The + possible values are as follows; the ready state of a media element at any particular time is the + greatest value describing the state of the element:

    -

    Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

    + -
    controller . muted [ = value ]
    +
    HAVE_NOTHING (numeric value 0)

    No information regarding the media resource is available. No data for the + current playback position is available. Media + elements whose networkState attribute are set + to NETWORK_EMPTY are always in the HAVE_NOTHING state.

    HAVE_METADATA (numeric value 1)

    Enough of the resource has been obtained that the duration of the resource is available. + In the case of a video element, the dimensions of the video are also available. The + API will no longer throw an exception when seeking. No media data is available for + the immediate current playback position.

    HAVE_CURRENT_DATA (numeric value 2)

    Data for the immediate current playback position is available, but either not + enough data is available that the user agent could successfully advance the current + playback position in the direction of playback at all without immediately + reverting to the HAVE_METADATA state, or there is no + more data to obtain in the direction of playback. For example, in video this + corresponds to the user agent having data from the current frame, but not the next frame, when + the current playback position is at the end of the current frame; and to when playback has ended.

    HAVE_FUTURE_DATA (numeric value 3)

    Data for the immediate current playback position is available, as well as + enough data for the user agent to advance the current playback position in the + direction of playback at least a little without immediately reverting to the HAVE_METADATA state, and the text tracks are + ready. For example, in video this corresponds to the user agent having data for at least + the current frame and the next frame when the current playback position is at the + instant in time between the two frames, or to the user agent having the video data for the + current frame and audio data to keep playing at least a little when the current playback + position is in the middle of a frame. The user agent cannot be in this state if playback has ended, as the current playback position + can never advance in this case.

    HAVE_ENOUGH_DATA (numeric value 4)
    -

    Returns true if all audio is muted (regardless of other attributes either on the controller - or on any media elements slaved to this controller), and - false otherwise.

    +

    All the conditions described for the HAVE_FUTURE_DATA state are met, and, in addition, + either of the following conditions is also true:

    -

    Can be set, to change whether the audio is muted or not.

    +
    • The user agent estimates that data is being fetched at a rate where the current + playback position, if it were to advance at the effective playback rate, + would not overtake the available data before playback reaches the end of the media + resource.
    • The user agent has entered a state where waiting longer will not result in further data + being obtained, and therefore nothing would be gained by delaying playback any further. (For + example, the buffer might be full.)
    - +

    In practice, the difference between HAVE_METADATA and HAVE_CURRENT_DATA is negligible. Really the only time + the difference is relevant is when painting a video element onto a + canvas, where it distinguishes the case where something will be drawn (HAVE_CURRENT_DATA or greater) from the case where + nothing is drawn (HAVE_METADATA or less). Similarly, + the difference between HAVE_CURRENT_DATA (only + the current frame) and HAVE_FUTURE_DATA (at least + this frame and the next) can be negligible (in the extreme, only one frame). The only time that + distinction really matters is when a page provides an interface for "frame-by-frame" + navigation.

    -

    A media element can have a current media controller, which is a - MediaController object. When a media element is created without a mediagroup attribute, it does not have a current media - controller. (If it is created with such an attribute, then that attribute - initializes the current media controller, as defined below.)

    + -

    The slaved media elements of a MediaController are the media elements whose current media controller is that - MediaController. All the slaved media elements of a - MediaController must use the same clock for their definition of their media - timeline's unit time. When the user agent is required to act on each slaved media element in turn, they must be processed in the order that they - were last associated with the MediaController.

    +

    When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the user agent must follow the steps + given below:

    -
    +
    1. -

      The controller attribute on a media - element, on getting, must return the element's current media controller, if - any, or null otherwise. On setting, the user agent must run the following steps:

      +

      Apply the first applicable set of substeps from the following list:

      -

      1. Let m be the media element in question.

      2. Let old controller be m's current media - controller, if it currently has one, and null otherwise.

      3. Let new controller be null.

      4. Let m have no current media controller, if it currently - has one.

      5. Remove the element's mediagroup content - attribute, if any.

      6. If the new value is null, then jump to the update controllers step below.

      7. Let m's current media controller be the new - value.

      8. Let new controller be m's current media - controller.

      9. Bring the media element up to speed with its new media controller.

      10. Update controllers: If old controller and new - controller are the same (whether both null or both the same controller) then abort these - steps.

      11. If old controller is not null and still has one or more slaved - media elements, then report the controller state for old - controller.

      12. If new controller is not null, then report the controller - state for new controller.

      -
      +
      If the previous ready state was HAVE_NOTHING, + and the new ready state is HAVE_METADATA
      -

      The MediaController() constructor, when - invoked, must return a newly created MediaController object.

      +

      Queue a task to fire a simple event named loadedmetadata at the element.

      -
      +

      Before this task is run, as part of the event loop mechanism, the + rendering will have been updated to resize the video element if appropriate.

      -

      The readyState attribute must - return the value to which it was most recently set. When the MediaController object - is created, the attribute must be set to the value 0 (HAVE_NOTHING). The value is updated by the report the - controller state algorithm below.

      +
      If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater
      -

      The seekable attribute must return - a new static normalised TimeRanges object that represents the - intersection of the ranges of the media resources of the - slaved media elements that the user agent is able to seek to, at the time the - attribute is evaluated.

      +

      If this is the first time this occurs for this media + element since the load() algorithm was last + invoked, the user agent must queue a task to fire a simple event + named loadeddata at the element.

      -

      The buffered attribute must return - a new static normalised TimeRanges object that represents the - intersection of the ranges of the media resources of the - slaved media elements that the user agent has buffered, at the time the attribute is - evaluated. Users agents must accurately determine the ranges available, even for media streams - where this can only be determined by tedious inspection.

      +

      If the new ready state is HAVE_FUTURE_DATA + or HAVE_ENOUGH_DATA, then the relevant steps + below must then be run also.

      -

      The duration attribute must return - the media controller duration.

      +
      If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready state is + HAVE_CURRENT_DATA or less
      -

      Every 15 to 250ms, or whenever the MediaController's media controller - duration changes, whichever happens least often, the user agent must queue a - task to fire a simple event named durationchange at the - MediaController. If the MediaController's media controller - duration decreases such that the media controller position is greater than the - media controller duration, the user agent must immediately seek the media - controller to media controller duration.

      +

      If the media element was potentially + playing before its readyState attribute + changed to a value lower than HAVE_FUTURE_DATA, and the element has not + ended playback, and playback has not stopped due to errors, + paused for user interaction, or paused for in-band content, the user + agent must queue a task to fire a simple event named timeupdate at the element, and queue a task + to fire a simple event named waiting at + the element.

      -

      The currentTime attribute must - return the media controller position on getting, and on setting must seek the - media controller to the new value.

      +
      If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state + is HAVE_FUTURE_DATA
      -

      Every 15 to 250ms, or whenever the MediaController's media controller - position changes, whichever happens least often, the user agent must queue a - task to fire a simple event named timeupdate at the - MediaController.

      +

      The user agent must queue a task to fire a simple event named + canplay at the element.

      -
      +

      If the element's paused attribute is false, the user + agent must queue a task to fire a simple event named playing at the element.

      -

      When a MediaController is created it is a playing media controller. It - can be changed into a paused media controller and back either via the user agent's user - interface (when the element is exposing a user - interface to the user) or by script using the APIs defined in this section (see below).

      +
      If the new ready state is HAVE_ENOUGH_DATA
      -

      The paused attribute must return - true if the MediaController object is a paused media controller, and - false otherwise.

      +

      If the previous ready state was HAVE_CURRENT_DATA or less, the user agent must + queue a task to fire a simple event named canplay at the element, and, if the element's paused attribute is false, queue a task to + fire a simple event named playing + at the element.

      -

      When the pause() method is invoked, - if the MediaController is a playing media controller then the user agent - must change the MediaController into a paused media controller, - queue a task to fire a simple event named pause at the MediaController, and then - report the controller state of the MediaController.

      +

      If the autoplaying flag is true, and the paused attribute is true, and the media element + has an autoplay attribute specified, and the + media element's Document's active sandboxing flag set + does not have the sandboxed automatic features browsing context flag set, then + the user agent may also run the following substeps:

      -

      When the unpause() method is - invoked, if the MediaController is a paused media controller, the user - agent must change the MediaController into a playing media controller, - queue a task to fire a simple event named play at the MediaController, and then - report the controller state of the MediaController.

      +
      1. Set the paused attribute to false.
      2. If the element's show poster flag is true, set it to false and run the + time marches on steps.
      3. Queue a task to fire a simple event named play at the element.
      4. Queue a task to fire a simple event named playing at the element.
      -

      When the play() method is invoked, the - user agent must invoke the play() method of each slaved media element in turn, and then invoke the unpause method of the MediaController.

      +

      User agents do not need to support autoplay, and it is suggested that user + agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the + video to play, so as to allow the user to override the behavior if so desired.

      -

      The playbackState attribute - must return the value to which it was most recently set. When the MediaController - object is created, the attribute must be set to the value "waiting". The value is updated by the report the - controller state algorithm below.

      +

      In any case, the user agent must finally queue a task to fire a simple + event named canplaythrough at the element.

      -

      The played attribute must return a - new static normalised TimeRanges object that represents the union of the - ranges of points on the media timelines of the media resources of the slaved media elements that the - user agent has so far reached through the usual monotonic increase of their current playback positions during normal playback, at the time the - attribute is evaluated.

      +
      -
      +

    2. If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    -

    A MediaController has a media controller default playback rate and a - media controller playback rate, which must both be set to 1.0 when the - MediaController object is created.

    + -

    The defaultPlaybackRate - attribute, on getting, must return the MediaController's media controller - default playback rate, and on setting, must set the MediaController's - media controller default playback rate to the new value, then queue a - task to fire a simple event named ratechange at the - MediaController.

    +

    It is possible for the ready state of a media element to jump between these states + discontinuously. For example, the state of a media element can jump straight from HAVE_METADATA to HAVE_ENOUGH_DATA without passing through the HAVE_CURRENT_DATA and HAVE_FUTURE_DATA states.

    -

    The playbackRate attribute, on - getting, must return the MediaController's media controller playback - rate, and on setting, must set the MediaController's media controller - playback rate to the new value, then queue a task to fire a simple - event named ratechange at the - MediaController.

    + -
    +

    The readyState IDL attribute must, on + getting, return the value described above that describes the current ready state of the + media element.

    -

    A MediaController has a media controller volume multiplier, which must - be set to 1.0 when the MediaController object is created, and a media controller - mute override, much must initially be false.

    + -

    The volume attribute, on getting, - must return the MediaController's media controller volume multiplier, - and on setting, if the new value is in the range 0.0 to 1.0 inclusive, must set the - MediaController's media controller volume multiplier to the new value - and queue a task to fire a simple event named volumechange at the - MediaController. If the new value is outside the range 0.0 to 1.0 inclusive, then, on - setting, an IndexSizeError exception must be thrown instead.

    +

    The autoplay attribute is a boolean + attribute. When present, the user agent (as described in the algorithm + described herein) will automatically begin playback of the media resource as + soon as it can do so without stopping.

    -

    The muted attribute, on getting, must - return the MediaController's media controller mute override, and on - setting, must set the MediaController's media controller mute override - to the new value and queue a task to fire a simple event named volumechange at the - MediaController.

    +

    Authors are urged to use the autoplay + attribute rather than using script to trigger automatic playback, as this allows the user to + override the automatic playback when it is not desired, e.g. when using a screen reader. Authors + are also encouraged to consider not using the automatic playback behavior at all, and instead to + let the user agent wait for the user to start playback explicitly.

    -
    + -

    The media resources of all the slaved media - elements of a MediaController have a defined temporal relationship which - provides relative offsets between the zero time of each such media resource: for - media resources with a timeline offset, their - relative offsets are the difference between their timeline offset; the zero times of - all the media resources without a timeline offset - are not offset from each other (i.e. the origins of their timelines are cotemporal); and finally, - the zero time of the media resource with the earliest timeline offset - (if any) is not offset from the zero times of the media - resources without a timeline offset (i.e. the origins of media resources without a timeline offset are further cotemporal - with the earliest defined point on the timeline of the media resource with the - earliest timeline offset).

    +

    The autoplay IDL attribute must + reflect the content attribute of the same name.

    -

    The media resource end position of a media resource in a media - element is defined as follows: if the media resource has a finite and known - duration, the media resource end position is the duration of the media - resource's timeline (the last defined position on that timeline); otherwise, the - media resource's duration is infinite or unknown, and the media resource end - position is the time of the last frame of media data currently available for - that media resource.

    + -

    Each MediaController also has its own defined timeline. On this timeline, all the - media resources of all the slaved media elements - of the MediaController are temporally aligned according to their defined offsets. The - media controller duration of that MediaController is the time from the - earliest earliest possible position, relative to this MediaController - timeline, of any of the media resources of the slaved - media elements of the MediaController, to the time of the latest media - resource end position of the media resources of the - slaved media elements of the MediaController, again relative to this - MediaController timeline.

    -

    Each MediaController has a media controller position. This is the time - on the MediaController's timeline at which the user agent is trying to play the - slaved media elements. When a MediaController is created, its - media controller position is initially zero.

    -

    When the user agent is to bring a media element up to speed with its new media controller, it must seek that media element to the - MediaController's media controller position relative to the media - element's timeline.

    +
    4.8.14.8 Playing the media resource
    -

    When the user agent is to seek the media controller to a particular new playback position, it must follow these steps:

    +
    media . paused
    -

    1. If the new playback position is less than zero, then set it to - zero.

    2. If the new playback position is greater than the media - controller duration, then set it to the media controller duration.

    3. Set the media controller position to the new playback - position.

    4. Seek each slaved - media element to the new playback position relative to the media - element timeline.

    +

    Returns true if playback is paused; false otherwise.

    -

    A MediaController is a restrained media controller if the - MediaController is a playing media controller, but either at least one - of its slaved media elements whose autoplaying flag is true still has - its paused attribute set to true, or, all of its - slaved media elements have their paused - attribute set to true.

    +
    media . ended
    -

    A MediaController is a blocked media controller if the - MediaController is a paused media controller, or if any of its - slaved media elements are blocked media - elements, or if any of its slaved media elements whose autoplaying - flag is true still have their paused attribute set to - true, or if all of its slaved media elements have their paused attribute set to true.

    +

    Returns true if playback has reached the end of the media resource.

    -

    A media element is blocked on its media controller if the - MediaController is a blocked media controller, or if its media - controller position is either before the media resource's earliest - possible position relative to the MediaController's timeline or after the end - of the media resource relative to the MediaController's timeline.

    +
    media . defaultPlaybackRate [ = value ]
    -

    When a MediaController is not a blocked media - controller and it has at least one slaved media - element whose Document is a fully active Document, - the MediaController's media controller position must increase - monotonically at media controller playback rate units of time on the - MediaController's timeline per unit time of the clock used by its slaved media - elements.

    +

    Returns the default rate of playback, for when the user is not fast-forwarding or reversing + through the media resource.

    -

    When the zero point on the timeline of a MediaController moves relative to the - timelines of the slaved media elements by a time difference ΔT, the MediaController's media controller - position must be decremented by ΔT.

    +

    Can be set, to change the default rate of playback.

    -

    In some situations, e.g. when playing back a live stream without buffering - anything, the media controller position would increase monotonically as described - above at the same rate as the ΔT described in the previous paragraph - decreases it, with the end result that for all intents and purposes, the media controller - position would appear to remain constant (probably with the value 0).

    +

    The default rate has no direct effect on playback, but if the user switches to a fast-forward + mode, when they return to the normal playback mode, it is expected that the rate of playback + will be returned to the default rate of playback.

    -
    +

    When the element has a current media controller, the defaultPlaybackRate attribute is ignored and the + current media controller's defaultPlaybackRate is used instead.

    -

    A MediaController has a most recently reported readiness state, which - is a number from 0 to 4 derived from the numbers used for the media element readyState attribute, and a most recently reported - playback state, which is either playing, waiting, or ended.

    +
    media . playbackRate [ = value ]
    -

    When a MediaController is created, its most recently reported readiness - state must be set to 0, and its most recently reported playback state must be - set to waiting.

    +

    Returns the current rate playback, where 1.0 is normal speed.

    -

    When a user agent is required to report the controller state for a - MediaController, the user agent must run the following steps:

    +

    Can be set, to change the rate of playback.

    -
    1. +

      When the element has a current media controller, the playbackRate attribute is ignored and the current + media controller's playbackRate is + used instead.

      -

      If the MediaController has no slaved media elements, let new readiness state be 0.

      +
      media . played
      -

      Otherwise, let it have the lowest value of the readyState IDL attributes of all of its slaved media - elements.

      +

      Returns a TimeRanges object that represents the ranges of the media + resource that the user agent has played.

      -
    2. +
      media . play()
      -

      If the MediaController's most recently reported readiness state is - less than the new readiness state, then run these substeps:

      +

      Sets the paused attribute to false, loading the + media resource and beginning playback if necessary. If the playback had ended, will + restart it from the start.

      -

      1. Let next state be the MediaController's most - recently reported readiness state.

      2. Loop: Increment next state by one.

      3. +
        media . pause()
        -

        Queue a task to run the following steps:

        +

        Sets the paused attribute to true, loading the + media resource if necessary.

        -

        1. Set the MediaController's readyState attribute to the value next state.

        2. Fire a simple event at the MediaController object, whose - name is the event name corresponding to the value of next state given in - the table below.

        +
    -

  • If next state is less than new readiness state, - then return to the step labeled loop. + -

    Otherwise, if the MediaController's most recently reported readiness - state is greater than new readiness state then queue a - task to fire a simple event at the MediaController object, - whose name is the event name corresponding to the value of new readiness - state given in the table below.

    +

    The paused attribute represents whether the + media element is paused or not. The attribute must initially be true.

    -
    Value of new readiness state - Event name +

    A media element is a blocked media element if its readyState attribute is in the HAVE_NOTHING state, the HAVE_METADATA state, or the HAVE_CURRENT_DATA state, or if the element has + paused for user interaction or paused for in-band content.

    -
    0 - emptied +

    A media element is said to be potentially playing when its paused attribute is false, the element has not ended + playback, playback has not stopped due to errors, the element either has no + current media controller or has a current media controller but is not + blocked on its media controller, and the element is not a blocked media + element.

    -
    1 - loadedmetadata +

    A waiting DOM event can be fired as a result of an element that is + potentially playing stopping playback due to its readyState attribute changing to a value lower than HAVE_FUTURE_DATA.

    -
    2 - loadeddata +

    A media element is said to have ended playback when:

    -
    3 - canplay +
    4 - canplaythrough +
  • -
    • +

    Either: -

  • Let the MediaController's most recently reported readiness state - be new readiness state.

  • + -

    If the MediaController's most recently reported playback state is - not equal to new playback state then queue a task to run the - following steps:

    +

    Or: -

    1. Set the MediaController's playbackState attribute to the value given in - the second column of the row of the following table whose first column contains the new playback state.

    2. Fire a simple event at the MediaController object, whose name - is the value given in the third column of the row of the following table whose first column - contains the new playback state.

    + -
    + -

    The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, - by all objects implementing the MediaController interface:

    +

    The ended attribute must return true if, the + last time the event loop reached step 1, the media element had + ended playback and the direction of playback was forwards, and false + otherwise.

    -
    Event handler Event handler event type -
    onemptied emptied -
    onloadedmetadata loadedmetadata -
    onloadeddata loadeddata -
    oncanplay canplay -
    oncanplaythrough canplaythrough -
    onplaying playing -
    onended ended -
    onwaiting waiting -
    ondurationchange durationchange -
    ontimeupdate timeupdate -
    onplay play -
    onpause pause -
    onratechange ratechange -
    onvolumechange volumechange -
    +

    A media element is said to have stopped due to errors when the + element's readyState attribute is HAVE_METADATA or greater, and the user agent encounters a non-fatal error during the processing of the + media data, and due to that error, is not able to play the content at the + current playback position.

    -
    +

    A media element is said to have paused for user interaction when its + paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a point + in the media resource where the user has to make a selection for the resource to + continue. If the media element has a current media controller when this + happens, then the user agent must report the controller state for the media + element's current media controller. If the media element has a + current media controller when the user makes a selection, allowing playback to + resume, the user agent must similarly report the controller state for the media + element's current media controller.

    -

    The task source for the tasks listed in this - section is the DOM manipulation task source.

    +

    It is possible for a media element to have both ended playback and + paused for user interaction at the same time.

    - +

    When a media element that is potentially playing stops playing + because it has paused for user interaction, the user agent must queue a + task to fire a simple event named timeupdate at the element.

    +

    A media element is said to have paused for in-band content when its + paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has suspended + playback of the media resource in order to play content that is temporally anchored + to the media resource and has a non-zero length, or to play content that is + temporally anchored to a segment of the media resource but has a length longer than + that segment. If the media element has a current media controller when + this happens, then the user agent must report the controller state for the + media element's current media controller. If the media + element has a current media controller when the user agent unsuspends + playback, the user agent must similarly report the controller state for the + media element's current media controller.

    -
    4.7.14.11.3 Assigning a media controller declaratively
    +

    One example of when a media element would be paused for + in-band content is when the user agent is playing audio descriptions from an external WebVTT file, and + the synthesized speech generated for a cue is longer than the time between the text track + cue start time and the text track cue end time.

    -

    The mediagroup content attribute on media elements can be used to link multiple media elements together by implicitly creating a MediaController. The - value is text; media elements with the same value are - automatically linked by the user agent.

    +
    - +

    When the current playback position reaches the end of the + media resource when the direction of playback is forwards, then the user + agent must follow these steps:

    -

    When a media element is created with a mediagroup attribute, and when a media element's - mediagroup attribute is set, changed, or removed, the - user agent must run the following steps:

    +

    1. If the media element has a loop + attribute specified and does not have a current media controller, then seek to the earliest possible position of the + media resource and abort these steps.

    2. As defined above, the ended IDL attribute starts + returning true once the event loop returns to step 1.

    3. Queue a task to fire a simple event named timeupdate at the media element.

    4. Queue a task that, if the media element does not have a + current media controller, and the media element has still ended + playback, and the direction of playback is still forwards, and paused is false, changes paused to true and fires a + simple event named pause at the media + element.

    5. Queue a task to fire a simple event named ended at the media element.

    6. If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    -

    1. Let m be the media element in question.

    2. Let old controller be m's current media - controller, if it currently has one, and null otherwise.

    3. Let new controller be null.

    4. Let m have no current media controller, if it currently - has one.

    5. If m's mediagroup attribute - is being removed, then jump to the update controllers step below.

    6. +

      When the current playback position reaches the earliest possible + position of the media resource when the direction of playback is + backwards, then the user agent must only queue a task to fire a simple + event named timeupdate at the element.

      -

      If there is another media element whose Document is the same as - m's Document (even if one or both of these elements are not - actually in the Document), and which - also has a mediagroup attribute, and whose mediagroup attribute has the same value as the new value of - m's mediagroup attribute, then - let controller be that media element's current media - controller.

      +

      The word "reaches" here does not imply that the current playback + position needs to have changed during normal playback; it could be via seeking, for instance.

      -

      Otherwise, let controller be a newly created - MediaController.

      +
      -

    7. Let m's current media controller be controller.

    8. Let new controller be m's current media - controller.

    9. Bring the media element up to speed with its new media - controller.

    10. Update controllers: If old - controller and new controller are the - same (whether both null or both the same controller) then abort - these steps.

    11. If old controller is not null and still has one or more slaved - media elements, then report the controller state for old - controller.

    12. If new controller is not null, then report the controller - state for new controller.

    +

    The defaultPlaybackRate attribute + gives the desired speed at which the media resource is to play, as a multiple of its + intrinsic speed. The attribute is mutable: on getting it must return the last value it was set to, + or 1.0 if it hasn't yet been set; on setting the attribute must be set to the new value.

    -

    The mediaGroup IDL attribute on media elements must reflect the mediagroup content attribute.

    +

    The defaultPlaybackRate is used + by the user agent when it exposes a user + interface to the user.

    - +

    The playbackRate attribute gives the + effective playback rate (assuming there is no current media controller + overriding it), which is the speed at which the media resource plays, as a multiple + of its intrinsic speed. If it is not equal to the defaultPlaybackRate, then the implication is that the + user is using a feature such as fast forward or slow motion playback. The attribute is mutable: on + getting it must return the last value it was set to, or 1.0 if it hasn't yet been set; on setting + the attribute must be set to the new value, and the playback will change speed (if the element is + potentially playing and there is no current media controller).

    -
    +

    When the defaultPlaybackRate + or playbackRate attributes change value (either by + being set by script or by being changed directly by the user agent, e.g. in response to user + control) the user agent must queue a task to fire a simple event named + ratechange at the media element.

    -

    Multiple media elements referencing the same media - resource will share a single network request. This can be used to efficiently play two - (video) tracks from the same media resource in two different places on the screen. - Used with the mediagroup attribute, these elements can - also be kept synchronised.

    +

    The defaultPlaybackRate and + playbackRate attributes have no effect when the + media element has a current media controller; the namesake attributes on + the MediaController object are used instead in that situation.

    -

    In this example, a sign-languge interpreter track from a movie file is overlaid on the primary - video track of that same video file using two video elements, some CSS, and an - implicit MediaController:

    +
    - 
    <article>
- <style scoped>
-  div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
-  video { position; absolute; bottom: 0; right: 0; }
-  video:first-child { width: 100%; height: 100%; }
-  video:last-child { width: 30%; }
- </style>
- <div>
-  <video src="movie.vid#track=Video&amp;track=English" autoplay controls mediagroup=movie></video>
-  <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
- </div>
-</article>
    +

    The played attribute must return a new static + normalised TimeRanges object that represents the ranges of points on the + media timeline of the media resource reached through the usual monotonic + increase of the current playback position during normal playback, if any, at the time + the attribute is evaluated.

    -
    +
    +

    When the play() method on a media + element is invoked, the user agent must run the following steps.

    +

    1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's + resource selection algorithm.

    2. +

      If the playback has ended and the direction of + playback is forwards, and the media element does not have a current + media controller, seek to the earliest possible + position of the media resource.

      +

      This will cause the user agent to queue a + task to fire a simple event named timeupdate at the media element.

      + +

    3. If the media element has a current media controller, then + bring the media element up to speed with its new media controller.

      -
      4.7.14.12 Timed text tracks
      +
    4. -
      4.7.14.12.1 Text track model
      +

      If the media element's paused attribute is + true, run the following substeps:

      -

      A media element can have a group of associated text - tracks, known as the media element's list of text tracks. The text tracks are sorted as follows:

      +

      1. Change the value of paused to false.

      2. If the show poster flag is true, set the element's show poster + flag to false and run the time marches on steps.

      3. Queue a task to fire a simple event named play at the element.

      4. -
        1. The text tracks corresponding to track element - children of the media element, in tree order.
        2. Any text tracks added using the addTextTrack() method, in the order they were added, oldest - first.
        3. Any media-resource-specific text - tracks (text tracks corresponding to data in the - media resource), in the order defined by the media resource's format - specification.
        +

        If the media element's readyState + attribute has the value HAVE_NOTHING, HAVE_METADATA, or HAVE_CURRENT_DATA, queue a task to + fire a simple event named waiting at the + element.

        -

        A text track consists of:

        +

        Otherwise, the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA: queue a task to + fire a simple event named playing at the + element.

        -
        The kind of text track +
      -
      +

    5. Set the media element's autoplaying flag to false.

    6. If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    -

    This decides how the track is handled by the user agent. The kind is represented by a string. - The possible strings are:

    +
    -
    • subtitles -
    • captions -
    • descriptions -
    • chapters -
    • metadata -
    +

    When the pause() method is invoked, and when + the user agent is required to pause the media element, the user agent must run the + following steps:

    -

    The kind of track can change dynamically, in the case of - a text track corresponding to a track element.

    +

    1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's + resource selection algorithm.

    2. Run the internal pause steps for the media element.

    -
    A label +

    The internal pause steps for a media element are as follows:

    -
    +

    1. Set the media element's autoplaying flag to false.

    2. If the media element's paused attribute + is false, run the following steps:

      -

      This is a human-readable string intended to identify the track for the user.

      +

      1. Change the value of paused to true.

      2. Queue a task to fire a simple + event named timeupdate at the + element.

      3. Queue a task to fire a simple + event named pause + at the element.

      4. Set the official playback position to the current playback + position.

      -

      The label of a track can change dynamically, in the - case of a text track corresponding to a track element.

      +

    3. If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    -

    When a text track label is the empty string, the user agent should automatically - generate an appropriate label from the text track's other properties (e.g. the kind of text - track and the text track's language) for use in its user interface. This automatically-generated - label is not exposed in the API.

    +
    -
    An in-band metadata track dispatch type +

    The effective playback rate is not necessarily the element's playbackRate. When a media element has a + current media controller, its effective playback rate is the + MediaController's media controller playback rate. Otherwise, the + effective playback rate is just the element's playbackRate. Thus, the current media + controller overrides the media element.

    -
    +

    If the effective playback rate is positive or zero, then the direction of + playback is forwards. Otherwise, it is backwards.

    -

    This is a string extracted from the media resource specifically for in-band - metadata tracks to enable such tracks to be dispatched to different scripts in the document.

    +

    When a media element is potentially playing and + its Document is a fully active Document, its current + playback position must increase monotonically at effective playback rate units + of media time per unit time of the media timeline's clock. (This specification always + refers to this as an increase, but that increase could actually be a decrease if + the effective playback rate is negative.)

    -

    For example, a traditional TV station broadcast streamed on the Web and - augmented with Web-specific interactive features could include text tracks with metadata for ad - targeting, trivia game data during game shows, player states during sports games, recipe - information during food programs, and so forth. As each program starts and ends, new tracks - might be added or removed from the stream, and as each one is added, the user agent could bind - them to dedicated script modules using the value of this attribute.

    +

    The effective playback rate can be 0.0, in which case the + current playback position doesn't move, despite playback not being paused (paused doesn't become true, and the pause event doesn't fire).

    -

    Other than for in-band metadata text tracks, the in-band metadata track dispatch type is the empty string. How this - value is populated for different media formats is described in steps to expose a - media-resource-specific text track.

    +

    This specification doesn't define how the user agent achieves the appropriate + playback rate — depending on the protocol and media available, it is plausible that the user + agent could negotiate with the server to have the server provide the media data at the appropriate + rate, so that (except for the period between when the rate is changed and when the server updates + the stream's playback rate) the client doesn't actually have to drop or interpolate any + frames.

    -
    A language +

    Any time the user agent provides a stable state, + the official playback position must be set to the current playback + position.

    -
    +

    While the direction of playback is backwards, any corresponding audio must be + muted. While the effective playback rate is + so low or so high that the user agent cannot play audio usefully, the corresponding audio must + also be muted. If the effective playback + rate is not 1.0, the user agent may apply pitch adjustments to the audio as necessary to + render it faithfully.

    -

    This is a string (a BCP 47 language tag) representing the language of the text track's cues. - [BCP47]

    +

    Media elements that are potentially playing + while not in a Document must not play any video, but should play any + audio component. Media elements must not stop playing just because all references to them have + been removed; only once a media element is in a state where no further audio could ever be played + by that element may the element be garbage collected.

    -

    The language of a text track can change dynamically, - in the case of a text track corresponding to a track element.

    +

    It is possible for an element to which no explicit references exist to play audio, + even if such an element is not still actively playing: for instance, it could have a current + media controller that still has references and can still be unpaused, or it could be + unpaused but stalled waiting for content to buffer.

    -
    A readiness state +
    -
    +

    Each media element has a list of newly introduced cues, which must be + initially empty. Whenever a text track cue is added to the list of cues of a text track that is in the list of text + tracks for a media element, that cue must + be added to the media element's list of newly introduced cues. Whenever + a text track is added to the list of text tracks for a media + element, all of the cues in that text + track's list of cues must be added to the + media element's list of newly introduced cues. When a media + element's list of newly introduced cues has new cues added while the + media element's show poster flag is not set, then the user agent must + run the time marches on steps.

    -

    One of the following:

    +

    When a text track cue is removed from the list of cues of a text track that is in the list of text + tracks for a media element, and whenever a text track is removed + from the list of text tracks of a media element, if the media + element's show poster flag is not set, then the user agent must run the + time marches on steps.

    -
    Not loaded +

    When the current playback position of a media element changes (e.g. + due to playback or seeking), the user agent must run the time marches on steps. If the + current playback position changes while the steps are running, then the user agent + must wait for the steps to complete, and then must immediately rerun the steps. (These steps are + thus run as often as possible or needed — if one iteration takes a long time, this can cause + certain cues to be skipped over as the user agent rushes ahead + to "catch up".)

    -
    +

    The time marches on steps are as follows:

    -

    Indicates that the text track's cues have not been obtained.

    +

    1. Let current cues be a list of cues, initialised to contain all the cues of all + the hidden or showing text tracks of the media + element (not the disabled ones) whose start times are less than or equal to the current + playback position and whose end times are + greater than the current playback position.

    2. Let other cues be a list of cues, + initialised to contain all the cues of hidden and showing text tracks of the media element that are not present in current cues.

    3. Let last time be the current playback position at the + time this algorithm was last run for this media element, if this is not the first + time it has run.

    4. If the current playback position has, since the last time this algorithm was + run, only changed through its usual monotonic increase during normal playback, then let missed cues be the list of cues in other cues whose start times are + greater than or equal to last time and whose end times are less than or equal to the current playback position. + Otherwise, let missed cues be an empty list.

    5. Remove all the cues in missed cues + that are also in the media element's list of newly introduced cues, and + then empty the element's list of newly introduced cues.

    6. If the time was reached through the usual monotonic increase of the current playback + position during normal playback, and if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and + is not still running event handlers for such an event, then the user agent must queue a + task to fire a simple event named timeupdate at the element. (In the other cases, such as + explicit seeks, relevant events get fired as part of the overall process of changing the + current playback position.)

      -
      Loading +

      The event thus is not to be fired faster than about 66Hz or slower than 4Hz + (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to + vary the frequency of the event based on the system load and the average cost of processing the + event each time, so that the UI updates are not any more frequent than the user agent can + comfortably handle while decoding the video.

    7. If all of the cues in current cues + have their text track cue active flag set, none of the cues in other cues have their text track cue active + flag set, and missed cues is empty, then abort these steps.

    8. -
      +

      If the time was reached through the usual monotonic increase of the current playback + position during normal playback, and there are cues + in other cues that have their text track cue pause-on-exit flag + set and that either have their text track cue active flag set or are also in missed cues, then immediately pause the + media element.

      -

      Indicates that the text track is loading and there have been no fatal errors encountered so - far. Further cues might still be added to the track by the parser.

      +

      In the other cases, such as explicit seeks, playback is not paused by going past + the end time of a cue, even if that cue has its text track cue pause-on-exit flag set.

      -
      Loaded +
    9. -
      +

      Let events be a list of tasks, + initially empty. Each task in this list will be associated + with a text track, a text track cue, and a time, which are used to + sort the list before the tasks are queued.

      -

      Indicates that the text track has been loaded with no fatal errors.

      +

      Let affected tracks be a list of text + tracks, initially empty.

      -
      Failed to load +

      When the steps below say to prepare an event named event for a + text track cue target with a time time, the + user agent must run these substeps:

      -
      +

      1. Let track be the text track with which the text + track cue target is associated.

      2. Create a task to fire a simple event + named event at target.

      3. Add the newly created task to events, associated with the time time, the text + track track, and the text track cue target.

      4. Add track to affected tracks.

      -

      Indicates that the text track was enabled, but when the user agent attempted to obtain it, - this failed in some way (e.g. URL could not be resolved, network error, unknown text track format). Some or all of the cues are - likely missing and will not be obtained.

      +

    10. For each text track cue in missed + cues, prepare an event named enter for the + TextTrackCue object with the text track cue start time.

    11. For each text track cue in other + cues that either has its text track cue active flag set or is in missed cues, prepare an event named exit for the TextTrackCue object with the later of the + text track cue end time and the text track cue start time.

    12. For each text track cue in current + cues that does not have its text track cue active flag set, prepare an + event named enter for the TextTrackCue + object with the text track cue start time.

    13. -
    +

    Sort the tasks in events in ascending + time order (tasks with earlier times first).

    -

    The readiness state of a text - track changes dynamically as the track is obtained.

    +

    Further sort tasks in events that have + the same time by the relative text track cue order of the text track cues associated with these tasks.

    -
    A mode +

    Finally, sort tasks in events that have + the same time and same text track cue order by placing tasks that fire enter events before + those that fire exit events.

    -
    +

  • Queue each task in + events, in list order.

  • Sort affected tracks in the same order as the text tracks appear in the media element's list of text + tracks, and remove duplicates.

    -

    One of the following:

    +

  • For each text track in affected tracks, in the list + order, queue a task to fire a simple event named cuechange at the TextTrack object, and, if the + text track has a corresponding track element, to then fire a + simple event named cuechange at the + track element as well.

  • Set the text track cue active flag of all the cues in the current cues, and unset the text track cue + active flag of all the cues in the other + cues.

  • Run the rules for updating the text track rendering of each of the text tracks in affected tracks that are showing. For example, for text tracks + based on WebVTT, the rules for updating the display of WebVTT text tracks. [WEBVTT] -

    Disabled +

    For the purposes of the algorithm above, a text track cue is considered to be part + of a text track only if it is listed in the text track list of cues, not + merely if it is associated with the text track.

    -
    +

    If the media element's Document stops being a + fully active document, then the playback will stop + until the document is active again.

    -

    Indicates that the text track is not active. Other than for the purposes of exposing the - track in the DOM, the user agent is ignoring the text track. No cues are active, no events are - fired, and the user agent will not attempt to obtain the track's cues.

    +

    When a media element is removed + from a Document, the user agent must run the following steps:

    -
    Hidden +

    1. Asynchronously await a stable state, allowing the task that removed the media element from the + Document to continue. The synchronous section consists of all the + remaining steps of this algorithm. (Steps in the synchronous section are marked with + ⌛.)

    2. ⌛ If the media element is in a Document, + abort these steps.

    3. ⌛ Run the internal pause steps for the media element.

      -
      +
    -

    Indicates that the text track is active, but that the user agent is not actively displaying - the cues. If no attempt has yet been made to obtain the track's cues, the user agent will - perform such an attempt momentarily. The user agent is maintaining a list of which cues are - active, and events are being fired accordingly.

    + -
    Showing -
    -

    Indicates that the text track is active. If no attempt has yet been made to obtain the - track's cues, the user agent will perform such an attempt momentarily. The user agent is - maintaining a list of which cues are active, and events are being fired accordingly. In - addition, for text tracks whose kind is subtitles or captions, the cues are being overlaid on the video - as appropriate; for text tracks whose kind is descriptions, the user agent is making the - cues available to the user in a non-visual fashion; and for text tracks whose kind is chapters, the user agent is making available to - the user a mechanism by which the user can navigate to any point in the media - resource by selecting a cue.

    +
    4.8.14.9 Seeking
    -
    +
    media . seeking
    -
    A list of zero or more cues +

    Returns true if the user agent is currently seeking.

    -
    +
    media . seekable
    -

    A list of text track cues, along with rules for - updating the text track rendering. For example, for WebVTT, the rules - for updating the display of WebVTT text tracks. [WEBVTT]

    +

    Returns a TimeRanges object that represents the ranges of the media + resource to which it is possible for the user agent to seek.

    -

    The list of cues of a text track can change - dynamically, either because the text track has not yet been loaded or is still loading, - or due to DOM manipulation.

    +
    media . fastSeek( time )
    -
    +

    Seeks to near the given time as fast as possible, trading precision for + speed. (To seek to a precise time, use the currentTime attribute.)

    -

    Each text track has a corresponding TextTrack object.

    +

    This does nothing if the media resource has not been loaded.

    -
    + -

    Each media element has a list of pending text tracks, which must - initially be empty, a blocked-on-parser flag, which must initially be false, and a - did-perform-automatic-track-selection flag, which must also initially be false.

    + -

    When the user agent is required to populate the list of pending text tracks of a - media element, the user agent must add to the element's list of pending text - tracks each text track in the element's list of text tracks whose - text track mode is not disabled and whose - text track readiness state is loading.

    +

    The seeking attribute must initially have the + value false.

    -

    Whenever a track element's parent node changes, the user agent must remove the - corresponding text track from any list of pending text tracks that it is - in.

    +

    The fastSeek() method must seek to the time given by the method's argument, with the + approximate-for-speed flag set.

    -

    Whenever a text track's text track readiness state changes to either - loaded or failed to - load, the user agent must remove it from any list of pending text tracks that - it is in.

    +

    When the user agent is required to seek to a particular new playback position in the media resource, optionally with the + approximate-for-speed flag set, it means that the user agent must run the following steps. + This algorithm interacts closely with the event loop mechanism; in particular, it has + a synchronous section (which is triggered as part of the event loop + algorithm). Steps in that section are marked with ⌛.

    -

    When a media element is created by an HTML parser or XML - parser, the user agent must set the element's blocked-on-parser flag to true. - When a media element is popped off the stack of open elements of an - HTML parser or XML parser, the user agent must honor user - preferences for automatic text track selection, populate the list of pending text - tracks, and set the element's blocked-on-parser flag to false.

    +

    1. Set the media element's show poster flag to false.

    2. If the media element's readyState + is HAVE_NOTHING, abort these steps.

    3. If the element's seeking IDL attribute is true, + then another instance of this algorithm is already running. Abort that other instance of the + algorithm without waiting for the step that it is running to complete.

    4. Set the seeking IDL attribute to true.

    5. If the seek was in response to a DOM method call or setting of an IDL attribute, then + continue the script. The remainder of these steps must be run asynchronously. With the exception + of the steps marked with ⌛, they could be aborted at any time by another instance of this + algorithm being invoked.

    6. If the new playback position is later than the end of the media + resource, then let it be the end of the media resource instead.

    7. If the new playback position is less than the earliest possible + position, let it be that position instead.

    8. If the (possibly now changed) new playback position is not in one of + the ranges given in the seekable attribute, then let it + be the position in one of the ranges given in the seekable attribute that is the nearest to the new + playback position. If two positions both satisfy that constraint (i.e. the new playback position is exactly in the middle between two ranges in the seekable attribute) then use the position that is closest to + the current playback position. If there are no ranges given in the seekable attribute then set the seeking IDL attribute to false and abort these steps.

    9. -

      The text tracks of a media element are ready when both the element's list of pending text - tracks is empty and the element's blocked-on-parser flag is false.

      +

      If the approximate-for-speed flag is set, adjust the new playback + position to a value that will allow for playback to resume promptly. If new + playback position before this step is before current playback position, then + the adjusted new playback position must also be before the current + playback position. Similarly, if the new playback position before + this step is after current playback position, then the adjusted new + playback position must also be after the current playback position.

      -

      Each media element has a pending text track change notification flag, - which must initially be unset.

      +

      For example, the user agent could snap to the nearest key frame, so that it + doesn't have to spend time decoding then discarding intermediate frames before resuming + playback.

      -

      Whenever a text track that is in a media element's list of text - tracks has its text track mode change value, the user agent must run the - following steps for the media element:

      +

    10. Queue a task to fire a simple event named seeking at the element.

    11. -

      1. If the media element's pending text track change notification - flag is set, abort these steps.

      2. Set the media element's pending text track change notification - flag.

      3. +

        Set the current playback position to the given new playback + position.

        -

        Queue a task that runs the following substeps:

        +

        If the media element was potentially playing + immediately before it started seeking, but seeking caused its readyState attribute to change to a value lower than HAVE_FUTURE_DATA, then a waiting will be + fired at the element.

        + -

        1. Unset the media element's pending text track change notification - flag.

        2. Fire a simple event named change at - the media element's textTracks - attribute's TextTrackList object.

        +

        This step sets the current playback position, and thus can + immediately trigger other conditions, such as the rules regarding when playback "reaches the end of the media resource" (part of the logic that + handles looping), even before the user agent is actually able to render the media data for that + position (as determined in the next step).

        -

      4. If the media element's show poster flag is not set, run the - time marches on steps.

      +

      The currentTime attribute does not + get updated asynchronously, as it returns the official playback position, not the + current playback position.

      -

      The task source for the tasks listed in this - section is the DOM manipulation task source.

      +

    12. Wait until the user agent has established whether or not the media data for + the new playback position is available, and, if it is, until it has decoded + enough data to play back that position.

      + +

    13. Await a stable state. The synchronous section consists of all + the remaining steps of this algorithm. (Steps in the synchronous section are marked + with ⌛.)

    14. ⌛ Set the seeking IDL attribute to + false.

    15. ⌛ Run the time marches on steps.

    16. ⌛ Queue a task to fire a simple event + named timeupdate at the element.

    17. ⌛ Queue a task to fire a simple event named seeked at the element.

    -

    A text track cue is the unit of time-sensitive data in a text track, - corresponding for instance for subtitles and captions to the text that appears at a particular - time and disappears at another time.

    +

    The seekable attribute must return a new + static normalised TimeRanges object that represents the ranges of the + media resource, if any, that the user agent is able to seek to, at the time the + attribute is evaluated.

    -

    Each text track cue consists of:

    +

    If the user agent can seek to anywhere in the media resource, e.g. + because it is a simple movie file and the user agent and the server support HTTP Range requests, + then the attribute would return an object with one range, whose start is the time of the first + frame (the earliest possible position, typically zero), and whose end is the same as + the time of the first frame plus the duration attribute's + value (which would equal the time of the last frame, and might be positive Infinity).

    -
    An identifier -
    -

    An arbitrary string.

    -
    A start time -
    -

    The time, in seconds and fractions of a second, that describes the beginning of the range of - the media data to which the cue applies.

    -
    An end time -
    -

    The time, in seconds and fractions of a second, that describes the end of the range of the - media data to which the cue applies.

    -
    A pause-on-exit flag -
    -

    A boolean indicating whether playback of the media resource is to pause when the - end of the range to which the cue applies is reached.

    -
    Some additional format-specific data
    -

    Additional fields, as needed for the format. For example, WebVTT has a text track cue - writing direction and so forth. [WEBVTT]

    -
    The data of the cue -
    -

    The raw data of the cue, and rules for rendering the cue in isolation.

    -

    The precise nature of this data is defined by the format. For example, WebVTT uses text.

    -
    +

    The range might be continuously changing, e.g. if the user agent is buffering a + sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for + instance.

    -

    The text track cue start time and text track cue end - time can be negative. (The current playback position can never be negative, - though, so cues entirely before time zero cannot be active.)

    +

    Media resources might be internally scripted or + interactive. Thus, a media element could play in a non-linear fashion. If this + happens, the user agent must act as if the algorithm for seeking was used whenever the current playback position + changes in a discontinuous fashion (so that the relevant events fire). If the media + element has a current media controller, then the user agent must seek + the media controller appropriately instead.

    -

    Each text track cue has a corresponding TextTrackCue object (or more - specifically, an object that inherits from TextTrackCue — for example, WebVTT - cues use the VTTCue interface). A text track cue's in-memory - representation can be dynamically changed through this TextTrackCue API. [WEBVTT]

    + -

    A text track cue is associated with rules for updating the text track - rendering, as defined by the specification for the specific kind of text track - cue. These rules are used specifically when the object representing the cue is added to a - TextTrack object using the addCue() - method.

    -

    In addition, each text track cue has two pieces of dynamic information:

    +
    4.8.14.10 Media resources with multiple media tracks
    -
    The active flag -
    +

    A media resource can have multiple embedded audio and video tracks. For example, + in addition to the primary video and audio tracks, a media resource could have + foreign-language dubbed dialogues, director's commentaries, audio descriptions, alternative + angles, or sign-language overlays.

    -

    This flag must be initially unset. The flag is used to ensure events are fired appropriately - when the cue becomes active or inactive, and to make sure the right cues are rendered.

    +
    media . audioTracks
    -

    The user agent must synchronously unset this flag whenever the text track cue is - removed from its text track's text track list of cues; whenever the - text track itself is removed from its media element's list of - text tracks or has its text track mode changed to disabled; and whenever the media element's readyState is changed back to HAVE_NOTHING. When the flag is unset in this way for one - or more cues in text tracks that were showing prior to the relevant incident, the user agent must, after having unset - the flag for all the affected cues, apply the rules for updating the text track - rendering of those text tracks. For example, for text tracks based on WebVTT, the rules for updating - the display of WebVTT text tracks. [WEBVTT]

    The display state -
    +

    Returns an AudioTrackList object representing the audio tracks available in the + media resource.

    -

    This is used as part of the rendering model, to keep cues in a consistent position. It must - initially be empty. Whenever the text track cue active flag is unset, the user - agent must empty the text track cue display state.

    +
    media . videoTracks
    -
    +

    Returns a VideoTrackList object representing the video tracks available in the + media resource.

    -

    The text track cues of a media element's text tracks are ordered relative to each other in the text track - cue order, which is determined as follows: first group the cues by their text track, with the groups being sorted in the same order - as their text tracks appear in the media element's - list of text tracks; then, within each group, cues must be sorted by their start - time, earliest first; then, any cues with the same - start time must be sorted by their end time, latest first; and finally, any cues with identical end times must - be sorted in the order they were last added to their respective text track list of - cues, oldest first (so e.g. for cues from a WebVTT file, that would initially - be the order in which the cues were listed in the file). [WEBVTT]

    +
    + -
    4.7.14.12.2 Sourcing in-band text tracks
    +

    The audioTracks attribute of a + media element must return a live AudioTrackList object + representing the audio tracks available in the media element's media + resource. The same object must be returned each time.

    -

    A media-resource-specific text track is a text track that corresponds - to data found in the media resource.

    +

    The videoTracks attribute of a + media element must return a live VideoTrackList object + representing the video tracks available in the media element's media + resource. The same object must be returned each time.

    +

    There are only ever one AudioTrackList object and one + VideoTrackList object per media element, even if another media + resource is loaded into the element: the objects are reused. (The AudioTrack + and VideoTrack objects are not, though.)

    -

    Rules for processing and rendering such data are defined by the relevant specifications, e.g. - the specification of the video format if the media resource is a video.

    +
    -

    When a media resource contains data that the user agent recognises and supports as - being equivalent to a text track, the user agent runs the steps to expose a - media-resource-specific text track with the relevant data, as follows.

    +

    In this example, a script defines a function that takes a URL to a video and a reference to an + element where the video is to be placed. That function then tries to load the video, and, once it + is loaded, checks to see if there is a sign-language track available. If there is, it also + displays that track. Both tracks are just placed in the given container; it's assumed that styles + have been applied to make this work in a pretty way!

    - + 
    <script>
+ function loadVideo(url, container) {
+   var controller = new MediaController();
+   var video = document.createElement('video');
+   video.src = url;
+   video.autoplay = true;
+   video.controls = true;
+   video.controller = controller;
+   container.appendChild(video);
+   video.onloadedmetadata = function (event) {
+     for (var i = 0; i < video.videoTracks.length; i += 1) {
+       if (video.videoTracks[i].kind == 'sign') {
+         var sign = document.createElement('video');
+         sign.src = url + '#track=' + video.videoTracks[i].id; 
+         sign.autoplay = true;
+         sign.controller = controller;
+         container.appendChild(sign);
+         return;
+       }
+     }
+   };
+ }
+</script>
    -

    1. Associate the relevant data with a new text track and its corresponding new - TextTrack object. The text track is a media-resource-specific - text track.

    2. Set the new text track's kind, label, and language - based on the semantics of the relevant data, as defined by the relevant specification. If there - is no label in that data, then the label must be set to the - empty string.

    3. Associate the text track list of cues with the rules for updating the - text track rendering appropriate for the format in question.

      +
    -
  • -

    If the new text track's kind is metadata, then set the text track in-band - metadata track dispatch type as follows, based on the type of the media - resource:

    +
    4.8.14.10.1 AudioTrackList and VideoTrackList objects
    -
    If the media resource is an Ogg file
    The text track in-band metadata track dispatch type must be set to the value - of the Name header field. [OGGSKELETONHEADERS]
    If the media resource is a WebM file
    The text track in-band metadata track dispatch type must be set to the value - of the CodecID element. [WEBMCG]
    If the media resource is an MPEG-2 file
    Let stream type be the value of the "stream_type" field describing the - text track's type in the file's program map section, interpreted as an 8-bit unsigned integer. - Let length be the value of the "ES_info_length" field for the track in the - same part of the program map section, interpreted as an integer as defined by the MPEG-2 - specification. Let descriptor bytes be the length bytes - following the "ES_info_length" field. The text track in-band metadata track dispatch - type must be set to the concatenation of the stream type byte and - the zero or more descriptor bytes bytes, expressed in hexadecimal using - uppercase ASCII hex digits. [MPEG2] +

    The AudioTrackList and VideoTrackList interfaces are used by + attributes defined in the previous section.

    -
    If the media resource is an MPEG-4 file
    Let the - first stsd box of the - first stbl box of the - first minf box of the - first mdia box of the - text track's trak box in the - first moov box - of the file be the stsd box, if any. + 
    interface AudioTrackList : EventTarget {
+  readonly attribute unsigned long length;
+  getter AudioTrack (unsigned long index);
+  AudioTrack? getTrackById(DOMString id);
 
-     If the file has no stsd box, or if the stsd box has neither a mett box nor a metx box, then the text track
-     in-band metadata track dispatch type must be set to the empty string.
+           attribute EventHandler onchange;
+           attribute EventHandler onaddtrack;
+           attribute EventHandler onremovetrack;
+};
 
-     Otherwise, if the stsd box has a mett box then the text
-     track in-band metadata track dispatch type must be set to the concatenation of the
-     string "mett", a U+0020 SPACE character, and the value of the first mime_format field of the first mett box of the stsd
-     box, or the empty string if that field is absent in that box.
+interface AudioTrack {
+  readonly attribute DOMString id;
+  readonly attribute DOMString kind;
+  readonly attribute DOMString label;
+  readonly attribute DOMString language;
+           attribute boolean enabled;
+};
 
-     Otherwise, if the stsd box has no mett box but has a metx box then the text track in-band metadata track dispatch type
-     must be set to the concatenation of the string "metx", a U+0020 SPACE
-     character, and the value of the first namespace field of the first metx box of the stsd box, or the empty string if that field is absent in
-     that box.
+interface VideoTrackList : EventTarget {
+  readonly attribute unsigned long length;
+  getter VideoTrack (unsigned long index);
+  VideoTrack? getTrackById(DOMString id);
+  readonly attribute long selectedIndex;
 
-     [MPEG4]
+           attribute EventHandler onchange;
+           attribute EventHandler onaddtrack;
+           attribute EventHandler onremovetrack;
+};
 
-
    +interface VideoTrack { + readonly attribute DOMString id; + readonly attribute DOMString kind; + readonly attribute DOMString label; + readonly attribute DOMString language; + attribute boolean selected; +}; -

  • Populate the new text track's list of - cues with the cues parsed so far, following the guidelines for exposing - cues, and begin updating it dynamically as necessary.

  • Set the new text track's readiness - state to loaded.

  • Set the new text track's mode to the - mode consistent with the user's preferences and the requirements of the relevant specification - for the data.

    +
    media . audioTracks . length
    media . videoTracks . length
    -

    For instance, if there are no other active subtitles, and this is a forced - subtitle track (a subtitle track giving subtitles in the audio track's primary language, but - only for audio that is actually in another language), then those subtitles might be activated - here.

    +

    Returns the number of tracks in the list.

    -

  • Add the new text track to the media element's list of text - tracks.

  • Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses - the TrackEvent interface, with the track - attribute initialised to the text track's TextTrack object, at the - media element's textTracks attribute's - TextTrackList object. +

    audioTrack = media . audioTracks[index]
    videoTrack = media . videoTracks[index]
    - +

    Returns the specified AudioTrack or VideoTrack object.

    - +
    audioTrack = media . audioTracks . getTrackById( id )
    videoTrack = media . videoTracks . getTrackById( id )
    - +

    Returns the AudioTrack or VideoTrack object with the given identifier, or null if no track has that identifier.

    +
    audioTrack . id
    videoTrack . id
    +

    Returns the ID of the given track. This is the ID that can be used with a fragment identifier + if the format supports the Media Fragments URI syntax, and that can be used with + the getTrackById() method. [MEDIAFRAG]

    - +
    audioTrack . kind
    videoTrack . kind
    -
    4.7.14.12.3 Sourcing out-of-band text tracks
    +

    Returns the category the given track falls into. The possible track categories are given below.

    -

    When a track element is created, it must be associated with a new text - track (with its value set as defined below) and its corresponding new - TextTrack object.

    +
    audioTrack . label
    videoTrack . label
    -

    The text track kind is determined from the state of the element's kind attribute according to the following table; for a state given - in a cell of the first column, the kind is the string given - in the second column:

    +

    Returns the label of the given track, if known, or the empty string otherwise.

    -
    State - String -
    Subtitles - subtitles -
    Captions - captions -
    Descriptions - descriptions -
    Chapters - chapters -
    Metadata - metadata -
    +
    audioTrack . language
    videoTrack . language
    -

    The text track label is the element's track label.

    +

    Returns the language of the given track, if known, or the empty string otherwise.

    -

    The text track language is the element's track language, if any, or - the empty string otherwise.

    +
    audioTrack . enabled [ = value ]
    -

    As the kind, label, - and srclang attributes are set, changed, or removed, the - text track must update accordingly, as per the definitions above.

    +

    Returns true if the given track is active, and false otherwise.

    -

    Changes to the track URL are handled in the algorithm below.

    +

    Can be set, to change whether the track is enabled or not. If multiple audio tracks are + enabled simultaneously, they are mixed.

    -

    The text track readiness state is initially not loaded, and the text track mode is initially disabled.

    +
    media . videoTracks . selectedIndex
    -

    The text track list of cues is initially empty. It is dynamically modified when - the referenced file is parsed. Associated with the list are the rules for updating the text - track rendering appropriate for the format in question; for WebVTT, this is - the rules for updating the display of WebVTT text tracks. [WEBVTT]

    +

    Returns the index of the currently selected track, if any, or −1 otherwise.

    -

    When a track element's parent element changes and the new parent is a media - element, then the user agent must add the track element's corresponding - text track to the media element's list of text tracks, and - then queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses - the TrackEvent interface, with the track - attribute initialised to the text track's TextTrack object, at the - media element's textTracks attribute's - TextTrackList object.

    +
    videoTrack . selected [ = value ]
    -

    When a track element's parent element changes and the old parent was a media - element, then the user agent must remove the track element's corresponding - text track from the media element's list of text tracks, - and then queue a task to fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that - uses the TrackEvent interface, with the track attribute initialised to the text track's - TextTrack object, at the media element's textTracks attribute's TextTrackList object.

    - +

    Returns true if the given track is active, and false otherwise.

    -
    +

    Can be set, to change whether the track is selected or not. Either zero or one video track is + selected; selecting a new track while a previous one is selected will unselect the previous + one.

    -

    When a text track corresponding to a track element is added to a - media element's list of text tracks, the user agent must queue a - task to run the following steps for the media element:

    +
    • -

    1. If the element's blocked-on-parser flag is true, abort these steps.

    2. If the element's did-perform-automatic-track-selection flag is true, abort - these steps.

    3. Honor user preferences for automatic text track selection for this - element.

    + -

    When the user agent is required to honor user preferences for automatic text track - selection for a media element, the user agent must run the following steps:

    +

    An AudioTrackList object represents a dynamic list of zero or more audio tracks, + of which zero or more can be enabled at a time. Each audio track is represented by an + AudioTrack object.

    -

    1. Perform automatic text track selection for subtitles and captions.

    2. Perform automatic text track selection for descriptions.

    3. Perform automatic text track selection for chapters.

    4. If there are any text tracks in the media - element's list of text tracks whose text track kind is metadata that correspond to track - elements with a default attribute set whose text - track mode is set to disabled, then set the - text track mode of all such tracks to hidden

    5. Set the element's did-perform-automatic-track-selection flag to - true.

    +

    A VideoTrackList object represents a dynamic list of zero or more video tracks, of + which zero or one can be selected at a time. Each video track is represented by a + VideoTrack object.

    -

    When the steps above say to perform automatic text track selection for one or more - text track kinds, it means to run the following steps:

    +

    Tracks in AudioTrackList and VideoTrackList objects must be + consistently ordered. If the media resource is in a format that defines an order, + then that order must be used; otherwise, the order must be the relative order in which the tracks + are declared in the media resource. The order used is called the natural order + of the list.

    -

    1. Let candidates be a list consisting of the text tracks in the media element's list of text tracks - whose text track kind is one of the kinds that were passed to the algorithm, if any, - in the order given in the list of text tracks.

    2. If candidates is empty, then abort these steps.

    3. If any of the text tracks in candidates have a text track mode set to showing, abort these steps.

    4. +

      Each track in one of these objects thus has an index; the first has the index + 0, and each subsequent track is numbered one higher than the previous one. If a media + resource dynamically adds or removes audio or video tracks, then the indices of the tracks + will change dynamically. If the media resource changes entirely, then all the + previous tracks will be removed and replaced with new tracks.

      -

      If the user has expressed an interest in having a track from candidates - enabled based on its text track kind, text track language, and - text track label, then set its text track mode to showing.

      +

      The AudioTrackList.length and VideoTrackList.length attributes must return + the number of tracks represented by their objects at the time of getting.

      -

      For example, the user could have set a browser preference to the effect of "I - want French captions whenever possible", or "If there is a subtitle track with 'Commentary' in - the title, enable it", or "If there are audio description tracks available, enable one, ideally - in Swiss German, but failing that in Standard Swiss German or Standard German".

      +

      The supported property indices of AudioTrackList and + VideoTrackList objects at any instant are the numbers from zero to the number of + tracks represented by the respective object minus one, if any tracks are represented. If an + AudioTrackList or VideoTrackList object represents no tracks, it has no + supported property indices.

      -

      Otherwise, if there are any text tracks in candidates that correspond to track elements with a default attribute set whose text track mode is - set to disabled, then set the text track - mode of the first such track to showing.

      +

      To determine the value of an indexed property for a given index index in an AudioTrackList or VideoTrackList object list, the user agent must return the AudioTrack or + VideoTrack object that represents the indexth track in list.

      -
    +

    The AudioTrackList.getTrackById(id) and VideoTrackList.getTrackById(id) methods must return the first AudioTrack or + VideoTrack object (respectively) in the AudioTrackList or + VideoTrackList object (respectively) whose identifier is equal to the value of the + id argument (in the natural order of the list, as defined above). When no + tracks match the given argument, the methods must return null.

    -

    When a text track corresponding to a track element experiences any of - the following circumstances, the user agent must start the track processing - model for that text track and its track element: +

    The AudioTrack and VideoTrack objects represent specific tracks of a + media resource. Each track can have an identifier, category, label, and language. + These aspects of a track are permanent for the lifetime of the track; even if a track is removed + from a media resource's AudioTrackList or VideoTrackList + objects, those aspects do not change.

    - +

    In addition, AudioTrack objects can each be enabled or disabled; this is the audio + track's enabled state. When an AudioTrack is created, its enabled state + must be set to false (disabled). The resource fetch + algorithm can override this.

    -

    When a user agent is to start the track processing model for a - text track and its track element, it must run the following algorithm. - This algorithm interacts closely with the event loop mechanism; in particular, it has - a synchronous section (which is triggered as part of the event loop - algorithm). The steps in that section are marked with ⌛.

    +

    Similarly, a single VideoTrack object per VideoTrackList object can + be selected, this is the video track's selection state. When a VideoTrack is + created, its selection state must be set to false (not selected). The resource fetch algorithm can override this.

    -

    1. If another occurrence of this algorithm is already running for this text - track and its track element, abort these steps, letting that other algorithm - take care of this element.

    2. If the text track's text track mode is not set to one of hidden or showing, abort - these steps.

    3. If the text track's track element does not have a media - element as a parent, abort these steps.

    4. Run the remainder of these steps asynchronously, allowing whatever caused these steps to - run to continue.

    5. Top: Await a stable state. The synchronous section - consists of the following steps. (The steps in the synchronous section are marked - with ⌛.)

    6. ⌛ Set the text track readiness state to loading.

    7. ⌛ Let URL be the track URL of the - track element.

    8. ⌛ If the track element's parent is a media element then - let CORS mode be the state of the parent media element's crossorigin content attribute. Otherwise, let CORS mode be No CORS.

    9. End the synchronous section, continuing the remaining steps - asynchronously.

    10. +

      The AudioTrack.id and VideoTrack.id attributes must return the identifier + of the track, if it has one, or the empty string otherwise. If the media resource is + in a format that supports the Media Fragments URI fragment identifier syntax, the + identifier returned for a particular track must be the same identifier that would enable the track + if used as the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

      -

      If URL is not the empty string, perform a potentially CORS-enabled - fetch of URL, with the mode being CORS mode, the origin being the origin of the - track element's Document, and the default origin behaviour set - to fail.

      +

      For example, in Ogg files, this would be the Name header field of the track. [OGGSKELETONHEADERS]

      -

      The resource obtained in this fashion, if any, contains the text track data. If any data is - obtained, it is by definition CORS-same-origin (cross-origin resources that are not - suitably CORS-enabled do not get this far).

      +

      The AudioTrack.kind and VideoTrack.kind attributes must return the category + of the track, if it has one, or the empty string otherwise.

      -

      The tasks queued by the - fetching algorithm on the networking task source to - process the data as it is being fetched must determine the type of the resource. If the - type of the resource is not a supported text track format, the load will fail, as - described below. Otherwise, the resource's data must be passed to the appropriate parser (e.g. - the WebVTT parser) as it is received, with the text track list of cues being used for - that parser's output. [WEBVTT]

      +

      The category of a track is the string given in the first column of the table below that is the + most appropriate for the track based on the definitions in the table's second and third columns, + as determined by the metadata included in the track in the media resource. The cell + in the third column of a row says what the category given in the cell in the first column of that + row applies to; a category is only appropriate for an audio track if it applies to audio tracks, + and a category is only appropriate for video tracks if it applies to video tracks. Categories must + only be returned for AudioTrack objects if they are appropriate for audio, and must + only be returned for VideoTrack objects if they are appropriate for video.

      -

      The appropriate parser will synchronously (during these networking task - source tasks) and incrementally (as each such task is - run with whatever data has been received from the network) update the text track list of - cues.

      +

      For Ogg files, the Role header field of the track gives the relevant metadata. For DASH media + resources, the Role element conveys the information. For WebM, only the + FlagDefault element currently maps to a value. [OGGSKELETONHEADERS] [DASH] [WEBMCG]

      -

      This specification does not currently say whether or how to check the MIME - types of text tracks, or whether or how to perform file type sniffing using the actual file - data. Implementors differ in their intentions on this matter and it is therefore unclear what - the right solution is. In the absence of any requirement here, the HTTP specification's strict - requirement to follow the Content-Type header prevails ("Content-Type specifies the media type - of the underlying data." ... "If and only if the media type is not given by a Content-Type - field, the recipient MAY attempt to guess the media type via inspection of its content - and/or the name extension(s) of the URI used to identify the resource.").

      + -

      If the fetching algorithm fails for any reason (network error, - the server returns an error code, a cross-origin check fails, etc), or if URL is the empty string, then queue a task to first change the - text track readiness state to failed to - load and then fire a simple event named error at the track element. This task must use the DOM manipulation task source.

      +
      Return values for AudioTrack.kind and VideoTrack.kind
      Category + Definition + Applies to...Examples +
      "alternative" + A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video). + Audio and video. + Ogg: "audio/alternate" or "video/alternate"; DASH: "alternate" without "main" and "commentary" roles, and, for audio, without the "dub" role (other roles ignored). + +
      "captions" + A version of the main video track with captions burnt in. (For legacy content; new content would use text tracks.) + Video only. + DASH: "caption" and "main" roles together (other roles ignored). -

      If the fetching algorithm does not fail, but the - type of the resource is not a supported text track format, or the file was not successfully - processed (e.g. the format in question is an XML format and the file contained a well-formedness - error that the XML specification requires be detected and reported to the application), then the - task that is queued by the - networking task source in which the aforementioned problem is found must change the - text track readiness state to failed to - load and fire a simple event named error - at the track element.

      +
      "descriptions" + An audio description of a video track. + Audio only. + Ogg: "audio/audiodesc". -

      If the fetching algorithm does not fail, and the file was - successfully processed, then the final task that is queued by the networking task source, after it has - finished parsing the data, must change the text track readiness state to loaded, and fire a simple event named load at the track element.

      +
      "main" + The primary audio or video track. + Audio and video. + Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set; DASH: "main" role without "caption", "subtitle", and "dub" roles (other roles ignored). -

      If, while the fetching algorithm is active, either:

      +
      "main-desc" + The primary audio track, mixed with audio descriptions. + Audio only. + AC3 audio in MPEG-2 TS: bsmod=2 and full_svc=1. - +
      "sign" + A sign-language interpretation of an audio track. + Video only. + Ogg: "video/sign". -

      ...then the user agent must abort the fetching algorithm, - discarding any pending tasks generated by that algorithm (and - in particular, not adding any cues to the text track list of cues after the moment - the URL changed), and then queue a task that first changes the text track - readiness state to failed to load and - then fires a simple event named error at the track element. This task must use the DOM manipulation task source.

      +
      "subtitles" + A version of the main video track with subtitles burnt in. (For legacy content; new content would use text tracks.) + Video only. + DASH: "subtitle" and "main" roles together (other roles ignored). -

    11. Wait until the text track readiness state is no longer set to loading.

    12. Wait until the track URL is no longer equal to URL, at - the same time as the text track mode is set to hidden or showing.

    13. Jump to the step labeled top. +

      14. "translation" + A translated version of the main audio track. + Audio only. + Ogg: "audio/dub". DASH: "dub" and "main" roles together (other roles ignored). -

      Whenever a track element has its src attribute - set, changed, or removed, the user agent must synchronously empty the element's text - track's text track list of cues. (This also causes the algorithm above to stop - adding cues from the resource being obtained using the previously given URL, if any.)

      +
      "commentary" + Commentary on the primary audio or video track, e.g. a director's commentary. + Audio and video. + DASH: "commentary" role without "main" role (other roles ignored). - +
      "" (empty string) + No explicit kind, or the kind given by the track's metadata is not recognised by the user agent. + Audio and video. + Any other track type, track role, or combination of track roles not described above. +
      -
      4.7.14.12.4 Guidelines for exposing cues in various formats as text track cues
      - -

      How a specific format's text track cues are to be interpreted for the purposes of processing by - an HTML user agent is defined by that format. In the absence of such a specification, this section - provides some constraints within which implementations can attempt to consistently expose such - formats.

      +

      The AudioTrack.label and VideoTrack.label attributes must return the label + of the track, if it has one, or the empty string otherwise.

      -

      To support the text track model of HTML, each unit of timed data is converted to a - text track cue. Where the mapping of the format's features to the aspects of a - text track cue as defined in this specification are not defined, implementations must - ensure that the mapping is consistent with the definitions of the aspects of a text track - cue as defined above, as well as with the following constraints:

      +

      The AudioTrack.language and VideoTrack.language attributes must return the + BCP 47 language tag of the language of the track, if it has one, or the empty string otherwise. If + the user agent is not able to express that language as a BCP 47 language tag (for example because + the language information in the media resource's format is a free-form string without + a defined interpretation), then the method must return the empty string, as if the track had no + language.

      -
      The text track cue identifier -
      -

      Should be set to the empty string if the format has no obvious analogue to a per-cue - identifier.

      -
      The text track cue pause-on-exit flag -
      -

      Should be set to false.

      -
      +

      The AudioTrack.enabled attribute, on + getting, must return true if the track is currently enabled, and false otherwise. On setting, it + must enable the track if the new value is true, and disable it otherwise. (If the track is no + longer in an AudioTrackList object, then the track being enabled or disabled has no + effect beyond changing the value of the attribute on the AudioTrack object.)

      - +

      Whenever an audio track in an AudioTrackList that was + disabled is enabled, and whenever one that was enabled is disabled, the user agent must + queue a task to fire a simple event named change at the AudioTrackList object.

      +

      The VideoTrackList.selectedIndex attribute + must return the index of the currently selected track, if any. If the VideoTrackList + object does not currently represent any tracks, or if none of the tracks are selected, it must + instead return −1.

      -
      4.7.14.12.5 Text track API
      +

      The VideoTrack.selected attribute, on + getting, must return true if the track is currently selected, and false otherwise. On setting, it + must select the track if the new value is true, and unselect it otherwise. If the track is in a + VideoTrackList, then all the other VideoTrack objects in that list must + be unselected. (If the track is no longer in a VideoTrackList object, then the track + being selected or unselected has no effect beyond changing the value of the attribute on the + VideoTrack object.)

      - 
      interface TextTrackList : EventTarget {
-  readonly attribute unsigned long length;
-  getter TextTrack (unsigned long index);
-  TextTrack? getTrackById(DOMString id);
+  
      Whenever a track in a VideoTrackList that was previously
+  not selected is selected, the user agent must queue a task to fire a simple
+  event named change at the
+  VideoTrackList object. This task must be queued before the task that fires
+  the resize event, if any.
      
 
-           attribute EventHandler onchange;
-           attribute EventHandler onaddtrack;
-           attribute EventHandler onremovetrack;
-};
      +
      -
      media . textTracks . length
      -

      Returns the number of text tracks associated with the media element (e.g. from track elements). This is the number of text tracks in the media element's list of text tracks.

      -
      media . textTracks[ n ]
      -

      Returns the TextTrack object representing the nth text track in the media element's list of text tracks.

      -
      textTrack = media . textTracks . getTrackById( id )
      +

      The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, + by all objects implementing the AudioTrackList and VideoTrackList + interfaces:

      -

      Returns the TextTrack object with the given identifier, or null if no track has that identifier.

      +
      Event handler Event handler event type +
      onchange change +
      onaddtrack addtrack +
      onremovetrack removetrack +
      -
      + -

      A TextTrackList object represents a dynamically updating list of text tracks in a given order.

      -

      The textTracks attribute of media elements must return a TextTrackList object - representing the TextTrack objects of the text tracks - in the media element's list of text tracks, in the same order as in the - list of text tracks. The same object must be returned each time the attribute is - accessed. [WEBIDL]

      +
      4.8.14.10.2 Selecting specific audio and video tracks declaratively
      -

      The length attribute of a - TextTrackList object must return the number of text - tracks in the list represented by the TextTrackList object.

      +

      The audioTracks and videoTracks attributes allow scripts to select which track + should play, but it is also possible to select specific tracks declaratively, by specifying + particular tracks in the fragment identifier of the URL of the media + resource. The format of the fragment identifier depends on the MIME type of + the media resource. [RFC2046] [URL]

      -

      The supported property indices of a TextTrackList object at any - instant are the numbers from zero to the number of text tracks in - the list represented by the TextTrackList object minus one, if any. If there are no - text tracks in the list, there are no supported property - indices.

      +
      -

      To determine the value of an indexed property of a TextTrackList - object for a given index index, the user agent must return the indexth text track in the list represented by the - TextTrackList object.

      +

      In this example, a video that uses a format that supports the Media Fragments URI + fragment identifier syntax is embedded in such a way that the alternative angles labeled + "Alternative" are enabled instead of the default video track. [MEDIAFRAG]

      -

      The getTrackById(id) method must return the first TextTrack in the - TextTrackList object whose id IDL attribute - would return a value equal to the value of the id argument. When no tracks - match the given argument, the method must return null.

      + 
      <video src="myvideo#track=Alternative"></video>
      - +
      -
      - 
      enum TextTrackMode { "disabled",  "hidden",  "showing" };
-enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };
-interface TextTrack : EventTarget {
-  readonly attribute TextTrackKind kind;
-  readonly attribute DOMString label;
-  readonly attribute DOMString language;
+  
      4.8.14.11 Synchronising multiple media elements
      
 
-  readonly attribute DOMString id;
-  readonly attribute DOMString inBandMetadataTrackDispatchType;
+  
      4.8.14.11.1 Introduction
      
 
-           attribute TextTrackMode mode;
+  
      Each media element can have a MediaController. A
+  MediaController is an object that coordinates the playback of multiple media elements, for instance so that a sign-language interpreter
+  track can be overlaid on a video track, with the two being kept in sync.
      
 
-  readonly attribute TextTrackCueList? cues;
-  readonly attribute TextTrackCueList? activeCues;
+  
      By default, a media element has no MediaController. An implicit
+  MediaController can be assigned using the mediagroup content attribute. An explicit
+  MediaController can be assigned directly using the controller IDL attribute.
      
 
-  void addCue(TextTrackCue cue);
-  void removeCue(TextTrackCue cue);
+  
      Media elements with a MediaController are said
+  to be slaved to their controller. The MediaController modifies the playback
+  rate and the playback volume of each of the media elements
+  slaved to it, and ensures that when any of its slaved media
+  elements unexpectedly stall, the others are stopped at the same time.
      
 
-           attribute EventHandler oncuechange;
-};
      +

      When a media element is slaved to a MediaController, its playback + rate is fixed to that of the other tracks in the same MediaController, and any + looping is disabled.

      -
      textTrack = media . addTextTrack( kind [, label [, language ] ] )
      -

      Creates and returns a new TextTrack object, which is also added to the - media element's list of text tracks.

      -
      textTrack . kind
      -

      Returns the text track kind string.

      +
      4.8.14.11.2 Media controllers
      -
      textTrack . label
      + 
      enum MediaControllerPlaybackState { "waiting", "playing", "ended" };
+[Constructor]
+interface MediaController : EventTarget {
+  readonly attribute unsigned short readyState; // uses HTMLMediaElement.readyState's values
 
-    
      Returns the text track label, if there is one, or the empty string otherwise
-    (indicating that a custom label probably needs to be generated from the other attributes of the
-    object if the object is exposed to the user).
      
+  readonly attribute TimeRanges buffered;
+  readonly attribute TimeRanges seekable;
+  readonly attribute unrestricted double duration;
+           attribute double currentTime;
 
-   
      textTrack . language
      
-    
      Returns the text track language string.
      
-   
      textTrack . id
      
+  readonly attribute boolean paused;
+  readonly attribute MediaControllerPlaybackState playbackState;
+  readonly attribute TimeRanges played;
+  void pause();
+  void unpause();
+  void play(); // calls play() on all media elements as well
 
-    
      Returns the ID of the given track.
      
+           attribute double defaultPlaybackRate;
+           attribute double playbackRate;
 
-    
      For in-band tracks, this is the ID that can be used with a fragment identifier if the format
-    supports the Media Fragments URI syntax, and that can be used with the getTrackById() method. [MEDIAFRAG]
      
+           attribute double volume;
+           attribute boolean muted;
 
-    
      For TextTrack objects corresponding to track elements, this is the
-    ID of the track element.
      
+           attribute EventHandler onemptied;
+           attribute EventHandler onloadedmetadata;
+           attribute EventHandler onloadeddata;
+           attribute EventHandler oncanplay;
+           attribute EventHandler oncanplaythrough;
+           attribute EventHandler onplaying;
+           attribute EventHandler onended;
+           attribute EventHandler onwaiting;
 
-   
      textTrack . inBandMetadataTrackDispatchType
      
+           attribute EventHandler ondurationchange;
+           attribute EventHandler ontimeupdate;
+           attribute EventHandler onplay;
+           attribute EventHandler onpause;
+           attribute EventHandler onratechange;
+           attribute EventHandler onvolumechange;
+};
      -

      Returns the text track in-band metadata track dispatch type string.

      +
      controller = new MediaController()
      -
      textTrack . mode [ = value ]
      +

      Returns a new MediaController object.

      -

      Returns the text track mode, represented by a string from the following - list:

      +
      media . controller [ = controller ]
      -
      "disabled"
      -

      The text track disabled mode.

      -
      "hidden"
      -

      The text track hidden mode.

      -
      "showing"
      -

      The text track showing mode.

      -
      +

      Returns the current MediaController for the media element, if any; + returns null otherwise.

      -

      Can be set, to change the mode.

      +

      Can be set, to set an explicit MediaController. Doing so removes the mediagroup attribute, if any.

      -
      textTrack . cues
      -

      Returns the text track list of cues, as a TextTrackCueList object.

      -
      textTrack . activeCues
      +
      controller . readyState
      -

      Returns the text track cues from the text track - list of cues that are currently active (i.e. that start before the current playback - position and end after it), as a TextTrackCueList object.

      +

      Returns the state that the MediaController was in the last time it fired events + as a result of reporting the controller state. + The values of this attribute are the same as for the readyState attribute of media + elements.

      -
      textTrack . addCue( cue )
      -

      Adds the given cue to textTrack's text track list of cues.

      -
      textTrack . removeCue( cue )
      -

      Removes the given cue from textTrack's text track list of cues.

      -
      +
      controller . buffered
      - +

      Returns a TimeRanges object that represents the intersection of the time ranges + for which the user agent has all relevant media data for all the slaved media elements.

      -

      The addTextTrack(kind, label, language) method of media elements, when invoked, must run the following steps:

      +
      controller . seekable
      -
      1. +

        Returns a TimeRanges object that represents the intersection of the time ranges + into which the user agent can seek for all the slaved media + elements.

        -

        Create a new TextTrack object.

        +
        controller . duration
        -
      2. +

        Returns the difference between the earliest playable moment and the latest playable moment + (not considering whether the data in question is actually buffered or directly seekable, but not + including time in the future for infinite streams). Will return zero if there is no media.

        -

        Create a new text track corresponding to the new object, and set its text - track kind to kind, its text track label to label, its text track language to language, its - text track readiness state to the text track loaded state, its - text track mode to the text track hidden mode, and its text - track list of cues to an empty list.

        +
        controller . currentTime [ = value ]
        -

        Initially, the text track list of cues is not associated with any rules - for updating the text track rendering. When a text track cue is added to it, - the text track list of cues has its rules permanently set accordingly.

        +

        Returns the current playback position, in seconds, as a position between zero + time and the current duration.

        -
      3. +

        Can be set, to seek to the given time.

        -

        Add the new text track to the media element's list of text - tracks.

        +
        controller . paused
        -
      4. +

        Returns true if playback is paused; false otherwise. When this attribute is true, any + media element slaved to this controller will be stopped.

        -

        Queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and - that uses the TrackEvent interface, with the track attribute initialised to the new text - track's TextTrack object, at the media element's textTracks attribute's TextTrackList - object.

        +
        controller . playbackState
        -
      5. +

        Returns the state that the MediaController was in the last time it fired events + as a result of reporting the controller state. + The value of this attribute is either "playing", indicating that the media is actively + playing, "ended", indicating that the media is + not playing because playback has reached the end of all the slaved media elements, + or "waiting", indicating that the media is not + playing for some other reason (e.g. the MediaController is paused).

        -

        Return the new TextTrack object.

        +
        controller . pause()
        -
      +

      Sets the paused attribute to true.

      -
      +
      controller . unpause()
      -

      The kind attribute must return the - text track kind of the text track that the TextTrack object - represents.

      +

      Sets the paused attribute to false.

      -

      The label attribute must return the - text track label of the text track that the TextTrack - object represents.

      +
      controller . play()
      -

      The language attribute must return the - text track language of the text track that the TextTrack - object represents.

      +

      Sets the paused attribute to false and + invokes the play() method of each slaved media element.

      -

      The id attribute returns the track's - identifier, if it has one, or the empty string otherwise. For tracks that correspond to - track elements, the track's identifier is the value of the element's id attribute, if any. For in-band tracks, the track's identifier is - specified by the media resource. If the media resource is in a format - that supports the Media Fragments URI fragment identifier syntax, the identifier - returned for a particular track must be the same identifier that would enable the track if used as - the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

      +
      controller . played
      -

      The inBandMetadataTrackDispatchType - attribute must return the text track in-band metadata track dispatch type of the - text track that the TextTrack object represents.

      +

      Returns a TimeRanges object that represents the union of the time ranges in all + the slaved media elements that have been played.

      -

      The mode attribute, on getting, must return - the string corresponding to the text track mode of the text track that - the TextTrack object represents, as defined by the following list:

      +
      controller . defaultPlaybackRate [ = value ]
      -
      "disabled"
      The text track disabled mode.
      "hidden"
      The text track hidden mode.
      "showing"
      The text track showing mode.
      +

      Returns the default rate of playback.

      -

      On setting, if the new value isn't equal to what the attribute would currently return, the new - value must be processed as follows:

      +

      Can be set, to change the default rate of playback.

      -
      If the new value is "disabled"
      +

      This default rate has no direct effect on playback, but if the user switches to a + fast-forward mode, when they return to the normal playback mode, it is expected that rate of + playback (playbackRate) will be returned + to this default rate.

      -

      Set the text track mode of the text track that the - TextTrack object represents to the text track disabled mode.

      +
      controller . playbackRate [ = value ]
      -
      If the new value is "hidden"
      +

      Returns the current rate of playback.

      -

      Set the text track mode of the text track that the - TextTrack object represents to the text track hidden mode.

      +

      Can be set, to change the rate of playback.

      -
      If the new value is "showing"
      +
      controller . volume [ = value ]
      -

      Set the text track mode of the text track that the - TextTrack object represents to the text track showing mode.

      +

      Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where + 0.0 is the quietest and 1.0 the loudest.

      -
      +

      Can be set, to change the volume multiplier.

      -

      If the text track mode of the text track that the - TextTrack object represents is not the text track disabled mode, then - the cues attribute must return a - live TextTrackCueList object that represents the subset of the - text track list of cues of the text track that the - TextTrack object represents whose end - times occur at or after the earliest possible position when the script - started, in text track cue order. Otherwise, it must return null. When an - object is returned, the same object must be returned each time.

      +

      Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

      -

      The earliest possible position when the script started is whatever the - earliest possible position was the last time the event loop reached step - 1.

      +
      controller . muted [ = value ]
      -

      If the text track mode of the text track that the - TextTrack object represents is not the text track disabled mode, then - the activeCues attribute must return a - live TextTrackCueList object that represents the subset of the - text track list of cues of the text track that the - TextTrack object represents whose active flag was set when the script - started, in text track cue order. Otherwise, it must return null. When an - object is returned, the same object must be returned each time.

      +

      Returns true if all audio is muted (regardless of other attributes either on the controller + or on any media elements slaved to this controller), and + false otherwise.

      -

      A text track cue's active flag was set when the script started if its - text track cue active flag was set the last time the event loop reached - step 1.

      +

      Can be set, to change whether the audio is muted or not.

      -
      +
      -

      The addCue(cue) method - of TextTrack objects, when invoked, must run the following steps:

      + -

      1. If the text track list of cues does not yet have any associated rules - for updating the text track rendering, then associate the text track list of - cues with the rules for updating the text track rendering appropriate to cue.

        +

        A media element can have a current media controller, which is a + MediaController object. When a media element is created without a mediagroup attribute, it does not have a current media + controller. (If it is created with such an attribute, then that attribute + initializes the current media controller, as defined below.)

        -

      2. If text track list of cues' associated rules for updating the text - track rendering are not the same rules for updating the text track rendering - as appropriate for cue, then throw an InvalidStateError - exception and abort these steps.

        +

        The slaved media elements of a MediaController are the media elements whose current media controller is that + MediaController. All the slaved media elements of a + MediaController must use the same clock for their definition of their media + timeline's unit time. When the user agent is required to act on each slaved media element in turn, they must be processed in the order that they + were last associated with the MediaController.

        -

      3. If the given cue is in a text track list of cues, then - remove cue from that text track list of cues.

      4. Add cue to the method's TextTrack object's text - track's text track list of cues.

      +
      -

      The removeCue(cue) - method of TextTrack objects, when invoked, must run the following steps:

      +

      The controller attribute on a media + element, on getting, must return the element's current media controller, if + any, or null otherwise. On setting, the user agent must run the following steps:

      -

      1. If the given cue is not currently listed in the method's - TextTrack object's text track's text track list of cues, - then throw a NotFoundError exception and abort these steps.

      2. Remove cue from the method's TextTrack object's - text track's text track list of cues.

      +

      1. Let m be the media element in question.

      2. Let old controller be m's current media + controller, if it currently has one, and null otherwise.

      3. Let new controller be null.

      4. Let m have no current media controller, if it currently + has one.

      5. Remove the element's mediagroup content + attribute, if any.

      6. If the new value is null, then jump to the update controllers step below.

      7. Let m's current media controller be the new + value.

      8. Let new controller be m's current media + controller.

      9. Bring the media element up to speed with its new media controller.

      10. Update controllers: If old controller and new + controller are the same (whether both null or both the same controller) then abort these + steps.

      11. If old controller is not null and still has one or more slaved + media elements, then report the controller state for old + controller.

      12. If new controller is not null, then report the controller + state for new controller.

      - +
      -
      +

      The MediaController() constructor, when + invoked, must return a newly created MediaController object.

      -

      In this example, an audio element is used to play a specific sound-effect from a - sound file containing many sound effects. A cue is used to pause the audio, so that it ends - exactly at the end of the clip, even if the browser is busy running some script. If the page had - relied on script to pause the audio, then the start of the next clip might be heard if the - browser was not able to run the script at the exact time specified.

      +
      - 
      var sfx = new Audio('sfx.wav');
-var sounds = sfx.addTextTrack('metadata');
+  
      The readyState attribute must
+  return the value to which it was most recently set. When the MediaController object
+  is created, the attribute must be set to the value 0 (HAVE_NOTHING). The value is updated by the report the
+  controller state algorithm below.
      
 
-// add sounds we care about
-function addFX(start, end, name) {
-  var cue = new VTTCue(start, end, '');
-  cue.id = name;
-  cue.pauseOnExit = true;
-  sounds.addCue(cue);
-}
-addFX(12.783, 13.612, 'dog bark');
-addFX(13.612, 15.091, 'kitten mew'))
+  
      The seekable attribute must return
+  a new static normalised TimeRanges object that represents the
+  intersection of the ranges of the media resources of the
+  slaved media elements that the user agent is able to seek to, at the time the
+  attribute is evaluated.
      
 
-function playSound(id) {
-  sfx.currentTime = sounds.getCueById(id).startTime;
-  sfx.play();
-}
+  
      The buffered attribute must return
+  a new static normalised TimeRanges object that represents the
+  intersection of the ranges of the media resources of the
+  slaved media elements that the user agent has buffered, at the time the attribute is
+  evaluated. Users agents must accurately determine the ranges available, even for media streams
+  where this can only be determined by tedious inspection.
      
+
+  
      The duration attribute must return
+  the media controller duration.
      
+
+  
      Every 15 to 250ms, or whenever the MediaController's media controller
+  duration changes, whichever happens least often, the user agent must queue a
+  task to fire a simple event named durationchange at the
+  MediaController. If the MediaController's media controller
+  duration decreases such that the media controller position is greater than the
+  media controller duration, the user agent must immediately seek the media
+  controller to media controller duration.
      
 
-// play a bark as soon as we can
-sfx.oncanplaythrough = function () {
-  playSound('dog bark');
-}
-// meow when the user tries to leave
-window.onbeforeunload = function () {
-  playSound('kitten mew');
-  return 'Are you sure you want to leave this awesome page?';
-}
      +

      The currentTime attribute must + return the media controller position on getting, and on setting must seek the + media controller to the new value.

      -
      +

      Every 15 to 250ms, or whenever the MediaController's media controller + position changes, whichever happens least often, the user agent must queue a + task to fire a simple event named timeupdate at the + MediaController.

      - 
      interface TextTrackCueList {
-  readonly attribute unsigned long length;
-  getter TextTrackCue (unsigned long index);
-  TextTrackCue? getCueById(DOMString id);
-};
      +

      When a MediaController is created it is a playing media controller. It + can be changed into a paused media controller and back either via the user agent's user + interface (when the element is exposing a user + interface to the user) or by script using the APIs defined in this section (see below).

      -
      cuelist . length
      -

      Returns the number of cues in the list.

      -
      cuelist[index]
      -

      Returns the text track cue with index index in the list. The cues are sorted in text track cue order.

      -
      cuelist . getCueById( id )
      -

      Returns the first text track cue (in text track cue order) with text track cue identifier id.

      -

      Returns null if none of the cues have the given identifier or if the argument is the empty string.

      -
      +

      The paused attribute must return + true if the MediaController object is a paused media controller, and + false otherwise.

      - +

      When the pause() method is invoked, + if the MediaController is a playing media controller then the user agent + must change the MediaController into a paused media controller, + queue a task to fire a simple event named pause at the MediaController, and then + report the controller state of the MediaController.

      -

      A TextTrackCueList object represents a dynamically updating list of text track cues in a given order.

      +

      When the unpause() method is + invoked, if the MediaController is a paused media controller, the user + agent must change the MediaController into a playing media controller, + queue a task to fire a simple event named play at the MediaController, and then + report the controller state of the MediaController.

      -

      The length attribute must return - the number of cues in the list represented by the - TextTrackCueList object.

      +

      When the play() method is invoked, the + user agent must invoke the play() method of each slaved media element in turn, and then invoke the unpause method of the MediaController.

      -

      The supported property indices of a TextTrackCueList object at any - instant are the numbers from zero to the number of cues in the - list represented by the TextTrackCueList object minus one, if any. If there are no - cues in the list, there are no supported property - indices.

      +

      The playbackState attribute + must return the value to which it was most recently set. When the MediaController + object is created, the attribute must be set to the value "waiting". The value is updated by the report the + controller state algorithm below.

      -

      To determine the value of an indexed property for a given index index, the user agent must return the indexth text track - cue in the list represented by the TextTrackCueList object.

      +

      The played attribute must return a + new static normalised TimeRanges object that represents the union of the + ranges of points on the media timelines of the media resources of the slaved media elements that the + user agent has so far reached through the usual monotonic increase of their current playback positions during normal playback, at the time the + attribute is evaluated.

      -

      The getCueById(id) method, when called with an argument other than the empty string, - must return the first text track cue in the list represented by the - TextTrackCueList object whose text track cue identifier is id, if any, or null otherwise. If the argument is the empty string, then the method - must return null.

      +
      - +

      A MediaController has a media controller default playback rate and a + media controller playback rate, which must both be set to 1.0 when the + MediaController object is created.

      -
      +

      The defaultPlaybackRate + attribute, on getting, must return the MediaController's media controller + default playback rate, and on setting, must set the MediaController's + media controller default playback rate to the new value, then queue a + task to fire a simple event named ratechange at the + MediaController.

      - 
      interface TextTrackCue : EventTarget {
-  readonly attribute TextTrack? track;
+  
      The playbackRate attribute, on
+  getting, must return the MediaController's media controller playback
+  rate, and on setting, must set the MediaController's media controller
+  playback rate to the new value, then queue a task to fire a simple
+  event named ratechange at the
+  MediaController.
      
 
-           attribute DOMString id;
-           attribute double startTime;
-           attribute double endTime;
-           attribute boolean pauseOnExit;
+  
      
 
-           attribute EventHandler onenter;
-           attribute EventHandler onexit;
-};
      +

      A MediaController has a media controller volume multiplier, which must + be set to 1.0 when the MediaController object is created, and a media controller + mute override, much must initially be false.

      -
      cue . track
      -

      Returns the TextTrack object to which this - text track cue belongs, if any, or null - otherwise.

      -
      cue . id [ = value ]
      -

      Returns the text track cue identifier.

      -

      Can be set.

      -
      cue . startTime [ = value ]
      -

      Returns the text track cue start time, in seconds.

      -

      Can be set.

      -
      cue . endTime [ = value ]
      -

      Returns the text track cue end time, in seconds.

      -

      Can be set.

      -
      cue . pauseOnExit [ = value ]
      -

      Returns true if the text track cue pause-on-exit flag is set, false otherwise.

      -

      Can be set.

      -
      +

      The volume attribute, on getting, + must return the MediaController's media controller volume multiplier, + and on setting, if the new value is in the range 0.0 to 1.0 inclusive, must set the + MediaController's media controller volume multiplier to the new value + and queue a task to fire a simple event named volumechange at the + MediaController. If the new value is outside the range 0.0 to 1.0 inclusive, then, on + setting, an IndexSizeError exception must be thrown instead.

      - +

      The muted attribute, on getting, must + return the MediaController's media controller mute override, and on + setting, must set the MediaController's media controller mute override + to the new value and queue a task to fire a simple event named volumechange at the + MediaController.

      -

      The track attribute, on getting, must - return the TextTrack object of the text track in whose list of cues the text track cue that the - TextTrackCue object represents finds itself, if any; or null otherwise.

      +
      -

      The id attribute, on getting, must return - the text track cue identifier of the text track cue that the - TextTrackCue object represents. On setting, the text track cue - identifier must be set to the new value.

      +

      The media resources of all the slaved media + elements of a MediaController have a defined temporal relationship which + provides relative offsets between the zero time of each such media resource: for + media resources with a timeline offset, their + relative offsets are the difference between their timeline offset; the zero times of + all the media resources without a timeline offset + are not offset from each other (i.e. the origins of their timelines are cotemporal); and finally, + the zero time of the media resource with the earliest timeline offset + (if any) is not offset from the zero times of the media + resources without a timeline offset (i.e. the origins of media resources without a timeline offset are further cotemporal + with the earliest defined point on the timeline of the media resource with the + earliest timeline offset).

      -

      The startTime attribute, on - getting, must return the text track cue start time of the text track cue - that the TextTrackCue object represents, in seconds. On setting, the text track - cue start time must be set to the new value, interpreted in seconds; then, if the - TextTrackCue object's text track cue is in a text track's - list of cues, and that text track is in - a media element's list of text tracks, and the media - element's show poster flag is not set, then run the time marches on steps for that media element.

      +

      The media resource end position of a media resource in a media + element is defined as follows: if the media resource has a finite and known + duration, the media resource end position is the duration of the media + resource's timeline (the last defined position on that timeline); otherwise, the + media resource's duration is infinite or unknown, and the media resource end + position is the time of the last frame of media data currently available for + that media resource.

      -

      The endTime attribute, on getting, - must return the text track cue end time of the text track cue that the - TextTrackCue object represents, in seconds. On setting, the text track cue end - time must be set to the new value, interpreted in seconds; then, if the - TextTrackCue object's text track cue is in a text track's - list of cues, and that text track is in - a media element's list of text tracks, and the media - element's show poster flag is not set, then run the time marches on steps for that media element.

      +

      Each MediaController also has its own defined timeline. On this timeline, all the + media resources of all the slaved media elements + of the MediaController are temporally aligned according to their defined offsets. The + media controller duration of that MediaController is the time from the + earliest earliest possible position, relative to this MediaController + timeline, of any of the media resources of the slaved + media elements of the MediaController, to the time of the latest media + resource end position of the media resources of the + slaved media elements of the MediaController, again relative to this + MediaController timeline.

      -

      The pauseOnExit attribute, on - getting, must return true if the text track cue pause-on-exit flag of the text - track cue that the TextTrackCue object represents is set; or false otherwise. - On setting, the text track cue pause-on-exit flag must be set if the new value is - true, and must be unset otherwise.

      +

      Each MediaController has a media controller position. This is the time + on the MediaController's timeline at which the user agent is trying to play the + slaved media elements. When a MediaController is created, its + media controller position is initially zero.

      - +

      When the user agent is to bring a media element up to speed with its new media controller, it must seek that media element to the + MediaController's media controller position relative to the media + element's timeline.

      +

      When the user agent is to seek the media controller to a particular new playback position, it must follow these steps:

      -
      4.7.14.12.6 Text tracks describing chapters
      +

      1. If the new playback position is less than zero, then set it to + zero.

      2. If the new playback position is greater than the media + controller duration, then set it to the media controller duration.

      3. Set the media controller position to the new playback + position.

      4. Seek each slaved + media element to the new playback position relative to the media + element timeline.

      -

      Chapters are segments of a media resource with a given title. Chapters can be - nested, in the same way that sections in a document outline can have subsections.

      +

      A MediaController is a restrained media controller if the + MediaController is a playing media controller, but either at least one + of its slaved media elements whose autoplaying flag is true still has + its paused attribute set to true, or, all of its + slaved media elements have their paused + attribute set to true.

      -

      Each text track cue in a text track being used for describing - chapters has three key features: the text track cue start time, giving the start time - of the chapter, the text track cue end time, giving the end time of the chapter, and - the text track cue data giving the chapter title.

      +

      A MediaController is a blocked media controller if the + MediaController is a paused media controller, or if any of its + slaved media elements are blocked media + elements, or if any of its slaved media elements whose autoplaying + flag is true still have their paused attribute set to + true, or if all of its slaved media elements have their paused attribute set to true.

      - +

      A media element is blocked on its media controller if the + MediaController is a blocked media controller, or if its media + controller position is either before the media resource's earliest + possible position relative to the MediaController's timeline or after the end + of the media resource relative to the MediaController's timeline.

      -

      The rules for constructing the chapter tree from a text track are as follows. They - produce a potentially nested list of chapters, each of which have a start time, end time, title, - and a list of nested chapters. This algorithm discards cues that do not correctly nest within each - other, or that are out of order.

      +

      When a MediaController is not a blocked media + controller and it has at least one slaved media + element whose Document is a fully active Document, + the MediaController's media controller position must increase + monotonically at media controller playback rate units of time on the + MediaController's timeline per unit time of the clock used by its slaved media + elements.

      -

      1. Let list be a copy of the list - of cues of the text track being processed.

      2. Remove from list any text track cue whose text - track cue end time is before its text track cue start time.

      3. Let output be an empty list of chapters, where a chapter is a record - consisting of a start time, an end time, a title, and a (potentially empty) list of nested - chapters. For the purpose of this algorithm, each chapter also has a parent chapter.

      4. Let current chapter be a stand-in chapter whose start time is negative - infinity, whose end time is positive infinity, and whose list of nested chapters is output. (This is just used to make the algorithm easier to describe.)

      5. Loop: If list is empty, jump to the step labeled - end.

      6. Let current cue be the first cue in list, and then - remove it from list.

      7. If current cue's text track cue start time is less than - the start time of current chapter, then return to the step labeled - loop.

        +

        When the zero point on the timeline of a MediaController moves relative to the + timelines of the slaved media elements by a time difference ΔT, the MediaController's media controller + position must be decremented by ΔT.

        -

      8. While current cue's text track cue start time is greater - than or equal to current chapter's end time, let current - chapter be current chapter's parent chapter.

      9. If current cue's text track cue end time is greater than - the end time of current chapter, then return to the step labeled - loop.

        +

        In some situations, e.g. when playing back a live stream without buffering + anything, the media controller position would increase monotonically as described + above at the same rate as the ΔT described in the previous paragraph + decreases it, with the end result that for all intents and purposes, the media controller + position would appear to remain constant (probably with the value 0).

        -
      10. +
        -

        Create a new chapter new chapter, whose start time is current cue's text track cue start time, whose end time is current cue's text track cue end time, whose title is current cue's text track cue data interpreted according to its - rules for rendering the cue in isolation, and whose list of nested chapters is - empty.

        +

        A MediaController has a most recently reported readiness state, which + is a number from 0 to 4 derived from the numbers used for the media element readyState attribute, and a most recently reported + playback state, which is either playing, waiting, or ended.

        -

        For WebVTT, the rules for rendering the cue in isolation are the - rules for interpreting WebVTT cue text. [WEBVTT]

        +

        When a MediaController is created, its most recently reported readiness + state must be set to 0, and its most recently reported playback state must be + set to waiting.

        -

      11. Append new chapter to current chapter's list of - nested chapters, and let current chapter be new chapter's - parent.

      12. Let current chapter be new chapter.

      13. Return to the step labeled loop.

      14. End: Return output.

      +

      When a user agent is required to report the controller state for a + MediaController, the user agent must run the following steps:

      - +
      1. -
        +

        If the MediaController has no slaved media elements, let new readiness state be 0.

        -

        The following snippet of a WebVTT file shows how nested chapters can be marked - up. The file describes three 50-minute chapters, "Astrophysics", "Computational Physics", and - "General Relativity". The first has three subchapters, the second has four, and the third has - two. [WEBVTT]

        +

        Otherwise, let it have the lowest value of the readyState IDL attributes of all of its slaved media + elements.

        - 
        WEBVTT
+   
      2. 
 
-00:00:00.000 --> 00:50:00.000
-Astrophysics
+    
        If the MediaController's most recently reported readiness state is
+    less than the new readiness state, then run these substeps:
        
 
-00:00:00.000 --> 00:10:00.000
-Introduction to Astrophysics
+    
        1. Let next state be the MediaController's most
+     recently reported readiness state.
        2. Loop: Increment next state by one.
        3. 
 
-00:10:00.000 --> 00:45:00.000
-The Solar System
+      
          Queue a task to run the following steps:
          
 
-00:00:00.000 --> 00:10:00.000
-Coursework Description
+      
          1. Set the MediaController's readyState attribute to the value next state.
          2. Fire a simple event at the MediaController object, whose
+       name is the event name corresponding to the value of next state given in
+       the table below.
          
 
-00:50:00.000 --> 01:40:00.000
-Computational Physics
+     
        4. If next state is less than new readiness state,
+     then return to the step labeled loop.
        
 
-00:50:00.000 --> 00:55:00.000
-Introduction to Programming
+    
        Otherwise, if the MediaController's most recently reported readiness
+    state is greater than new readiness state then queue a
+    task to fire a simple event at the MediaController object,
+    whose name is the event name corresponding to the value of new readiness
+    state given in the table below.
        
 
-00:55:00.000 --> 01:30:00.000
-Data Structures
+    
        Value of new readiness state
+       Event name
 
-01:30:00.000 --> 01:35:00.000
-Answers to Last Exam
+     
         0
+        emptied
 
-01:35:00.000 --> 01:40:00.000
-Coursework Description
+      
         1
+        loadedmetadata
 
-01:40:00.000 --> 02:30:00.000
-General Relativity
+      
         2
+        loadeddata
 
-01:40:00.000 --> 02:00:00.000
-Tensor Algebra
+      
         3
+        canplay
 
-02:00:00.000 --> 02:30:00.000
-The General Relativistic Field Equations
+      
         4
+        canplaythrough
 
-  
+    
        
 
+   
      3. Let the MediaController's most recently reported readiness state
+   be new readiness state.
      4. 
 
-  
+    
        Initialise new playback state by setting it to the state given for the
+    first matching condition from the following list:
        
 
-  
        4.7.14.12.7 Event handlers for objects of the text track APIs
        
+    
        If the MediaController has no slaved media elements
        Let new playback state be waiting.
        If all of the MediaController's slaved media elements have
+     ended playback and the media controller playback rate is positive or
+     zero
        Let new playback state be ended.
        If the MediaController is a blocked media controller
        Let new playback state be waiting.
        Otherwise
        Let new playback state be playing.
        
 
-  
        The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL
-  attributes, by all objects implementing the TextTrackList interface:
        
+   
      5. If the MediaController's most recently reported playback state
+   is not equal to new playback state and the new playback
+   state is ended, then queue a task that, if the
+   MediaController object is a playing media controller, and all of the
+   MediaController's slaved media elements have still ended
+   playback, and the media controller playback rate is still positive or zero,
+   changes the MediaController object to a paused media controller and
+   then fires a simple event named pause at the MediaController
+   object.
      6. 
 
-  
        Event handler Event handler event type
-   
        onchange  change
-    
        onaddtrack  addtrack
-    
        onremovetrack  removetrack
-  
        
+    
        If the MediaController's most recently reported playback state is
+    not equal to new playback state then queue a task to run the
+    following steps:
        
 
-  
        The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL
-  attributes, by all objects implementing the TextTrack interface:
        
+    
        1. Set the MediaController's playbackState attribute to the value given in
+     the second column of the row of the following table whose first column contains the new playback state.
        2. Fire a simple event at the MediaController object, whose name
+     is the value given in the third column of the row of the following table whose first column
+     contains the new playback state.
        
 
-  
        Event handler Event handler event type
-   
        oncuechange  cuechange
-  
        
+    
        New playback state
+       New value for playbackState
+       Event name
+     
        playing
+       "playing"
+       playing
+      
        waiting
+       "waiting"
+       waiting
+      
        ended
+       "ended"
+       ended
+    
        
 
-  
        The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL
-  attributes, by all objects implementing the TextTrackCue interface:
        
+   
      7. Let the MediaController's most recently reported playback state
+   be new playback state.
      -
      Event handler Event handler event type -
      onenter enter -
      onexit exit -
      +
      - +

      The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, + by all objects implementing the MediaController interface:

      +
      Event handler Event handler event type +
      onemptied emptied +
      onloadedmetadata loadedmetadata +
      onloadeddata loadeddata +
      oncanplay canplay +
      oncanplaythrough canplaythrough +
      onplaying playing +
      onended ended +
      onwaiting waiting +
      ondurationchange durationchange +
      ontimeupdate timeupdate +
      onplay play +
      onpause pause +
      onratechange ratechange +
      onvolumechange volumechange +
      +
      -
      4.7.14.12.8 Best practices for metadata text tracks
      +

      The task source for the tasks listed in this + section is the DOM manipulation task source.

      -

      This section is non-normative.

      + -

      Text tracks can be used for storing data relating to the media data, for interactive or - augmented views.

      -

      For example, a page showing a sports broadcast could include information about the current - score. Suppose a robotics competition was being streamed live. The image could be overlayed with - the scores, as follows:

      +
      4.8.14.11.3 Assigning a media controller declaratively
      -

      +

      The mediagroup content attribute on media elements can be used to link multiple media elements together by implicitly creating a MediaController. The + value is text; media elements with the same value are + automatically linked by the user agent.

      -

      In order to make the score display render correctly whenever the user seeks to an arbitrary - point in the video, the metadata text track cues need to be as long as is appropriate for the - score. For example, in the frame above, there would be maybe one cue that lasts the length of the - match that gives the match number, one cue that lasts until the blue alliance's score changes, and - one cue that lasts until the red alliance's score changes. If the video is just a stream of the - live event, the time in the bottom right would presumably be automatically derived from the - current video time, rather than based on a cue. However, if the video was just the highlights, - then that might be given in cues also.

      + -

      The following shows what fragments of this could look like in a WebVTT file:

      +

      When a media element is created with a mediagroup attribute, and when a media element's + mediagroup attribute is set, changed, or removed, the + user agent must run the following steps:

      - 
      WEBVTT
+  
      1. Let m be the media element in question.
      2. Let old controller be m's current media
+   controller, if it currently has one, and null otherwise.
      3. Let new controller be null.
      4. Let m have no current media controller, if it currently
+   has one.
      5. If m's mediagroup attribute
+   is being removed, then jump to the update controllers step below.
      6. 
 
-...
+    
        If there is another media element whose Document is the same as
+    m's Document (even if one or both of these elements are not
+    actually in the Document), and which
+    also has a mediagroup attribute, and whose mediagroup attribute has the same value as the new value of
+    m's mediagroup attribute, then
+    let controller be that media element's current media
+    controller.
        
 
-05:10:00.000 --> 05:12:15.000
-matchtype:qual
-matchnumber:37
+    
        Otherwise, let controller be a newly created
+    MediaController.
        
 
-...
+   
      7. Let m's current media controller be controller.
      8. Let new controller be m's current media
+   controller.
      9. Bring the media element up to speed with its new media
+   controller.
      10. Update controllers: If old
+   controller and new controller are the
+   same (whether both null or both the same controller) then abort
+   these steps.
      11. If old controller is not null and still has one or more slaved
+   media elements, then report the controller state for old
+   controller.
      12. If new controller is not null, then report the controller
+   state for new controller.
      
 
-05:11:02.251 --> 05:11:17.198
-red:78
+  
      The mediaGroup IDL attribute on media elements must reflect the mediagroup content attribute.
      
 
-05:11:03.672 --> 05:11:54.198
-blue:66
+  
 
-05:11:17.198 --> 05:11:25.912
-red:80
+  
      
 
-05:11:25.912 --> 05:11:26.522
-red:83
+   
      Multiple media elements referencing the same media
+   resource will share a single network request. This can be used to efficiently play two
+   (video) tracks from the same media resource in two different places on the screen.
+   Used with the mediagroup attribute, these elements can
+   also be kept synchronised.
      
 
-05:11:26.522 --> 05:11:26.982
-red:86
+   
      In this example, a sign-languge interpreter track from a movie file is overlaid on the primary
+   video track of that same video file using two video elements, some CSS, and an
+   implicit MediaController:
      
 
-05:11:26.982 --> 05:11:27.499
-red:89
+   
      <article>
+ <style scoped>
+  div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
+  video { position; absolute; bottom: 0; right: 0; }
+  video:first-child { width: 100%; height: 100%; }
+  video:last-child { width: 30%; }
+ </style>
+ <div>
+  <video src="movie.vid#track=Video&amp;track=English" autoplay controls mediagroup=movie></video>
+  <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
+ </div>
+</article>
      
 
-...
      + -

      The key here is to notice that the information is given in cues that span the length of time to - which the relevant event applies. If, instead, the scores were given as zero-length (or very - brief, nearly zero-length) cues when the score changes, for example saying "red+2" at - 05:11:17.198, "red+3" at 05:11:25.912, etc, problems arise: primarily, seeking is much harder to - implement, as the script has to walk the entire list of cues to make sure that no notifications - have been missed; but also, if the cues are short it's possible the script will never see that - they are active unless it listens to them specifically.

      -

      When using cues in this manner, authors are encouraged to use the cuechange event to update the current annotations. (In - particular, using the timeupdate event would be less - appropriate as it would require doing work even when the cues haven't changed, and, more - importantly, would introduce a higher latency between when the metatata cues become active and - when the display is updated, since timeupdate events - are rate-limited.)

      -
      4.7.14.13 User interface
      -

      The controls attribute is a boolean - attribute. If present, it indicates that the author has not provided a scripted controller - and would like the user agent to provide its own set of controls.

      +
      4.8.14.12 Timed text tracks
      - +
      4.8.14.12.1 Text track model
      -

      If the attribute is present, or if scripting is - disabled for the media element, then the user agent should expose a user - interface to the user. This user interface should include features to begin playback, pause - playback, seek to an arbitrary position in the content (if the content supports arbitrary - seeking), change the volume, change the display of closed captions or embedded sign-language - tracks, select different audio tracks or turn on audio descriptions, and show the media content in - manners more suitable to the user (e.g. full-screen video or in an independent resizable window). - Other controls may also be made available.

      +

      A media element can have a group of associated text + tracks, known as the media element's list of text tracks. The text tracks are sorted as follows:

      -

      If the media element has a current media controller, then the user - agent should expose audio tracks from all the slaved media elements (although - avoiding duplicates if the same media resource is being used several times). If a - media resource's audio track exposed in this way has no known name, and it is the - only audio track for a particular media element, the user agent should use the - element's title attribute, if any, as the name (or as part of the - name) of that track.

      +
      1. The text tracks corresponding to track element + children of the media element, in tree order.
      2. Any text tracks added using the addTextTrack() method, in the order they were added, oldest + first.
      3. Any media-resource-specific text + tracks (text tracks corresponding to data in the + media resource), in the order defined by the media resource's format + specification.
      -

      Even when the attribute is absent, however, user agents may provide controls to affect playback - of the media resource (e.g. play, pause, seeking, and volume controls), but such features should - not interfere with the page's normal rendering. For example, such features could be exposed in the - media element's context menu. The user agent may implement this simply by exposing a user interface to the user as - described above (as if the controls attribute was - present).

      +

      A text track consists of:

      -

      If the user agent exposes a user interface to - the user by displaying controls over the media element, then the user agent - should suppress any user interaction events while the user agent is interacting with this - interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at - elements on the page.)

      +
      The kind of text track -

      Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for - seeking, for changing the rate of playback, for fast-forwarding or rewinding, for listing, - enabling, and disabling text tracks, and for muting or changing the volume of the audio), user - interface features exposed by the user agent must be implemented in terms of the DOM API described - above, so that, e.g., all the same events fire.

      +
      -

      When a media element has a current media controller, the user agent's - user interface for pausing and unpausing playback, for seeking, for changing the rate of playback, - for fast-forwarding or rewinding, and for muting or changing the volume of audio of the entire - group must be implemented in terms of the MediaController API exposed on that - current media controller. When a media element has a current media - controller, and all the slaved media elements of that - MediaController are paused, the user agent should also unpause all the slaved - media elements when the user invokes a user agent interface control for beginning - playback.

      +

      This decides how the track is handled by the user agent. The kind is represented by a string. + The possible strings are:

      -

      The "play" function in the user agent's interface must set the playbackRate attribute to the value of the defaultPlaybackRate attribute before invoking the play() - method. When a media element has a current media controller, the - attributes and method with those names on that MediaController object must be used. - Otherwise, the attributes and method with those names on the media element itself - must be used.

      +
      • subtitles +
      • captions +
      • descriptions +
      • chapters +
      • metadata +
      -

      Features such as fast-forward or rewind must be implemented by only changing the playbackRate attribute (and not the defaultPlaybackRate - attribute). Again, when a media element has a current media controller, - the attributes with those names on that MediaController object must be used; - otherwise, the attributes with those names on the media element itself must be used.

      +

      The kind of track can change dynamically, in the case of + a text track corresponding to a track element.

      -

      When a media element has a current media controller, seeking must be - implemented in terms of the currentTime - attribute on that MediaController object. Otherwise, the user agent must directly - seek to the requested position in the media - element's media timeline. For media resources where seeking to an arbitrary - position would be slow, user agents are encouraged to use the approximate-for-speed flag - when seeking in response to the user manipulating an approximate position interface such as a seek - bar.

      +
      A label -

      When a media element has a current media controller, user agents may - additionally provide the user with controls that directly manipulate an individual media - element without affecting the MediaController, but such features are - considered relatively advanced and unlikely to be useful to most users.

      +
      -

      The activation behavior of a media element that is exposing a user interface to the user must be - to run the following steps:

      +

      This is a human-readable string intended to identify the track for the user.

      -

      1. If the media element has a current media controller, and that - current media controller is a restrained media controller, then invoke - the play() method of the - MediaController.

      2. Otherwise, if the media element has a current media controller, - and that current media controller is a paused media controller, then - invoke the unpause() method of the - MediaController.

      3. Otherwise, if the media element has a current media controller, - then that current media controller is a playing media controller; - invoke the pause() method of the - MediaController.

      4. Otherwise, the media element has no current media controller; if - the media element's paused attribute is true, - then invoke the play() method on the media - element.

      5. Otherwise, the media element has no current media controller, - and the media element's paused attribute is - false; invoke the pause() method on the media - element.

      +

      The label of a track can change dynamically, in the + case of a text track corresponding to a track element.

      -

      For the purposes of listing chapters in the media resource, only text tracks in the media element's list of text tracks - that are showing and whose text track kind is - chapters should be used. Such tracks must be - interpreted according to the rules for constructing the chapter tree from a text - track. When seeking in response to a user maniplating a chapter selection interface, user - agents should not use the approximate-for-speed flag.

      +

      When a text track label is the empty string, the user agent should automatically + generate an appropriate label from the text track's other properties (e.g. the kind of text + track and the text track's language) for use in its user interface. This automatically-generated + label is not exposed in the API.

      -

      The controls IDL attribute must - reflect the content attribute of the same name.

      +
      An in-band metadata track dispatch type -
      +
      - +

      This is a string extracted from the media resource specifically for in-band + metadata tracks to enable such tracks to be dispatched to different scripts in the document.

      -
      media . volume [ = value ]
      +

      For example, a traditional TV station broadcast streamed on the Web and + augmented with Web-specific interactive features could include text tracks with metadata for ad + targeting, trivia game data during game shows, player states during sports games, recipe + information during food programs, and so forth. As each program starts and ends, new tracks + might be added or removed from the stream, and as each one is added, the user agent could bind + them to dedicated script modules using the value of this attribute.

      -

      Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the - quietest and 1.0 the loudest.

      +

      Other than for in-band metadata text tracks, the in-band metadata track dispatch type is the empty string. How this + value is populated for different media formats is described in steps to expose a + media-resource-specific text track.

      -

      Can be set, to change the volume.

      +
      A language -

      Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

      +
      -
      media . muted [ = value ]
      +

      This is a string (a BCP 47 language tag) representing the language of the text track's cues. + [BCP47]

      -

      Returns true if audio is muted, overriding the volume - attribute, and false if the volume attribute is being - honored.

      +

      The language of a text track can change dynamically, + in the case of a text track corresponding to a track element.

      -

      Can be set, to change whether the audio is muted or not.

      +
      A readiness state -
      +
      - +

      One of the following:

      -

      A media element has a playback volume, which is a fraction in the range 0.0 (silent) to 1.0 (loudest). - Initially, the volume should be 1.0, but user agents may remember the last set value across - sessions, on a per-site basis or otherwise, so the volume may start at other values.

      +
      Not loaded -

      The volume IDL attribute must return the - playback volume of any audio portions of the - media element. On setting, if the new value is in the range 0.0 to 1.0 inclusive, the - media element's playback volume must be - set to the new value. If the new value is outside the range 0.0 to 1.0 inclusive, then, on - setting, an IndexSizeError exception must be thrown instead.

      +
      -

      A media element can also be muted. If - anything is muting the element, then it is muted. (For example, when the direction of - playback is backwards, the element is muted.)

      +

      Indicates that the text track's cues have not been obtained.

      -

      The muted IDL attribute must return the value - to which it was last set. When a media element is created, if the element has a muted content attribute specified, then the muted IDL attribute should be set to true; otherwise, the user - agents may set the value to the user's preferred value (e.g. remembering the last set value across - sessions, on a per-site basis or otherwise). While the muted - IDL attribute is set to true, the media element must be muted.

      +
      Loading -

      Whenever either of the values that would be returned by the volume and muted IDL - attributes change, the user agent must queue a task to fire a simple - event named volumechange at the media - element.

      +
      -

      An element's effective media volume is determined as follows:

      +

      Indicates that the text track is loading and there have been no fatal errors encountered so + far. Further cues might still be added to the track by the parser.

      -

      1. If the user has indicated that the user agent is to override the volume of the element, - then the element's effective media volume is the volume desired by the user. Abort - these steps.

      2. If the element's audio output is muted, the - element's effective media volume is zero. Abort these steps.

      3. If the element has a current media controller and that - MediaController object's media controller mute override is true, the - element's effective media volume is zero. Abort these steps.

      4. Let volume be the playback - volume of the audio portions of the media element, in range 0.0 (silent) to - 1.0 (loudest).

      5. If the element has a current media controller, multiply volume by that MediaController object's media controller - volume multiplier. (The media controller volume multiplier is in the range - 0.0 to 1.0, so this can only reduce the value.)

      6. The element's effective media volume is volume, - interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest - setting, values in between increasing in loudness. The range need not be linear. The loudest - setting may be lower than the system's loudest possible setting; for example the user could have - set a maximum volume.

      +
      Loaded - +
      -

      The muted content attribute on media elements is a boolean attribute that controls the - default state of the audio output of the media resource, potentially overriding user - preferences.

      +

      Indicates that the text track has been loaded with no fatal errors.

      - +
      Failed to load -

      The defaultMuted IDL attribute must - reflect the muted content attribute.

      +
      - +

      Indicates that the text track was enabled, but when the user agent attempted to obtain it, + this failed in some way (e.g. URL could not be resolved, network error, unknown text track format). Some or all of the cues are + likely missing and will not be obtained.

      -

      This attribute has no dynamic effect (it only controls the default state of the - element).

      +
      -
      +

      The readiness state of a text + track changes dynamically as the track is obtained.

      -

      This video (an advertisement) autoplays, but to avoid annoying users, it does so without - sound, and allows the user to turn the sound on.

      +
      A mode - 
      <video src="adverts.cgi?kind=video" controls autoplay loop muted></video>
      +
      - +

      One of the following:

      +
      Disabled +
      +

      Indicates that the text track is not active. Other than for the purposes of exposing the + track in the DOM, the user agent is ignoring the text track. No cues are active, no events are + fired, and the user agent will not attempt to obtain the track's cues.

      -
      4.7.14.14 Time ranges
      +
      Hidden -

      Objects implementing the TimeRanges interface - represent a list of ranges (periods) of time.

      +
      - 
      interface TimeRanges {
-  readonly attribute unsigned long length;
-  double start(unsigned long index);
-  double end(unsigned long index);
-};
      +

      Indicates that the text track is active, but that the user agent is not actively displaying + the cues. If no attempt has yet been made to obtain the track's cues, the user agent will + perform such an attempt momentarily. The user agent is maintaining a list of which cues are + active, and events are being fired accordingly.

      -
      media . length
      +
      Showing -

      Returns the number of ranges in the object.

      +
      -
      time = media . start(index)
      +

      Indicates that the text track is active. If no attempt has yet been made to obtain the + track's cues, the user agent will perform such an attempt momentarily. The user agent is + maintaining a list of which cues are active, and events are being fired accordingly. In + addition, for text tracks whose kind is subtitles or captions, the cues are being overlaid on the video + as appropriate; for text tracks whose kind is descriptions, the user agent is making the + cues available to the user in a non-visual fashion; and for text tracks whose kind is chapters, the user agent is making available to + the user a mechanism by which the user can navigate to any point in the media + resource by selecting a cue.

      -

      Returns the time for the start of the range with the given index.

      +
      -

      Throws an IndexSizeError exception if the index is out of range.

      +
      A list of zero or more cues -
      time = media . end(index)
      +
      -

      Returns the time for the end of the range with the given index.

      +

      A list of text track cues, along with rules for + updating the text track rendering. For example, for WebVTT, the rules for updating + the display of WebVTT text tracks. [WEBVTT]

      -

      Throws an IndexSizeError exception if the index is out of range.

      +

      The list of cues of a text track can change + dynamically, either because the text track has not yet been loaded or is still loading, + or due to DOM manipulation.

      - +

      Each text track has a corresponding TextTrack object.

      -

      The length IDL attribute must return the - number of ranges represented by the object.

      +
      -

      The start(index) - method must return the position of the start of the indexth range represented - by the object, in seconds measured from the start of the timeline that the object covers.

      +

      Each media element has a list of pending text tracks, which must + initially be empty, a blocked-on-parser flag, which must initially be false, and a + did-perform-automatic-track-selection flag, which must also initially be false.

      -

      The end(index) method - must return the position of the end of the indexth range represented by the - object, in seconds measured from the start of the timeline that the object covers.

      +

      When the user agent is required to populate the list of pending text tracks of a + media element, the user agent must add to the element's list of pending text + tracks each text track in the element's list of text tracks whose + text track mode is not disabled and whose + text track readiness state is loading.

      -

      These methods must throw IndexSizeError exceptions if called with an index argument greater than or equal to the number of ranges represented by the - object.

      +

      Whenever a track element's parent node changes, the user agent must remove the + corresponding text track from any list of pending text tracks that it is + in.

      -

      When a TimeRanges object is said to be a normalised TimeRanges - object, the ranges it represents must obey the following criteria:

      +

      Whenever a text track's text track readiness state changes to either + loaded or failed to + load, the user agent must remove it from any list of pending text tracks that + it is in.

      -
      • The start of a range must be greater than the end of all earlier ranges.
      • The start of a range must be less than the end of that same range.
      +

      When a media element is created by an HTML parser or XML + parser, the user agent must set the element's blocked-on-parser flag to true. + When a media element is popped off the stack of open elements of an + HTML parser or XML parser, the user agent must honor user + preferences for automatic text track selection, populate the list of pending text + tracks, and set the element's blocked-on-parser flag to false.

      -

      In other words, the ranges in such an object are ordered, don't overlap, aren't empty, and - don't touch (adjacent ranges are folded into one bigger range).

      +

      The text tracks of a media element are ready when both the element's list of pending text + tracks is empty and the element's blocked-on-parser flag is false.

      -

      Ranges in a TimeRanges object must be inclusive.

      +

      Each media element has a pending text track change notification flag, + which must initially be unset.

      -

      Thus, the end of a range would be equal to the start of a following adjacent - (touching but not overlapping) range. Similarly, a range covering a whole timeline anchored at - zero would have a start equal to zero and an end equal to the duration of the timeline.

      +

      Whenever a text track that is in a media element's list of text + tracks has its text track mode change value, the user agent must run the + following steps for the media element:

      -

      The timelines used by the objects returned by the buffered, seekable and - played IDL attributes of media - elements must be that element's media timeline.

      +

      1. If the media element's pending text track change notification + flag is set, abort these steps.

      2. Set the media element's pending text track change notification + flag.

      3. - +

        Queue a task that runs the following substeps:

        +

        1. Unset the media element's pending text track change notification + flag.

        2. Fire a simple event named change at + the media element's textTracks + attribute's TextTrackList object.

        -
        4.7.14.15 The TrackEvent interface
        +

      4. If the media element's show poster flag is not set, run the + time marches on steps.

      - 
      [Constructor(DOMString type, optional TrackEventInit eventInitDict)]
-interface TrackEvent : Event {
-  readonly attribute (VideoTrack or AudioTrack or TextTrack) track;
-};
+  
      The task source for the tasks listed in this
+  section is the DOM manipulation task source.
      
 
-dictionary TrackEventInit : EventInit {
-  (VideoTrack or AudioTrack or TextTrack) track;
-};
      +
      -
      event . track
      +

      A text track cue is the unit of time-sensitive data in a text track, + corresponding for instance for subtitles and captions to the text that appears at a particular + time and disappears at another time.

      -

      Returns the track object (TextTrack, AudioTrack, or - VideoTrack) to which the event relates.

      +

      Each text track cue consists of:

      +
      An identifier +
      +

      An arbitrary string.

      +
      A start time +
      +

      The time, in seconds and fractions of a second, that describes the beginning of the range of + the media data to which the cue applies.

      +
      An end time +
      +

      The time, in seconds and fractions of a second, that describes the end of the range of the + media data to which the cue applies.

      +
      A pause-on-exit flag +
      +

      A boolean indicating whether playback of the media resource is to pause when the + end of the range to which the cue applies is reached.

      +
      Some additional format-specific data
      +

      Additional fields, as needed for the format. For example, WebVTT has a text track cue + writing direction and so forth. [WEBVTT]

      +
      The data of the cue +
      +

      The raw data of the cue, and rules for rendering the cue in isolation.

      +

      The precise nature of this data is defined by the format. For example, WebVTT uses text.

      - +

      The text track cue start time and text track cue end + time can be negative. (The current playback position can never be negative, + though, so cues entirely before time zero cannot be active.)

      -

      The track attribute must return the value - it was initialised to. When the object is created, this attribute must be initialised to null. It - represents the context information for the event.

      +

      Each text track cue has a corresponding TextTrackCue object (or more + specifically, an object that inherits from TextTrackCue — for example, WebVTT + cues use the VTTCue interface). A text track cue's in-memory + representation can be dynamically changed through this TextTrackCue API. [WEBVTT]

      - +

      A text track cue is associated with rules for updating the text track + rendering, as defined by the specification for the specific kind of text track + cue. These rules are used specifically when the object representing the cue is added to a + TextTrack object using the addCue() + method.

      +

      In addition, each text track cue has two pieces of dynamic information:

      +
      The active flag +
      -
      4.7.14.16 Event summary
      +

      This flag must be initially unset. The flag is used to ensure events are fired appropriately + when the cue becomes active or inactive, and to make sure the right cues are rendered.

      -

      This section is non-normative.

      +

      The user agent must synchronously unset this flag whenever the text track cue is + removed from its text track's text track list of cues; whenever the + text track itself is removed from its media element's list of + text tracks or has its text track mode changed to disabled; and whenever the media element's readyState is changed back to HAVE_NOTHING. When the flag is unset in this way for one + or more cues in text tracks that were showing prior to the relevant incident, the user agent must, after having unset + the flag for all the affected cues, apply the rules for updating the text track + rendering of those text tracks. For example, for text tracks based on WebVTT, the rules for updating the display + of WebVTT text tracks. [WEBVTT]

      The display state +
      -

      The following events fire on media elements as part of the - processing model described above:

      +

      This is used as part of the rendering model, to keep cues in a consistent position. It must + initially be empty. Whenever the text track cue active flag is unset, the user + agent must empty the text track cue display state.

      -
      Event name - Interface - Fired when... - Preconditions + -
      loadstart +

      The text track cues of a media element's + text tracks are ordered relative to each other in the text + track cue order, which is determined as follows: first group the cues by their text track, with the groups being sorted in the same order + as their text tracks appear in the media element's + list of text tracks; then, within each group, cues must be sorted by their start + time, earliest first; then, any cues with the same + start time must be sorted by their end time, latest first; and finally, any cues with identical end + times must be sorted in the order they were last added to their respective text track + list of cues, oldest first (so e.g. for cues from a WebVTT file, that would initially be + the order in which the cues were listed in the file). [WEBVTT]

      -       		Event - The user agent begins looking for media data, as part of the resource selection algorithm. +
      4.8.14.12.2 Sourcing in-band text tracks
      -       		networkState equals NETWORK_LOADING +

      A media-resource-specific text track is a text track that corresponds + to data found in the media resource.

      -
      progress - Event + - The user agent is fetching media data. +

      Rules for processing and rendering such data are defined by the relevant specifications, e.g. + the specification of the video format if the media resource is a video.

      -       		networkState equals NETWORK_LOADING +

      When a media resource contains data that the user agent recognises and supports as + being equivalent to a text track, the user agent runs the steps to expose a + media-resource-specific text track with the relevant data, as follows.

      -
      suspend + - Event +

      1. Associate the relevant data with a new text track and its corresponding new + TextTrack object. The text track is a media-resource-specific + text track.

      2. Set the new text track's kind, label, and language + based on the semantics of the relevant data, as defined by the relevant specification. If there + is no label in that data, then the label must be set to the + empty string.

      3. Associate the text track list of cues with the rules for updating the + text track rendering appropriate for the format in question.

        -
      		The user agent is intentionally not currently fetching media data. +
    14. -
      		15. networkState equals NETWORK_IDLE +

      If the new text track's kind is metadata, then set the text track in-band + metadata track dispatch type as follows, based on the type of the media + resource:

      -
      abort +
      If the media resource is an Ogg file
      The text track in-band metadata track dispatch type must be set to the value + of the Name header field. [OGGSKELETONHEADERS]
      If the media resource is a WebM file
      The text track in-band metadata track dispatch type must be set to the value + of the CodecID element. [WEBMCG]
      If the media resource is an MPEG-2 file
      Let stream type be the value of the "stream_type" field describing the + text track's type in the file's program map section, interpreted as an 8-bit unsigned integer. + Let length be the value of the "ES_info_length" field for the track in the + same part of the program map section, interpreted as an integer as defined by the MPEG-2 + specification. Let descriptor bytes be the length bytes + following the "ES_info_length" field. The text track in-band metadata track dispatch + type must be set to the concatenation of the stream type byte and + the zero or more descriptor bytes bytes, expressed in hexadecimal using + uppercase ASCII hex digits. [MPEG2] -
      		Event +
      If the media resource is an MPEG-4 file
      Let the + first stsd box of the + first stbl box of the + first minf box of the + first mdia box of the + text track's trak box in the + first moov box + of the file be the stsd box, if any. -
      		The user agent stops fetching the media data before it is completely - downloaded, but not due to an error. + If the file has no stsd box, or if the stsd box has neither a mett box nor a metx box, then the text track + in-band metadata track dispatch type must be set to the empty string. - error is an object with the code MEDIA_ERR_ABORTED. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. + Otherwise, if the stsd box has a mett box then the text + track in-band metadata track dispatch type must be set to the concatenation of the + string "mett", a U+0020 SPACE character, and the value of the first mime_format field of the first mett box of the stsd + box, or the empty string if that field is absent in that box. -
      error + Otherwise, if the stsd box has no mett box but has a metx box then the text track in-band metadata track dispatch type + must be set to the concatenation of the string "metx", a U+0020 SPACE + character, and the value of the first namespace field of the first metx box of the stsd box, or the empty string if that field is absent in + that box. - Event + [MPEG4] + + + +

    15. Populate the new text track's list of + cues with the cues parsed so far, following the guidelines for exposing + cues, and begin updating it dynamically as necessary.

    16. Set the new text track's readiness + state to loaded.

    17. Set the new text track's mode to the + mode consistent with the user's preferences and the requirements of the relevant specification + for the data.

      -
      		18. An error occurs while fetching the media data. +

      For instance, if there are no other active subtitles, and this is a forced + subtitle track (a subtitle track giving subtitles in the audio track's primary language, but + only for audio that is actually in another language), then those subtitles might be activated + here.

      -       		error is an object with the code MEDIA_ERR_NETWORK or higher. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. +

    18. Add the new text track to the media element's list of text + tracks.

    19. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses + the TrackEvent interface, with the track + attribute initialised to the text track's TextTrack object, at the + media element's textTracks attribute's + TextTrackList object. -

      20. emptied + - Event + - A media element whose networkState - was previously not in the NETWORK_EMPTY state has - just switched to that state (either because of a fatal error during load that's about to be - reported, or because the load() method was invoked while - the resource selection algorithm was already - running). + - networkState is NETWORK_EMPTY; all the IDL attributes are in their - initial states. -
      stalled - Event + - The user agent is trying to fetch media data, but data is unexpectedly not - forthcoming. +
      4.8.14.12.3 Sourcing out-of-band text tracks
      -       		networkState is NETWORK_LOADING. +

      When a track element is created, it must be associated with a new text + track (with its value set as defined below) and its corresponding new + TextTrack object.

      -
      loadedmetadata +

      The text track kind is determined from the state of the element's kind attribute according to the following table; for a state given + in a cell of the first column, the kind is the string given + in the second column:

      -       		Event +
      State + String +
      Subtitles + subtitles +
      Captions + captions +
      Descriptions + descriptions +
      Chapters + chapters +
      Metadata + metadata +
      -       		The user agent has just determined the duration and dimensions of the media - resource and the text tracks are ready. +

      The text track label is the element's track label.

      -       		readyState is newly equal to HAVE_METADATA or greater for the first time. +

      The text track language is the element's track language, if any, or + the empty string otherwise.

      -
      loadeddata +

      As the kind, label, + and srclang attributes are set, changed, or removed, the + text track must update accordingly, as per the definitions above.

      -       		Event +

      Changes to the track URL are handled in the algorithm below.

      -       		The user agent can render the media data at the current playback - position for the first time. +

      The text track readiness state is initially not loaded, and the text track mode is initially disabled.

      -       		readyState newly increased to HAVE_CURRENT_DATA or greater for the first time. +

      The text track list of cues is initially empty. It is dynamically modified when + the referenced file is parsed. Associated with the list are the rules for updating the text + track rendering appropriate for the format in question; for WebVTT, this is the rules + for updating the display of WebVTT text tracks. [WEBVTT]

      -
      canplay +

      When a track element's parent element changes and the new parent is a media + element, then the user agent must add the track element's corresponding + text track to the media element's list of text tracks, and + then queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses + the TrackEvent interface, with the track + attribute initialised to the text track's TextTrack object, at the + media element's textTracks attribute's + TextTrackList object.

      -       		Event +

      When a track element's parent element changes and the old parent was a media + element, then the user agent must remove the track element's corresponding + text track from the media element's list of text tracks, + and then queue a task to fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that + uses the TrackEvent interface, with the track attribute initialised to the text track's + TextTrack object, at the media element's textTracks attribute's TextTrackList object.

      + -       		The user agent can resume playback of the media data, but estimates that if - playback were to be started now, the media resource could not be rendered at the - current playback rate up to its end without having to stop for further buffering of content. +
      -       		readyState newly increased to HAVE_FUTURE_DATA or greater. +

      When a text track corresponding to a track element is added to a + media element's list of text tracks, the user agent must queue a + task to run the following steps for the media element:

      -
      canplaythrough +

      1. If the element's blocked-on-parser flag is true, abort these steps.

      2. If the element's did-perform-automatic-track-selection flag is true, abort + these steps.

      3. Honor user preferences for automatic text track selection for this + element.

      -       		Event +

      When the user agent is required to honor user preferences for automatic text track + selection for a media element, the user agent must run the following steps:

      -       		The user agent estimates that if playback were to be started now, the media - resource could be rendered at the current playback rate all the way to its end without - having to stop for further buffering. +

      1. Perform automatic text track selection for subtitles and captions.

      2. Perform automatic text track selection for descriptions.

      3. Perform automatic text track selection for chapters.

      4. If there are any text tracks in the media + element's list of text tracks whose text track kind is metadata that correspond to track + elements with a default attribute set whose text + track mode is set to disabled, then set the + text track mode of all such tracks to hidden

      5. Set the element's did-perform-automatic-track-selection flag to + true.

      -       		readyState is newly equal to HAVE_ENOUGH_DATA. +

      When the steps above say to perform automatic text track selection for one or more + text track kinds, it means to run the following steps:

      -
      playing +

      1. Let candidates be a list consisting of the text tracks in the media element's list of text tracks + whose text track kind is one of the kinds that were passed to the algorithm, if any, + in the order given in the list of text tracks.

      2. If candidates is empty, then abort these steps.

      3. If any of the text tracks in candidates have a text track mode set to showing, abort these steps.

      4. -
      		Event +

      If the user has expressed an interest in having a track from candidates + enabled based on its text track kind, text track language, and + text track label, then set its text track mode to showing.

      -       		Playback is ready to start after having been paused or delayed due to lack of media - data. +

      For example, the user could have set a browser preference to the effect of "I + want French captions whenever possible", or "If there is a subtitle track with 'Commentary' in + the title, enable it", or "If there are audio description tracks available, enable one, ideally + in Swiss German, but failing that in Standard Swiss German or Standard German".

      -       		readyState is newly equal to or greater than - HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA. Even if this event fires, the - element might still not be potentially playing, e.g. if the element is - blocked on its media controller (e.g. because the current media - controller is paused, or another slaved media - element is stalled somehow, or because the media resource has no data - corresponding to the media controller position), or the element is paused - for user interaction or paused for in-band content. +

      Otherwise, if there are any text tracks in candidates that correspond to track elements with a default attribute set whose text track mode is + set to disabled, then set the text track + mode of the first such track to showing.

      -
      waiting + - Event +

      When a text track corresponding to a track element experiences any of + the following circumstances, the user agent must start the track processing + model for that text track and its track element: -

      		Playback has stopped because the next frame is not available, but the user agent expects - that frame to become available in due course. + - readyState is equal to or less than HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position - is not contained in any of the ranges in buffered. It - is possible for playback to stop for other reasons without paused being false, but those reasons do not fire this event - (and when those situations resolve, a separate playing - event is not fired either): e.g. the element is newly blocked on its media - controller, or playback ended, or playback - stopped due to errors, or the element has paused for user interaction - or paused for in-band content. +

      When a user agent is to start the track processing model for a + text track and its track element, it must run the following algorithm. + This algorithm interacts closely with the event loop mechanism; in particular, it has + a synchronous section (which is triggered as part of the event loop + algorithm). The steps in that section are marked with ⌛.

      -
      seeking +

      1. If another occurrence of this algorithm is already running for this text + track and its track element, abort these steps, letting that other algorithm + take care of this element.

      2. If the text track's text track mode is not set to one of hidden or showing, abort + these steps.

      3. If the text track's track element does not have a media + element as a parent, abort these steps.

      4. Run the remainder of these steps asynchronously, allowing whatever caused these steps to + run to continue.

      5. Top: Await a stable state. The synchronous section + consists of the following steps. (The steps in the synchronous section are marked + with ⌛.)

      6. ⌛ Set the text track readiness state to loading.

      7. ⌛ Let URL be the track URL of the + track element.

      8. ⌛ If the track element's parent is a media element then + let CORS mode be the state of the parent media element's crossorigin content attribute. Otherwise, let CORS mode be No CORS.

      9. End the synchronous section, continuing the remaining steps + asynchronously.

      10. -
      		Event +

      If URL is not the empty string, perform a potentially CORS-enabled + fetch of URL, with the mode being CORS mode, the origin being the origin of the + track element's Document, and the default origin behaviour set + to fail.

      -       		The seeking IDL attribute changed to true, and the user agent has started seeking to a new position. +

      The resource obtained in this fashion, if any, contains the text track data. If any data is + obtained, it is by definition CORS-same-origin (cross-origin resources that are not + suitably CORS-enabled do not get this far).

      -       		+

      The tasks queued by the + fetching algorithm on the networking task source to + process the data as it is being fetched must determine the type of the resource. If the + type of the resource is not a supported text track format, the load will fail, as + described below. Otherwise, the resource's data must be passed to the appropriate parser (e.g. + the WebVTT parser) as it is received, with the text track list of cues being used for + that parser's output. [WEBVTT]

      -
      seeked +

      The appropriate parser will synchronously (during these networking task + source tasks) and incrementally (as each such task is + run with whatever data has been received from the network) update the text track list of + cues.

      -       		Event +

      This specification does not currently say whether or how to check the MIME + types of text tracks, or whether or how to perform file type sniffing using the actual file + data. Implementors differ in their intentions on this matter and it is therefore unclear what + the right solution is. In the absence of any requirement here, the HTTP specification's strict + requirement to follow the Content-Type header prevails ("Content-Type specifies the media type + of the underlying data." ... "If and only if the media type is not given by a Content-Type + field, the recipient MAY attempt to guess the media type via inspection of its content + and/or the name extension(s) of the URI used to identify the resource.").

      -       		The seeking IDL attribute changed to false after the current playback position was changed. +

      If the fetching algorithm fails for any reason (network error, + the server returns an error code, a cross-origin check fails, etc), or if URL is the empty string, then queue a task to first change the + text track readiness state to failed to + load and then fire a simple event named error at the track element. This task must use the DOM manipulation task source.

      -       		+

      If the fetching algorithm does not fail, but the + type of the resource is not a supported text track format, or the file was not successfully + processed (e.g. the format in question is an XML format and the file contained a well-formedness + error that the XML specification requires be detected and reported to the application), then the + task that is queued by the + networking task source in which the aforementioned problem is found must change the + text track readiness state to failed to + load and fire a simple event named error + at the track element.

      -
      ended +

      If the fetching algorithm does not fail, and the file was + successfully processed, then the final task that is queued by the networking task source, after it has + finished parsing the data, must change the text track readiness state to loaded, and fire a simple event named load at the track element.

      -       		Event +

      If, while the fetching algorithm is active, either:

      -       		Playback has stopped because the end of the media resource was reached. + - currentTime equals the end of the media - resource; ended is true. +

      ...then the user agent must abort the fetching algorithm, + discarding any pending tasks generated by that algorithm (and + in particular, not adding any cues to the text track list of cues after the moment + the URL changed), and then queue a task that first changes the text track + readiness state to failed to load and + then fires a simple event named error at the track element. This task must use the DOM manipulation task source.

      -
      durationchange +

    20. Wait until the text track readiness state is no longer set to loading.

    21. Wait until the track URL is no longer equal to URL, at + the same time as the text track mode is set to hidden or showing.

    22. Jump to the step labeled top. -

      		23. Event +

      Whenever a track element has its src attribute + set, changed, or removed, the user agent must synchronously empty the element's text + track's text track list of cues. (This also causes the algorithm above to stop + adding cues from the resource being obtained using the previously given URL, if any.)

      -       		The duration attribute has just been updated. + - -
      timeupdate + - Event +
      4.8.14.12.4 Guidelines for exposing cues in various formats as text track cues
      -       		The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. +

      How a specific format's text track cues are to be interpreted for the purposes of processing by + an HTML user agent is defined by that format. In the absence of such a specification, this section + provides some constraints within which implementations can attempt to consistently expose such + formats.

      -       		+

      To support the text track model of HTML, each unit of timed data is converted to a + text track cue. Where the mapping of the format's features to the aspects of a + text track cue as defined in this specification are not defined, implementations must + ensure that the mapping is consistent with the definitions of the aspects of a text track + cue as defined above, as well as with the following constraints:

      -
      play +
      The text track cue identifier +
      +

      Should be set to the empty string if the format has no obvious analogue to a per-cue + identifier.

      +
      The text track cue pause-on-exit flag +
      +

      Should be set to false.

      +
      -       		Event + - The element is no longer paused. Fired after the play() - method has returned, or when the autoplay attribute - has caused playback to begin. - paused is newly false. +
      4.8.14.12.5 Text track API
      -
      pause + 
      interface TextTrackList : EventTarget {
+  readonly attribute unsigned long length;
+  getter TextTrack (unsigned long index);
+  TextTrack? getTrackById(DOMString id);
 
-
      		Event + attribute EventHandler onchange; + attribute EventHandler onaddtrack; + attribute EventHandler onremovetrack; +}; - The element has been paused. Fired after the pause() - method has returned. +
      media . textTracks . length
      +

      Returns the number of text tracks associated with the media element (e.g. from track elements). This is the number of text tracks in the media element's list of text tracks.

      +
      media . textTracks[ n ]
      +

      Returns the TextTrack object representing the nth text track in the media element's list of text tracks.

      +
      textTrack = media . textTracks . getTrackById( id )
      -
      		paused is newly true. +

      Returns the TextTrack object with the given identifier, or null if no track has that identifier.

      -
      ratechange + - Event + - Either the defaultPlaybackRate or the - playbackRate attribute has just been updated. +

      A TextTrackList object represents a dynamically updating list of text tracks in a given order.

      -       		+

      The textTracks attribute of media elements must return a TextTrackList object + representing the TextTrack objects of the text tracks + in the media element's list of text tracks, in the same order as in the + list of text tracks. The same object must be returned each time the attribute is + accessed. [WEBIDL]

      -
      resize +

      The length attribute of a + TextTrackList object must return the number of text + tracks in the list represented by the TextTrackList object.

      -       		Event +

      The supported property indices of a TextTrackList object at any + instant are the numbers from zero to the number of text tracks in + the list represented by the TextTrackList object minus one, if any. If there are no + text tracks in the list, there are no supported property + indices.

      -       		One or both of the videoWidth and videoHeight attributes have just been updated. +

      To determine the value of an indexed property of a TextTrackList + object for a given index index, the user agent must return the indexth text track in the list represented by the + TextTrackList object.

      -       		Media element is a video element; readyState is not HAVE_NOTHING +

      The getTrackById(id) method must return the first TextTrack in the + TextTrackList object whose id IDL attribute + would return a value equal to the value of the id argument. When no tracks + match the given argument, the method must return null.

      -
      volumechange + - Event +
      -       		Either the volume attribute or the muted attribute has changed. Fired after the relevant - attribute's setter has returned. + 
      enum TextTrackMode { "disabled",  "hidden",  "showing" };
+enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };
+interface TextTrack : EventTarget {
+  readonly attribute TextTrackKind kind;
+  readonly attribute DOMString label;
+  readonly attribute DOMString language;
 
-
      		+ readonly attribute DOMString id; + readonly attribute DOMString inBandMetadataTrackDispatchType; -
      + attribute TextTrackMode mode; -

      The following events fire on MediaController objects:

      + readonly attribute TextTrackCueList? cues; + readonly attribute TextTrackCueList? activeCues; -
      Event name + void addCue(TextTrackCue cue); + void removeCue(TextTrackCue cue); - Interface + attribute EventHandler oncuechange; +}; - Fired when... +
      textTrack = media . addTextTrack( kind [, label [, language ] ] )
      -
      emptied +

      Creates and returns a new TextTrack object, which is also added to the + media element's list of text tracks.

      -       		Event +
      textTrack . kind
      -
      		All the slaved media elements newly have readyState set to HAVE_NOTHING or greater, or there are no longer any - slaved media elements. +

      Returns the text track kind string.

      -
      loadedmetadata +
      textTrack . label
      -
      		Event +

      Returns the text track label, if there is one, or the empty string otherwise + (indicating that a custom label probably needs to be generated from the other attributes of the + object if the object is exposed to the user).

      -       		All the slaved media elements newly have readyState set to HAVE_METADATA or greater. +
      textTrack . language
      +

      Returns the text track language string.

      +
      textTrack . id
      -
      loadeddata +

      Returns the ID of the given track.

      -       		Event +

      For in-band tracks, this is the ID that can be used with a fragment identifier if the format + supports the Media Fragments URI syntax, and that can be used with the getTrackById() method. [MEDIAFRAG]

      -       		All the slaved media elements newly have readyState set to HAVE_CURRENT_DATA or greater. +

      For TextTrack objects corresponding to track elements, this is the + ID of the track element.

      -
      canplay +
      textTrack . inBandMetadataTrackDispatchType
      -
      		Event +

      Returns the text track in-band metadata track dispatch type string.

      -       		All the slaved media elements newly have readyState set to HAVE_FUTURE_DATA or greater. +
      textTrack . mode [ = value ]
      -
      canplaythrough +

      Returns the text track mode, represented by a string from the following + list:

      -       		Event +
      "disabled"
      +

      The text track disabled mode.

      +
      "hidden"
      +

      The text track hidden mode.

      +
      "showing"
      +

      The text track showing mode.

      +
      -       		All the slaved media elements newly have readyState set to HAVE_ENOUGH_DATA or greater. +

      Can be set, to change the mode.

      -
      playing +
      textTrack . cues
      +

      Returns the text track list of cues, as a TextTrackCueList object.

      +
      textTrack . activeCues
      -
      		Event +

      Returns the text track cues from the text track + list of cues that are currently active (i.e. that start before the current playback + position and end after it), as a TextTrackCueList object.

      -       		The MediaController is no longer a blocked media controller. +
      textTrack . addCue( cue )
      +

      Adds the given cue to textTrack's text track list of cues.

      +
      textTrack . removeCue( cue )
      +

      Removes the given cue from textTrack's text track list of cues.

      + -
      waiting + - Event +

      The addTextTrack(kind, label, language) method of media elements, when invoked, must run the following steps:

      -       		The MediaController is now a blocked media controller. +
      1. -
      ended +

      Create a new TextTrack object.

      -       		Event +
    23. -
      		24. All the slaved media elements have newly ended playback; the - MediaController has reached the end of all the slaved media elements. +

      Create a new text track corresponding to the new object, and set its text + track kind to kind, its text track label to label, its text track language to language, its + text track readiness state to the text track loaded state, its + text track mode to the text track hidden mode, and its text + track list of cues to an empty list.

      -
      durationchange +

      Initially, the text track list of cues is not associated with any rules + for updating the text track rendering. When a text track cue is added to it, + the text track list of cues has its rules permanently set accordingly.

      -       		Event +
    24. -
      		25. The duration attribute has just been - updated. +

      Add the new text track to the media element's list of text + tracks.

      -
      timeupdate +
    25. -
      		26. Event +

      Queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and + that uses the TrackEvent interface, with the track attribute initialised to the new text + track's TextTrack object, at the media element's textTracks attribute's TextTrackList + object.

      -       		The media controller position changed. +
    26. -
      27. play +

      Return the new TextTrack object.

      -       		Event + - The paused attribute is newly false. +
      -
      pause +

      The kind attribute must return the + text track kind of the text track that the TextTrack object + represents.

      -       		Event +

      The label attribute must return the + text track label of the text track that the TextTrack + object represents.

      -       		The paused attribute is newly true. +

      The language attribute must return the + text track language of the text track that the TextTrack + object represents.

      -
      ratechange +

      The id attribute returns the track's + identifier, if it has one, or the empty string otherwise. For tracks that correspond to + track elements, the track's identifier is the value of the element's id attribute, if any. For in-band tracks, the track's identifier is + specified by the media resource. If the media resource is in a format + that supports the Media Fragments URI fragment identifier syntax, the identifier + returned for a particular track must be the same identifier that would enable the track if used as + the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

      -       		Event +

      The inBandMetadataTrackDispatchType + attribute must return the text track in-band metadata track dispatch type of the + text track that the TextTrack object represents.

      -       		Either the defaultPlaybackRate - attribute or the playbackRate attribute - has just been updated. +

      The mode attribute, on getting, must return + the string corresponding to the text track mode of the text track that + the TextTrack object represents, as defined by the following list:

      -
      volumechange +
      "disabled"
      The text track disabled mode.
      "hidden"
      The text track hidden mode.
      "showing"
      The text track showing mode.
      -       		Event +

      On setting, if the new value isn't equal to what the attribute would currently return, the new + value must be processed as follows:

      -       		Either the volume attribute or the muted attribute has just been updated. +
      If the new value is "disabled"
      -
      +

      Set the text track mode of the text track that the + TextTrack object represents to the text track disabled mode.

      +
      If the new value is "hidden"
      -

      The following events fire on AudioTrackList, VideoTrackList, and - TextTrackList objects:

      +

      Set the text track mode of the text track that the + TextTrack object represents to the text track hidden mode.

      -
      Event name +
      If the new value is "showing"
      -
      		Interface +

      Set the text track mode of the text track that the + TextTrack object represents to the text track showing mode.

      -       		Fired when... + -
      change +

      If the text track mode of the text track that the + TextTrack object represents is not the text track disabled mode, then + the cues attribute must return a + live TextTrackCueList object that represents the subset of the + text track list of cues of the text track that the + TextTrack object represents whose end + times occur at or after the earliest possible position when the script + started, in text track cue order. Otherwise, it must return null. When an + object is returned, the same object must be returned each time.

      -       		Event +

      The earliest possible position when the script started is whatever the + earliest possible position was the last time the event loop reached step + 1.

      -       		One or more tracks in the track list have been enabled or disabled. +

      If the text track mode of the text track that the + TextTrack object represents is not the text track disabled mode, then + the activeCues attribute must return a + live TextTrackCueList object that represents the subset of the + text track list of cues of the text track that the + TextTrack object represents whose active flag was set when the script + started, in text track cue order. Otherwise, it must return null. When an + object is returned, the same object must be returned each time.

      -
      addtrack +

      A text track cue's active flag was set when the script started if its + text track cue active flag was set the last time the event loop reached + step 1.

      -       		TrackEvent +
      -       		A track has been added to the track list. +

      The addCue(cue) method + of TextTrack objects, when invoked, must run the following steps:

      -
      removetrack +

      1. If the text track list of cues does not yet have any associated rules + for updating the text track rendering, then associate the text track list of + cues with the rules for updating the text track rendering appropriate to cue.

        -
      		TrackEvent +

    27. If text track list of cues' associated rules for updating the text + track rendering are not the same rules for updating the text track rendering + as appropriate for cue, then throw an InvalidStateError + exception and abort these steps.

      -
      		28. A track has been removed from the track list. +

    28. If the given cue is in a text track list of cues, then + remove cue from that text track list of cues.

    29. Add cue to the method's TextTrack object's text + track's text track list of cues. -

      30. +

      The removeCue(cue) + method of TextTrack objects, when invoked, must run the following steps:

      +

      1. If the given cue is not currently listed in the method's + TextTrack object's text track's text track list of cues, + then throw a NotFoundError exception and abort these steps.

      2. Remove cue from the method's TextTrack object's + text track's text track list of cues.

      + -

      The following event fires on TextTrack objects and track elements:

      +
      -
      Event name +

      In this example, an audio element is used to play a specific sound-effect from a + sound file containing many sound effects. A cue is used to pause the audio, so that it ends + exactly at the end of the clip, even if the browser is busy running some script. If the page had + relied on script to pause the audio, then the start of the next clip might be heard if the + browser was not able to run the script at the exact time specified.

      -       		Interface + 
      var sfx = new Audio('sfx.wav');
+var sounds = sfx.addTextTrack('metadata');
 
-
      		Fired when... +// add sounds we care about +function addFX(start, end, name) { + var cue = new VTTCue(start, end, ''); + cue.id = name; + cue.pauseOnExit = true; + sounds.addCue(cue); +} +addFX(12.783, 13.612, 'dog bark'); +addFX(13.612, 15.091, 'kitten mew')) -
      cuechange +function playSound(id) { + sfx.currentTime = sounds.getCueById(id).startTime; + sfx.play(); +} - Event +// play a bark as soon as we can +sfx.oncanplaythrough = function () { + playSound('dog bark'); +} +// meow when the user tries to leave +window.onbeforeunload = function () { + playSound('kitten mew'); + return 'Are you sure you want to leave this awesome page?'; +} - One or more cues in the track have become active or stopped being active. + -
      +
      + 
      interface TextTrackCueList {
+  readonly attribute unsigned long length;
+  getter TextTrackCue (unsigned long index);
+  TextTrackCue? getCueById(DOMString id);
+};
      -

      The following events fire on TextTrackCue objects:

      +
      cuelist . length
      +

      Returns the number of cues in the list.

      +
      cuelist[index]
      +

      Returns the text track cue with index index in the list. The cues are sorted in text track cue order.

      +
      cuelist . getCueById( id )
      +

      Returns the first text track cue (in text track cue order) with text track cue identifier id.

      +

      Returns null if none of the cues have the given identifier or if the argument is the empty string.

      +
      -
      Event name + - Interface +

      A TextTrackCueList object represents a dynamically updating list of text track cues in a given order.

      -       		Fired when... +

      The length attribute must return + the number of cues in the list represented by the + TextTrackCueList object.

      -
      enter +

      The supported property indices of a TextTrackCueList object at any + instant are the numbers from zero to the number of cues in the + list represented by the TextTrackCueList object minus one, if any. If there are no + cues in the list, there are no supported property + indices.

      -       		Event +

      To determine the value of an indexed property for a given index index, the user agent must return the indexth text track + cue in the list represented by the TextTrackCueList object.

      -       		The cue has become active. +

      The getCueById(id) method, when called with an argument other than the empty string, + must return the first text track cue in the list represented by the + TextTrackCueList object whose text track cue identifier is id, if any, or null otherwise. If the argument is the empty string, then the method + must return null.

      -
      exit + - Event +
      -       		The cue has stopped being active. + 
      interface TextTrackCue : EventTarget {
+  readonly attribute TextTrack? track;
 
-
      + attribute DOMString id; + attribute double startTime; + attribute double endTime; + attribute boolean pauseOnExit; + attribute EventHandler onenter; + attribute EventHandler onexit; +}; +
      cue . track
      +

      Returns the TextTrack object to which this + text track cue belongs, if any, or null + otherwise.

      +
      cue . id [ = value ]
      +

      Returns the text track cue identifier.

      +

      Can be set.

      +
      cue . startTime [ = value ]
      +

      Returns the text track cue start time, in seconds.

      +

      Can be set.

      +
      cue . endTime [ = value ]
      +

      Returns the text track cue end time, in seconds.

      +

      Can be set.

      +
      cue . pauseOnExit [ = value ]
      +

      Returns true if the text track cue pause-on-exit flag is set, false otherwise.

      +

      Can be set.

      +
      -
      4.7.14.17 Security and privacy considerations
      +

      The track attribute, on getting, must + return the TextTrack object of the text track in whose list of cues the text track cue that the + TextTrackCue object represents finds itself, if any; or null otherwise.

      -

      The main security and privacy implications of the video and audio - elements come from the ability to embed media cross-origin. There are two directions that threats - can flow: from hostile content to a victim page, and from a hostile page to victim content.

      +

      The id attribute, on getting, must return + the text track cue identifier of the text track cue that the + TextTrackCue object represents. On setting, the text track cue + identifier must be set to the new value.

      -
      +

      The startTime attribute, on + getting, must return the text track cue start time of the text track cue + that the TextTrackCue object represents, in seconds. On setting, the text track + cue start time must be set to the new value, interpreted in seconds; then, if the + TextTrackCue object's text track cue is in a text track's + list of cues, and that text track is in + a media element's list of text tracks, and the media + element's show poster flag is not set, then run the time marches on steps for that media element.

      -

      If a victim page embeds hostile content, the threat is that the content might contain scripted - code that attempts to interact with the Document that embeds the content. To avoid - this, user agents must ensure that there is no access from the content to the embedding page. In - the case of media content that uses DOM concepts, the embedded content must be treated as if it - was in its own unrelated top-level browsing context.

      +

      The endTime attribute, on getting, + must return the text track cue end time of the text track cue that the + TextTrackCue object represents, in seconds. On setting, the text track cue end + time must be set to the new value, interpreted in seconds; then, if the + TextTrackCue object's text track cue is in a text track's + list of cues, and that text track is in + a media element's list of text tracks, and the media + element's show poster flag is not set, then run the time marches on steps for that media element.

      -

      For instance, if an SVG animation was embedded in a video element, - the user agent would not give it access to the DOM of the outer page. From the perspective of - scripts in the SVG resource, the SVG file would appear to be in a lone top-level browsing context - with no parent.

      +

      The pauseOnExit attribute, on + getting, must return true if the text track cue pause-on-exit flag of the text + track cue that the TextTrackCue object represents is set; or false otherwise. + On setting, the text track cue pause-on-exit flag must be set if the new value is + true, and must be unset otherwise.

      -
      + -

      If a hostile page embeds victim content, the threat is that the embedding page could obtain - information from the content that it would not otherwise have access to. The API does expose some - information: the existence of the media, its type, its duration, its size, and the performance - characteristics of its host. Such information is already potentially problematic, but in practice - the same information can more or less be obtained using the img element, and so it - has been deemed acceptable.

      -

      However, significantly more sensitive information could be obtained if the user agent further - exposes metadata within the content such as subtitles or chapter titles. Such information is - therefore only exposed if the video resource passes a CORS resource sharing check. - The crossorigin attribute allows authors to control - how this check is performed. [FETCH]

      +
      4.8.14.12.6 Text tracks describing chapters
      -

      Without this restriction, an attacker could trick a user running within a - corporate network into visiting a site that attempts to load a video from a previously leaked - location on the corporation's intranet. If such a video included confidential plans for a new - product, then being able to read the subtitles would present a serious confidentiality breach.

      +

      Chapters are segments of a media resource with a given title. Chapters can be + nested, in the same way that sections in a document outline can have subsections.

      + +

      Each text track cue in a text track being used for describing + chapters has three key features: the text track cue start time, giving the start time + of the chapter, the text track cue end time, giving the end time of the chapter, and + the text track cue data giving the chapter title.

      +

      The rules for constructing the chapter tree from a text track are as follows. They + produce a potentially nested list of chapters, each of which have a start time, end time, title, + and a list of nested chapters. This algorithm discards cues that do not correctly nest within each + other, or that are out of order.

      +

      1. Let list be a copy of the list + of cues of the text track being processed.

      2. Remove from list any text track cue whose text + track cue end time is before its text track cue start time.

      3. Let output be an empty list of chapters, where a chapter is a record + consisting of a start time, an end time, a title, and a (potentially empty) list of nested + chapters. For the purpose of this algorithm, each chapter also has a parent chapter.

      4. Let current chapter be a stand-in chapter whose start time is negative + infinity, whose end time is positive infinity, and whose list of nested chapters is output. (This is just used to make the algorithm easier to describe.)

      5. Loop: If list is empty, jump to the step labeled + end.

      6. Let current cue be the first cue in list, and then + remove it from list.

      7. If current cue's text track cue start time is less than + the start time of current chapter, then return to the step labeled + loop.

        -
        4.7.14.18 Best practices for authors using media elements
        +

      8. While current cue's text track cue start time is greater + than or equal to current chapter's end time, let current + chapter be current chapter's parent chapter.

      9. If current cue's text track cue end time is greater than + the end time of current chapter, then return to the step labeled + loop.

        -

        This section is non-normative.

        +
      10. -

        Playing audio and video resources on small devices such as set-top boxes or mobile phones is - often constrained by limited hardware resources in the device. For example, a device might only - support three simultaneous videos. For this reason, it is a good practice to release resources - held by media elements when they are done playing, either by - being very careful about removing all references to the element and allowing it to be garbage - collected, or, even better, by removing the element's src - attribute and any source element descendants, and invoking the element's load() method.

        +

        Create a new chapter new chapter, whose start time is current cue's text track cue start time, whose end time is current cue's text track cue end time, whose title is current cue's text track cue data interpreted according to its + rules for rendering the cue in isolation, and whose list of nested chapters is + empty.

        -

        Similarly, when the playback rate is not exactly 1.0, hardware, software, or format limitations - can cause video frames to be dropped and audio to be choppy or muted.

        +

        For WebVTT, the rules for rendering the cue in isolation are the + rules for interpreting WebVTT cue text. [WEBVTT]

        +

      11. Append new chapter to current chapter's list of + nested chapters, and let current chapter be new chapter's + parent.

      12. Let current chapter be new chapter.

      13. Return to the step labeled loop.

      14. End: Return output.

      -
      4.7.14.19 Best practices for implementors of media elements
      +
      -

      This section is non-normative.

      +

      The following snippet of a WebVTT file shows how nested chapters can be marked + up. The file describes three 50-minute chapters, "Astrophysics", "Computational Physics", and + "General Relativity". The first has three subchapters, the second has four, and the third has + two. [WEBVTT]

      -

      How accurately various aspects of the media element API are implemented is - considered a quality-of-implementation issue.

      + 
      WEBVTT
 
-  
      For example, when implementing the buffered attribute,
-  how precise an implementation reports the ranges that have been buffered depends on how carefully
-  the user agent inspects the data. Since the API reports ranges as times, but the data is obtained
-  in byte streams, a user agent receiving a variable-bit-rate stream might only be able to determine
-  precise times by actually decoding all of the data. User agents aren't required to do this,
-  however; they can instead return estimates (e.g. based on the average bit rate seen so far) which
-  get revised as more information becomes available.
      
+00:00:00.000 --> 00:50:00.000
+Astrophysics
 
-  
      As a general rule, user agents are urged to be conservative rather than optimistic. For
-  example, it would be bad to report that everything had been buffered when it had not.
      
+00:00:00.000 --> 00:10:00.000
+Introduction to Astrophysics
 
-  
      Another quality-of-implementation issue would be playing a video backwards when the codec is
-  designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and
-  the intervening frames only have deltas from the previous frame). User agents could do a poor job,
-  e.g. only showing key frames; however, better implementations would do more work and thus do a
-  better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and
-  then playing the frames backwards.
      
+00:10:00.000 --> 00:45:00.000
+The Solar System
 
-  
      Similarly, while implementations are allowed to drop buffered data at any time (there is no
-  requirement that a user agent keep all the media data obtained for the lifetime of the media
-  element), it is again a quality of implementation issue: user agents with sufficient resources to
-  keep all the data around are encouraged to do so, as this allows for a better user experience. For
-  example, if the user is watching a live stream, a user agent could allow the user only to view the
-  live video; however, a better user agent would buffer everything and allow the user to seek
-  through the earlier material, pause it, play it forwards and backwards, etc.
      
+00:00:00.000 --> 00:10:00.000
+Coursework Description
 
-  
      When multiple tracks are synchronised with a MediaController, it is possible for
-  scripts to add and remove media elements from the MediaController's list of
-  slaved media elements, even while these tracks are playing. How smoothly the media
-  plays back in such situations is another quality-of-implementation issue.
      
+00:50:00.000 --> 01:40:00.000
+Computational Physics
 
-  
      
+00:50:00.000 --> 00:55:00.000
+Introduction to Programming
 
-  
      When a media element that is paused is removed from a document and not reinserted before the next time the event
-  loop reaches step 1, implementations that are resource constrained are encouraged to take
-  that opportunity to release all hardware resources (like video planes, networking resources, and
-  data buffers) used by the media element. (User agents still have to keep track of the
-  playback position and so forth, though, in case playback is later restarted.)
      
+00:55:00.000 --> 01:30:00.000
+Data Structures
 
-  
+01:30:00.000 --> 01:35:00.000
+Answers to Last Exam
 
+01:35:00.000 --> 01:40:00.000
+Coursework Description
 
+01:40:00.000 --> 02:30:00.000
+General Relativity
 
-  
      4.7.15 The map element
      
+01:40:00.000 --> 02:00:00.000
+Tensor Algebra
 
-  
      Categories:
      Flow content.
      Phrasing content.
      Palpable content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      name — Name of image map to reference from the usemap attribute
      DOM interface:
      
-
      interface HTMLMapElement : HTMLElement {
-           attribute DOMString name;
-  readonly attribute HTMLCollection areas;
-  readonly attribute HTMLCollection images;
-};
      
-   
      
+02:00:00.000 --> 02:30:00.000
+The General Relativistic Field Equations
      -

      The map element, in conjunction with an img element and any - area element descendants, defines an image map. The element - represents its children.

      +
      -

      The name attribute gives the map a name so that - it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another map element in the same - document. If the id attribute is also specified, both attributes must - have the same value.

      + -
      map . areas
      +
      4.8.14.12.7 Event handlers for objects of the text track APIs
      -

      Returns an HTMLCollection of the area elements in the - map.

      +

      The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL + attributes, by all objects implementing the TextTrackList interface:

      -
      map . images
      +
      Event handler Event handler event type +
      onchange change +
      onaddtrack addtrack +
      onremovetrack removetrack +
      -

      Returns an HTMLCollection of the img and object - elements that use the map.

      +

      The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL + attributes, by all objects implementing the TextTrack interface:

      -
      +
      Event handler Event handler event type +
      oncuechange cuechange +
      + +

      The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL + attributes, by all objects implementing the TextTrackCue interface:

      + +
      Event handler Event handler event type +
      onenter enter +
      onexit exit +
      -

      The areas attribute must return an - HTMLCollection rooted at the map element, whose filter matches only - area elements.

      -

      The images attribute must return an - HTMLCollection rooted at the Document node, whose filter matches only - img and object elements that are associated with this map - element according to the image map processing model.

      -

      The IDL attribute name must reflect - the content attribute of the same name.

      +
      4.8.14.12.8 Best practices for metadata text tracks
      - +

      This section is non-normative.

      +

      Text tracks can be used for storing data relating to the media data, for interactive or + augmented views.

      -
      +

      For example, a page showing a sports broadcast could include information about the current + score. Suppose a robotics competition was being streamed live. The image could be overlayed with + the scores, as follows:

      -

      Image maps can be defined in conjunction with other content on the page, to ease maintenance. - This example is of a page with an image map at the top of the page and a corresponding set of - text links at the bottom.

      +

      - 

      <!DOCTYPE HTML>
-<TITLE>Babies™: Toys</TITLE>
-<HEADER>
- <H1>Toys</H1>
- <IMG SRC="/images/menu.gif"
-      ALT="Babies™ navigation menu. Select a department to go to its page."
-      USEMAP="#NAV">
-</HEADER>
- ...
-<FOOTER>
- <MAP NAME="NAV">
-  <P>
-   <A HREF="/clothes/">Clothes</A>
-   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
-   <A HREF="/toys/">Toys</A>
-   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
-   <A HREF="/food/">Food</A>
-   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
-   <A HREF="/books/">Books</A>
-   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
- </MAP>
-</FOOTER>
      +

      In order to make the score display render correctly whenever the user seeks to an arbitrary + point in the video, the metadata text track cues need to be as long as is appropriate for the + score. For example, in the frame above, there would be maybe one cue that lasts the length of the + match that gives the match number, one cue that lasts until the blue alliance's score changes, and + one cue that lasts until the red alliance's score changes. If the video is just a stream of the + live event, the time in the bottom right would presumably be automatically derived from the + current video time, rather than based on a cue. However, if the video was just the highlights, + then that might be given in cues also.

      -
      +

      The following shows what fragments of this could look like in a WebVTT file:

      + 
      WEBVTT
 
+...
 
-  
      4.7.16 The area element
      
+05:10:00.000 --> 05:12:15.000
+matchtype:qual
+matchnumber:37
 
-  
      Categories:
      Flow content.
      Phrasing content.
      Contexts in which this element can be used:
      Where phrasing content is expected, but only if there is a map element ancestor or a template element ancestor.
      Content model:
      Empty.
      Tag omission in text/html:
      No end tag.
      Content attributes:
      Global attributes
      alt — Replacement text for use when images are not available
      coords — Coordinates for the shape to be created in an image map
      shape — The kind of shape to be created in an image map
      href — Address of the hyperlink
      target — Browsing context for hyperlink navigation
      download — Whether to download the resource instead of navigating to it, and its file name if so
      ping — URLs to ping
      rel — Relationship between the document containing the hyperlink and the destination resource
      hreflang — Language of the linked resource
      type — Hint for the type of the referenced resource
      DOM interface:
      
-
      interface HTMLAreaElement : HTMLElement {
-           attribute DOMString alt;
-           attribute DOMString coords;
-           attribute DOMString shape;
-           attribute DOMString target;
-           attribute DOMString download;
-  [PutForwards=value] attribute DOMSettableTokenList ping;
-           attribute DOMString rel;
-  readonly attribute DOMTokenList relList;
-           attribute DOMString hreflang;
-           attribute DOMString type;
+...
 
-  // also has obsolete members
-};
-HTMLAreaElement implements URLUtils;
      
-   
      
+05:11:02.251 --> 05:11:17.198
+red:78
 
-  
      The area element represents either a hyperlink with some text and a
-  corresponding area on an image map, or a dead area on an image map.
      
+05:11:03.672 --> 05:11:54.198
+blue:66
 
-  
      An area element with a parent node must have a map element ancestor
-  or a template element ancestor.
      
+05:11:17.198 --> 05:11:25.912
+red:80
 
-  
      If the area element has an href
-  attribute, then the area element represents a hyperlink. In this case,
-  the alt attribute must be present. It specifies the
-  text of the hyperlink. Its value must be text that, when presented with the texts specified for
-  the other hyperlinks of the image map, and with the alternative text of the image,
-  but without the image itself, provides the user with the same kind of choice as the hyperlink
-  would when used without its text but with its shape applied to the image. The alt attribute may be left blank if there is another area
-  element in the same image map that points to the same resource and has a non-blank
-  alt attribute.
      
+05:11:25.912 --> 05:11:26.522
+red:83
 
-  
      If the area element has no href
-  attribute, then the area represented by the element cannot be selected, and the alt attribute must be omitted.
      
+05:11:26.522 --> 05:11:26.982
+red:86
 
-  
      In both cases, the shape and coords attributes specify the area.
      
+05:11:26.982 --> 05:11:27.499
+red:89
 
-  
      The shape attribute is an enumerated
-  attribute. The following table lists the keywords defined for this attribute. The states
-  given in the first cell of the rows with keywords give the states to which those keywords map.
-  Some of the keywords are non-conforming, as noted in the last
-  column.
      
+...
      -
      State - Keywords - Notes -
      Circle state - circle - -
      circ - Non-conforming -
      Default state - default - -
      Polygon state - poly - -
      polygon - Non-conforming -
      Rectangle state - rect - -
      rectangle - Non-conforming -
      +

      The key here is to notice that the information is given in cues that span the length of time to + which the relevant event applies. If, instead, the scores were given as zero-length (or very + brief, nearly zero-length) cues when the score changes, for example saying "red+2" at + 05:11:17.198, "red+3" at 05:11:25.912, etc, problems arise: primarily, seeking is much harder to + implement, as the script has to walk the entire list of cues to make sure that no notifications + have been missed; but also, if the cues are short it's possible the script will never see that + they are active unless it listens to them specifically.

      -

      The attribute may be omitted. The missing value default is the rectangle state.

      +

      When using cues in this manner, authors are encouraged to use the cuechange event to update the current annotations. (In + particular, using the timeupdate event would be less + appropriate as it would require doing work even when the cues haven't changed, and, more + importantly, would introduce a higher latency between when the metatata cues become active and + when the display is updated, since timeupdate events + are rate-limited.)

      -

      The coords attribute must, if specified, - contain a valid list of integers. This attribute gives the coordinates for the shape - described by the shape attribute. The - processing for this attribute is described as part of the image map processing - model.

      + + +
      4.8.14.13 User interface
      + +

      The controls attribute is a boolean + attribute. If present, it indicates that the author has not provided a scripted controller + and would like the user agent to provide its own set of controls.

      -

      In the circle state, area elements must - have a coords attribute present, with three integers, the - last of which must be non-negative. The first integer must be the distance in CSS pixels from the - left edge of the image to the center of the circle, the second integer must be the distance in CSS - pixels from the top edge of the image to the center of the circle, and the third integer must be - the radius of the circle, again in CSS pixels.

      +

      If the attribute is present, or if scripting is + disabled for the media element, then the user agent should expose a user + interface to the user. This user interface should include features to begin playback, pause + playback, seek to an arbitrary position in the content (if the content supports arbitrary + seeking), change the volume, change the display of closed captions or embedded sign-language + tracks, select different audio tracks or turn on audio descriptions, and show the media content in + manners more suitable to the user (e.g. full-screen video or in an independent resizable window). + Other controls may also be made available.

      -

      In the default state state, area - elements must not have a coords attribute. (The area is the - whole image.)

      +

      If the media element has a current media controller, then the user + agent should expose audio tracks from all the slaved media elements (although + avoiding duplicates if the same media resource is being used several times). If a + media resource's audio track exposed in this way has no known name, and it is the + only audio track for a particular media element, the user agent should use the + element's title attribute, if any, as the name (or as part of the + name) of that track.

      -

      In the polygon state, area elements must - have a coords attribute with at least six integers, and the - number of integers must be even. Each pair of integers must represent a coordinate given as the - distances from the left and the top of the image in CSS pixels respectively, and all the - coordinates together must represent the points of the polygon, in order.

      +

      Even when the attribute is absent, however, user agents may provide controls to affect playback + of the media resource (e.g. play, pause, seeking, and volume controls), but such features should + not interfere with the page's normal rendering. For example, such features could be exposed in the + media element's context menu. The user agent may implement this simply by exposing a user interface to the user as + described above (as if the controls attribute was + present).

      -

      In the rectangle state, area elements must - have a coords attribute with exactly four integers, the - first of which must be less than the third, and the second of which must be less than the fourth. - The four points must represent, respectively, the distance from the left edge of the image to the - left side of the rectangle, the distance from the top edge to the top side, the distance from the - left edge to the right side, and the distance from the top edge to the bottom side, all in CSS - pixels.

      +

      If the user agent exposes a user interface to + the user by displaying controls over the media element, then the user agent + should suppress any user interaction events while the user agent is interacting with this + interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at + elements on the page.)

      - +

      Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for + seeking, for changing the rate of playback, for fast-forwarding or rewinding, for listing, + enabling, and disabling text tracks, and for muting or changing the volume of the audio), user + interface features exposed by the user agent must be implemented in terms of the DOM API described + above, so that, e.g., all the same events fire.

      -

      When user agents allow users to follow hyperlinks or - download hyperlinks created using the - area element, as described in the next section, the href, target, download, and ping - attributes decide how the link is followed. The rel, hreflang, and type - attributes may be used to indicate to the user the likely nature of the target resource before the - user follows the link.

      +

      When a media element has a current media controller, the user agent's + user interface for pausing and unpausing playback, for seeking, for changing the rate of playback, + for fast-forwarding or rewinding, and for muting or changing the volume of audio of the entire + group must be implemented in terms of the MediaController API exposed on that + current media controller. When a media element has a current media + controller, and all the slaved media elements of that + MediaController are paused, the user agent should also unpause all the slaved + media elements when the user invokes a user agent interface control for beginning + playback.

      - +

      The "play" function in the user agent's interface must set the playbackRate attribute to the value of the defaultPlaybackRate attribute before invoking the play() + method. When a media element has a current media controller, the + attributes and method with those names on that MediaController object must be used. + Otherwise, the attributes and method with those names on the media element itself + must be used.

      -

      The target, download, ping, - rel, hreflang, and type - attributes must be omitted if the href attribute is not - present.

      +

      Features such as fast-forward or rewind must be implemented by only changing the playbackRate attribute (and not the defaultPlaybackRate + attribute). Again, when a media element has a current media controller, + the attributes with those names on that MediaController object must be used; + otherwise, the attributes with those names on the media element itself must be used.

      -

      If the itemprop attribute is specified on an - area element, then the href attribute must - also be specified.

      +

      When a media element has a current media controller, seeking must be + implemented in terms of the currentTime + attribute on that MediaController object. Otherwise, the user agent must directly + seek to the requested position in the media + element's media timeline. For media resources where seeking to an arbitrary + position would be slow, user agents are encouraged to use the approximate-for-speed flag + when seeking in response to the user manipulating an approximate position interface such as a seek + bar.

      - +

      When a media element has a current media controller, user agents may + additionally provide the user with controls that directly manipulate an individual media + element without affecting the MediaController, but such features are + considered relatively advanced and unlikely to be useful to most users.

      -

      The activation behavior of area elements is to run the following - steps:

      +

      The activation behavior of a media element that is exposing a user interface to the user must be + to run the following steps:

      -

      1. If the area element's Document is not fully active, - then abort these steps.

      2. +

        1. If the media element has a current media controller, and that + current media controller is a restrained media controller, then invoke + the play() method of the + MediaController.

        2. Otherwise, if the media element has a current media controller, + and that current media controller is a paused media controller, then + invoke the unpause() method of the + MediaController.

        3. Otherwise, if the media element has a current media controller, + then that current media controller is a playing media controller; + invoke the pause() method of the + MediaController.

        4. Otherwise, the media element has no current media controller; if + the media element's paused attribute is true, + then invoke the play() method on the media + element.

        5. Otherwise, the media element has no current media controller, + and the media element's paused attribute is + false; invoke the pause() method on the media + element.

        -

        If the area element has a download - attribute and the algorithm is not allowed to show a popup, or the element's target attribute is present and applying the rules - for choosing a browsing context given a browsing context name, using the value of the - target attribute as the browsing context name, would - result in there not being a chosen browsing context, then run these substeps:

        +

        For the purposes of listing chapters in the media resource, only text tracks in the media element's list of text tracks + that are showing and whose text track kind is + chapters should be used. Such tracks must be + interpreted according to the rules for constructing the chapter tree from a text + track. When seeking in response to a user maniplating a chapter selection interface, user + agents should not use the approximate-for-speed flag.

        -

        1. If there is an entry settings object, throw an - InvalidAccessError exception.

        2. Abort these steps without following the hyperlink.

        +

        The controls IDL attribute must + reflect the content attribute of the same name.

        -

      3. Otherwise, the user agent must follow the - hyperlink or download the hyperlink created - by the area element, if any, and as determined by the download attribute and any expressed user - preference.

      +
      -

      The IDL attributes alt, coords, target, download, ping, rel, - hreflang, and type, each must reflect the respective - content attributes of the same name.

      + -

      The IDL attribute shape must - reflect the shape content attribute.

      +
      media . volume [ = value ]
      -

      The IDL attribute relList must - reflect the rel content attribute.

      +

      Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the + quietest and 1.0 the loudest.

      -
      +

      Can be set, to change the volume.

      -

      The area element also supports the URLUtils interface. [URL]

      +

      Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

      -

      When the element is created, and whenever the element's href content attribute is set, changed, or removed, the user - agent must invoke the element's URLUtils interface's set the input algorithm with the value of the href content attribute, if any, or the empty string otherwise, - as the given value.

      +
      media . muted [ = value ]
      -

      The element's URLUtils interface's get the - base algorithm must simply return the element's base URL.

      +

      Returns true if audio is muted, overriding the volume + attribute, and false if the volume attribute is being + honored.

      -

      The element's URLUtils interface's query - encoding is the document's character encoding.

      +

      Can be set, to change whether the audio is muted or not.

      -

      When the element's URLUtils interface invokes its update steps with a string value, the user - agent must set the element's href content attribute to - the string value.

      +
      +

      A media element has a playback volume, which is a fraction in the range 0.0 (silent) to 1.0 (loudest). + Initially, the volume should be 1.0, but user agents may remember the last set value across + sessions, on a per-site basis or otherwise, so the volume may start at other values.

      + +

      The volume IDL attribute must return the + playback volume of any audio portions of the + media element. On setting, if the new value is in the range 0.0 to 1.0 inclusive, the + media element's playback volume must be + set to the new value. If the new value is outside the range 0.0 to 1.0 inclusive, then, on + setting, an IndexSizeError exception must be thrown instead.

      +

      A media element can also be muted. If + anything is muting the element, then it is muted. (For example, when the direction of + playback is backwards, the element is muted.)

      -

      4.7.17 Image maps

      +

      The muted IDL attribute must return the value + to which it was last set. When a media element is created, if the element has a muted content attribute specified, then the muted IDL attribute should be set to true; otherwise, the user + agents may set the value to the user's preferred value (e.g. remembering the last set value across + sessions, on a per-site basis or otherwise). While the muted + IDL attribute is set to true, the media element must be muted.

      - +

      Whenever either of the values that would be returned by the volume and muted IDL + attributes change, the user agent must queue a task to fire a simple + event named volumechange at the media + element.

      - +

      An element's effective media volume is determined as follows:

      -
      4.7.17.1 Authoring
      +

      1. If the user has indicated that the user agent is to override the volume of the element, + then the element's effective media volume is the volume desired by the user. Abort + these steps.

      2. If the element's audio output is muted, the + element's effective media volume is zero. Abort these steps.

      3. If the element has a current media controller and that + MediaController object's media controller mute override is true, the + element's effective media volume is zero. Abort these steps.

      4. Let volume be the playback + volume of the audio portions of the media element, in range 0.0 (silent) to + 1.0 (loudest).

      5. If the element has a current media controller, multiply volume by that MediaController object's media controller + volume multiplier. (The media controller volume multiplier is in the range + 0.0 to 1.0, so this can only reduce the value.)

      6. The element's effective media volume is volume, + interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest + setting, values in between increasing in loudness. The range need not be linear. The loudest + setting may be lower than the system's loudest possible setting; for example the user could have + set a maximum volume.

      -

      An image map allows geometric areas on an image to be associated with hyperlinks.

      +

      The muted content attribute on media elements is a boolean attribute that controls the + default state of the audio output of the media resource, potentially overriding user + preferences.

      -

      An image, in the form of an img element or an object element - representing an image, may be associated with an image map (in the form of a map - element) by specifying a usemap attribute on - the img or object element. The usemap attribute, if specified, must be a valid - hash-name reference to a map element.

      + -
      +

      The defaultMuted IDL attribute must + reflect the muted content attribute.

      -

      Consider an image that looks as follows:

      + -

      A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

      +

      This attribute has no dynamic effect (it only controls the default state of the + element).

      -

      If we wanted just the coloured areas to be clickable, we could do it as follows:

      +
      - 
      <p>
- Please select a shape:
- <img src="shapes.png" usemap="#shapes"
-      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
- <map name="shapes">
-  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
-  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
-  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
-  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
-  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
-        href="yellow.html" alt="Yellow star.">
- </map>
-</p>
      +

      This video (an advertisement) autoplays, but to avoid annoying users, it does so without + sound, and allows the user to turn the sound on.

      + + 
      <video src="adverts.cgi?kind=video" controls autoplay loop muted></video>
      - -
      4.7.17.2 Processing model
      -

      If an img element or an object element representing an image has a - usemap attribute specified, user agents must process it - as follows:

      -

      1. First, rules for parsing a hash-name reference to a map element - must be followed. This will return either an element (the map) or - null.

      2. If that returned null, then abort these steps. The image is not associated with an image - map after all.

      3. Otherwise, the user agent must collect all the area elements that are - descendants of the map. Let those be the areas.

      +
      4.8.14.14 Time ranges
      -

      Having obtained the list of area elements that form the image map (the areas), interactive user agents must process the list in one of two ways.

      +

      Objects implementing the TimeRanges interface + represent a list of ranges (periods) of time.

      -

      If the user agent intends to show the text that the img element represents, then - it must use the following steps.

      + 
      interface TimeRanges {
+  readonly attribute unsigned long length;
+  double start(unsigned long index);
+  double end(unsigned long index);
+};
      -

      In user agents that do not support images, or that have images disabled, - object elements cannot represent images, and thus this section never applies (the - fallback content is shown instead). The following steps therefore only apply to - img elements.

      +
      media . length
      -

      1. Remove all the area elements in areas that have no href attribute.

      2. Remove all the area elements in areas that have no alt attribute, or whose alt - attribute's value is the empty string, if there is another area element in - areas with the same value in the href attribute and with a non-empty alt attribute.

      3. Each remaining area element in areas represents a - hyperlink. Those hyperlinks should all be made available to the user in a manner - associated with the text of the img.

        +

        Returns the number of ranges in the object.

        -

        In this context, user agents may represent area and img elements - with no specified alt attributes, or whose alt - attributes are the empty string or some other non-visible text, in a user-agent-defined fashion - intended to indicate the lack of suitable author-provided text.

      +
      time = media . start(index)
      -

      If the user agent intends to show the image and allow interaction with the image to select - hyperlinks, then the image must be associated with a set of layered shapes, taken from the - area elements in areas, in reverse tree order (so the last - specified area element in the map is the bottom-most shape, and - the first element in the map, in tree order, is the top-most shape).

      +

      Returns the time for the start of the range with the given index.

      -

      Each area element in areas must be processed as follows to - obtain a shape to layer onto the image:

      +

      Throws an IndexSizeError exception if the index is out of range.

      -

      1. Find the state that the element's shape attribute - represents.

      2. Use the rules for parsing a list of integers to parse the element's coords attribute, if it is present, and let the result be the - coords list. If the attribute is absent, let the coords - list be the empty list.

      3. +
        time = media . end(index)
        -

        If the number of items in the coords list is less than the minimum number - given for the area element's current state, as per the following table, then the - shape is empty; abort these steps.

        +

        Returns the time for the end of the range with the given index.

        -
        State - Minimum number of items -
        Circle state - 3 -
        Default state - 0 -
        Polygon state - 6 -
        Rectangle state - 4 -
        +

        Throws an IndexSizeError exception if the index is out of range.

        -
      4. +
      -

      Check for excess items in the coords list as per the entry in the - following list corresponding to the shape attribute's - state:

      + -
      Circle state
      Drop any items in the list beyond the third.
      Default state
      Drop all items in the list.
      Polygon state
      Drop the last item if there's an odd number of items.
      Rectangle state
      Drop any items in the list beyond the fourth.
      +

      The length IDL attribute must return the + number of ranges represented by the object.

      -

    30. If the shape attribute represents the rectangle state, and the first number in the list is - numerically less than the third number in the list, then swap those two numbers around.

    31. If the shape attribute represents the rectangle state, and the second number in the list is - numerically less than the fourth number in the list, then swap those two numbers around.

    32. If the shape attribute represents the circle state, and the third number in the list is less than - or equal to zero, then the shape is empty; abort these steps.

    33. Now, the shape represented by the element is the one described for the entry in the list - below corresponding to the state of the shape attribute:

      +

      The start(index) + method must return the position of the start of the indexth range represented + by the object, in seconds measured from the start of the timeline that the object covers.

      -
      Circle state
      +

      The end(index) method + must return the position of the end of the indexth range represented by the + object, in seconds measured from the start of the timeline that the object covers.

      -

      Let x be the first number in coords, y be the second number, and r be the third number.

      +

      These methods must throw IndexSizeError exceptions if called with an index argument greater than or equal to the number of ranges represented by the + object.

      -

      The shape is a circle whose center is x CSS pixels from the left edge - of the image and y CSS pixels from the top edge of the image, and whose - radius is r pixels.

      +

      When a TimeRanges object is said to be a normalised TimeRanges + object, the ranges it represents must obey the following criteria:

      -
      Default state
      +
      • The start of a range must be greater than the end of all earlier ranges.
      • The start of a range must be less than the end of that same range.
      -

      The shape is a rectangle that exactly covers the entire image.

      +

      In other words, the ranges in such an object are ordered, don't overlap, aren't empty, and + don't touch (adjacent ranges are folded into one bigger range).

      -
      Polygon state
      +

      Ranges in a TimeRanges object must be inclusive.

      -

      Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0).

      +

      Thus, the end of a range would be equal to the start of a following adjacent + (touching but not overlapping) range. Similarly, a range covering a whole timeline anchored at + zero would have a start equal to zero and an end equal to the duration of the timeline.

      -

      Let the coordinates be (xi, yi), - interpreted in CSS pixels measured from the top left of the image, for all integer values of - i from 0 to (N/2)-1, where N is the number of items in coords.

      +

      The timelines used by the objects returned by the buffered, seekable and + played IDL attributes of media + elements must be that element's media timeline.

      -

      The shape is a polygon whose vertices are given by the coordinates, and - whose interior is established using the even-odd rule. [GRAPHICS]

      + - -
      Rectangle state
      +
      4.8.14.15 The TrackEvent interface
      -

      Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number.

      + 
      [Constructor(DOMString type, optional TrackEventInit eventInitDict)]
+interface TrackEvent : Event {
+  readonly attribute (VideoTrack or AudioTrack or TextTrack) track;
+};
 
-      
      The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose
-      bottom right corner is given by the coordinate (x2,
-      y2), those coordinates being interpreted as CSS pixels
-      from the top left corner of the image.
      
+dictionary TrackEventInit : EventInit {
+  (VideoTrack or AudioTrack or TextTrack) track;
+};
      -
      +
      event . track
      -

      For historical reasons, the coordinates must be interpreted relative to the - displayed image after any stretching caused by the CSS 'width' and 'height' properties - (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the - aforementioned CSS properties).

      +

      Returns the track object (TextTrack, AudioTrack, or + VideoTrack) to which the event relates.

      -

      Browser zoom features and transforms applied using CSS or SVG do not affect the - coordinates.

      +
      -
    + -

    Pointing device interaction with an image associated with a set of layered shapes per the above - algorithm must result in the relevant user interaction events being first fired to the top-most - shape covering the point that the pointing device indicated, if any, or to the image element - itself, if there is no shape covering that point. User agents may also allow individual - area elements representing hyperlinks to be selected - and activated (e.g. using a keyboard).

    +

    The track attribute must return the value + it was initialised to. When the object is created, this attribute must be initialised to null. It + represents the context information for the event.

    -

    Because a map element (and its area elements) can be - associated with multiple img and object elements, it is possible for an - area element to correspond to multiple focusable areas - of the document.

    + -

    Image maps are live; if the DOM is mutated, then the user agent must act as if it - had rerun the algorithms for image maps.

    - +
    4.8.14.16 Event summary
    +

    This section is non-normative.

    -

    4.7.18 MathML

    +

    The following events fire on media elements as part of the + processing model described above:

    -

    The math element from the MathML namespace - falls into the embedded content, phrasing content, and flow - content categories for the purposes of the content models in this specification.

    +
    Event name + Interface + Fired when... + Preconditions -

    This specification refers to several specific MathML elements, in particular: - annotation-xml, - merror, - mi, - mn, - mo, - ms, and - mtext. -

    +
    loadstart -

    When the MathML annotation-xml element contains - elements from the HTML namespace, such elements must all be flow - content. [MATHML]

    +     		Event -

    When the MathML token elements (mi, mo, mn, ms, - and mtext) are descendants of HTML elements, they may contain - phrasing content elements from the HTML namespace. [MATHML]

    - +     		The user agent begins looking for media data, as part of the resource selection algorithm. - + networkState equals NETWORK_LOADING - +
    progress -

    User agents must handle text other than inter-element whitespace found in MathML - elements whose content models do not allow straight text by pretending for the purposes of MathML - content models, layout, and rendering that that text is actually wrapped in an mtext element in the MathML namespace. (Such text is not, - however, conforming.)

    +     		Event -

    User agents must act as if any MathML element whose contents does not match the element's - content model was replaced, for the purposes of MathML layout and rendering, by an merror element in the MathML namespace containing some - appropriate error message.

    +     		The user agent is fetching media data. -

    To enable authors to use MathML tools that only accept MathML in its XML form, interactive HTML - user agents are encouraged to provide a way to export any MathML fragment as an XML - namespace-well-formed XML fragment.

    +     		networkState equals NETWORK_LOADING - +
    suspend -

    The semantics of MathML elements are defined by the MathML specification and other - applicable specifications. [MATHML]

    +     		Event -
    +
    		The user agent is intentionally not currently fetching media data. -

    Here is an example of the use of MathML in an HTML document:

    +     		networkState equals NETWORK_IDLE - 
    <!DOCTYPE html>
-<html>
- <head>
-  <title>The quadratic formula</title>
- </head>
- <body>
-  <h1>The quadratic formula</h1>
-  <p>
-   <math>
-    <mi>x</mi>
-    <mo>=</mo>
-    <mfrac>
-     <mrow>
-      <mo form="prefix">−</mo> <mi>b</mi>
-      <mo>±</mo>
-      <msqrt>
-       <msup> <mi>b</mi> <mn>2</mn> </msup>
-       <mo>−</mo>
-       <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
-      </msqrt>
-     </mrow>
-     <mrow>
-      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
-     </mrow>
-    </mfrac>
-   </math>
-  </p>
- </body>
-</html>
    +
    abort + + Event - + The user agent stops fetching the media data before it is completely + downloaded, but not due to an error. + error is an object with the code MEDIA_ERR_ABORTED. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. +
    error -

    4.7.19 SVG

    +     		Event -

    The svg element from the SVG namespace falls into the - embedded content, phrasing content, and flow content - categories for the purposes of the content models in this specification.

    +     		An error occurs while fetching the media data. - + error is an object with the code MEDIA_ERR_NETWORK or higher. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. -

    To enable authors to use SVG tools that only accept SVG in its XML form, interactive HTML user - agents are encouraged to provide a way to export any SVG fragment as an XML namespace-well-formed - XML fragment.

    +
    emptied - + Event -

    When the SVG foreignObject element contains elements from the HTML - namespace, such elements must all be flow content. [SVG]

    +     		A media element whose networkState + was previously not in the NETWORK_EMPTY state has + just switched to that state (either because of a fatal error during load that's about to be + reported, or because the load() method was invoked while + the resource selection algorithm was already + running). -

    The content model for title elements in the SVG namespace - inside HTML documents is phrasing content. (This further constrains the - requirements given in the SVG specification.)

    +     		networkState is NETWORK_EMPTY; all the IDL attributes are in their + initial states. -

    The semantics of SVG elements are defined by the SVG specification and other applicable - specifications. [SVG]

    +
    stalled + Event + The user agent is trying to fetch media data, but data is unexpectedly not + forthcoming. -

    4.7.20 Dimension attributes

    +     		networkState is NETWORK_LOADING. -

    Author requirements: The width and height attributes on img, iframe, - embed, object, video, and, when their type attribute is in the Image Button state, input elements may be - specified to give the dimensions of the visual content of the element (the width and height - respectively, relative to the nominal direction of the output medium), in CSS pixels. The - attributes, if specified, must have values that are valid non-negative integers.

    +
    loadedmetadata -

    The specified dimensions given may differ from the dimensions specified in the resource itself, - since the resource may have a resolution that differs from the CSS pixel resolution. (On screens, - CSS pixels have a resolution of 96ppi, but in general the CSS pixel resolution depends on the - reading distance.) If both attributes are specified, then one of the following statements must be - true:

    +     		Event -
    • specified width - 0.5 ≤ - specified height * target ratio ≤ - specified width + 0.5
    • specified height - 0.5 ≤ - specified width / target ratio ≤ - specified height + 0.5
    • specified height = specified width = 0
    +     		The user agent has just determined the duration and dimensions of the media + resource and the text tracks are ready. -

    The target ratio is the ratio of the intrinsic width to the intrinsic - height in the resource. The specified width and specified - height are the values of the width and height attributes respectively.

    +     		readyState is newly equal to HAVE_METADATA or greater for the first time. -

    The two attributes must be omitted if the resource in question does not have both an intrinsic - width and an intrinsic height.

    +
    loadeddata -

    If the two attributes are both zero, it indicates that the element is not intended for the user - (e.g. it might be a part of a service to count page views).

    +     		Event -

    The dimension attributes are not intended to be used to stretch the image.

    +     		The user agent can render the media data at the current playback + position for the first time. - + readyState newly increased to HAVE_CURRENT_DATA or greater for the first time. -

    User agent requirements: User agents are expected to use these attributes as hints for the rendering.

    +
    canplay -

    The width and height IDL attributes on the iframe, - embed, object, and video elements must reflect - the respective content attributes of the same name.

    +     		Event -

    For iframe, embed, and object the IDL - attributes are DOMString; for video the IDL attributes are unsigned long.

    +     		The user agent can resume playback of the media data, but estimates that if + playback were to be started now, the media resource could not be rendered at the + current playback rate up to its end without having to stop for further buffering of content. -

    The corresponding IDL attributes for img and - input elements are defined in those respective elements' - sections, as they are slightly more specific to those elements' other behaviors.

    +     		readyState newly increased to HAVE_FUTURE_DATA or greater. - +
    canplaythrough + Event + The user agent estimates that if playback were to be started now, the media + resource could be rendered at the current playback rate all the way to its end without + having to stop for further buffering. - + readyState is newly equal to HAVE_ENOUGH_DATA. -

    4.8.1 Introduction

    +
    playing -

    Links are a conceptual construct, created by a, area, and - link elements, that represent a connection between - two resources, one of which is the current Document. There are two kinds of links in - HTML:

    +     		Event -
    Links to external resources

    These are links to resources that are to be used to augment the current document, - generally automatically processed by the user agent.

    Hyperlinks

    These are links to other resources that are generally exposed to the user by the user - agent so that the user can cause the user agent to navigate to those resources, e.g. - to visit them in a browser or download them.

    +     		Playback is ready to start after having been paused or delayed due to lack of media + data. -

    For link elements with an href attribute and a - rel attribute, links must be created for the keywords of the - rel attribute, as defined for those keywords in the link types section.

    +     		readyState is newly equal to or greater than + HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA. Even if this event fires, the + element might still not be potentially playing, e.g. if the element is + blocked on its media controller (e.g. because the current media + controller is paused, or another slaved media + element is stalled somehow, or because the media resource has no data + corresponding to the media controller position), or the element is paused + for user interaction or paused for in-band content. -

    Similarly, for a and area elements with an href attribute and a rel attribute, links must be created for the keywords of the - rel attribute as defined for those keywords in the link types section. Unlike link elements, however, - a and area element with an href - attribute that either do not have a rel attribute, or - whose rel attribute has no keywords that are defined as - specifying hyperlinks, must also create a hyperlink. - This implied hyperlink has no special meaning (it has no link type) - beyond linking the element's document to the resource given by the element's href attribute.

    +
    waiting -

    A hyperlink can have one or more hyperlink - annotations that modify the processing semantics of that hyperlink.

    +     		Event + Playback has stopped because the next frame is not available, but the user agent expects + that frame to become available in due course. - + readyState is equal to or less than HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position + is not contained in any of the ranges in buffered. It + is possible for playback to stop for other reasons without paused being false, but those reasons do not fire this event + (and when those situations resolve, a separate playing + event is not fired either): e.g. the element is newly blocked on its media + controller, or playback ended, or playback + stopped due to errors, or the element has paused for user interaction + or paused for in-band content. -

    The href attribute on a and - area elements must have a value that is a valid URL potentially surrounded by - spaces.

    +
    seeking -

    The href attribute on a and - area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

    +     		Event -

    The target attribute, if present, must be - a valid browsing context name or keyword. It gives the name of the browsing - context that will be used. User agents use this name when - following hyperlinks.

    +     		The seeking IDL attribute changed to true, and the user agent has started seeking to a new position. -

    When an a or area element's activation behavior is - invoked, the user agent may allow the user to indicate a preference regarding whether the - hyperlink is to be used for navigation or whether the resource it - specifies is to be downloaded.

    +     		-

    In the absence of a user preference, the default should be navigation if the element has no - download attribute, and should be to download the - specified resource if it does.

    +
    seeked -

    Whether determined by the user's preferences or via the presence or absence of the attribute, - if the decision is to use the hyperlink for navigation then the user - agent must follow the hyperlink, and if the decision is - to use the hyperlink to download a resource, the user agent must download the hyperlink. These terms are defined in subsequent sections - below.

    +     		Event -

    The download attribute, if present, - indicates that the author intends the hyperlink to be used for downloading a resource. The - attribute may have a value; the value, if any, specifies the default file name that the author - recommends for use in labeling the resource in a local file system. There are no restrictions on - allowed values, but authors are cautioned that most file systems have limitations with regard to - what punctuation is supported in file names, and user agents are likely to adjust file names - accordingly.

    +     		The seeking IDL attribute changed to false after the current playback position was changed. + -

    The ping attribute, if present, - gives the URLs of the resources that are interested in being notified if the user follows the - hyperlink. The value must be a set of space-separated tokens, each of which must be a - valid non-empty URL. The value is used by the user agent for - hyperlink auditing.

    +
    ended -

    The rel attribute on a and - area elements controls what kinds of links the elements create. The attribute's value - must be a set of space-separated tokens. The allowed keywords - and their meanings are defined below.

    +     		Event -

    The rel attribute has no default value. If the - attribute is omitted or if none of the values in the attribute are recognised by the user agent, - then the document has no particular relationship with the destination resource other than there - being a hyperlink between the two.

    +     		Playback has stopped because the end of the media resource was reached. -

    The hreflang attribute on - a and area elements that create hyperlinks, if present, gives the language of the linked resource. It is - purely advisory. The value must be a valid BCP 47 language tag. [BCP47] - User agents must not consider this attribute authoritative — upon - fetching the resource, user agents must use only language information associated with the resource - to determine its language, not metadata included in the link to the resource.

    +     		currentTime equals the end of the media + resource; ended is true. -

    The type attribute, if present, gives the - MIME type of the linked resource. It is purely advisory. The value must be a - valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the - resource, user agents must not use metadata included in the link to the resource to determine its - type.

    +
    durationchange + Event - + The duration attribute has just been updated. - + -

    When a user follows a hyperlink created by an element - subject, the user agent must run the following steps:

    +
    timeupdate -

    1. Let replace be false.

    2. Let source be the browsing context that contains the - Document object with which subject in question is - associated.

    3. +
    		Event -

    If the user indicated a specific browsing context when following the hyperlink, - or if the user agent is configured to follow hyperlinks by navigating a particular browsing - context, then let target be that browsing context.

    +     		The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. -

    Otherwise, if subject is an a or area element - that has a target attribute, then let target be the browsing context that is chosen by applying the - rules for choosing a browsing context given a browsing context name, using the value of - the target attribute as the browsing context name. If - these rules result in the creation of a new browsing context, set replace to true.

    +     		-

    Otherwise, if the hyperlink is a sidebar - hyperlink, the user agent implements a feature that can be considered a secondary - browsing context, and the user agent intends to use this feature in this instance, let - target be such a secondary browsing context.

    +
    play -

    Otherwise, if target is an a or area element - with no target attribute, but the - Document contains a base element with a target attribute, then let target be the - browsing context that is chosen by applying the rules for choosing a browsing - context given a browsing context name, using the value of the target attribute of the first such base element as - the browsing context name. If these rules result in the creation of a new browsing - context, set replace to true.

    +     		Event -

    Otherwise, let target be the browsing context that subject itself is in.

    +     		The element is no longer paused. Fired after the play() + method has returned, or when the autoplay attribute + has caused playback to begin. -

  • Resolve the URL given by the href attribute of that element, relative to that - element.

  • +
    		• paused is newly false. -

    If that is successful, let URL be the resulting absolute - URL.

    +
    pause -

    Otherwise, if resolving the URL failed, the - user agent may report the error to the user in a user-agent-specific manner, may queue a - task to navigate the target - browsing context to an error page to report the error, or may ignore the error and - do nothing. In any case, the user agent must then abort these steps.

    +     		Event -

  • In the case of server-side image maps, append the hyperlink - suffix to URL.

  • +
    		• The element has been paused. Fired after the pause() + method has returned. -

    Queue a task to navigate the target browsing context to URL. If replace is true, the navigation must be performed with replacement - enabled. The source browsing context must be source.

    +     		paused is newly true. - +
    ratechange -

    The task source for the tasks mentioned above is the DOM manipulation task - source.

    +     		Event - + Either the defaultPlaybackRate or the + playbackRate attribute has just been updated. + + +
    resize + Event + One or both of the videoWidth and videoHeight attributes have just been updated. -

    4.8.4 Downloading resources

    +     		Media element is a video element; readyState is not HAVE_NOTHING -

    In some cases, resources are intended for later use rather than immediate viewing. To indicate - that a resource is intended to be downloaded for use later, rather than immediately used, the - download attribute can be specified on the - a or area element that creates the hyperlink to that - resource.

    +
    volumechange -

    The attribute can furthermore be given a value, to specify the file name that user agents are - to use when storing the resource in a file system. This value can be overridden by the Content-Disposition HTTP header's filename parameters. [RFC6266]

    +     		Event -

    In cross-origin situations, the download attribute - has to be combined with the Content-Disposition HTTP - header, specifically with the attachment disposition type, to avoid the user - being warned of possibly nefarious activity. (This is to protect users from being made to download - sensitive personal or confidential information without their full understanding.)

    +     		Either the volume attribute or the muted attribute has changed. Fired after the relevant + attribute's setter has returned. - + -
    +
    -

    When a user downloads a hyperlink created by an - element, the user agent must run the following steps:

    +

    The following events fire on MediaController objects:

    -

    1. Resolve the URL given by the href attribute of that element, relative to that - element.

    2. If resolving the URL fails, the user agent - may report the error to the user in a user-agent-specific manner, may - navigate to an error page to report the error, or may - ignore the error and do nothing. In either case, the user agent must abort these steps.

      +
      Event name -

    3. Otherwise, let URL be the resulting absolute - URL.

    4. In the case of server-side image maps, append the hyperlink - suffix to URL.

    5. Return to whatever algorithm invoked these steps and continue - these steps asynchronously.

    6. Fetch URL and handle the resulting resource - as a download. +

      		7. Interface -

      When a user agent is to handle a resource obtained from a fetch algorithm as - a download, it should provide the user with a way to save the resource for later use, if a - resource is successfully obtained; or otherwise should report any problems downloading the file to - the user.

      +       		Fired when... -

      If the user agent needs a file name for a resource being handled as a download, it - should select one using the following algorithm.

      +
      emptied -

      This algorithm is intended to mitigate security dangers involved in downloading - files from untrusted sites, and user agents are strongly urged to follow it.

      +       		Event -

      1. Let filename be the void value.

      2. If the resource has a Content-Disposition - header, that header specifies the attachment disposition type, and the - header includes file name information, then let filename have the value - specified by the header, and jump to the step labeled sanitize below. [RFC6266]

      3. Let interface origin be the origin of the - Document in which the download or - navigate action resulting in the download was initiated, if any.

      4. Let resource origin be the origin of the URL of the - resource being downloaded, unless that URL's scheme - component is data, in which case let resource origin be - the same as the interface origin, if any.

      5. If there is no interface origin, then let trusted - operation be true. Otherwise, let trusted operation be true if resource origin is the same origin as interface - origin, and false otherwise.

      6. If trusted operation is true and the resource has a Content-Disposition header and that header includes file - name information, then let filename have the value specified by the header, - and jump to the step labeled sanitize below. [RFC6266]

      7. If the download was not initiated from a hyperlink created by an - a or area element, or if the element of the hyperlink from - which it was initiated did not have a download - attribute when the download was initiated, or if there was such an attribute but its value when - the download was initiated was the empty string, then jump to the step labeled no proposed - file name.

      8. Let proposed filename have the value of the download attribute of the element of the - hyperlink that initiated the download at the time the download was - initiated.

      9. If trusted operation is true, let filename have - the value of proposed filename, and jump to the step labeled sanitize - below.

      10. If the resource has a Content-Disposition - header and that header specifies the attachment disposition type, let filename have the value of proposed filename, and jump to the - step labeled sanitize below. [RFC6266]

      11. No proposed file name: If trusted operation is true, or if the - user indicated a preference for having the resource in question downloaded, let filename have a value derived from the URL of the resource in a - user-agent-defined manner, and jump to the step labeled sanitize below.

      12. +
      		All the slaved media elements newly have readyState set to HAVE_NOTHING or greater, or there are no longer any + slaved media elements. -

      Act in a user-agent-defined manner to safeguard the user from a potentially hostile - cross-origin download. If the download is not to be aborted, then let filename be set to the user's preferred file name or to a file name selected by - the user agent, and jump to the step labeled sanitize below.

      +
      loadedmetadata -
      +
      		Event -

      If the algorithm reaches this step, then a download was begun from a different origin than - the resource being downloaded, and the origin did not mark the file as suitable for - downloading, and the download was not initiated by the user. This could be because a download attribute was used to trigger the download, or - because the resource in question is not of a type that the user agent supports.

      +       		All the slaved media elements newly have readyState set to HAVE_METADATA or greater. -

      This could be dangerous, because, for instance, a hostile server could be trying to get a - user to unknowingly download private information and then re-upload it to the hostile server, - by tricking the user into thinking the data is from the hostile server.

      +
      loadeddata -

      Thus, it is in the user's interests that the user be somehow notified that the resource in - question comes from quite a different source, and to prevent confusion, any suggested file name - from the potentially hostile interface origin should be ignored.

      +       		Event - + All the slaved media elements newly have readyState set to HAVE_CURRENT_DATA or greater. -

    7. Sanitize: Optionally, allow the user to influence filename. For - example, a user agent could prompt the user for a file name, potentially providing the value of - filename as determined above as a default value.

    8. +
      9. canplay -

      Adjust filename to be suitable for the local file system.

      +       		Event -

      For example, this could involve removing characters that are not legal in - file names, or trimming leading and trailing whitespace.

      +       		All the slaved media elements newly have readyState set to HAVE_FUTURE_DATA or greater. -

    9. If the platform conventions do not in any way use extensions to determine the types of file on the file system, - then return filename as the file name and abort these steps.

    10. Let claimed type be the type given by the resource's Content-Type metadata, if any is known. Let named - type be the type given by filename's extension, if any is known. For the purposes of this step, a - type is a mapping of a MIME type to an extension.

    11. If named type is consistent with the user's preferences (e.g. because - the value of filename was determined by prompting the user), then return filename as the file name and abort these steps.

    12. If claimed type and named type are the same type - (i.e. the type given by the resource's Content-Type metadata is - consistent with the type given by filename's extension), then return filename as the file - name and abort these steps.

    13. +
      14. canplaythrough -

      If the claimed type is known, then alter filename to - add an extension corresponding to claimed - type.

      +       		Event -

      Otherwise, if named type is known to be potentially dangerous (e.g. it - will be treated by the platform conventions as a native executable, shell script, HTML - application, or executable-macro-capable document) then optionally alter filename to add a known-safe extension - (e.g. ".txt").

      +       		All the slaved media elements newly have readyState set to HAVE_ENOUGH_DATA or greater. -

      This last step would make it impossible to download executables, which might not - be desirable. As always, implementors are forced to balance security and usability in this - matter.

      +
      playing -

    14. Return filename as the file name. +

      		15. Event -

      For the purposes of this algorithm, a file extension - consists of any part of the file name that platform conventions dictate will be used for - identifying the type of the file. For example, many operating systems use the part of the file - name following the last dot (".") in the file name to determine the type of - the file, and from that the manner in which the file is to be opened or executed.

      +       		The MediaController is no longer a blocked media controller. -

      User agents should ignore any directory or path information provided by the resource itself, - its URL, and any download attribute, in - deciding where to store the resulting file in the user's file system.

      +
      waiting - + Event + The MediaController is now a blocked media controller. +
      ended + Event - + All the slaved media elements have newly ended playback; the + MediaController has reached the end of all the slaved media elements. - +
      durationchange -

      If a hyperlink created by an a or area element has a - ping attribute, and the user follows the hyperlink, and - the value of the element's href attribute can be resolved, relative to the element, without failure, then the user - agent must take the ping attribute's value, split that string on spaces, resolve each resulting token relative to the element, and then each resulting absolute URL ping URL should - be fetched from the origin of the - Document containing the hyperlink (as described below). (Tokens that fail to resolve are ignored.) This may be done in parallel - with the primary request, and is independent of the result of that request.

      +       		Event -

      User agents should allow the user to adjust this behavior, for example in conjunction with a - setting that disables the sending of HTTP Referer (sic) - headers. Based on the user's preferences, UAs may either ignore the ping attribute altogether, or selectively ignore URLs in the - list (e.g. ignoring any third-party URLs).

      +       		The duration attribute has just been + updated. -

      For each ping URL that is an HTTP URL, the request must be performed using - the POST method, with an entity body with the MIME type text/ping - consisting of the four-character string "PING". All relevant cookie and - HTTP authentication headers must be included in the request. Which other headers are required - depends on the URLs involved, as follows. For the purposes of these requirements, target URL is the resulting absolute URL obtained from resolving the value of the element's href attribute.

      +
      timeupdate -
      If both the address of the Document - object containing the hyperlink being audited and ping URL have the - same origin
      The request must include a Ping-From HTTP header with, - as its value, the address of the document containing - the hyperlink, and a Ping-To HTTP header with, as its value, - the target URL. The request must not include a Referer (sic) HTTP header.
      Otherwise, if the origins are different, but the document containing the hyperlink being - audited was not retrieved over an encrypted connection
      The request must include a Referer (sic) HTTP header with, - as its value, the address of the document containing - the hyperlink, a Ping-From HTTP header with the same value, - and a Ping-To HTTP header with, as its value, target URL.
      Otherwise, the origins are different and the document containing the hyperlink being audited - was retrieved over an encrypted connection
      The request must include a Ping-To HTTP header with, as - its value, target URL. The request must neither include a Referer (sic) HTTP header nor include a Ping-From HTTP header.
      +       		Event -

      To save bandwidth, implementors might also wish to consider omitting optional - headers such as Accept from these requests.

      +       		The media controller position changed. -

      User agents must, unless otherwise specified by the user, honor the HTTP headers (including, in - particular, redirects and HTTP cookie headers), but must ignore any entity bodies returned in the - responses. User agents may close the connection prematurely once they start receiving an entity - body. [COOKIES]

      +
      play -

      When the ping attribute is present, user agents - should clearly indicate to the user that following the hyperlink will also cause secondary - requests to be sent in the background, possibly including listing the actual target URLs.

      +       		Event -

      For example, a visual user agent could include the hostnames of the target ping - URLs along with the hyperlink's actual URL in a status bar or tooltip.

      +       		The paused attribute is newly false. - +
      pause -
      +
      		Event -

      The ping attribute is redundant with pre-existing - technologies like HTTP redirects and JavaScript in allowing Web pages to track which off-site - links are most popular or allowing advertisers to track click-through rates.

      +       		The paused attribute is newly true. -

      However, the ping attribute provides these advantages - to the user over those alternatives:

      +
      ratechange -
      • It allows the user to see the final target URL unobscured.
      • It allows the UA to inform the user about the out-of-band notifications.
      • It allows the user to disable the notifications without losing the underlying link - functionality.
      • It allows the UA to optimise the use of available network bandwidth so that the target page - loads faster.
      +       		Event -

      Thus, while it is possible to track users without this feature, authors are encouraged to use - the ping attribute so that the user agent can make the - user experience more transparent.

      +       		Either the defaultPlaybackRate + attribute or the playbackRate attribute + has just been updated. - +
      volumechange - + Event + Either the volume attribute or the muted attribute has just been updated. +
      -

      4.8.5 Link types

      -

      The following table summarizes the link types that are defined by this specification. This - table is non-normative; the actual definitions for the link types are given in the next few - sections.

      +

      The following events fire on AudioTrackList, VideoTrackList, and + TextTrackList objects:

      -

      In this section, the term referenced document refers to the resource identified by the - element representing the link, and the term current document refers to the resource within - which the element representing the link finds itself.

      +
      Event name - + Interface -

      To determine which link types apply to a link, a, or - area element, the element's rel attribute must be split on spaces. The resulting tokens are the link types - that apply to that element.

      +       		Fired when... - +
      change -

      Except where otherwise specified, a keyword must not be specified more than once per rel attribute.

      +       		Event -

      Link types are always ASCII case-insensitive, and must be - compared as such.

      +       		One or more tracks in the track list have been enabled or disabled. + +
      addtrack + + TrackEvent + + A track has been added to the track list. + +
      removetrack -

      Thus, rel="next" is the same as rel="NEXT".

      +       		TrackEvent -
      Link typeEffect on...Brief description
      linka and area
      alternateHyperlinkHyperlinkGives alternate representations of the current document.
      authorHyperlinkHyperlinkGives a link to the author of the current document or article.
      bookmarknot allowedHyperlinkGives the permalink for the nearest ancestor section.
      externalnot allowedAnnotationIndicates that the referenced document is not part of the same site as the current document.
      helpHyperlinkHyperlinkProvides a link to context-sensitive help.
      iconExternal Resourcenot allowedImports an icon to represent the current document.
      licenseHyperlinkHyperlinkIndicates that the main content of the current document is covered by the copyright license described by the referenced document.
      nextHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the next document in the series is the referenced document.
      nofollownot allowedAnnotationIndicates that the current document's original author or publisher does not endorse the referenced document.
      noreferrernot allowedAnnotationRequires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.
      pingbackExternal Resourcenot allowedGives the address of the pingback server that handles pingbacks to the current document.
      prefetchExternal ResourceExternal ResourceSpecifies that the target resource should be preemptively cached.
      prevHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
      searchHyperlinkHyperlinkGives a link to a resource that can be used to search through the current document and its related pages.
      sidebarHyperlinkHyperlinkSpecifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).
      stylesheetExternal Resourcenot allowedImports a stylesheet.
      tagnot allowedHyperlinkGives a tag (identified by the given address) that applies to the current document.
      +       		A track has been removed from the track list. - +
      -

      Some of the types described below list synonyms for these values. These are to be handled as specified by user agents, but must not be used - in documents.

      - - +

      The following event fires on TextTrack objects and track elements:

      +
      Event name -
      4.8.5.1 Link type "alternate"
      +       		Interface -

      The alternate keyword may be used with link, - a, and area elements.

      +       		Fired when... -

      The meaning of this keyword depends on the values of the other attributes.

      +
      cuechange -
      If the element is a link element and the rel - attribute also contains the keyword stylesheet
      +
      		Event -

      The alternate keyword modifies the meaning of the stylesheet keyword in the way described for that keyword. The - alternate keyword does not create a link of its own.

      +       		One or more cues in the track have become active or stopped being active. -
      If the alternate keyword is used with the type attribute set to the value application/rss+xml or the value application/atom+xml
      +
      -

      The keyword creates a hyperlink referencing a syndication feed (though not - necessarily syndicating exactly the same content as the current page).

      - +

      The following events fire on TextTrackCue objects:

      -

      The first link, a, or area element in the document (in - tree order) with the alternate keyword used with the type attribute set to the value application/rss+xml or the value application/atom+xml must - be treated as the default syndication feed for the purposes of feed autodiscovery.

      +
      Event name -
      -

      The following link element gives the syndication - feed for the current page:

      - 
      <link rel="alternate" type="application/atom+xml" href="data.xml">
      -

      The following extract offers various different syndication - feeds:

      - 
      <p>You can access the planets database using Atom feeds:</p>
-<ul>
- <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
- <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
- <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
-</ul>
      -
      +       		Interface - + Fired when... -
      Otherwise
      +
      enter -

      The keyword creates a hyperlink referencing an alternate representation of the - current document.

      +       		Event -

      The nature of the referenced document is given by the hreflang, and type attributes.

      +       		The cue has become active. -

      If the alternate keyword is used with the hreflang attribute, and that attribute's value differs - from the root element's language, it indicates that the referenced - document is a translation.

      +
      exit -

      If the alternate keyword is used with the type attribute, it indicates that the referenced document is - a reformulation of the current document in the specified format.

      +       		Event -

      The hreflang and type attributes can be combined when specified with the alternate keyword.

      +       		The cue has stopped being active. -
      +
      -

      For example, the following link is a French translation that uses the PDF format:

      - 
      <link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
      - + -

      This relationship is transitive — that is, if a document links to two other documents - with the link type "alternate", then, in addition to implying - that those documents are alternative representations of the first document, it is also implying - that those two documents are alternative representations of each other.

      +
      4.8.14.17 Security and privacy considerations
      - +

      The main security and privacy implications of the video and audio + elements come from the ability to embed media cross-origin. There are two directions that threats + can flow: from hostile content to a victim page, and from a hostile page to victim content.

      +
      +

      If a victim page embeds hostile content, the threat is that the content might contain scripted + code that attempts to interact with the Document that embeds the content. To avoid + this, user agents must ensure that there is no access from the content to the embedding page. In + the case of media content that uses DOM concepts, the embedded content must be treated as if it + was in its own unrelated top-level browsing context.

      - +

      For instance, if an SVG animation was embedded in a video element, + the user agent would not give it access to the DOM of the outer page. From the perspective of + scripts in the SVG resource, the SVG file would appear to be in a lone top-level browsing context + with no parent.

      -

      The author keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +
      -

      For a and area elements, the author - keyword indicates that the referenced document provides further information about the author of - the nearest article element ancestor of the element defining the hyperlink, if there - is one, or of the page as a whole, otherwise.

      +

      If a hostile page embeds victim content, the threat is that the embedding page could obtain + information from the content that it would not otherwise have access to. The API does expose some + information: the existence of the media, its type, its duration, its size, and the performance + characteristics of its host. Such information is already potentially problematic, but in practice + the same information can more or less be obtained using the img element, and so it + has been deemed acceptable.

      -

      For link elements, the author keyword indicates - that the referenced document provides further information about the author for the page as a - whole.

      +

      However, significantly more sensitive information could be obtained if the user agent further + exposes metadata within the content such as subtitles or chapter titles. Such information is + therefore only exposed if the video resource passes a CORS resource sharing check. + The crossorigin attribute allows authors to control + how this check is performed. [FETCH]

      -

      The "referenced document" can be, and often is, a mailto: URL giving the e-mail address of the author. [MAILTO]

      +

      Without this restriction, an attacker could trick a user running within a + corporate network into visiting a site that attempts to load a video from a previously leaked + location on the corporation's intranet. If such a video included confidential plans for a new + product, then being able to read the subtitles would present a serious confidentiality breach.

      -

      Synonyms: For historical reasons, user agents must also treat - link, a, and area elements that have a rev attribute with the value "made" as having the author keyword specified as a link relationship.

      - +
      4.8.14.18 Best practices for authors using media elements
      - +

      This section is non-normative.

      -

      The bookmark keyword may be used with a and - area elements. This keyword creates a hyperlink.

      +

      Playing audio and video resources on small devices such as set-top boxes or mobile phones is + often constrained by limited hardware resources in the device. For example, a device might only + support three simultaneous videos. For this reason, it is a good practice to release resources + held by media elements when they are done playing, either by + being very careful about removing all references to the element and allowing it to be garbage + collected, or, even better, by removing the element's src + attribute and any source element descendants, and invoking the element's load() method.

      -

      The bookmark keyword gives a permalink for the nearest - ancestor article element of the linking element in question, or of the section the linking element is most closely associated with, if - there are no ancestor article elements.

      +

      Similarly, when the playback rate is not exactly 1.0, hardware, software, or format limitations + can cause video frames to be dropped and audio to be choppy or muted.

      -
      -

      The following snippet has three permalinks. A user agent could determine which permalink - applies to which part of the spec by looking at where the permalinks are given.

      + - 
       ...
- <body>
-  <h1>Example of permalinks</h1>
-  <div id="a">
-   <h2>First example</h2>
-   <p><a href="a.html" rel="bookmark">This permalink applies to
-   only the content from the first H2 to the second H2</a>. The DIV isn't
-   exactly that section, but it roughly corresponds to it.</p>
-  </div>
-  <h2>Second example</h2>
-  <article id="b">
-   <p><a href="b.html" rel="bookmark">This permalink applies to
-   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
-   <article id="c">
-    <p><a href="c.html" rel="bookmark">This permalink applies to
-    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
-   </article>
-  </article>
- </body>
- ...
      +
      4.8.14.19 Best practices for implementors of media elements
      -
      +

      This section is non-normative.

      +

      How accurately various aspects of the media element API are implemented is + considered a quality-of-implementation issue.

      - - +

      For example, when implementing the buffered attribute, + how precise an implementation reports the ranges that have been buffered depends on how carefully + the user agent inspects the data. Since the API reports ranges as times, but the data is obtained + in byte streams, a user agent receiving a variable-bit-rate stream might only be able to determine + precise times by actually decoding all of the data. User agents aren't required to do this, + however; they can instead return estimates (e.g. based on the average bit rate seen so far) which + get revised as more information becomes available.

      -

      The external keyword may be used with a and - area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the - implied hyperlink, if no other keywords create one).

      +

      As a general rule, user agents are urged to be conservative rather than optimistic. For + example, it would be bad to report that everything had been buffered when it had not.

      -

      The external keyword indicates that the link is leading to a - document that is not part of the site that the current document forms a part of.

      +

      Another quality-of-implementation issue would be playing a video backwards when the codec is + designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and + the intervening frames only have deltas from the previous frame). User agents could do a poor job, + e.g. only showing key frames; however, better implementations would do more work and thus do a + better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and + then playing the frames backwards.

      +

      Similarly, while implementations are allowed to drop buffered data at any time (there is no + requirement that a user agent keep all the media data obtained for the lifetime of the media + element), it is again a quality of implementation issue: user agents with sufficient resources to + keep all the data around are encouraged to do so, as this allows for a better user experience. For + example, if the user is watching a live stream, a user agent could allow the user only to view the + live video; however, a better user agent would buffer everything and allow the user to seek + through the earlier material, pause it, play it forwards and backwards, etc.

      - +

      When multiple tracks are synchronised with a MediaController, it is possible for + scripts to add and remove media elements from the MediaController's list of + slaved media elements, even while these tracks are playing. How smoothly the media + plays back in such situations is another quality-of-implementation issue.

      -

      The help keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +
      -

      For a and area elements, the help - keyword indicates that the referenced document provides further help information for the parent of - the element defining the hyperlink, and its children.

      +

      When a media element that is paused is removed from a document and not reinserted before the next time the event + loop reaches step 1, implementations that are resource constrained are encouraged to take + that opportunity to release all hardware resources (like video planes, networking resources, and + data buffers) used by the media element. (User agents still have to keep track of the + playback position and so forth, though, in case playback is later restarted.)

      -
      + -

      In the following example, the form control has associated context-sensitive help. The user - agent could use this information, for example, displaying the referenced document if the user - presses the "Help" or "F1" key.

      - 
       <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>
      -
      +

      4.8.15 The map element

      -

      For link elements, the help keyword indicates that - the referenced document provides help for the page as a whole.

      +
      Categories:
      Flow content.
      Phrasing content.
      Palpable content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      name — Name of image map to reference from the usemap attribute
      DOM interface:
      +
      interface HTMLMapElement : HTMLElement {
+           attribute DOMString name;
+  readonly attribute HTMLCollection areas;
+  readonly attribute HTMLCollection images;
+};
      +
      -

      For a and area elements, on some browsers, the help keyword causes the link to use a different cursor.

      +

      The map element, in conjunction with an img element and any + area element descendants, defines an image map. The element + represents its children.

      +

      The name attribute gives the map a name so that + it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another map element in the same + document. If the id attribute is also specified, both attributes must + have the same value.

      -
      4.8.5.6 Link type "icon"
      -

      The icon keyword may be used with link elements. - This keyword creates an external resource link.

      +
      map . areas
      - +

      Returns an HTMLCollection of the area elements in the + map.

      -

      The specified resource is an icon representing the page or site, and should be used by the user - agent when representing the page in the user interface.

      +
      map . images
      - +

      Returns an HTMLCollection of the img and object + elements that use the map.

      -

      Icons could be auditory icons, visual icons, or other kinds of icons. If - multiple icons are provided, the user agent must select the most appropriate icon according to the - type, media, and sizes attributes. If there are multiple equally appropriate icons, - user agents must use the last one declared in tree order at the time that the user - agent collected the list of icons. If the user agent tries to use an icon but that icon is - determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an - unsupported format), then the user agent must try the next-most-appropriate icon as determined by - the attributes.

      +
      -

      User agents are not required to update icons when the list of icons changes, but - are encouraged to do so.

      +

      The areas attribute must return an + HTMLCollection rooted at the map element, whose filter matches only + area elements.

      -

      There is no default type for resources given by the icon keyword. - However, for the purposes of determining the type of the - resource, user agents must expect the resource to be an image.

      +

      The images attribute must return an + HTMLCollection rooted at the Document node, whose filter matches only + img and object elements that are associated with this map + element according to the image map processing model.

      + +

      The IDL attribute name must reflect + the content attribute of the same name.

      -

      The sizes attribute gives the sizes of icons - for visual media. Its value, if present, is merely advisory. User agents may use the value to - decide which icon(s) to use if multiple icons are available.

      -

      If specified, the attribute must have a value that is an unordered set of unique - space-separated tokens which are ASCII case-insensitive. Each value must be - either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT - ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN - CAPITAL LETTER X character.

      +
      -

      The keywords represent icon sizes in raw pixels (as opposed to CSS pixels).

      +

      Image maps can be defined in conjunction with other content on the page, to ease maintenance. + This example is of a page with an image map at the top of the page and a corresponding set of + text links at the bottom.

      -

      An icon that is 50 CSS pixels wide intended for displays with a device pixel - density of two device pixels per CSS pixel (2x, 192dpi) would have a width of 100 raw pixels. This - feature does not support indicating that a different resource is to be used for small - high-resolution icons vs large low-resolution icons (e.g. 50×50 2x vs 100×100 1x).

      + 
      <!DOCTYPE HTML>
+<TITLE>Babies™: Toys</TITLE>
+<HEADER>
+ <H1>Toys</H1>
+ <IMG SRC="/images/menu.gif"
+      ALT="Babies™ navigation menu. Select a department to go to its page."
+      USEMAP="#NAV">
+</HEADER>
+ ...
+<FOOTER>
+ <MAP NAME="NAV">
+  <P>
+   <A HREF="/clothes/">Clothes</A>
+   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
+   <A HREF="/toys/">Toys</A>
+   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
+   <A HREF="/food/">Food</A>
+   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
+   <A HREF="/books/">Books</A>
+   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
+ </MAP>
+</FOOTER>
      - +
      -

      To parse and process the attribute's value, the user agent must first split the attribute's value on spaces, and must then parse each resulting - keyword to determine what it represents.

      - -

      The any keyword represents that the - resource contains a scalable icon, e.g. as provided by an SVG image.

      +

      4.8.16 The area element

      - +
      Categories:
      Flow content.
      Phrasing content.
      Contexts in which this element can be used:
      Where phrasing content is expected, but only if there is a map element ancestor or a template element ancestor.
      Content model:
      Empty.
      Tag omission in text/html:
      No end tag.
      Content attributes:
      Global attributes
      alt — Replacement text for use when images are not available
      coords — Coordinates for the shape to be created in an image map
      shape — The kind of shape to be created in an image map
      href — Address of the hyperlink
      target — Browsing context for hyperlink navigation
      download — Whether to download the resource instead of navigating to it, and its file name if so
      ping — URLs to ping
      rel — Relationship between the document containing the hyperlink and the destination resource
      hreflang — Language of the linked resource
      type — Hint for the type of the referenced resource
      DOM interface:
      +
      interface HTMLAreaElement : HTMLElement {
+           attribute DOMString alt;
+           attribute DOMString coords;
+           attribute DOMString shape;
+           attribute DOMString target;
+           attribute DOMString download;
+  [PutForwards=value] attribute DOMSettableTokenList ping;
+           attribute DOMString rel;
+  readonly attribute DOMTokenList relList;
+           attribute DOMString hreflang;
+           attribute DOMString type;
 
-  
      Other keywords must be further parsed as follows to determine what they represent:
      
+  // also has obsolete members
+};
+HTMLAreaElement implements URLUtils;
      +
      -

      • If the keyword doesn't contain exactly one U+0078 LATIN SMALL LETTER X or U+0058 LATIN - CAPITAL LETTER X character, then this keyword doesn't represent anything. Abort these steps for - that keyword.

      • Let width string be the string before the "x" or - "X".

      • Let height string be the string after the "x" or - "X".

      • If either width string or height string start with - a U+0030 DIGIT ZERO (0) character or contain any characters other than ASCII digits, - then this keyword doesn't represent anything. Abort these steps for that keyword.

      • Apply the rules for parsing non-negative integers to width - string to obtain width.

      • Apply the rules for parsing non-negative integers to height - string to obtain height.

      • The keyword represents that the resource contains a bitmap icon with a width of width device pixels and a height of height device - pixels.

      +

      The area element represents either a hyperlink with some text and a + corresponding area on an image map, or a dead area on an image map.

      - +

      An area element with a parent node must have a map element ancestor + or a template element ancestor.

      -

      The keywords specified on the sizes attribute must not - represent icon sizes that are not actually available in the linked resource.

      +

      If the area element has an href + attribute, then the area element represents a hyperlink. In this case, + the alt attribute must be present. It specifies the + text of the hyperlink. Its value must be text that, when presented with the texts specified for + the other hyperlinks of the image map, and with the alternative text of the image, + but without the image itself, provides the user with the same kind of choice as the hyperlink + would when used without its text but with its shape applied to the image. The alt attribute may be left blank if there is another area + element in the same image map that points to the same resource and has a non-blank + alt attribute.

      - +

      If the area element has no href + attribute, then the area represented by the element cannot be selected, and the alt attribute must be omitted.

      -

      In the absence of a link with the icon keyword, for - Documents obtained over HTTP or HTTPS, user agents may instead attempt to - fetch and use an icon with the absolute URL obtained by - resolving the URL "/favicon.ico" against the document's - address, as if the page had declared that icon using the icon - keyword.

      +

      In both cases, the shape and coords attributes specify the area.

      - +

      The shape attribute is an enumerated + attribute. The following table lists the keywords defined for this attribute. The states + given in the first cell of the rows with keywords give the states to which those keywords map. + Some of the keywords are non-conforming, as noted in the last + column.

      -
      +
      State + Keywords + Notes +
      Circle state + circle + +
      circ + Non-conforming +
      Default state + default + +
      Polygon state + poly + +
      polygon + Non-conforming +
      Rectangle state + rect + +
      rectangle + Non-conforming +
      -

      The following snippet shows the top part of an application with several icons.

      +

      The attribute may be omitted. The missing value default is the rectangle state.

      - 
      <!DOCTYPE HTML>
-<html>
- <head>
-  <title>lsForums — Inbox</title>
-  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
-  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
-  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
-  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
-  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
-  <link rel=stylesheet href=lsforums.css>
-  <script src=lsforums.js></script>
-  <meta name=application-name content="lsForums">
- </head>
- <body>
-  ...
      +

      The coords attribute must, if specified, + contain a valid list of integers. This attribute gives the coordinates for the shape + described by the shape attribute. The + processing for this attribute is described as part of the image map processing + model.

      -
      + -

      For historical reasons, the icon keyword may be preceded by the - keyword "shortcut". If the "shortcut" keyword is - present, the rel attribute's entire value must be an - ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and - no other space characters).

      +

      In the circle state, area elements must + have a coords attribute present, with three integers, the + last of which must be non-negative. The first integer must be the distance in CSS pixels from the + left edge of the image to the center of the circle, the second integer must be the distance in CSS + pixels from the top edge of the image to the center of the circle, and the third integer must be + the radius of the circle, again in CSS pixels.

      +

      In the default state state, area + elements must not have a coords attribute. (The area is the + whole image.)

      - +

      In the polygon state, area elements must + have a coords attribute with at least six integers, and the + number of integers must be even. Each pair of integers must represent a coordinate given as the + distances from the left and the top of the image in CSS pixels respectively, and all the + coordinates together must represent the points of the polygon, in order.

      -

      The license keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +

      In the rectangle state, area elements must + have a coords attribute with exactly four integers, the + first of which must be less than the third, and the second of which must be less than the fourth. + The four points must represent, respectively, the distance from the left edge of the image to the + left side of the rectangle, the distance from the top edge to the top side, the distance from the + left edge to the right side, and the distance from the top edge to the bottom side, all in CSS + pixels.

      -

      The license keyword indicates that the referenced document - provides the copyright license terms under which the main content of the current document is - provided.

      + -

      This specification does not specify how to distinguish between the main content of a document - and content that is not deemed to be part of that main content. The distinction should be made - clear to the user.

      +

      When user agents allow users to follow hyperlinks or + download hyperlinks created using the + area element, as described in the next section, the href, target, download, and ping + attributes decide how the link is followed. The rel, hreflang, and type + attributes may be used to indicate to the user the likely nature of the target resource before the + user follows the link.

      -
      + -

      Consider a photo sharing site. A page on that site might describe and show a photograph, and - the page might be marked up as follows:

      +

      The target, download, ping, + rel, hreflang, and type + attributes must be omitted if the href attribute is not + present.

      - 
      <!DOCTYPE HTML>
-<html>
- <head>
-  <title>Exampl Pictures: Kissat</title>
-  <link rel="stylesheet" href="/style/default">
- </head>
- <body>
-  <h1>Kissat</h1>
-  <nav>
-   <a href="../">Return to photo index</a>
-  </nav>
-  <figure>
-   <img src="/pix/39627052_fd8dcd98b5.jpg">
-   <figcaption>Kissat</figcaption>
-  </figure>
-  <p>One of them has six toes!</p>
-  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
-  <footer>
-   <a href="/">Home</a> | <a href="../">Photo index</a>
-   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
-  </footer>
- </body>
-</html>
      +

      If the itemprop attribute is specified on an + area element, then the href attribute must + also be specified.

      -

      In this case the license applies to just the photo (the main - content of the document), not the whole document. In particular not the design of the page - itself, which is covered by the copyright given at the bottom of the document. This could be made - clearer in the styling (e.g. making the license link prominently positioned near the photograph, - while having the page copyright in light small text at the foot of the page.

      + -
      +

      The activation behavior of area elements is to run the following + steps:

      + +

      1. If the area element's Document is not fully active, + then abort these steps.

      2. + +

        If the area element has a download + attribute and the algorithm is not allowed to show a popup, or the element's target attribute is present and applying the rules + for choosing a browsing context given a browsing context name, using the value of the + target attribute as the browsing context name, would + result in there not being a chosen browsing context, then run these substeps:

        - +

        1. If there is an entry settings object, throw an + InvalidAccessError exception.

        2. Abort these steps without following the hyperlink.

        -

        Synonyms: For historical reasons, user agents must also treat the keyword - "copyright" like the license keyword.

        +

      3. Otherwise, the user agent must follow the + hyperlink or download the hyperlink created + by the area element, if any, and as determined by the download attribute and any expressed user + preference.

      - +

      The IDL attributes alt, coords, target, download, ping, rel, + hreflang, and type, each must reflect the respective + content attributes of the same name.

      +

      The IDL attribute shape must + reflect the shape content attribute.

      - +

      The IDL attribute relList must + reflect the rel content attribute.

      -

      The nofollow keyword may be used with a and - area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the - implied hyperlink, if no other keywords create one).

      +
      -

      The nofollow keyword indicates that the link is not endorsed - by the original author or publisher of the page, or that the link to the referenced document was - included primarily because of a commercial relationship between people affiliated with the two - pages.

      +

      The area element also supports the URLUtils interface. [URL]

      +

      When the element is created, and whenever the element's href content attribute is set, changed, or removed, the user + agent must invoke the element's URLUtils interface's set the input algorithm with the value of the href content attribute, if any, or the empty string otherwise, + as the given value.

      - +

      The element's URLUtils interface's get the + base algorithm must simply return the element's base URL.

      -

      The noreferrer keyword may be used with a and - area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the - implied hyperlink, if no other keywords create one).

      +

      The element's URLUtils interface's query + encoding is the document's character encoding.

      -

      It indicates that no referrer information is to be leaked when following the link.

      +

      When the element's URLUtils interface invokes its update steps with a string value, the user + agent must set the element's href content attribute to + the string value.

      -

      If a user agent follows a link defined by an a or area element that - has the noreferrer keyword, the user agent must not include a - Referer (sic) HTTP header (or equivalent for other protocols) in the - request.

      -

      This keyword also causes the opener - attribute to remain null if the hyperlink creates a new browsing context.

      + +

      4.8.17 Image maps

      +
      4.8.17.1 Authoring
      - + -

      The pingback keyword may be used with link - elements. This keyword creates an external resource - link.

      +

      An image map allows geometric areas on an image to be associated with hyperlinks.

      -

      For the semantics of the pingback keyword, see the Pingback - 1.0 specification. [PINGBACK]

      +

      An image, in the form of an img element or an object element + representing an image, may be associated with an image map (in the form of a map + element) by specifying a usemap attribute on + the img or object element. The usemap attribute, if specified, must be a valid + hash-name reference to a map element.

      +
      - +

      Consider an image that looks as follows:

      -

      The prefetch keyword may be used with link, - a, and area elements. This keyword creates an external resource link.

      +

      A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

      -

      The prefetch keyword indicates that preemptively fetching and - caching the specified resource is likely to be beneficial, as it is highly likely that the user - will require this resource.

      +

      If we wanted just the coloured areas to be clickable, we could do it as follows:

      -

      There is no default type for resources given by the prefetch - keyword.

      + 
      <p>
+ Please select a shape:
+ <img src="shapes.png" usemap="#shapes"
+      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
+ <map name="shapes">
+  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
+  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
+  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
+  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
+  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
+        href="yellow.html" alt="Yellow star.">
+ </map>
+</p>
      +
      - + -

      The search keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +
      4.8.17.2 Processing model
      -

      The search keyword indicates that the referenced document - provides an interface specifically for searching the document and its related resources.

      +

      If an img element or an object element representing an image has a + usemap attribute specified, user agents must process it + as follows:

      -

      OpenSearch description documents can be used with link elements and - the search link type to enable user agents to autodiscover search - interfaces. [OPENSEARCH]

      +

      1. First, rules for parsing a hash-name reference to a map element + must be followed. This will return either an element (the map) or + null.

      2. If that returned null, then abort these steps. The image is not associated with an image + map after all.

      3. Otherwise, the user agent must collect all the area elements that are + descendants of the map. Let those be the areas.

      +

      Having obtained the list of area elements that form the image map (the areas), interactive user agents must process the list in one of two ways.

      - +

      If the user agent intends to show the text that the img element represents, then + it must use the following steps.

      -

      The sidebar keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +

      In user agents that do not support images, or that have images disabled, + object elements cannot represent images, and thus this section never applies (the + fallback content is shown instead). The following steps therefore only apply to + img elements.

      -

      The sidebar keyword indicates that the referenced document, if - retrieved, is intended to be shown in a secondary browsing context (if possible), - instead of in the current browsing context.

      +

      1. Remove all the area elements in areas that have no href attribute.

      2. Remove all the area elements in areas that have no alt attribute, or whose alt + attribute's value is the empty string, if there is another area element in + areas with the same value in the href attribute and with a non-empty alt attribute.

      3. Each remaining area element in areas represents a + hyperlink. Those hyperlinks should all be made available to the user in a manner + associated with the text of the img.

        -

        A hyperlink with the sidebar keyword specified is - a sidebar hyperlink.

        +

        In this context, user agents may represent area and img elements + with no specified alt attributes, or whose alt + attributes are the empty string or some other non-visible text, in a user-agent-defined fashion + intended to indicate the lack of suitable author-provided text.

      + +

      If the user agent intends to show the image and allow interaction with the image to select + hyperlinks, then the image must be associated with a set of layered shapes, taken from the + area elements in areas, in reverse tree order (so the last + specified area element in the map is the bottom-most shape, and + the first element in the map, in tree order, is the top-most shape).

      +

      Each area element in areas must be processed as follows to + obtain a shape to layer onto the image:

      +

      1. Find the state that the element's shape attribute + represents.

      2. Use the rules for parsing a list of integers to parse the element's coords attribute, if it is present, and let the result be the + coords list. If the attribute is absent, let the coords + list be the empty list.

      3. - +

        If the number of items in the coords list is less than the minimum number + given for the area element's current state, as per the following table, then the + shape is empty; abort these steps.

        -

        The stylesheet keyword may be used with link - elements. This keyword creates an external resource - link that contributes to the styling processing model.

        +
        State + Minimum number of items +
        Circle state + 3 +
        Default state + 0 +
        Polygon state + 6 +
        Rectangle state + 4 +
        -

        The specified resource is a resource that describes how to present the document. Exactly how - the resource is to be processed depends on the actual type of the resource.

        +
      4. -

        If the alternate keyword is also specified on the - link element, then the link is an alternative stylesheet; in this case, - the title attribute must be specified on the link - element, with a non-empty value.

        +

        Check for excess items in the coords list as per the entry in the + following list corresponding to the shape attribute's + state:

        -

        The default type for resources given by the stylesheet - keyword is text/css.

        +
        Circle state
        Drop any items in the list beyond the third.
        Default state
        Drop all items in the list.
        Polygon state
        Drop the last item if there's an odd number of items.
        Rectangle state
        Drop any items in the list beyond the fourth.
        - +

      5. If the shape attribute represents the rectangle state, and the first number in the list is + numerically less than the third number in the list, then swap those two numbers around.

      6. If the shape attribute represents the rectangle state, and the second number in the list is + numerically less than the fourth number in the list, then swap those two numbers around.

      7. If the shape attribute represents the circle state, and the third number in the list is less than + or equal to zero, then the shape is empty; abort these steps.

      8. Now, the shape represented by the element is the one described for the entry in the list + below corresponding to the state of the shape attribute:

        -

        The appropriate times to obtain the resource are: +

        Circle state
        - +

        Let x be the first number in coords, y be the second number, and r be the third number.

        -

        Quirk: If the document has been set to quirks mode, has the - same origin as the URL of the external resource, - and the Content-Type metadata of the external resource is not a - supported style sheet type, the user agent must instead assume it to be text/css.

        +

        The shape is a circle whose center is x CSS pixels from the left edge + of the image and y CSS pixels from the top edge of the image, and whose + radius is r pixels.

        -

        Once a resource has been obtained, if its Content-Type metadata is text/css, the user - agent must run these steps:

        +
        Default state
        - - +

        The shape is a rectangle that exactly covers the entire image.

        -

        1. Let element be the link element that created the - external resource link.

        2. If element has an associated CSS style sheet, remove the CSS style sheet in question.

        3. If element no longer creates an external resource link - that contributes to the styling processing model, or if, since the resource in question was obtained, it has become appropriate to obtain it again (meaning this algorithm is about to be - invoked again for a newly obtained resource), then abort these steps.

        4. +
          Polygon state
          -

          Create a CSS style sheet with the following properties:

          +

          Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0).

          -
          type

          text/css

          location
          +

          Let the coordinates be (xi, yi), + interpreted in CSS pixels measured from the top left of the image, for all integer values of + i from 0 to (N/2)-1, where N is the number of items in coords.

          -

          The resulting absolute URL determined during the obtain algorithm.

          +

          The shape is a polygon whose vertices are given by the coordinates, and + whose interior is established using the even-odd rule. [GRAPHICS]

          -

          This is before any redirects get applied.

          + -
          owner node

          element

          media
          +
          Rectangle state
          -

          The media attribute of element.

          +

          Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number.

          -

          This is a reference to the (possibly absent at this time) attribute, rather - than a copy of the attribute's current value. The CSSOM specification defines what happens - when the attribute is dynamically set, changed, or removed.

          +

          The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose + bottom right corner is given by the coordinate (x2, + y2), those coordinates being interpreted as CSS pixels + from the top left corner of the image.

          -
          title
          +
          -

          The title attribute of element.

          +

          For historical reasons, the coordinates must be interpreted relative to the + displayed image after any stretching caused by the CSS 'width' and 'height' properties + (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the + aforementioned CSS properties).

          -

          This is similarly a reference to the attribute, rather than a copy of the - attribute's current value.

          +

          Browser zoom features and transforms applied using CSS or SVG do not affect the + coordinates.

          -
          alternate flag

          Set if the link is an alternative stylesheet; unset otherwise.

          origin-clean flag

          Set if the resource is CORS-same-origin; unset otherwise.

          parent CSS style sheet
          owner CSS rule

          null

          disabled flag

          Left at its default value.

          CSS rules

          Left uninitialized.

        +
      -

      The CSS environment encoding is the result of running the following steps: [CSSSYNTAX]

      +

      Pointing device interaction with an image associated with a set of layered shapes per the above + algorithm must result in the relevant user interaction events being first fired to the top-most + shape covering the point that the pointing device indicated, if any, or to the image element + itself, if there is no shape covering that point. User agents may also allow individual + area elements representing hyperlinks to be selected + and activated (e.g. using a keyboard).

      -

      1. If the element has a charset attribute, get an encoding from that attribute's value. If that - succeeds, return the resulting encoding and abort these steps. [ENCODING]

      2. Otherwise, return the document's character encoding. [DOM]

      +

      Because a map element (and its area elements) can be + associated with multiple img and object elements, it is possible for an + area element to correspond to multiple focusable areas + of the document.

      -
    +

    Image maps are live; if the DOM is mutated, then the user agent must act as if it + had rerun the algorithms for image maps.

    - +

    4.8.18 MathML

    -

    The tag keyword may be used with a and - area elements. This keyword creates a hyperlink.

    +

    The math element from the MathML namespace + falls into the embedded content, phrasing content, and flow + content categories for the purposes of the content models in this specification.

    -

    The tag keyword indicates that the tag that the - referenced document represents applies to the current document.

    +

    This specification refers to several specific MathML elements, in particular: + annotation-xml, + merror, + mi, + mn, + mo, + ms, and + mtext. +

    -

    Since it indicates that the tag applies to the current document, it would - be inappropriate to use this keyword in the markup of a tag cloud, which - lists the popular tags across a set of pages.

    +

    When the MathML annotation-xml element contains + elements from the HTML namespace, such elements must all be flow + content. [MATHML]

    -
    +

    When the MathML token elements (mi, mo, mn, ms, + and mtext) are descendants of HTML elements, they may contain + phrasing content elements from the HTML namespace. [MATHML]

    + -

    This document is about some gems, and so it is tagged with "http://en.wikipedia.org/wiki/Gemstone" to unambiguously categorise it as applying - to the "jewel" kind of gems, and not to, say, the towns in the US, the Ruby package format, or - the Swiss locomotive class:

    + - 
    <!DOCTYPE HTML>
-<html>
- <head>
-  <title>My Precious</title>
- </head>
- <body>
-  <header><h1>My precious</h1> <p>Summer 2012</p></header>
-  <p>Recently I managed to dispose of a red gem that had been
-  bothering me. I now have a much nicer blue sapphire.</p>
-  <p>The red gem had been found in a bauxite stone while I was digging
-  out the office level, but nobody was willing to haul it away. The
-  same red gem stayed there for literally years.</p>
-  <footer>
-   Tags: <a rel=tag href="http://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
-  </footer>
- </body>
-</html>
    + -
    +

    User agents must handle text other than inter-element whitespace found in MathML + elements whose content models do not allow straight text by pretending for the purposes of MathML + content models, layout, and rendering that that text is actually wrapped in an mtext element in the MathML namespace. (Such text is not, + however, conforming.)

    + +

    User agents must act as if any MathML element whose contents does not match the element's + content model was replaced, for the purposes of MathML layout and rendering, by an merror element in the MathML namespace containing some + appropriate error message.

    + +

    To enable authors to use MathML tools that only accept MathML in its XML form, interactive HTML + user agents are encouraged to provide a way to export any MathML fragment as an XML + namespace-well-formed XML fragment.

    + + + +

    The semantics of MathML elements are defined by the MathML specification and other + applicable specifications. [MATHML]

    -

    In this document, there are two articles. The "tag" - link, however, applies to the whole page (and would do so wherever it was placed, including if it - was within the article elements).

    +

    Here is an example of the use of MathML in an HTML document:

    - 
    <!DOCTYPE HTML>
+   
    <!DOCTYPE html>
 <html>
  <head>
-  <title>Gem 4/4</title>
+  <title>The quadratic formula</title>
  </head>
  <body>
-  <article>
-   <h1>801: Steinbock</h1>
-   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
-  </article>
-  <article>
-   <h1>802: Murmeltier</h1>
-   <figure>
-    <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
-         alt="The 802 was red with pantographs and tall vents on the side.">
-    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
-   </figure>
-   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
-  </article>
-  <p class="topic"><a rel=tag href="http://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
+  <h1>The quadratic formula</h1>
+  <p>
+   <math>
+    <mi>x</mi>
+    <mo>=</mo>
+    <mfrac>
+     <mrow>
+      <mo form="prefix">−</mo> <mi>b</mi>
+      <mo>±</mo>
+      <msqrt>
+       <msup> <mi>b</mi> <mn>2</mn> </msup>
+       <mo>−</mo>
+       <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
+      </msqrt>
+     </mrow>
+     <mrow>
+      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
+     </mrow>
+    </mfrac>
+   </math>
+  </p>
  </body>
 </html>
    
 
@@ -27083,135 +27129,84 @@ 
 
 
 
-  
-
-  
    Some documents form part of a sequence of documents.
    
-
-  
    A sequence of documents is one where each document can have a previous sibling and a
-  next sibling. A document with no previous sibling is the start of its sequence, a
-  document with no next sibling is the end of its sequence.
    
-
-  
    A document may be part of multiple sequences.
    
-
-
-  
-
-  
    The next keyword may be used with link,
-  a, and area elements. This keyword creates a hyperlink.
    
-
-  
    The next keyword indicates that the document is part of a
-  sequence, and that the link is leading to the document that is the next logical document in the
-  sequence.
    
-
-
-  
-
-  
    The prev keyword may be used with link,
-  a, and area elements. This keyword creates a hyperlink.
    
+  
    4.8.19 SVG
    
 
-  
    The prev keyword indicates that the document is part of a
-  sequence, and that the link is leading to the document that is the previous logical document in
-  the sequence.
    
+  
    The svg element from the SVG namespace falls into the
+  embedded content, phrasing content, and flow content
+  categories for the purposes of the content models in this specification.
    
 
   
 
-  
    Synonyms: For historical reasons, user agents must also treat the keyword
-  "previous" like the prev keyword.
    
+  
    To enable authors to use SVG tools that only accept SVG in its XML form, interactive HTML user
+  agents are encouraged to provide a way to export any SVG fragment as an XML namespace-well-formed
+  XML fragment.
    
 
   
 
+  
    When the SVG foreignObject element contains elements from the HTML
+  namespace, such elements must all be flow content. [SVG]
    
 
-  
-
-  
    Extensions to the predefined set of link types may be
-  registered in the microformats
-  wiki existing-rel-values page. [MFREL]
    
-
-  
    Anyone is free to edit the microformats wiki existing-rel-values page at
-  any time to add a type. Extension types must be specified with the following information:
    
-
-  
    Keyword
    
-
-    
    The actual value being defined. The value should not be confusingly similar to any other
-    defined value (e.g. differing only in case).
    
-
-    
    If the value contains a U+003A COLON character (:), it must also be an absolute
-    URL.
    
-
-   
    Effect on... link
    
-
-    
    One of the following:
    
-
-    
    Not allowed
    The keyword must not be specified on link elements.
    Hyperlink
    The keyword may be specified on a link element; it creates a
-     hyperlink.
    External Resource
    The keyword may be specified on a link element; it creates an external
-     resource link.
    
+  
    The content model for title elements in the SVG namespace
+  inside HTML documents is phrasing content. (This further constrains the
+  requirements given in the SVG specification.)
    
 
-   
    Effect on... a and area
    
+  
    The semantics of SVG elements are defined by the SVG specification and other applicable
+  specifications. [SVG]
    
 
-    
    One of the following:
    
 
-    
    Not allowed
    The keyword must not be specified on a and area elements.
    Hyperlink
    The keyword may be specified on a and area elements; it creates a
-     hyperlink.
    External Resource
    The keyword may be specified on a and area elements; it creates
-     an external resource link.
    Hyperlink Annotation
    The keyword may be specified on a and area elements; it annotates other hyperlinks
-     created by the element.
    
 
-   
    Brief description
    A short non-normative description of what the keyword's meaning is.
    Specification
    A link to a more detailed description of the keyword's semantics and requirements. It
-   could be another page on the Wiki, or a link to an external page.
    Synonyms
    A list of other keyword values that have exactly the same processing requirements. Authors
-   should not use the values defined to be synonyms, they are only intended to allow user agents to
-   support legacy content. Anyone may remove synonyms that are not used in practice; only names that
-   need to be processed as synonyms for compatibility with legacy content are to be registered in
-   this way.
    Status
    
+  
    4.8.20 Dimension attributes
    
 
-    
    One of the following:
    
+  
    Author requirements: The width and height attributes on img, iframe,
+  embed, object, video, and, when their type attribute is in the Image Button state, input elements may be
+  specified to give the dimensions of the visual content of the element (the width and height
+  respectively, relative to the nominal direction of the output medium), in CSS pixels. The
+  attributes, if specified, must have values that are valid non-negative integers.
    
 
-    
    Proposed
    The keyword has not received wide peer review and approval. Someone has proposed it and is,
-     or soon will be, using it.
    Ratified
    The keyword has received wide peer review and approval. It has a specification that
-     unambiguously defines how to handle pages that use the keyword, including when they use it in
-     incorrect ways.
    Discontinued
    The keyword has received wide peer review and it has been found wanting. Existing pages are
-     using this keyword, but new pages should avoid it. The "brief description" and "specification"
-     entries will give details of what authors should use instead, if anything.
    
+  
    The specified dimensions given may differ from the dimensions specified in the resource itself,
+  since the resource may have a resolution that differs from the CSS pixel resolution. (On screens,
+  CSS pixels have a resolution of 96ppi, but in general the CSS pixel resolution depends on the
+  reading distance.) If both attributes are specified, then one of the following statements must be
+  true:
    
 
-    
    If a keyword is found to be redundant with existing values, it should be removed and listed
-    as a synonym for the existing value.
    
+  
    • specified width - 0.5 ≤
+             specified height * target ratio ≤
+             specified width + 0.5
    • specified height - 0.5 ≤
+             specified width / target ratio ≤
+             specified height + 0.5
    • specified height = specified width = 0
    
 
-    
    If a keyword is registered in the "proposed" state for a period of a month or more without
-    being used or specified, then it may be removed from the registry.
    
+  
    The target ratio is the ratio of the intrinsic width to the intrinsic
+  height in the resource. The specified width and specified
+  height are the values of the width and height attributes respectively.
    
 
-    
    If a keyword is added with the "proposed" status and found to be redundant with existing
-    values, it should be removed and listed as a synonym for the existing value. If a keyword is
-    added with the "proposed" status and found to be harmful, then it should be changed to
-    "discontinued" status.
    
+  
    The two attributes must be omitted if the resource in question does not have both an intrinsic
+  width and an intrinsic height.
    
 
-    
    Anyone can change the status at any time, but should only do so in accordance with the
-    definitions above.
    
+  
    If the two attributes are both zero, it indicates that the element is not intended for the user
+  (e.g. it might be a part of a service to count page views).
    
 
-   
    
+  
    The dimension attributes are not intended to be used to stretch the image.
    
 
   
 
-  
    Conformance checkers must use the information given on the microformats wiki
-  existing-rel-values page to establish if a value is allowed or not: values defined in this
-  specification or marked as "proposed" or "ratified" must be accepted when used on the elements for
-  which they apply as described in the "Effect on..." field, whereas values marked as "discontinued"
-  or not listed in either this specification or on the aforementioned page must be rejected as
-  invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid
-  the use of unreliable network connectivity).
    
+  
    User agent requirements: User agents are expected to use these attributes as hints for the rendering.
    
 
-  
    When an author uses a new type not defined by either this specification or the Wiki page,
-  conformance checkers should offer to add the value to the Wiki, with the details described above,
-  with the "proposed" status.
    
+  
    The width and height IDL attributes on the iframe,
+  embed, object, and video elements must reflect
+  the respective content attributes of the same name.
    
 
-  
+  
    For iframe, embed, and object the IDL
+  attributes are DOMString; for video the IDL attributes are unsigned long.
    
 
-  
    Types defined as extensions in the microformats
-  wiki existing-rel-values page with the status "proposed" or "ratified" may be used with the
-  rel attribute on link, a, and area
-  elements in accordance to the "Effect on..." field. [MFREL]
    
+  
    The corresponding IDL attributes for img and
+  input elements are defined in those respective elements'
+  sections, as they are slightly more specific to those elements' other behaviors.
    
 
+  
 
 
 
-  
    4.9 Tabular data
    
+  
    4.9 Tabular data
    
 
 
   
    4.9.1 The table element
    
@@ -39618,7 +39613,7 @@ 
    4.10.19.6 Form submission
    
   attribute. The formTarget IDL attribute must
   reflect the formtarget content attribute.
 
-  
+  
    
 
 
   
    4.10.19.6.1 Autofocusing a form control: the autofocus attribute
    
@@ -68322,7 +68317,7 @@ 
    10.2.1.1 The EventHandler onoffline;
            attribute EventHandler ononline;
 
-  // also has obsolete members
+  // also has additional members in a partial interface
 };

    The self attribute must return the @@ -69002,7 +68997,7 @@

    10.2.6.4 Shared workers and

    10.3 APIs available to workers

    [Exposed=Worker]
-partial interface WorkerGlobalScope {
+partial interface WorkerGlobalScope { // not obsolete
   void importScripts(DOMString... urls);
   readonly attribute WorkerNavigator navigator;
 };
@@ -77296,7 +77291,7 @@ 
    14.3.8 Lists
    
   sufficient hooks for this purpose.
    
 
 
-  
    14.3.9 Tables
    
+  
    14.3.9 Tables
    
 
   
    @namespace url(http://www.w3.org/1999/xhtml);
 
@@ -77357,7 +77352,7 @@ 
    14.3.9 Tables
    
   border-color: black;
 }
    
 
-  
    The following rules are also expected to apply, as presentational hints:
    
+  
    The following rules are also expected to apply, as presentational hints:
    
 
   
    @namespace url(http://www.w3.org/1999/xhtml);
 
@@ -77410,7 +77405,7 @@ 
    14.3.9 Tables
    
   border-style: hidden;
   border-collapse: collapse;
 }
-table[border] { border-style: outset; } /* only if border is not equivalent to zero */
+table[border] { border-style: outset; } /* only if border is not equivalent to zero */
 table[frame=void i] { border-style: hidden; }
 table[frame=above i] { border-style: outset hidden hidden hidden; }
 table[frame=below i] { border-style: hidden hidden outset hidden; }
@@ -77424,7 +77419,7 @@ 
    14.3.9 Tables
    
 table[border] > thead > tr > td, table[border] > thead > tr > th,
 table[border] > tbody > tr > td, table[border] > tbody > tr > th,
 table[border] > tfoot > tr > td, table[border] > tfoot > tr > th {
-  /* only if border is not equivalent to zero */
+  /* only if border is not equivalent to zero */
   border-width: 1px;
   border-style: inset;
 }
@@ -77484,7 +77479,7 @@ 
    14.3.9 Tables
    
 
 
 
-  
    In quirks mode, the following rules are also expected to apply:
    
+  
    In quirks mode, the following rules are also expected to apply:
    
 
   
    @namespace url(http://www.w3.org/1999/xhtml);
 
@@ -77500,136 +77495,136 @@ 
    14.3.9 Tables
    
 
   
    
 
-  
    For the purposes of the CSS table model, the col element is expected to be treated
-  as if it was present as many times as its span attribute specifies.
    
+  
    For the purposes of the CSS table model, the col element is expected to be treated
+  as if it was present as many times as its span attribute specifies.
    
 
-  
    For the purposes of the CSS table model, the colgroup element, if it contains no
-  col element, is expected to be treated as if it had as many such children as its
-  span attribute specifies.
    
+  
    For the purposes of the CSS table model, the colgroup element, if it contains no
+  col element, is expected to be treated as if it had as many such children as its
+  span attribute specifies.
    
 
-  
    For the purposes of the CSS table model, the colspan and
-  rowspan attributes on td and th
-  elements are expected to provide the
+  
    For the purposes of the CSS table model, the colspan and
+  rowspan attributes on td and th
+  elements are expected to provide the
   special knowledge regarding cells spanning rows and columns.
    
 
-  
    In HTML documents, the user agent is expected to force the 'display' property of
-  form elements that are children of table, thead,
-  tbody, tfoot, or tr elements to compute to 'none',
+  
    In HTML documents, the user agent is expected to force the 'display' property of
+  form elements that are children of table, thead,
+  tbody, tfoot, or tr elements to compute to 'none',
   irrespective of CSS rules.
    
 
   
    
 
-  
    The table element's cellspacing
-  attribute maps to the pixel length property 'border-spacing' on the element.
    
+  
    The table element's cellspacing
+  attribute maps to the pixel length property 'border-spacing' on the element.
    
 
-  
    The table element's cellpadding
-  attribute maps to the pixel length
+  
    The table element's cellpadding
+  attribute maps to the pixel length
   properties 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' of any
-  td and th elements that have corresponding cells in the table corresponding to
-  the table element.
    
+  td and th elements that have corresponding cells in the table corresponding to
+  the table element.
    
 
-  
    The table element's hspace attribute maps to the dimension properties 'margin-left' and
-  'margin-right' on the table element.
    
+  
    The table element's hspace attribute maps to the dimension properties 'margin-left' and
+  'margin-right' on the table element.
    
 
-  
    The table element's vspace attribute maps to the dimension properties 'margin-top' and
-  'margin-bottom' on the table element.
    
+  
    The table element's vspace attribute maps to the dimension properties 'margin-top' and
+  'margin-bottom' on the table element.
    
 
-  
    The table element's height attribute
-  maps to the dimension property 'height' on the table element.
    
+  
    The table element's height attribute
+  maps to the dimension property 'height' on the table element.
    
 
-  
    The table element's width attribute
-  maps to the dimension property 'width' on the table element.
    
+  
    The table element's width attribute
+  maps to the dimension property 'width' on the table element.
    
 
-  
    The col element's width attribute maps
-  to the dimension property 'width' on the col element.
    
+  
    The col element's width attribute maps
+  to the dimension property 'width' on the col element.
    
 
-  
    The tr element's height attribute maps
-  to the dimension property 'height' on the tr element.
    
+  
    The tr element's height attribute maps
+  to the dimension property 'height' on the tr element.
    
 
-  
    The td and th elements' height
-  attributes map to the dimension property
+  
    The td and th elements' height
+  attributes map to the dimension property
   'height' on the element.
    
 
-  
    The td and th elements' width
-  attributes map to the dimension property
+  
    The td and th elements' width
+  attributes map to the dimension property
   'width' on the element.
    
 
   
    
 
-  
    The caption element unless specified otherwise below, and the thead,
-  tbody, tfoot, tr, td, and th
-  elements when they have an align attribute whose value is an ASCII
+  
    The caption element unless specified otherwise below, and the thead,
+  tbody, tfoot, tr, td, and th
+  elements when they have an align attribute whose value is an ASCII
   case-insensitive match for either the string "center" or the string
   "middle", are expected to center text within themselves, as if they had
-  their 'text-align' property set to 'center' in a presentational hint, and to align descendants to the center.
    
+  their 'text-align' property set to 'center' in a presentational hint, and to align descendants to the center.
    
 
-  
    The caption, thead, tbody, tfoot,
-  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
+  
    The caption, thead, tbody, tfoot,
+  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
   the string "left", are expected to left-align text within themselves, as if
-  they had their 'text-align' property set to 'left' in a presentational hint, and to align descendants to the left.
    
+  they had their 'text-align' property set to 'left' in a presentational hint, and to align descendants to the left.
    
 
-  
    The caption, thead, tbody, tfoot,
-  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
+  
    The caption, thead, tbody, tfoot,
+  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
   the string "right", are expected to right-align text within themselves, as
-  if they had their 'text-align' property set to 'right' in a presentational hint, and to align descendants to the right.
    
+  if they had their 'text-align' property set to 'right' in a presentational hint, and to align descendants to the right.
    
 
-  
    The caption, thead, tbody, tfoot,
-  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
+  
    The caption, thead, tbody, tfoot,
+  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
   the string "justify", are expected to full-justify text within themselves,
-  as if they had their 'text-align' property set to 'justify' in a presentational hint, and to align descendants to the left.
    
+  as if they had their 'text-align' property set to 'justify' in a presentational hint, and to align descendants to the left.
    
 
   
    User agents are expected to have a rule in their user agent stylesheet that matches
-  th elements that have a parent node whose computed value for the 'text-align'
+  th elements that have a parent node whose computed value for the 'text-align'
   property is its initial value, whose declaration block consists of just a single declaration that
   sets the 'text-align' property to the value 'center'.
     
 
   
    
 
-  
    When a table, thead, tbody, tfoot,
-  tr, td, or th element has a background attribute set to a non-empty value, the new value is
-  expected to be resolved relative to the element, and if this is
-  successful, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-image' property to the
-  resulting absolute URL.
    
+  
    When a table, thead, tbody, tfoot,
+  tr, td, or th element has a background attribute set to a non-empty value, the new value is
+  expected to be resolved relative to the element, and if this is
+  successful, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-image' property to the
+  resulting absolute URL.
    
 
-  
    When a table, thead, tbody, tfoot,
-  tr, td, or th element has a bgcolor
-  attribute set, the new value is expected to be parsed using the rules for parsing a legacy
+  
    When a table, thead, tbody, tfoot,
+  tr, td, or th element has a bgcolor
+  attribute set, the new value is expected to be parsed using the rules for parsing a legacy
   colour value, and if that does not return an error, the user agent is expected to treat the
-  attribute as a presentational hint setting the element's
+  attribute as a presentational hint setting the element's
   'background-color' property to the resulting colour.
    
 
-  
    When a table element has a bordercolor
-  attribute, its value is expected to be parsed using the rules for parsing a legacy colour
+  
    When a table element has a bordercolor
+  attribute, its value is expected to be parsed using the rules for parsing a legacy colour
   value, and if that does not return an error, the user agent is expected to treat the
-  attribute as a presentational hint setting the element's
+  attribute as a presentational hint setting the element's
   'border-top-color', 'border-right-color', 'border-bottom-color', and 'border-right-color'
   properties to the resulting colour.
    
 
   
    
 
-  
    The table element's border attribute maps to the pixel length properties
+  
    The table element's border attribute maps to the pixel length properties
   'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' on the
-  element. If the attribute is present but parsing the attribute's value using the rules for
+  element. If the attribute is present but parsing the attribute's value using the rules for
   parsing non-negative integers generates an error, a default value of 1px is expected to be
   used for that property instead.
    
 
   
    Rules marked "only if border is not equivalent to zero"
-  in the CSS block above is expected to only be applied if the border attribute mentioned in the selectors for the rule is not
-  only present but, when parsed using the rules for parsing non-negative integers, is
+  in the CSS block above is expected to only be applied if the border attribute mentioned in the selectors for the rule is not
+  only present but, when parsed using the rules for parsing non-negative integers, is
   also found to have a value other than zero or to generate an error.
    
 
   
    
 
-  
    In quirks mode, a td element or a th element that has a
-  nowrap attribute but also has a width attribute whose value, when parsed using the rules for
+  
    In quirks mode, a td element or a th element that has a
+  nowrap attribute but also has a width attribute whose value, when parsed using the rules for
   parsing dimension values, is found to be a length (not an error or a number classified as a
-  percentage), is expected to have a presentational hint
+  percentage), is expected to have a presentational hint
   setting the element's 'white-space' property to 'normal', overriding the rule in the CSS block
   above that sets it to 'nowrap'.
      
 
   
    
 
-  
    User agents are expected to render sorting interface th elements in such a manner as to indicate that
+  
    User agents are expected to render sorting interface th elements in such a manner as to indicate that
   activating the elements will cause the table to be sorted.
    
 
 
@@ -77816,15 +77811,15 @@ 
    14.4.1 Embedded content
    
   element itself, and is expected to be centered in the video element.
    
 
   
    Any subtitles or captions are expected to be overlayed directly on top of their
-  video element, as defined by the relevant rendering rules; for WebVTT,
-  those are the rules for updating the display of WebVTT text tracks. [WEBVTT]
    
+  video element, as defined by the relevant rendering rules; for WebVTT, those are the
+  rules for updating the display of WebVTT text tracks. [WEBVTT]
    
 
   
    When the user agent starts exposing a user
   interface for a video element, the user agent should run the rules for
   updating the text track rendering of each of the text
   tracks in the video element's list of text tracks that are showing and whose text track kind is one of subtitles or captions (e.g., for text
-  tracks based on WebVTT, the rules for updating the display of WebVTT
-  text tracks). [WEBVTT]
    
+  tracks based on WebVTT, the rules for updating the display of WebVTT text
+  tracks). [WEBVTT]
    
 
   
    Resizing video and canvas elements does not interrupt
   video playback or clear the canvas.
    
@@ -83507,7 +83502,7 @@ 
    References
    
    Mozilla Foundation.
    [RFC1034]
    Domain Names - Concepts and Facilities, P. Mockapetris. IETF, November 1987.
    [RFC1123]
    Requirements for Internet Hosts -- Application and Support, R. Braden. IETF, October 1989.
    [RFC1345]
    (Non-normative) Character Mnemonics and Character Sets, K. Simonsen. IETF.
    [RFC1468]
    (Non-normative) Japanese Character Encoding for Internet Messages, J. Murai, M. Crispin, E. van der Poel. IETF.
    [RFC1554]
    (Non-normative) ISO-2022-JP-2: Multilingual Extension of ISO-2022-JP, M. Ohta, K. Handa. IETF.
    [RFC1557]
    (Non-normative) Korean Character Encoding for Internet Messages, U. Choi, K. Chon, H. Park. IETF.
    [RFC1842]
    (Non-normative) ASCII Printable Characters-Based Chinese Character Encoding for Internet Messages, Y. Wei, Y. Zhang, J. Li, J. Ding, Y. Jiang. IETF.
    [RFC1922]
    (Non-normative) Chinese Character Encoding for Internet Messages, HF. Zhu, DY. Hu, ZG. Wang, TC. Kao, WCH. Chang, M. Crispin. IETF.
    [RFC2046]
    Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types, N. Freed, N.  Borenstein. IETF.
    [RFC2119]
    Key words for use in RFCs to Indicate Requirement Levels, S. Bradner. IETF.
    [RFC2237]
    (Non-normative) Japanese Character Encoding for Internet Messages, K. Tamaru. IETF.
    [RFC2313]
    PKCS #1: RSA Encryption, B. Kaliski. IETF.
    [RFC2318]
    The text/css Media Type, H. Lie, B. Bos, C. Lilley. IETF.
    [RFC2388]
    Returning Values from Forms: multipart/form-data, L. Masinter. IETF.
    [RFC2397]
    The "data" URL scheme, L. Masinter. IETF.
    [RFC2445]
    Internet Calendaring and Scheduling Core Object Specification (iCalendar), F. Dawson, D. Stenerson. IETF.
    [RFC2483]
    URI Resolution Services Necessary for URN Resolution, M. Mealling, R. Daniel. IETF.
    [RFC3676]
    The Text/Plain Format and DelSp Parameters, R. Gellens. IETF.
    [RFC3023]
    XML Media Types, M. Murata, S. St. Laurent, D. Kohn. IETF.
    [RFC3279]
    Algorithms and Identifiers for the Internet X.509 Public Key Infrastructure Certificate and Certificate Revocation List (CRL) Profile, W. Polk, R. Housley, L. Bassham. IETF.
    [RFC3490]
    Internationalizing Domain Names in Applications (IDNA), P. Faltstrom, P. Hoffman, A. Costello. IETF.
    [RFC3864]
    Registration Procedures for Message Header Fields, G. Klyne, M. Nottingham, J. Mogul. IETF.
    [RFC4281]
    The Codecs Parameter for "Bucket" Media Types, R. Gellens, D. Singer, P. Frojdh. IETF.
    [RFC4329]
    (Non-normative) Scripting Media Types, B. Höhrmann. IETF.
    [RFC4395]
    Guidelines and Registration Procedures for New URI Schemes, T. Hansen, T. Hardie, L. Masinter. IETF.
    [RFC4648]
    The Base16, Base32, and Base64 Data Encodings, S. Josefsson. IETF.
    [RFC5280]
    Internet X.509 Public Key Infrastructure Certificate and Certificate Revocation List (CRL) Profile, D. Cooper, S. Santesson, S. Farrell, S. Boeyen, R. Housley, W. Polk. IETF.
    [RFC5322]
    Internet Message Format, P. Resnick. IETF.
    [SMS]
    (Non-normative) URI Scheme for Global System for Mobile Communications (GSM) Short Message Service (SMS), E. Wilde, A. Vaha-Sipila. IETF.
    [RFC6266]
    Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP), J. Reschke. IETF.
    [RFC6350]
    vCard Format Specification, S. Perreault. IETF.
    [SCSU]
    (Non-normative) UTR #6: A Standard Compression Scheme For Unicode, M. Wolf, K. Whistler, C. Wicksteed, M. Davis, A. Freytag, M. Scherer. Unicode Consortium.
    [SELECTORS]
    Selectors, E. Etemad, T. Çelik, D. Glazman, I. Hickson, P. Linss, J. Williams. W3C.
    [SRGB]
    IEC 61966-2-1: Multimedia systems and equipment — Colour measurement and management — Part 2-1: Colour management — Default RGB colour space — sRGB. IEC.
    [SVG]
    Scalable Vector Graphics (SVG) Tiny 1.2 Specification, O. Andersson, R. Berjon, E. Dahlström, A. Emmons, J. Ferraiolo, A. Grasso, V. Hardy, S. Hayman, D. Jackson, C. Lilley, C. McCormack, A. Neumann, C. Northway, A. Quint, N. Ramani, D. Schepers, A. Shellshear. W3C.
    [TOR]
    (Non-normative) Tor.
    [TOUCH]
    Touch Events, D. Schepers, S. Moon, M. Brubeck, A. Barstow. W3C.
    [TZDATABASE]
    (Non-normative) Time Zone Database. IANA.
    [UAAG]
    (Non-normative) User Agent Accessibility Guidelines (UAAG) 2.0, J. Allan, K. Ford, J. Richards, J. Spellman. W3C.
    [UCA]
    UTR #10: Unicode Collation Algorithm, M. Davis, K. Whistler. Unicode Consortium.
    [UNICODE]
    The Unicode Standard. Unicode Consortium.
    [UNIVCHARDET]
    (Non-normative) A composite approach to language/encoding detection, S. Li, K. Momoi. Netscape. In Proceedings of the 19th International Unicode Conference.
    [URL]
    URL, A. van Kesteren. WHATWG.
    [URN]
    URN Syntax, R. Moats. IETF.
    [UTF7]
    (Non-normative) UTF-7: A Mail-Safe Transformation Format of Unicode, D. Goldsmith, M. Davis. IETF.
    [UTF8DET]
    (Non-normative) Multilingual form encoding, M. Dürst. W3C.
    [UTR36]
    (Non-normative) UTR #36: Unicode Security Considerations, M. Davis, M. Suignard. Unicode Consortium.
    [WCAG]
    (Non-normative) Web Content Accessibility Guidelines (WCAG) 2.0, B. Caldwell, M. Cooper, L. Reid, G. Vanderheiden. W3C.
    [WEBGL]
    WebGL Specification, D. Jackson. Khronos Group.
    [WEBIDL]
    Web IDL, C. McCormack. W3C.
    Web Linking, M. Nottingham. IETF.
    [WEBMCG]
    WebM Container Guidelines. The WebM Project.
    [WEBVTT]
    WebVTT, I. Hickson. W3C.
    [WHATWGWIKI]
    The WHATWG Wiki. WHATWG.
    [WSP]
    The WebSocket protocol, I. Fette, A. Melnikov. IETF.
    [X121]
    Recommendation X.121 — International Numbering Plan for Public Data Networks, CCITT Blue Book, Fascicle VIII.3, pp. 317-332.
    [X690]
    Recommendation X.690 — Information Technology — ASN.1 Encoding Rules — Specification of Basic Encoding Rules (BER), Canonical Encoding Rules (CER), and Distinguished Encoding Rules (DER). International Telecommunication Union.
    [XFN]
    XFN 1.1 profile, T. Çelik, M. Mullenweg, E. Meyer. GMPG.
    [XHR]
    XMLHttpRequest, A. van Kesteren. WHATWG.
    [XML]
    Extensible Markup Language, T. Bray, J. Paoli, C. Sperberg-McQueen, E. Maler, F. Yergeau. W3C.
    [XMLBASE]
    XML Base, J. Marsh, R. Tobin. W3C.
    [XMLNS]
    Namespaces in XML, T. Bray, D. Hollander, A. Layman, R. Tobin. W3C.
    [XMLSSPI]
    Associating Style Sheets with XML documents, J. Clark, S. Pieters, H. Thompson. W3C.
    [XPATH10]
    XML Path Language (XPath) Version 1.0, J. Clark, S. DeRose. W3C.
    [XSLT10]
    (Non-normative) XSL Transformations (XSLT) Version 1.0, J. Clark. W3C.
 
 
-  
    Acknowledgments
     
+  
    Acknowledgements
     
 
   
    Thanks to Tim Berners-Lee for inventing HTML, without which none of this would exist.
    
 
@@ -84220,10 +84215,10 @@ 
    Acknowledgments
    
   lists.
 
   
    Special thanks to Richard Williamson for creating the first implementation of
-  canvas in Safari, from which the canvas feature was designed.
    
+  canvas in Safari, from which the canvas feature was designed.
    
 
   
    Special thanks also to the Microsoft employees who first implemented the event-based
-  drag-and-drop mechanism, contenteditable, and other
+  drag-and-drop mechanism, contenteditable, and other
   features first widely deployed by the Windows Internet Explorer browser.
    
 
   
    Special thanks and $10,000 to David Hyatt who came up with a broken implementation
@@ -84243,7 +84238,7 @@ 
    Acknowledgments
    
   
    Thanks to Igor Zhbanov for generating PDF versions of the specification.
    
 
   
    This specification is written by Ian Hickson (Google, ian@hixie.ch), with contributions from
-  Simon Pieters (Opera, simonp@opera.com) in the img section.
    
+  Simon Pieters (Opera, simonp@opera.com) in the img section.
    
 
   
   
    
@@ -84287,3 +84282,4 @@ 
    Acknowledgments
    
 
 
 
+
diff --git a/index b/index
index 64e23c77334..8a7904b4035 100644
--- a/index
+++ b/index
@@ -290,8 +290,8 @@
   
   
 
   
    
@@ -326,15 +326,13 @@
 
   
    Table of contents
    
   
    1. 1 Introduction
      1. 1.1 Where does this specification fit?
      2. 1.2 Is this HTML5?
      3. 1.3 Background
      4. 1.4 Audience
      5. 1.5 Scope
      6. 1.6 History
      7. 1.7 Design notes
        1. 1.7.1 Serializability of script execution
        2. 1.7.2 Compliance with other specifications
        3. 1.7.3 Extensibility
      8. 1.8 HTML vs XHTML
      9. 1.9 Structure of this specification
        1. 1.9.1 How to read this specification
        2. 1.9.2 Typographic conventions
      10. 1.10 Privacy concerns
      11. 1.11 A quick introduction to HTML
        1. 1.11.1 Writing secure applications with HTML
        2. 1.11.2 Common pitfalls to avoid when using the scripting APIs
        3. 1.11.3 How to catch mistakes when writing HTML: validators and conformance checkers
      12. 1.12 Conformance requirements for authors
        1. 1.12.1 Presentational markup
        2. 1.12.2 Syntax errors
        3. 1.12.3 Restrictions on content models and on attribute values
      13. 1.13 Suggested reading
    2. 2 Common infrastructure
      1. 2.1 Terminology
        1. 2.1.1 Resources
        2. 2.1.2 XML
        3. 2.1.3 DOM trees
        4. 2.1.4 Scripting
        5. 2.1.5 Plugins
        6. 2.1.6 Character encodings
      2. 2.2 Conformance requirements
        1. 2.2.1 Conformance classes
        2. 2.2.2 Dependencies
        3. 2.2.3 Extensibility
        4. 2.2.4 Interactions with XPath and XSLT
      3. 2.3 Case-sensitivity and string comparison
      4. 2.4 Common microsyntaxes
        1. 2.4.1 Common parser idioms
        2. 2.4.2 Boolean attributes
        3. 2.4.3 Keywords and enumerated attributes
        4. 2.4.4 Numbers
          1. 2.4.4.1 Signed integers
          2. 2.4.4.2 Non-negative integers
          3. 2.4.4.3 Floating-point numbers
          4. 2.4.4.4 Percentages and lengths
          5. 2.4.4.5 Lists of integers
          6. 2.4.4.6 Lists of dimensions
        5. 2.4.5 Dates and times
          1. 2.4.5.1 Months
          2. 2.4.5.2 Dates
          3. 2.4.5.3 Yearless dates
          4. 2.4.5.4 Times
          5. 2.4.5.5 Local dates and times
          6. 2.4.5.6 Time zones
          7. 2.4.5.7 Global dates and times
          8. 2.4.5.8 Weeks
          9. 2.4.5.9 Durations
          10. 2.4.5.10 Vaguer moments in time
        6. 2.4.6 Colours
        7. 2.4.7 Space-separated tokens
        8. 2.4.8 Comma-separated tokens
        9. 2.4.9 References
        10. 2.4.10 Media queries
      5. 2.5 URLs
        1. 2.5.1 Terminology
        2. 2.5.2 Resolving URLs
        3. 2.5.3 Dynamic changes to base URLs
      6. 2.6 Fetching resources
        1. 2.6.1 Terminology
        2. 2.6.2 Processing model
        3. 2.6.3 Encrypted HTTP and related security concerns
        4. 2.6.4 Determining the type of a resource
        5. 2.6.5 Extracting character encodings from meta elements
        6. 2.6.6 CORS settings attributes
        7. 2.6.7 CORS-enabled fetch
      7. 2.7 Common DOM interfaces
        1. 2.7.1 Reflecting content attributes in IDL attributes
        2. 2.7.2 Collections
          1. 2.7.2.1 HTMLAllCollection
          2. 2.7.2.2 HTMLFormControlsCollection
          3. 2.7.2.3 HTMLOptionsCollection
          4. 2.7.2.4 HTMLPropertiesCollection
        3. 2.7.3 DOMStringMap
        4. 2.7.4 DOMElementMap
        5. 2.7.5 Transferable objects
        6. 2.7.6 Safe passing of structured data
        7. 2.7.7 Callbacks
        8. 2.7.8 Garbage collection
      8. 2.8 Namespaces
    3. 3 Semantics, structure, and APIs of HTML documents
      1. 3.1 Documents
        1. 3.1.1 The Document object
        2. 3.1.2 Resource metadata management
        3. 3.1.3 DOM tree accessors
        4. 3.1.4 Loading XML documents
      2. 3.2 Elements
        1. 3.2.1 Semantics
        2. 3.2.2 Elements in the DOM
        3. 3.2.3 Element definitions
          1. 3.2.3.1 Attributes
        4. 3.2.4 Content models
          1. 3.2.4.1 Kinds of content
            1. 3.2.4.1.1 Metadata content
            2. 3.2.4.1.2 Flow content
            3. 3.2.4.1.3 Sectioning content
            4. 3.2.4.1.4 Heading content
            5. 3.2.4.1.5 Phrasing content
            6. 3.2.4.1.6 Embedded content
            7. 3.2.4.1.7 Interactive content
            8. 3.2.4.1.8 Palpable content
            9. 3.2.4.1.9 Script-supporting elements
          2. 3.2.4.2 Transparent content models
          3. 3.2.4.3 Paragraphs
        5. 3.2.5 Global attributes
          1. 3.2.5.1 The id attribute
          2. 3.2.5.2 The title attribute
          3. 3.2.5.3 The lang and xml:lang attributes
          4. 3.2.5.4 The translate attribute
          5. 3.2.5.5 The xml:base attribute (XML only)
          6. 3.2.5.6 The dir attribute
          7. 3.2.5.7 The class attribute
          8. 3.2.5.8 The style attribute
          9. 3.2.5.9 Embedding custom non-visible data with the data-* attributes
        6. 3.2.6 Requirements relating to the bidirectional algorithm
          1. 3.2.6.1 Authoring conformance criteria for bidirectional-algorithm formatting characters
          2. 3.2.6.2 User agent conformance criteria
        7. 3.2.7 WAI-ARIA
    4. 4 The elements of HTML
      1. 4.1 The root element
        1. 4.1.1 The html element
      2. 4.2 Document metadata
        1. 4.2.1 The head element
        2. 4.2.2 The title element
        3. 4.2.3 The base element
        4. 4.2.4 The link element
        5. 4.2.5 The meta element
          1. 4.2.5.1 Standard metadata names
          2. 4.2.5.2 Other metadata names
          3. 4.2.5.3 Pragma directives
          4. 4.2.5.4 Other pragma directives
          5. 4.2.5.5 Specifying the document's character encoding
        6. 4.2.6 The style element
        7. 4.2.7 Interactions of styling and scripting
      3. 4.3 Sections
        1. 4.3.1 The body element
        2. 4.3.2 The article element
        3. 4.3.3 The section element
        4. 4.3.4 The nav element
        5. 4.3.5 The aside element
        6. 4.3.6 The h1, h2, h3, h4, h5, and
-  h6 elements
        7. 4.3.7 The hgroup element
        8. 4.3.8 The header element
        9. 4.3.9 The footer element
        10. 4.3.10 The address element
        11. 4.3.11 Headings and sections
          1. 4.3.11.1 Creating an outline
          2. 4.3.11.2 Sample outlines
        12. 4.3.12 Usage summary
          1. 4.3.12.1 Article or section?
      4. 4.4 Grouping content
        1. 4.4.1 The p element
        2. 4.4.2 The hr element
        3. 4.4.3 The pre element
        4. 4.4.4 The blockquote element
        5. 4.4.5 The ol element
        6. 4.4.6 The ul element
        7. 4.4.7 The li element
        8. 4.4.8 The dl element
        9. 4.4.9 The dt element
        10. 4.4.10 The dd element
        11. 4.4.11 The figure element
        12. 4.4.12 The figcaption element
        13. 4.4.13 The main element
        14. 4.4.14 The div element
      5. 4.5 Text-level semantics
        1. 4.5.1 The a element
        2. 4.5.2 The em element
        3. 4.5.3 The strong element
        4. 4.5.4 The small element
        5. 4.5.5 The s element
        6. 4.5.6 The cite element
        7. 4.5.7 The q element
        8. 4.5.8 The dfn element
        9. 4.5.9 The abbr element
        10. 4.5.10 The ruby element
        11. 4.5.11 The rt element
        12. 4.5.12 The rp element
        13. 4.5.13 The data element
        14. 4.5.14 The time element
        15. 4.5.15 The code element
        16. 4.5.16 The var element
        17. 4.5.17 The samp element
        18. 4.5.18 The kbd element
        19. 4.5.19 The sub and sup elements
        20. 4.5.20 The i element
        21. 4.5.21 The b element
        22. 4.5.22 The u element
        23. 4.5.23 The mark element
        24. 4.5.24 The bdi element
        25. 4.5.25 The bdo element
        26. 4.5.26 The span element
        27. 4.5.27 The br element
        28. 4.5.28 The wbr element
        29. 4.5.29 Usage summary
      6. 4.6 Edits
        1. 4.6.1 The ins element
        2. 4.6.2 The del element
        3. 4.6.3 Attributes common to ins and del elements
        4. 4.6.4 Edits and paragraphs
        5. 4.6.5 Edits and lists
        6. 4.6.6 Edits and tables
      7. 4.7 Embedded content
        1. 4.7.1 Introduction
        2. 4.7.2 Dependencies
        3. 4.7.3 The picture element
        4. 4.7.4 The source element when used with the picture element
        5. 4.7.5 The img element
          1. 4.7.5.1 Requirements for providing text to act as an alternative for images
            1. 4.7.5.1.1 General guidelines
            2. 4.7.5.1.2 A link or button containing nothing but the image
            3. 4.7.5.1.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
            4. 4.7.5.1.4 A short phrase or label with an alternative graphical representation: icons, logos
            5. 4.7.5.1.5 Text that has been rendered to a graphic for typographical effect
            6. 4.7.5.1.6 A graphical representation of some of the surrounding text
            7. 4.7.5.1.7 A purely decorative image that doesn't add any information
            8. 4.7.5.1.8 A group of images that form a single larger picture with no links
            9. 4.7.5.1.9 A group of images that form a single larger picture with links
            10. 4.7.5.1.10 A key part of the content
            11. 4.7.5.1.11 An image not intended for the user
            12. 4.7.5.1.12 An image in an e-mail or private document intended for a specific person who is known to be able to view images
            13. 4.7.5.1.13 Guidance for markup generators
            14. 4.7.5.1.14 Guidance for conformance checkers
        6. 4.7.6 The iframe element
        7. 4.7.7 The embed element
        8. 4.7.8 The object element
        9. 4.7.9 The param element
        10. 4.7.10 The video element
        11. 4.7.11 The audio element
        12. 4.7.12 The source element
        13. 4.7.13 The track element
        14. 4.7.14 Media elements
          1. 4.7.14.1 Error codes
          2. 4.7.14.2 Location of the media resource
          3. 4.7.14.3 MIME types
          4. 4.7.14.4 Network states
          5. 4.7.14.5 Loading the media resource
          6. 4.7.14.6 Offsets into the media resource
          7. 4.7.14.7 Ready states
          8. 4.7.14.8 Playing the media resource
          9. 4.7.14.9 Seeking
          10. 4.7.14.10 Media resources with multiple media tracks
            1. 4.7.14.10.1 AudioTrackList and VideoTrackList objects
            2. 4.7.14.10.2 Selecting specific audio and video tracks declaratively
          11. 4.7.14.11 Synchronising multiple media elements
            1. 4.7.14.11.1 Introduction
            2. 4.7.14.11.2 Media controllers
            3. 4.7.14.11.3 Assigning a media controller declaratively
          12. 4.7.14.12 Timed text tracks
            1. 4.7.14.12.1 Text track model
            2. 4.7.14.12.2 Sourcing in-band text tracks
            3. 4.7.14.12.3 Sourcing out-of-band text tracks
            4. 4.7.14.12.4 Guidelines for exposing cues in various formats as text track cues
            5. 4.7.14.12.5 Text track API
            6. 4.7.14.12.6 Text tracks describing chapters
            7. 4.7.14.12.7 Event handlers for objects of the text track APIs
            8. 4.7.14.12.8 Best practices for metadata text tracks
          13. 4.7.14.13 User interface
          14. 4.7.14.14 Time ranges
          15. 4.7.14.15 The TrackEvent interface
          16. 4.7.14.16 Event summary
          17. 4.7.14.17 Security and privacy considerations
          18. 4.7.14.18 Best practices for authors using media elements
          19. 4.7.14.19 Best practices for implementors of media elements
        15. 4.7.15 The map element
        16. 4.7.16 The area element
        17. 4.7.17 Image maps
          1. 4.7.17.1 Authoring
          2. 4.7.17.2 Processing model
        18. 4.7.18 MathML
        19. 4.7.19 SVG
        20. 4.7.20 Dimension attributes
      8. 4.8 Links
        1. 4.8.1 Introduction
        2. 4.8.2 Links created by a and area elements
        3. 4.8.3 Following hyperlinks
        4. 4.8.4 Downloading resources
          1. 4.8.4.1 Hyperlink auditing
        5. 4.8.5 Link types
          1. 4.8.5.1 Link type "alternate"
          2. 4.8.5.2 Link type "author"
          3. 4.8.5.3 Link type "bookmark"
          4. 4.8.5.4 Link type "external"
          5. 4.8.5.5 Link type "help"
          6. 4.8.5.6 Link type "icon"
          7. 4.8.5.7 Link type "license"
          8. 4.8.5.8 Link type "nofollow"
          9. 4.8.5.9 Link type "noreferrer"
          10. 4.8.5.10 Link type "pingback"
          11. 4.8.5.11 Link type "prefetch"
          12. 4.8.5.12 Link type "search"
          13. 4.8.5.13 Link type "sidebar"
          14. 4.8.5.14 Link type "stylesheet"
          15. 4.8.5.15 Link type "tag"
          16. 4.8.5.16 Sequential link types
            1. 4.8.5.16.1 Link type "next"
            2. 4.8.5.16.2 Link type "prev"
          17. 4.8.5.17 Other link types
      9. 4.9 Tabular data
        1. 4.9.1 The table element
          1. 4.9.1.1 Techniques for describing tables
          2. 4.9.1.2 Techniques for table design
        2. 4.9.2 The caption element
        3. 4.9.3 The colgroup element
        4. 4.9.4 The col element
        5. 4.9.5 The tbody element
        6. 4.9.6 The thead element
        7. 4.9.7 The tfoot element
        8. 4.9.8 The tr element
        9. 4.9.9 The td element
        10. 4.9.10 The th element
        11. 4.9.11 Attributes common to td and th elements
        12. 4.9.12 Processing model
          1. 4.9.12.1 Forming a table
          2. 4.9.12.2 Forming relationships between data cells and header cells
        13. 4.9.13 Table sorting model
        14. 4.9.14 Examples
      10. 4.10 Forms
        1. 4.10.1 Introduction
          1. 4.10.1.1 Writing a form's user interface
          2. 4.10.1.2 Implementing the server-side processing for a form
          3. 4.10.1.3 Configuring a form to communicate with a server
          4. 4.10.1.4 Client-side form validation
          5. 4.10.1.5 Enabling client-side automatic filling of form controls
          6. 4.10.1.6 Improving the user experience on mobile devices
          7. 4.10.1.7 The difference between the field type, the autofill field name, and the input modality
          8. 4.10.1.8 Date, time, and number formats
        2. 4.10.2 Categories
        3. 4.10.3 The form element
        4. 4.10.4 The label element
        5. 4.10.5 The input element
          1. 4.10.5.1 States of the type attribute
            1. 4.10.5.1.1 Hidden state (type=hidden)
            2. 4.10.5.1.2 Text (type=text) state and Search state (type=search)
            3. 4.10.5.1.3 Telephone state (type=tel)
            4. 4.10.5.1.4 URL state (type=url)
            5. 4.10.5.1.5 E-mail state (type=email)
            6. 4.10.5.1.6 Password state (type=password)
            7. 4.10.5.1.7 Date and Time state (type=datetime)
            8. 4.10.5.1.8 Date state (type=date)
            9. 4.10.5.1.9 Month state (type=month)
            10. 4.10.5.1.10 Week state (type=week)
            11. 4.10.5.1.11 Time state (type=time)
            12. 4.10.5.1.12 Local Date and Time state (type=datetime-local)
            13. 4.10.5.1.13 Number state (type=number)
            14. 4.10.5.1.14 Range state (type=range)
            15. 4.10.5.1.15 Colour state (type=color)
            16. 4.10.5.1.16 Checkbox state (type=checkbox)
            17. 4.10.5.1.17 Radio Button state (type=radio)
            18. 4.10.5.1.18 File Upload state (type=file)
            19. 4.10.5.1.19 Submit Button state (type=submit)
            20. 4.10.5.1.20 Image Button state (type=image)
            21. 4.10.5.1.21 Reset Button state (type=reset)
            22. 4.10.5.1.22 Button state (type=button)
          2. 4.10.5.2 Implemention notes regarding localization of form controls
          3. 4.10.5.3 Common input element attributes
            1. 4.10.5.3.1 The maxlength and minlength attributes
            2. 4.10.5.3.2 The size attribute
            3. 4.10.5.3.3 The readonly attribute
            4. 4.10.5.3.4 The required attribute
            5. 4.10.5.3.5 The multiple attribute
            6. 4.10.5.3.6 The pattern attribute
            7. 4.10.5.3.7 The min and max attributes
            8. 4.10.5.3.8 The step attribute
            9. 4.10.5.3.9 The list attribute
            10. 4.10.5.3.10 The placeholder attribute
          4. 4.10.5.4 Common input element APIs
          5. 4.10.5.5 Common event behaviors
        6. 4.10.6 The button element
        7. 4.10.7 The select element
        8. 4.10.8 The datalist element
        9. 4.10.9 The optgroup element
        10. 4.10.10 The option element
        11. 4.10.11 The textarea element
        12. 4.10.12 The keygen element
        13. 4.10.13 The output element
        14. 4.10.14 The progress element
        15. 4.10.15 The meter element
        16. 4.10.16 The fieldset element
        17. 4.10.17 The legend element
        18. 4.10.18 Form control infrastructure
          1. 4.10.18.1 A form control's value
          2. 4.10.18.2 Mutability
          3. 4.10.18.3 Association of controls and forms
        19. 4.10.19 Attributes common to form controls
          1. 4.10.19.1 Naming form controls: the name attribute
          2. 4.10.19.2 Submitting element directionality: the dirname attribute
          3. 4.10.19.3 Limiting user input length: the maxlength attribute
          4. 4.10.19.4 Setting minimum input length requirements: the minlength attribute
          5. 4.10.19.5 Enabling and disabling form controls: the disabled attribute
          6. 4.10.19.6 Form submission
            1. 4.10.19.6.1 Autofocusing a form control: the autofocus attribute
          7. 4.10.19.7 Input modalities: the inputmode attribute
          8. 4.10.19.8 Autofill
            1. 4.10.19.8.1 Autofilling form controls: the autocomplete attribute
            2. 4.10.19.8.2 Processing model
            3. 4.10.19.8.3 User interface for bulk autofill
            4. 4.10.19.8.4 The AutocompleteErrorEvent interface
        20. 4.10.20 APIs for the text field selections
        21. 4.10.21 Constraints
          1. 4.10.21.1 Definitions
          2. 4.10.21.2 Constraint validation
          3. 4.10.21.3 The constraint validation API
          4. 4.10.21.4 Security
        22. 4.10.22 Form submission
          1. 4.10.22.1 Introduction
          2. 4.10.22.2 Implicit submission
          3. 4.10.22.3 Form submission algorithm
          4. 4.10.22.4 Constructing the form data set
          5. 4.10.22.5 Selecting a form submission encoding
          6. 4.10.22.6 URL-encoded form data
          7. 4.10.22.7 Multipart form data
          8. 4.10.22.8 Plain text form data
        23. 4.10.23 Resetting a form
      11. 4.11 Interactive elements
        1. 4.11.1 The details element
        2. 4.11.2 The summary element
        3. 4.11.3 The menu element
        4. 4.11.4 The menuitem element
        5. 4.11.5 Context menus
          1. 4.11.5.1 Declaring a context menu
          2. 4.11.5.2 Processing model
          3. 4.11.5.3 The RelatedEvent interfaces
        6. 4.11.6 Commands
          1. 4.11.6.1 Facets
          2. 4.11.6.2 Using the a element to define a command
          3. 4.11.6.3 Using the button element to define a command
          4. 4.11.6.4 Using the input element to define a command
          5. 4.11.6.5 Using the option element to define a command
          6. 4.11.6.6 Using the menuitem element to define a
+  h6 elements
          7. 4.3.7 The hgroup element
          8. 4.3.8 The header element
          9. 4.3.9 The footer element
          10. 4.3.10 The address element
          11. 4.3.11 Headings and sections
            1. 4.3.11.1 Creating an outline
            2. 4.3.11.2 Sample outlines
          12. 4.3.12 Usage summary
            1. 4.3.12.1 Article or section?
        7. 4.4 Grouping content
          1. 4.4.1 The p element
          2. 4.4.2 The hr element
          3. 4.4.3 The pre element
          4. 4.4.4 The blockquote element
          5. 4.4.5 The ol element
          6. 4.4.6 The ul element
          7. 4.4.7 The li element
          8. 4.4.8 The dl element
          9. 4.4.9 The dt element
          10. 4.4.10 The dd element
          11. 4.4.11 The figure element
          12. 4.4.12 The figcaption element
          13. 4.4.13 The main element
          14. 4.4.14 The div element
        8. 4.5 Text-level semantics
          1. 4.5.1 The a element
          2. 4.5.2 The em element
          3. 4.5.3 The strong element
          4. 4.5.4 The small element
          5. 4.5.5 The s element
          6. 4.5.6 The cite element
          7. 4.5.7 The q element
          8. 4.5.8 The dfn element
          9. 4.5.9 The abbr element
          10. 4.5.10 The ruby element
          11. 4.5.11 The rt element
          12. 4.5.12 The rp element
          13. 4.5.13 The data element
          14. 4.5.14 The time element
          15. 4.5.15 The code element
          16. 4.5.16 The var element
          17. 4.5.17 The samp element
          18. 4.5.18 The kbd element
          19. 4.5.19 The sub and sup elements
          20. 4.5.20 The i element
          21. 4.5.21 The b element
          22. 4.5.22 The u element
          23. 4.5.23 The mark element
          24. 4.5.24 The bdi element
          25. 4.5.25 The bdo element
          26. 4.5.26 The span element
          27. 4.5.27 The br element
          28. 4.5.28 The wbr element
          29. 4.5.29 Usage summary
        9. 4.6 Links
          1. 4.6.1 Introduction
          2. 4.6.2 Links created by a and area elements
          3. 4.6.3 Following hyperlinks
          4. 4.6.4 Downloading resources
            1. 4.6.4.1 Hyperlink auditing
          5. 4.6.5 Link types
            1. 4.6.5.1 Link type "alternate"
            2. 4.6.5.2 Link type "author"
            3. 4.6.5.3 Link type "bookmark"
            4. 4.6.5.4 Link type "external"
            5. 4.6.5.5 Link type "help"
            6. 4.6.5.6 Link type "icon"
            7. 4.6.5.7 Link type "license"
            8. 4.6.5.8 Link type "nofollow"
            9. 4.6.5.9 Link type "noreferrer"
            10. 4.6.5.10 Link type "pingback"
            11. 4.6.5.11 Link type "prefetch"
            12. 4.6.5.12 Link type "search"
            13. 4.6.5.13 Link type "sidebar"
            14. 4.6.5.14 Link type "stylesheet"
            15. 4.6.5.15 Link type "tag"
            16. 4.6.5.16 Sequential link types
              1. 4.6.5.16.1 Link type "next"
              2. 4.6.5.16.2 Link type "prev"
            17. 4.6.5.17 Other link types
        10. 4.7 Edits
          1. 4.7.1 The ins element
          2. 4.7.2 The del element
          3. 4.7.3 Attributes common to ins and del elements
          4. 4.7.4 Edits and paragraphs
          5. 4.7.5 Edits and lists
          6. 4.7.6 Edits and tables
        11. 4.8 Embedded content
          1. 4.8.1 Introduction
          2. 4.8.2 Dependencies
          3. 4.8.3 The picture element
          4. 4.8.4 The source element when used with the picture element
          5. 4.8.5 The img element
            1. 4.8.5.1 Requirements for providing text to act as an alternative for images
              1. 4.8.5.1.1 General guidelines
              2. 4.8.5.1.2 A link or button containing nothing but the image
              3. 4.8.5.1.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
              4. 4.8.5.1.4 A short phrase or label with an alternative graphical representation: icons, logos
              5. 4.8.5.1.5 Text that has been rendered to a graphic for typographical effect
              6. 4.8.5.1.6 A graphical representation of some of the surrounding text
              7. 4.8.5.1.7 A purely decorative image that doesn't add any information
              8. 4.8.5.1.8 A group of images that form a single larger picture with no links
              9. 4.8.5.1.9 A group of images that form a single larger picture with links
              10. 4.8.5.1.10 A key part of the content
              11. 4.8.5.1.11 An image not intended for the user
              12. 4.8.5.1.12 An image in an e-mail or private document intended for a specific person who is known to be able to view images
              13. 4.8.5.1.13 Guidance for markup generators
              14. 4.8.5.1.14 Guidance for conformance checkers
          6. 4.8.6 The iframe element
          7. 4.8.7 The embed element
          8. 4.8.8 The object element
          9. 4.8.9 The param element
          10. 4.8.10 The video element
          11. 4.8.11 The audio element
          12. 4.8.12 The source element
          13. 4.8.13 The track element
          14. 4.8.14 Media elements
            1. 4.8.14.1 Error codes
            2. 4.8.14.2 Location of the media resource
            3. 4.8.14.3 MIME types
            4. 4.8.14.4 Network states
            5. 4.8.14.5 Loading the media resource
            6. 4.8.14.6 Offsets into the media resource
            7. 4.8.14.7 Ready states
            8. 4.8.14.8 Playing the media resource
            9. 4.8.14.9 Seeking
            10. 4.8.14.10 Media resources with multiple media tracks
              1. 4.8.14.10.1 AudioTrackList and VideoTrackList objects
              2. 4.8.14.10.2 Selecting specific audio and video tracks declaratively
            11. 4.8.14.11 Synchronising multiple media elements
              1. 4.8.14.11.1 Introduction
              2. 4.8.14.11.2 Media controllers
              3. 4.8.14.11.3 Assigning a media controller declaratively
            12. 4.8.14.12 Timed text tracks
              1. 4.8.14.12.1 Text track model
              2. 4.8.14.12.2 Sourcing in-band text tracks
              3. 4.8.14.12.3 Sourcing out-of-band text tracks
              4. 4.8.14.12.4 Guidelines for exposing cues in various formats as text track cues
              5. 4.8.14.12.5 Text track API
              6. 4.8.14.12.6 Text tracks describing chapters
              7. 4.8.14.12.7 Event handlers for objects of the text track APIs
              8. 4.8.14.12.8 Best practices for metadata text tracks
            13. 4.8.14.13 User interface
            14. 4.8.14.14 Time ranges
            15. 4.8.14.15 The TrackEvent interface
            16. 4.8.14.16 Event summary
            17. 4.8.14.17 Security and privacy considerations
            18. 4.8.14.18 Best practices for authors using media elements
            19. 4.8.14.19 Best practices for implementors of media elements
          15. 4.8.15 The map element
          16. 4.8.16 The area element
          17. 4.8.17 Image maps
            1. 4.8.17.1 Authoring
            2. 4.8.17.2 Processing model
          18. 4.8.18 MathML
          19. 4.8.19 SVG
          20. 4.8.20 Dimension attributes
        12. 4.9 Tabular data
          1. 4.9.1 The table element
            1. 4.9.1.1 Techniques for describing tables
            2. 4.9.1.2 Techniques for table design
          2. 4.9.2 The caption element
          3. 4.9.3 The colgroup element
          4. 4.9.4 The col element
          5. 4.9.5 The tbody element
          6. 4.9.6 The thead element
          7. 4.9.7 The tfoot element
          8. 4.9.8 The tr element
          9. 4.9.9 The td element
          10. 4.9.10 The th element
          11. 4.9.11 Attributes common to td and th elements
          12. 4.9.12 Processing model
            1. 4.9.12.1 Forming a table
            2. 4.9.12.2 Forming relationships between data cells and header cells
          13. 4.9.13 Table sorting model
          14. 4.9.14 Examples
        13. 4.10 Forms
          1. 4.10.1 Introduction
            1. 4.10.1.1 Writing a form's user interface
            2. 4.10.1.2 Implementing the server-side processing for a form
            3. 4.10.1.3 Configuring a form to communicate with a server
            4. 4.10.1.4 Client-side form validation
            5. 4.10.1.5 Enabling client-side automatic filling of form controls
            6. 4.10.1.6 Improving the user experience on mobile devices
            7. 4.10.1.7 The difference between the field type, the autofill field name, and the input modality
            8. 4.10.1.8 Date, time, and number formats
          2. 4.10.2 Categories
          3. 4.10.3 The form element
          4. 4.10.4 The label element
          5. 4.10.5 The input element
            1. 4.10.5.1 States of the type attribute
              1. 4.10.5.1.1 Hidden state (type=hidden)
              2. 4.10.5.1.2 Text (type=text) state and Search state (type=search)
              3. 4.10.5.1.3 Telephone state (type=tel)
              4. 4.10.5.1.4 URL state (type=url)
              5. 4.10.5.1.5 E-mail state (type=email)
              6. 4.10.5.1.6 Password state (type=password)
              7. 4.10.5.1.7 Date and Time state (type=datetime)
              8. 4.10.5.1.8 Date state (type=date)
              9. 4.10.5.1.9 Month state (type=month)
              10. 4.10.5.1.10 Week state (type=week)
              11. 4.10.5.1.11 Time state (type=time)
              12. 4.10.5.1.12 Local Date and Time state (type=datetime-local)
              13. 4.10.5.1.13 Number state (type=number)
              14. 4.10.5.1.14 Range state (type=range)
              15. 4.10.5.1.15 Colour state (type=color)
              16. 4.10.5.1.16 Checkbox state (type=checkbox)
              17. 4.10.5.1.17 Radio Button state (type=radio)
              18. 4.10.5.1.18 File Upload state (type=file)
              19. 4.10.5.1.19 Submit Button state (type=submit)
              20. 4.10.5.1.20 Image Button state (type=image)
              21. 4.10.5.1.21 Reset Button state (type=reset)
              22. 4.10.5.1.22 Button state (type=button)
            2. 4.10.5.2 Implemention notes regarding localization of form controls
            3. 4.10.5.3 Common input element attributes
              1. 4.10.5.3.1 The maxlength and minlength attributes
              2. 4.10.5.3.2 The size attribute
              3. 4.10.5.3.3 The readonly attribute
              4. 4.10.5.3.4 The required attribute
              5. 4.10.5.3.5 The multiple attribute
              6. 4.10.5.3.6 The pattern attribute
              7. 4.10.5.3.7 The min and max attributes
              8. 4.10.5.3.8 The step attribute
              9. 4.10.5.3.9 The list attribute
              10. 4.10.5.3.10 The placeholder attribute
            4. 4.10.5.4 Common input element APIs
            5. 4.10.5.5 Common event behaviors
          6. 4.10.6 The button element
          7. 4.10.7 The select element
          8. 4.10.8 The datalist element
          9. 4.10.9 The optgroup element
          10. 4.10.10 The option element
          11. 4.10.11 The textarea element
          12. 4.10.12 The keygen element
          13. 4.10.13 The output element
          14. 4.10.14 The progress element
          15. 4.10.15 The meter element
          16. 4.10.16 The fieldset element
          17. 4.10.17 The legend element
          18. 4.10.18 Form control infrastructure
            1. 4.10.18.1 A form control's value
            2. 4.10.18.2 Mutability
            3. 4.10.18.3 Association of controls and forms
          19. 4.10.19 Attributes common to form controls
            1. 4.10.19.1 Naming form controls: the name attribute
            2. 4.10.19.2 Submitting element directionality: the dirname attribute
            3. 4.10.19.3 Limiting user input length: the maxlength attribute
            4. 4.10.19.4 Setting minimum input length requirements: the minlength attribute
            5. 4.10.19.5 Enabling and disabling form controls: the disabled attribute
            6. 4.10.19.6 Form submission
              1. 4.10.19.6.1 Autofocusing a form control: the autofocus attribute
            7. 4.10.19.7 Input modalities: the inputmode attribute
            8. 4.10.19.8 Autofill
              1. 4.10.19.8.1 Autofilling form controls: the autocomplete attribute
              2. 4.10.19.8.2 Processing model
              3. 4.10.19.8.3 User interface for bulk autofill
              4. 4.10.19.8.4 The AutocompleteErrorEvent interface
          20. 4.10.20 APIs for the text field selections
          21. 4.10.21 Constraints
            1. 4.10.21.1 Definitions
            2. 4.10.21.2 Constraint validation
            3. 4.10.21.3 The constraint validation API
            4. 4.10.21.4 Security
          22. 4.10.22 Form submission
            1. 4.10.22.1 Introduction
            2. 4.10.22.2 Implicit submission
            3. 4.10.22.3 Form submission algorithm
            4. 4.10.22.4 Constructing the form data set
            5. 4.10.22.5 Selecting a form submission encoding
            6. 4.10.22.6 URL-encoded form data
            7. 4.10.22.7 Multipart form data
            8. 4.10.22.8 Plain text form data
          23. 4.10.23 Resetting a form
        14. 4.11 Interactive elements
          1. 4.11.1 The details element
          2. 4.11.2 The summary element
          3. 4.11.3 The menu element
          4. 4.11.4 The menuitem element
          5. 4.11.5 Context menus
            1. 4.11.5.1 Declaring a context menu
            2. 4.11.5.2 Processing model
            3. 4.11.5.3 The RelatedEvent interfaces
          6. 4.11.6 Commands
            1. 4.11.6.1 Facets
            2. 4.11.6.2 Using the a element to define a command
            3. 4.11.6.3 Using the button element to define a command
            4. 4.11.6.4 Using the input element to define a command
            5. 4.11.6.5 Using the option element to define a command
            6. 4.11.6.6 Using the menuitem element to define a
   command
            7. 4.11.6.7 Using the command attribute on menuitem elements to define
   a command indirectly
            8. 4.11.6.8 Using the accesskey attribute
   on a label element to define a command
            9. 4.11.6.9 Using the accesskey attribute
   on a legend element to define a command
            10. 4.11.6.10 Using the accesskey
   attribute to define a command on other elements
          7. 4.11.7 The dialog element
            1. 4.11.7.1 Anchor points
        15. 4.12 Scripting
          1. 4.12.1 The script element
            1. 4.12.1.1 Scripting languages
            2. 4.12.1.2 Restrictions for contents of script elements
            3. 4.12.1.3 Inline documentation for external scripts
            4. 4.12.1.4 Interaction of script elements and XSLT
          2. 4.12.2 The noscript element
          3. 4.12.3 The template element
            1. 4.12.3.1 Interaction of template elements with XSLT and XPath
          4. 4.12.4 The canvas element
            1. 4.12.4.1 Proxying canvases to workers
            2. 4.12.4.2 The 2D rendering context
              1. 4.12.4.2.1 Implementation notes
              2. 4.12.4.2.2 The canvas state
              3. 4.12.4.2.3 DrawingStyle objects
              4. 4.12.4.2.4 Line styles
              5. 4.12.4.2.5 Text styles
              6. 4.12.4.2.6 Building paths
              7. 4.12.4.2.7 Path2D objects
              8. 4.12.4.2.8 Transformations
              9. 4.12.4.2.9 Image sources for 2D rendering contexts
              10. 4.12.4.2.10 Fill and stroke styles
              11. 4.12.4.2.11 Drawing rectangles to the bitmap
              12. 4.12.4.2.12 Drawing text to the bitmap
              13. 4.12.4.2.13 Drawing paths to the canvas
              14. 4.12.4.2.14 Drawing images
              15. 4.12.4.2.15 Hit regions
              16. 4.12.4.2.16 Pixel manipulation
              17. 4.12.4.2.17 Compositing
              18. 4.12.4.2.18 Image smoothing
              19. 4.12.4.2.19 Shadows
              20. 4.12.4.2.20 Drawing model
              21. 4.12.4.2.21 Best practices
              22. 4.12.4.2.22 Examples
            3. 4.12.4.3 Colour spaces and colour correction
            4. 4.12.4.4 Serializing bitmaps to a file
            5. 4.12.4.5 Security with canvas elements
        16. 4.13 Common idioms without dedicated elements
          1. 4.13.1 The main part of the content
          2. 4.13.2 Bread crumb navigation
          3. 4.13.3 Tag clouds
          4. 4.13.4 Conversations
          5. 4.13.5 Footnotes
        17. 4.14 Disabled elements
        18. 4.15 Matching HTML elements using selectors
          1. 4.15.1 Case-sensitivity
          2. 4.15.2 Pseudo-classes
      12. 5 Microdata
        1. 5.1 Introduction
          1. 5.1.1 Overview
          2. 5.1.2 The basic syntax
          3. 5.1.3 Typed items
          4. 5.1.4 Global identifiers for items
          5. 5.1.5 Selecting names when defining vocabularies
          6. 5.1.6 Using the microdata DOM API
        2. 5.2 Encoding microdata
          1. 5.2.1 The microdata model
          2. 5.2.2 Items
          3. 5.2.3 Names: the itemprop attribute
          4. 5.2.4 Values
          5. 5.2.5 Associating names with items
          6. 5.2.6 Microdata and other namespaces
        3. 5.3 Microdata DOM API
        4. 5.4 Sample microdata vocabularies
          1. 5.4.1 vCard
            1. 5.4.1.1 Conversion to vCard
            2. 5.4.1.2 Examples
          2. 5.4.2 vEvent
            1. 5.4.2.1 Conversion to iCalendar
            2. 5.4.2.2 Examples
          3. 5.4.3 Licensing works
            1. 5.4.3.1 Examples
        5. 5.5 Converting HTML to other formats
          1. 5.5.1 JSON
      13. 6 User interaction
        1. 6.1 The hidden attribute
        2. 6.2 Inert subtrees
        3. 6.3 Activation
        4. 6.4 Focus
          1. 6.4.1 Introduction
          2. 6.4.2 Data model
          3. 6.4.3 The tabindex attribute
          4. 6.4.4 Processing model
          5. 6.4.5 Sequential focus navigation
          6. 6.4.6 Focus management APIs
        5. 6.5 Assigning keyboard shortcuts
          1. 6.5.1 Introduction
          2. 6.5.2 The accesskey attribute
          3. 6.5.3 Processing model
        6. 6.6 Editing
          1. 6.6.1 Making document regions editable: The contenteditable content attribute
          2. 6.6.2 Making entire documents editable: The designMode IDL attribute
          3. 6.6.3 Best practices for in-page editors
          4. 6.6.4 Editing APIs
          5. 6.6.5 Spelling and grammar checking
        7. 6.7 Drag and drop
          1. 6.7.1 Introduction
          2. 6.7.2 The drag data store
          3. 6.7.3 The DataTransfer interface
            1. 6.7.3.1 The DataTransferItemList interface
            2. 6.7.3.2 The DataTransferItem interface
          4. 6.7.4 The DragEvent interface
          5. 6.7.5 Drag-and-drop processing model
          6. 6.7.6 Events summary
          7. 6.7.7 The draggable attribute
          8. 6.7.8 The dropzone attribute
          9. 6.7.9 Security risks in the drag-and-drop model
      14. 7 Loading Web pages
        1. 7.1 Browsing contexts
          1. 7.1.1 Nested browsing contexts
            1. 7.1.1.1 Navigating nested browsing contexts in the DOM
          2. 7.1.2 Auxiliary browsing contexts
            1. 7.1.2.1 Navigating auxiliary browsing contexts in the DOM
          3. 7.1.3 Secondary browsing contexts
          4. 7.1.4 Security
          5. 7.1.5 Groupings of browsing contexts
          6. 7.1.6 Browsing context names
        2. 7.2 The Window object
          1. 7.2.1 Security
          2. 7.2.2 APIs for creating and navigating browsing contexts by name
          3. 7.2.3 Accessing other browsing contexts
          4. 7.2.4 Named access on the Window object
          5. 7.2.5 Garbage collection and browsing contexts
          6. 7.2.6 Closing browsing contexts
          7. 7.2.7 Browser interface elements
          8. 7.2.8 The WindowProxy object
        3. 7.3 Origin
          1. 7.3.1 Relaxing the same-origin restriction
        4. 7.4 Sandboxing
        5. 7.5 Session history and navigation
          1. 7.5.1 The session history of browsing contexts
          2. 7.5.2 The History interface
          3. 7.5.3 The Location interface
            1. 7.5.3.1 Security
          4. 7.5.4 Implementation notes for session history
        6. 7.6 Browsing the Web
          1. 7.6.1 Navigating across documents
          2. 7.6.2 Page load processing model for HTML files
          3. 7.6.3 Page load processing model for XML files
          4. 7.6.4 Page load processing model for text files
          5. 7.6.5 Page load processing model for multipart/x-mixed-replace resources
          6. 7.6.6 Page load processing model for media
          7. 7.6.7 Page load processing model for content that uses plugins
          8. 7.6.8 Page load processing model for inline
-  content that doesn't have a DOM
          9. 7.6.9 Navigating to a fragment identifier
          10. 7.6.10 History traversal
            1. 7.6.10.1 The PopStateEvent interface
            2. 7.6.10.2 The HashChangeEvent interface
            3. 7.6.10.3 The PageTransitionEvent interface
          11. 7.6.11 Unloading documents
            1. 7.6.11.1 The BeforeUnloadEvent interface
          12. 7.6.12 Aborting a document load
        7. 7.7 Offline Web applications
          1. 7.7.1 Introduction
            1. 7.7.1.1 Supporting offline caching for legacy applications
            2. 7.7.1.2 Event summary
          2. 7.7.2 Application caches
          3. 7.7.3 The cache manifest syntax
            1. 7.7.3.1 Some sample manifests
            2. 7.7.3.2 Writing cache manifests
            3. 7.7.3.3 Parsing cache manifests
          4. 7.7.4 Downloading or updating an application cache
          5. 7.7.5 The application cache selection algorithm
          6. 7.7.6 Changes to the networking model
          7. 7.7.7 Expiring application caches
          8. 7.7.8 Disk space
          9. 7.7.9 Application cache API
          10. 7.7.10 Browser state
      15. 8 Web application APIs
        1. 8.1 Scripting
          1. 8.1.1 Introduction
          2. 8.1.2 Enabling and disabling scripting
          3. 8.1.3 Processing model
            1. 8.1.3.1 Definitions
            2. 8.1.3.2 Script settings for browsing contexts
            3. 8.1.3.3 Calling scripts
            4. 8.1.3.4 Creating scripts
            5. 8.1.3.5 Killing scripts
            6. 8.1.3.6 Runtime script errors
              1. 8.1.3.6.1 Runtime script errors in documents
              2. 8.1.3.6.2 The ErrorEvent interface
          4. 8.1.4 Event loops
            1. 8.1.4.1 Definitions
            2. 8.1.4.2 Processing model
            3. 8.1.4.3 Generic task sources
          5. 8.1.5 Events
            1. 8.1.5.1 Event handlers
            2. 8.1.5.2 Event handlers on elements, Document objects, and Window objects
              1. 8.1.5.2.1 IDL definitions
            3. 8.1.5.3 Event firing
            4. 8.1.5.4 Events and the Window object
        2. 8.2 Base64 utility methods
        3. 8.3 Dynamic markup insertion
          1. 8.3.1 Opening the input stream
          2. 8.3.2 Closing the input stream
          3. 8.3.3 document.write()
          4. 8.3.4 document.writeln()
        4. 8.4 Timers
        5. 8.5 User prompts
          1. 8.5.1 Simple dialogs
          2. 8.5.2 Printing
          3. 8.5.3 Dialogs implemented using separate documents
        6. 8.6 System state and capabilities
          1. 8.6.1 The Navigator object
            1. 8.6.1.1 Client identification
            2. 8.6.1.2 Language preferences
            3. 8.6.1.3 Custom scheme and content handlers
              1. 8.6.1.3.1 Security and privacy
              2. 8.6.1.3.2 Sample user interface
            4. 8.6.1.4 Manually releasing the storage mutex
            5. 8.6.1.5 Plugins
          2. 8.6.2 The External interface
        7. 8.7 Images
      16. 9 Communication
        1. 9.1 The MessageEvent interfaces
        2. 9.2 Server-sent events
          1. 9.2.1 Introduction
          2. 9.2.2 The EventSource interface
          3. 9.2.3 Processing model
          4. 9.2.4 Parsing an event stream
          5. 9.2.5 Interpreting an event stream
          6. 9.2.6 Authoring notes
          7. 9.2.7 Connectionless push and other features
          8. 9.2.8 Garbage collection
          9. 9.2.9 Implementation advice
          10. 9.2.10 IANA considerations
            1. 9.2.10.1 text/event-stream
            2. 9.2.10.2 Last-Event-ID
        3. 9.3 Web sockets
          1. 9.3.1 Introduction
          2. 9.3.2 The WebSocket interface
          3. 9.3.3 Feedback from the protocol
          4. 9.3.4 Ping and Pong frames
          5. 9.3.5 Parsing WebSocket URLs
          6. 9.3.6 The CloseEvent interfaces
          7. 9.3.7 Garbage collection
        4. 9.4 Cross-document messaging
          1. 9.4.1 Introduction
          2. 9.4.2 Security
            1. 9.4.2.1 Authors
            2. 9.4.2.2 User agents
          3. 9.4.3 Posting messages
        5. 9.5 Channel messaging
          1. 9.5.1 Introduction
            1. 9.5.1.1 Examples
            2. 9.5.1.2 Ports as the basis of an object-capability model on the Web
            3. 9.5.1.3 Ports as the basis of abstracting out service implementations
          2. 9.5.2 Message channels
          3. 9.5.3 Message ports
          4. 9.5.4 Broadcasting to many ports
          5. 9.5.5 Ports and garbage collection
        6. 9.6 Broadcasting to other browsing contexts
      17. 10 Web workers
        1. 10.1 Introduction
          1. 10.1.1 Scope
          2. 10.1.2 Examples
            1. 10.1.2.1 A background number-crunching worker
            2. 10.1.2.2 Worker used for background I/O
            3. 10.1.2.3 Shared workers introduction
            4. 10.1.2.4 Shared state using a shared worker
            5. 10.1.2.5 Delegation
          3. 10.1.3 Tutorials
            1. 10.1.3.1 Creating a dedicated worker
            2. 10.1.3.2 Communicating with a dedicated worker
            3. 10.1.3.3 Shared workers
        2. 10.2 Infrastructure
          1. 10.2.1 The global scope
            1. 10.2.1.1 The WorkerGlobalScope common interface
            2. 10.2.1.2 Dedicated workers and the DedicatedWorkerGlobalScope interface
            3. 10.2.1.3 Shared workers and the SharedWorkerGlobalScope interface
          2. 10.2.2 The event loop
          3. 10.2.3 The worker's lifetime
          4. 10.2.4 Processing model
          5. 10.2.5 Runtime script errors
          6. 10.2.6 Creating workers
            1. 10.2.6.1 The AbstractWorker abstract interface
            2. 10.2.6.2 Script settings for workers
            3. 10.2.6.3 Dedicated workers and the Worker interface
            4. 10.2.6.4 Shared workers and the SharedWorker interface
        3. 10.3 APIs available to workers
          1. 10.3.1 Importing scripts and libraries
          2. 10.3.2 The WorkerNavigator object
          3. 10.3.3 Worker locations
      18. 11 Web storage
        1. 11.1 Introduction
        2. 11.2 The API
          1. 11.2.1 The Storage interface
          2. 11.2.2 The sessionStorage attribute
          3. 11.2.3 The localStorage attribute
          4. 11.2.4 The storage event
            1. 11.2.4.1 The StorageEvent interface
          5. 11.2.5 Threads
        3. 11.3 Disk space
        4. 11.4 Privacy
          1. 11.4.1 User tracking
          2. 11.4.2 Sensitivity of data
        5. 11.5 Security
          1. 11.5.1 DNS spoofing attacks
          2. 11.5.2 Cross-directory attacks
          3. 11.5.3 Implementation risks
      19. 12 The HTML syntax
        1. 12.1 Writing HTML documents
          1. 12.1.1 The DOCTYPE
          2. 12.1.2 Elements
            1. 12.1.2.1 Start tags
            2. 12.1.2.2 End tags
            3. 12.1.2.3 Attributes
            4. 12.1.2.4 Optional tags
            5. 12.1.2.5 Restrictions on content models
            6. 12.1.2.6 Restrictions on the contents of raw text and escapable raw text elements
          3. 12.1.3 Text
            1. 12.1.3.1 Newlines
          4. 12.1.4 Character references
          5. 12.1.5 CDATA sections
          6. 12.1.6 Comments
        2. 12.2 Parsing HTML documents
          1. 12.2.1 Overview of the parsing model
          2. 12.2.2 The input byte stream
            1. 12.2.2.1 Parsing with a known character encoding
            2. 12.2.2.2 Determining the character encoding
            3. 12.2.2.3 Character encodings
            4. 12.2.2.4 Changing the encoding while parsing
            5. 12.2.2.5 Preprocessing the input stream
          3. 12.2.3 Parse state
            1. 12.2.3.1 The insertion mode
            2. 12.2.3.2 The stack of open elements
            3. 12.2.3.3 The list of active formatting elements
            4. 12.2.3.4 The element pointers
            5. 12.2.3.5 Other parsing state flags
          4. 12.2.4 Tokenization
            1. 12.2.4.1 Data state
            2. 12.2.4.2 Character reference in data state
            3. 12.2.4.3 RCDATA state
            4. 12.2.4.4 Character reference in RCDATA state
            5. 12.2.4.5 RAWTEXT state
            6. 12.2.4.6 Script data state
            7. 12.2.4.7 PLAINTEXT state
            8. 12.2.4.8 Tag open state
            9. 12.2.4.9 End tag open state
            10. 12.2.4.10 Tag name state
            11. 12.2.4.11 RCDATA less-than sign state
            12. 12.2.4.12 RCDATA end tag open state
            13. 12.2.4.13 RCDATA end tag name state
            14. 12.2.4.14 RAWTEXT less-than sign state
            15. 12.2.4.15 RAWTEXT end tag open state
            16. 12.2.4.16 RAWTEXT end tag name state
            17. 12.2.4.17 Script data less-than sign state
            18. 12.2.4.18 Script data end tag open state
            19. 12.2.4.19 Script data end tag name state
            20. 12.2.4.20 Script data escape start state
            21. 12.2.4.21 Script data escape start dash state
            22. 12.2.4.22 Script data escaped state
            23. 12.2.4.23 Script data escaped dash state
            24. 12.2.4.24 Script data escaped dash dash state
            25. 12.2.4.25 Script data escaped less-than sign state
            26. 12.2.4.26 Script data escaped end tag open state
            27. 12.2.4.27 Script data escaped end tag name state
            28. 12.2.4.28 Script data double escape start state
            29. 12.2.4.29 Script data double escaped state
            30. 12.2.4.30 Script data double escaped dash state
            31. 12.2.4.31 Script data double escaped dash dash state
            32. 12.2.4.32 Script data double escaped less-than sign state
            33. 12.2.4.33 Script data double escape end state
            34. 12.2.4.34 Before attribute name state
            35. 12.2.4.35 Attribute name state
            36. 12.2.4.36 After attribute name state
            37. 12.2.4.37 Before attribute value state
            38. 12.2.4.38 Attribute value (double-quoted) state
            39. 12.2.4.39 Attribute value (single-quoted) state
            40. 12.2.4.40 Attribute value (unquoted) state
            41. 12.2.4.41 Character reference in attribute value state
            42. 12.2.4.42 After attribute value (quoted) state
            43. 12.2.4.43 Self-closing start tag state
            44. 12.2.4.44 Bogus comment state
            45. 12.2.4.45 Markup declaration open state
            46. 12.2.4.46 Comment start state
            47. 12.2.4.47 Comment start dash state
            48. 12.2.4.48 Comment state
            49. 12.2.4.49 Comment end dash state
            50. 12.2.4.50 Comment end state
            51. 12.2.4.51 Comment end bang state
            52. 12.2.4.52 DOCTYPE state
            53. 12.2.4.53 Before DOCTYPE name state
            54. 12.2.4.54 DOCTYPE name state
            55. 12.2.4.55 After DOCTYPE name state
            56. 12.2.4.56 After DOCTYPE public keyword state
            57. 12.2.4.57 Before DOCTYPE public identifier state
            58. 12.2.4.58 DOCTYPE public identifier (double-quoted) state
            59. 12.2.4.59 DOCTYPE public identifier (single-quoted) state
            60. 12.2.4.60 After DOCTYPE public identifier state
            61. 12.2.4.61 Between DOCTYPE public and system identifiers state
            62. 12.2.4.62 After DOCTYPE system keyword state
            63. 12.2.4.63 Before DOCTYPE system identifier state
            64. 12.2.4.64 DOCTYPE system identifier (double-quoted) state
            65. 12.2.4.65 DOCTYPE system identifier (single-quoted) state
            66. 12.2.4.66 After DOCTYPE system identifier state
            67. 12.2.4.67 Bogus DOCTYPE state
            68. 12.2.4.68 CDATA section state
            69. 12.2.4.69 Tokenizing character references
          5. 12.2.5 Tree construction
            1. 12.2.5.1 Creating and inserting nodes
            2. 12.2.5.2 Parsing elements that contain only text
            3. 12.2.5.3 Closing elements that have implied end tags
            4. 12.2.5.4 The rules for parsing tokens in HTML content
              1. 12.2.5.4.1 The "initial" insertion mode
              2. 12.2.5.4.2 The "before html" insertion mode
              3. 12.2.5.4.3 The "before head" insertion mode
              4. 12.2.5.4.4 The "in head" insertion mode
              5. 12.2.5.4.5 The "in head noscript" insertion mode
              6. 12.2.5.4.6 The "after head" insertion mode
              7. 12.2.5.4.7 The "in body" insertion mode
              8. 12.2.5.4.8 The "text" insertion mode
              9. 12.2.5.4.9 The "in table" insertion mode
              10. 12.2.5.4.10 The "in table text" insertion mode
              11. 12.2.5.4.11 The "in caption" insertion mode
              12. 12.2.5.4.12 The "in column group" insertion mode
              13. 12.2.5.4.13 The "in table body" insertion mode
              14. 12.2.5.4.14 The "in row" insertion mode
              15. 12.2.5.4.15 The "in cell" insertion mode
              16. 12.2.5.4.16 The "in select" insertion mode
              17. 12.2.5.4.17 The "in select in table" insertion mode
              18. 12.2.5.4.18 The "in template" insertion mode
              19. 12.2.5.4.19 The "after body" insertion mode
              20. 12.2.5.4.20 The "in frameset" insertion mode
              21. 12.2.5.4.21 The "after frameset" insertion mode
              22. 12.2.5.4.22 The "after after body" insertion mode
              23. 12.2.5.4.23 The "after after frameset" insertion mode
            5. 12.2.5.5 The rules for parsing tokens in foreign content
          6. 12.2.6 The end
          7. 12.2.7 Coercing an HTML DOM into an infoset
          8. 12.2.8 An introduction to error handling and strange cases in the parser
            1. 12.2.8.1 Misnested tags: <b><i></b></i>
            2. 12.2.8.2 Misnested tags: <b><p></b></p>
            3. 12.2.8.3 Unexpected markup in tables
            4. 12.2.8.4 Scripts that modify the page as it is being parsed
            5. 12.2.8.5 The execution of scripts that are moving across multiple documents
            6. 12.2.8.6 Unclosed formatting elements
        3. 12.3 Serializing HTML fragments
        4. 12.4 Parsing HTML fragments
        5. 12.5 Named character references
      20. 13 The XHTML syntax
        1. 13.1 Writing XHTML documents
        2. 13.2 Parsing XHTML documents
        3. 13.3 Serializing XHTML fragments
        4. 13.4 Parsing XHTML fragments
      21. 14 Rendering
        1. 14.1 Introduction
        2. 14.2 The CSS user agent style sheet and presentational hints
        3. 14.3 Non-replaced elements
          1. 14.3.1 Hidden elements
          2. 14.3.2 The page
          3. 14.3.3 Flow content
          4. 14.3.4 Phrasing content
          5. 14.3.5 Bidirectional text
          6. 14.3.6 Quotes
          7. 14.3.7 Sections and headings
          8. 14.3.8 Lists
          9. 14.3.9 Tables
          10. 14.3.10 Margin collapsing quirks
          11. 14.3.11 Form controls
          12. 14.3.12 The hr element
          13. 14.3.13 The fieldset and legend elements
        4. 14.4 Replaced elements
          1. 14.4.1 Embedded content
          2. 14.4.2 Images
          3. 14.4.3 Attributes for embedded content and images
          4. 14.4.4 Image maps
        5. 14.5 Bindings
          1. 14.5.1 Introduction
          2. 14.5.2 The button element
          3. 14.5.3 The details element
          4. 14.5.4 The input element as a text entry widget
          5. 14.5.5 The input element as domain-specific widgets
          6. 14.5.6 The input element as a range control
          7. 14.5.7 The input element as a colour well
          8. 14.5.8 The input element as a checkbox and radio button widgets
          9. 14.5.9 The input element as a file upload control
          10. 14.5.10 The input element as a button
          11. 14.5.11 The marquee element
          12. 14.5.12 The meter element
          13. 14.5.13 The progress element
          14. 14.5.14 The select element
          15. 14.5.15 The textarea element
          16. 14.5.16 The keygen element
        6. 14.6 Frames and framesets
        7. 14.7 Interactive media
          1. 14.7.1 Links, forms, and navigation
          2. 14.7.2 The title attribute
          3. 14.7.3 Editing hosts
          4. 14.7.4 Text rendered in native user interfaces
        8. 14.8 Print media
        9. 14.9 Unstyled XML documents
      22. 15 Obsolete features
        1. 15.1 Obsolete but conforming features
          1. 15.1.1 Warnings for obsolete but conforming features
        2. 15.2 Non-conforming features
        3. 15.3 Requirements for implementations
          1. 15.3.1 The applet element
          2. 15.3.2 The marquee element
          3. 15.3.3 Frames
          4. 15.3.4 Other elements, attributes and APIs
      23. 16 IANA considerations
        1. 16.1 text/html
        2. 16.2 multipart/x-mixed-replace
        3. 16.3 application/xhtml+xml
        4. 16.4 application/x-www-form-urlencoded
        5. 16.5 text/cache-manifest
        6. 16.6 text/ping
        7. 16.7 application/microdata+json
        8. 16.8 Ping-From
        9. 16.9 Ping-To
        10. 16.10 web+ scheme prefix
      24. Index
        1. Elements
        2. Element content categories
        3. Attributes
        4. Element Interfaces
        5. All Interfaces
        6. Events
        7. MIME Types
      25. References
      26. Acknowledgments
      
-
-  
      
+  content that doesn't have a DOM
    5. 7.6.9 Navigating to a fragment identifier
    6. 7.6.10 History traversal
      1. 7.6.10.1 The PopStateEvent interface
      2. 7.6.10.2 The HashChangeEvent interface
      3. 7.6.10.3 The PageTransitionEvent interface
    7. 7.6.11 Unloading documents
      1. 7.6.11.1 The BeforeUnloadEvent interface
    8. 7.6.12 Aborting a document load
  • 7.7 Offline Web applications
    1. 7.7.1 Introduction
      1. 7.7.1.1 Supporting offline caching for legacy applications
      2. 7.7.1.2 Event summary
    2. 7.7.2 Application caches
    3. 7.7.3 The cache manifest syntax
      1. 7.7.3.1 Some sample manifests
      2. 7.7.3.2 Writing cache manifests
      3. 7.7.3.3 Parsing cache manifests
    4. 7.7.4 Downloading or updating an application cache
    5. 7.7.5 The application cache selection algorithm
    6. 7.7.6 Changes to the networking model
    7. 7.7.7 Expiring application caches
    8. 7.7.8 Disk space
    9. 7.7.9 Application cache API
    10. 7.7.10 Browser state
  • 8 Web application APIs
    1. 8.1 Scripting
      1. 8.1.1 Introduction
      2. 8.1.2 Enabling and disabling scripting
      3. 8.1.3 Processing model
        1. 8.1.3.1 Definitions
        2. 8.1.3.2 Script settings for browsing contexts
        3. 8.1.3.3 Calling scripts
        4. 8.1.3.4 Creating scripts
        5. 8.1.3.5 Killing scripts
        6. 8.1.3.6 Runtime script errors
          1. 8.1.3.6.1 Runtime script errors in documents
          2. 8.1.3.6.2 The ErrorEvent interface
      4. 8.1.4 Event loops
        1. 8.1.4.1 Definitions
        2. 8.1.4.2 Processing model
        3. 8.1.4.3 Generic task sources
      5. 8.1.5 Events
        1. 8.1.5.1 Event handlers
        2. 8.1.5.2 Event handlers on elements, Document objects, and Window objects
          1. 8.1.5.2.1 IDL definitions
        3. 8.1.5.3 Event firing
        4. 8.1.5.4 Events and the Window object
    2. 8.2 Base64 utility methods
    3. 8.3 Dynamic markup insertion
      1. 8.3.1 Opening the input stream
      2. 8.3.2 Closing the input stream
      3. 8.3.3 document.write()
      4. 8.3.4 document.writeln()
    4. 8.4 Timers
    5. 8.5 User prompts
      1. 8.5.1 Simple dialogs
      2. 8.5.2 Printing
      3. 8.5.3 Dialogs implemented using separate documents
    6. 8.6 System state and capabilities
      1. 8.6.1 The Navigator object
        1. 8.6.1.1 Client identification
        2. 8.6.1.2 Language preferences
        3. 8.6.1.3 Custom scheme and content handlers
          1. 8.6.1.3.1 Security and privacy
          2. 8.6.1.3.2 Sample user interface
        4. 8.6.1.4 Manually releasing the storage mutex
        5. 8.6.1.5 Plugins
      2. 8.6.2 The External interface
    7. 8.7 Images
  • 9 Communication
    1. 9.1 The MessageEvent interfaces
    2. 9.2 Server-sent events
      1. 9.2.1 Introduction
      2. 9.2.2 The EventSource interface
      3. 9.2.3 Processing model
      4. 9.2.4 Parsing an event stream
      5. 9.2.5 Interpreting an event stream
      6. 9.2.6 Authoring notes
      7. 9.2.7 Connectionless push and other features
      8. 9.2.8 Garbage collection
      9. 9.2.9 Implementation advice
      10. 9.2.10 IANA considerations
        1. 9.2.10.1 text/event-stream
        2. 9.2.10.2 Last-Event-ID
    3. 9.3 Web sockets
      1. 9.3.1 Introduction
      2. 9.3.2 The WebSocket interface
      3. 9.3.3 Feedback from the protocol
      4. 9.3.4 Ping and Pong frames
      5. 9.3.5 Parsing WebSocket URLs
      6. 9.3.6 The CloseEvent interfaces
      7. 9.3.7 Garbage collection
    4. 9.4 Cross-document messaging
      1. 9.4.1 Introduction
      2. 9.4.2 Security
        1. 9.4.2.1 Authors
        2. 9.4.2.2 User agents
      3. 9.4.3 Posting messages
    5. 9.5 Channel messaging
      1. 9.5.1 Introduction
        1. 9.5.1.1 Examples
        2. 9.5.1.2 Ports as the basis of an object-capability model on the Web
        3. 9.5.1.3 Ports as the basis of abstracting out service implementations
      2. 9.5.2 Message channels
      3. 9.5.3 Message ports
      4. 9.5.4 Broadcasting to many ports
      5. 9.5.5 Ports and garbage collection
    6. 9.6 Broadcasting to other browsing contexts
  • 10 Web workers
    1. 10.1 Introduction
      1. 10.1.1 Scope
      2. 10.1.2 Examples
        1. 10.1.2.1 A background number-crunching worker
        2. 10.1.2.2 Worker used for background I/O
        3. 10.1.2.3 Shared workers introduction
        4. 10.1.2.4 Shared state using a shared worker
        5. 10.1.2.5 Delegation
      3. 10.1.3 Tutorials
        1. 10.1.3.1 Creating a dedicated worker
        2. 10.1.3.2 Communicating with a dedicated worker
        3. 10.1.3.3 Shared workers
    2. 10.2 Infrastructure
      1. 10.2.1 The global scope
        1. 10.2.1.1 The WorkerGlobalScope common interface
        2. 10.2.1.2 Dedicated workers and the DedicatedWorkerGlobalScope interface
        3. 10.2.1.3 Shared workers and the SharedWorkerGlobalScope interface
      2. 10.2.2 The event loop
      3. 10.2.3 The worker's lifetime
      4. 10.2.4 Processing model
      5. 10.2.5 Runtime script errors
      6. 10.2.6 Creating workers
        1. 10.2.6.1 The AbstractWorker abstract interface
        2. 10.2.6.2 Script settings for workers
        3. 10.2.6.3 Dedicated workers and the Worker interface
        4. 10.2.6.4 Shared workers and the SharedWorker interface
    3. 10.3 APIs available to workers
      1. 10.3.1 Importing scripts and libraries
      2. 10.3.2 The WorkerNavigator object
      3. 10.3.3 Worker locations
  • 11 Web storage
    1. 11.1 Introduction
    2. 11.2 The API
      1. 11.2.1 The Storage interface
      2. 11.2.2 The sessionStorage attribute
      3. 11.2.3 The localStorage attribute
      4. 11.2.4 The storage event
        1. 11.2.4.1 The StorageEvent interface
      5. 11.2.5 Threads
    3. 11.3 Disk space
    4. 11.4 Privacy
      1. 11.4.1 User tracking
      2. 11.4.2 Sensitivity of data
    5. 11.5 Security
      1. 11.5.1 DNS spoofing attacks
      2. 11.5.2 Cross-directory attacks
      3. 11.5.3 Implementation risks
  • 12 The HTML syntax
    1. 12.1 Writing HTML documents
      1. 12.1.1 The DOCTYPE
      2. 12.1.2 Elements
        1. 12.1.2.1 Start tags
        2. 12.1.2.2 End tags
        3. 12.1.2.3 Attributes
        4. 12.1.2.4 Optional tags
        5. 12.1.2.5 Restrictions on content models
        6. 12.1.2.6 Restrictions on the contents of raw text and escapable raw text elements
      3. 12.1.3 Text
        1. 12.1.3.1 Newlines
      4. 12.1.4 Character references
      5. 12.1.5 CDATA sections
      6. 12.1.6 Comments
    2. 12.2 Parsing HTML documents
      1. 12.2.1 Overview of the parsing model
      2. 12.2.2 The input byte stream
        1. 12.2.2.1 Parsing with a known character encoding
        2. 12.2.2.2 Determining the character encoding
        3. 12.2.2.3 Character encodings
        4. 12.2.2.4 Changing the encoding while parsing
        5. 12.2.2.5 Preprocessing the input stream
      3. 12.2.3 Parse state
        1. 12.2.3.1 The insertion mode
        2. 12.2.3.2 The stack of open elements
        3. 12.2.3.3 The list of active formatting elements
        4. 12.2.3.4 The element pointers
        5. 12.2.3.5 Other parsing state flags
      4. 12.2.4 Tokenization
        1. 12.2.4.1 Data state
        2. 12.2.4.2 Character reference in data state
        3. 12.2.4.3 RCDATA state
        4. 12.2.4.4 Character reference in RCDATA state
        5. 12.2.4.5 RAWTEXT state
        6. 12.2.4.6 Script data state
        7. 12.2.4.7 PLAINTEXT state
        8. 12.2.4.8 Tag open state
        9. 12.2.4.9 End tag open state
        10. 12.2.4.10 Tag name state
        11. 12.2.4.11 RCDATA less-than sign state
        12. 12.2.4.12 RCDATA end tag open state
        13. 12.2.4.13 RCDATA end tag name state
        14. 12.2.4.14 RAWTEXT less-than sign state
        15. 12.2.4.15 RAWTEXT end tag open state
        16. 12.2.4.16 RAWTEXT end tag name state
        17. 12.2.4.17 Script data less-than sign state
        18. 12.2.4.18 Script data end tag open state
        19. 12.2.4.19 Script data end tag name state
        20. 12.2.4.20 Script data escape start state
        21. 12.2.4.21 Script data escape start dash state
        22. 12.2.4.22 Script data escaped state
        23. 12.2.4.23 Script data escaped dash state
        24. 12.2.4.24 Script data escaped dash dash state
        25. 12.2.4.25 Script data escaped less-than sign state
        26. 12.2.4.26 Script data escaped end tag open state
        27. 12.2.4.27 Script data escaped end tag name state
        28. 12.2.4.28 Script data double escape start state
        29. 12.2.4.29 Script data double escaped state
        30. 12.2.4.30 Script data double escaped dash state
        31. 12.2.4.31 Script data double escaped dash dash state
        32. 12.2.4.32 Script data double escaped less-than sign state
        33. 12.2.4.33 Script data double escape end state
        34. 12.2.4.34 Before attribute name state
        35. 12.2.4.35 Attribute name state
        36. 12.2.4.36 After attribute name state
        37. 12.2.4.37 Before attribute value state
        38. 12.2.4.38 Attribute value (double-quoted) state
        39. 12.2.4.39 Attribute value (single-quoted) state
        40. 12.2.4.40 Attribute value (unquoted) state
        41. 12.2.4.41 Character reference in attribute value state
        42. 12.2.4.42 After attribute value (quoted) state
        43. 12.2.4.43 Self-closing start tag state
        44. 12.2.4.44 Bogus comment state
        45. 12.2.4.45 Markup declaration open state
        46. 12.2.4.46 Comment start state
        47. 12.2.4.47 Comment start dash state
        48. 12.2.4.48 Comment state
        49. 12.2.4.49 Comment end dash state
        50. 12.2.4.50 Comment end state
        51. 12.2.4.51 Comment end bang state
        52. 12.2.4.52 DOCTYPE state
        53. 12.2.4.53 Before DOCTYPE name state
        54. 12.2.4.54 DOCTYPE name state
        55. 12.2.4.55 After DOCTYPE name state
        56. 12.2.4.56 After DOCTYPE public keyword state
        57. 12.2.4.57 Before DOCTYPE public identifier state
        58. 12.2.4.58 DOCTYPE public identifier (double-quoted) state
        59. 12.2.4.59 DOCTYPE public identifier (single-quoted) state
        60. 12.2.4.60 After DOCTYPE public identifier state
        61. 12.2.4.61 Between DOCTYPE public and system identifiers state
        62. 12.2.4.62 After DOCTYPE system keyword state
        63. 12.2.4.63 Before DOCTYPE system identifier state
        64. 12.2.4.64 DOCTYPE system identifier (double-quoted) state
        65. 12.2.4.65 DOCTYPE system identifier (single-quoted) state
        66. 12.2.4.66 After DOCTYPE system identifier state
        67. 12.2.4.67 Bogus DOCTYPE state
        68. 12.2.4.68 CDATA section state
        69. 12.2.4.69 Tokenizing character references
      5. 12.2.5 Tree construction
        1. 12.2.5.1 Creating and inserting nodes
        2. 12.2.5.2 Parsing elements that contain only text
        3. 12.2.5.3 Closing elements that have implied end tags
        4. 12.2.5.4 The rules for parsing tokens in HTML content
          1. 12.2.5.4.1 The "initial" insertion mode
          2. 12.2.5.4.2 The "before html" insertion mode
          3. 12.2.5.4.3 The "before head" insertion mode
          4. 12.2.5.4.4 The "in head" insertion mode
          5. 12.2.5.4.5 The "in head noscript" insertion mode
          6. 12.2.5.4.6 The "after head" insertion mode
          7. 12.2.5.4.7 The "in body" insertion mode
          8. 12.2.5.4.8 The "text" insertion mode
          9. 12.2.5.4.9 The "in table" insertion mode
          10. 12.2.5.4.10 The "in table text" insertion mode
          11. 12.2.5.4.11 The "in caption" insertion mode
          12. 12.2.5.4.12 The "in column group" insertion mode
          13. 12.2.5.4.13 The "in table body" insertion mode
          14. 12.2.5.4.14 The "in row" insertion mode
          15. 12.2.5.4.15 The "in cell" insertion mode
          16. 12.2.5.4.16 The "in select" insertion mode
          17. 12.2.5.4.17 The "in select in table" insertion mode
          18. 12.2.5.4.18 The "in template" insertion mode
          19. 12.2.5.4.19 The "after body" insertion mode
          20. 12.2.5.4.20 The "in frameset" insertion mode
          21. 12.2.5.4.21 The "after frameset" insertion mode
          22. 12.2.5.4.22 The "after after body" insertion mode
          23. 12.2.5.4.23 The "after after frameset" insertion mode
        5. 12.2.5.5 The rules for parsing tokens in foreign content
      6. 12.2.6 The end
      7. 12.2.7 Coercing an HTML DOM into an infoset
      8. 12.2.8 An introduction to error handling and strange cases in the parser
        1. 12.2.8.1 Misnested tags: <b><i></b></i>
        2. 12.2.8.2 Misnested tags: <b><p></b></p>
        3. 12.2.8.3 Unexpected markup in tables
        4. 12.2.8.4 Scripts that modify the page as it is being parsed
        5. 12.2.8.5 The execution of scripts that are moving across multiple documents
        6. 12.2.8.6 Unclosed formatting elements
    3. 12.3 Serializing HTML fragments
    4. 12.4 Parsing HTML fragments
    5. 12.5 Named character references
  • 13 The XHTML syntax
    1. 13.1 Writing XHTML documents
    2. 13.2 Parsing XHTML documents
    3. 13.3 Serializing XHTML fragments
    4. 13.4 Parsing XHTML fragments
  • 14 Rendering
    1. 14.1 Introduction
    2. 14.2 The CSS user agent style sheet and presentational hints
    3. 14.3 Non-replaced elements
      1. 14.3.1 Hidden elements
      2. 14.3.2 The page
      3. 14.3.3 Flow content
      4. 14.3.4 Phrasing content
      5. 14.3.5 Bidirectional text
      6. 14.3.6 Quotes
      7. 14.3.7 Sections and headings
      8. 14.3.8 Lists
      9. 14.3.9 Tables
      10. 14.3.10 Margin collapsing quirks
      11. 14.3.11 Form controls
      12. 14.3.12 The hr element
      13. 14.3.13 The fieldset and legend elements
    4. 14.4 Replaced elements
      1. 14.4.1 Embedded content
      2. 14.4.2 Images
      3. 14.4.3 Attributes for embedded content and images
      4. 14.4.4 Image maps
    5. 14.5 Bindings
      1. 14.5.1 Introduction
      2. 14.5.2 The button element
      3. 14.5.3 The details element
      4. 14.5.4 The input element as a text entry widget
      5. 14.5.5 The input element as domain-specific widgets
      6. 14.5.6 The input element as a range control
      7. 14.5.7 The input element as a colour well
      8. 14.5.8 The input element as a checkbox and radio button widgets
      9. 14.5.9 The input element as a file upload control
      10. 14.5.10 The input element as a button
      11. 14.5.11 The marquee element
      12. 14.5.12 The meter element
      13. 14.5.13 The progress element
      14. 14.5.14 The select element
      15. 14.5.15 The textarea element
      16. 14.5.16 The keygen element
    6. 14.6 Frames and framesets
    7. 14.7 Interactive media
      1. 14.7.1 Links, forms, and navigation
      2. 14.7.2 The title attribute
      3. 14.7.3 Editing hosts
      4. 14.7.4 Text rendered in native user interfaces
    8. 14.8 Print media
    9. 14.9 Unstyled XML documents
  • 15 Obsolete features
    1. 15.1 Obsolete but conforming features
      1. 15.1.1 Warnings for obsolete but conforming features
    2. 15.2 Non-conforming features
    3. 15.3 Requirements for implementations
      1. 15.3.1 The applet element
      2. 15.3.2 The marquee element
      3. 15.3.3 Frames
      4. 15.3.4 Other elements, attributes and APIs
  • 16 IANA considerations
    1. 16.1 text/html
    2. 16.2 multipart/x-mixed-replace
    3. 16.3 application/xhtml+xml
    4. 16.4 application/x-www-form-urlencoded
    5. 16.5 text/cache-manifest
    6. 16.6 text/ping
    7. 16.7 application/microdata+json
    8. 16.8 Ping-From
    9. 16.9 Ping-To
    10. 16.10 web+ scheme prefix
  • Index
    1. Elements
    2. Element content categories
    3. Attributes
    4. Element Interfaces
    5. All Interfaces
    6. Events
    7. MIME Types
  • References
  • Acknowledgements
 
   
 
@@ -2483,13 +2481,12 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
 
    
    WebVTT
    
 
-    
    Implementations may support WebVTT as a text track format for subtitles, captions,
-    chapter titles, metadata, etc, for media resources. [WEBVTT]
    
+    
    Implementations may support WebVTT as a text track format for subtitles, captions, chapter
+    titles, metadata, etc, for media resources. [WEBVTT]
    
 
     
    The following terms, used in this specification, are defined in the WebVTT specification:
    
 
-    
    • WebVTT interface
-     
    • WebVTT file
+    
      • WebVTT file
      
      • WebVTT file using cue text
      
      • WebVTT file using chapter title text
      
      • WebVTT file using only nested cues
@@ -2497,6 +2494,7 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
      
      • The rules for updating the display of WebVTT text tracks
      
      • The rules for interpreting WebVTT cue text
      
      • The WebVTT text track cue writing direction
+     
      • VTTCue interface
     
      
 
    
      The WebSocket protocol
      
@@ -15646,11436 +15644,11484 @@ Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(h
 
 
 
+  
 
-  
      4.6 Edits
      
+  
      4.6.1 Introduction
      
 
-  
      The ins and del elements represent edits to the document.
      
+  
      Links are a conceptual construct, created by a, area, and
+  link elements, that represent a connection between
+  two resources, one of which is the current Document. There are two kinds of links in
+  HTML:
      
 
+  
      Links to external resources
      These are links to resources that are to be used to augment the current document,
+   generally automatically processed by the user agent.
      Hyperlinks
      These are links to other resources that are generally exposed to the user by the user
+   agent so that the user can cause the user agent to navigate to those resources, e.g.
+   to visit them in a browser or download them.
      
 
-  
      4.6.1 The ins element
      
+  
      For link elements with an href attribute and a
+  rel attribute, links must be created for the keywords of the
+  rel attribute, as defined for those keywords in the link types section.
      
 
-  
      Categories:
      Flow content.
      Phrasing content.
      Palpable content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      cite — Link to the source of the quotation or more information about the edit
      datetime — Date and (optionally) time of the change
      DOM interface:
      Uses the HTMLModElement interface.
      
+  
      Similarly, for a and area elements with an href attribute and a rel attribute, links must be created for the keywords of the
+  rel attribute as defined for those keywords in the link types section. Unlike link elements, however,
+  a and area element with an href
+  attribute that either do not have a rel attribute, or
+  whose rel attribute has no keywords that are defined as
+  specifying hyperlinks, must also create a hyperlink.
+  This implied hyperlink has no special meaning (it has no link type)
+  beyond linking the element's document to the resource given by the element's href attribute.
      
 
-  
      The ins element represents an addition to the document.
      
+  
      A hyperlink can have one or more hyperlink
+  annotations that modify the processing semantics of that hyperlink.
      
 
-  
      
 
-   
      The following represents the addition of a single paragraph:
      
+  
 
-   
      <aside>
- <ins>
-  <p> I like fruit. </p>
- </ins>
-</aside>
      
+  
      The href attribute on a and
+  area elements must have a value that is a valid URL potentially surrounded by
+  spaces.
      
 
-   
      As does the following, because everything in the aside element here counts as
-   phrasing content and therefore there is just one paragraph:
      
+  
      The href attribute on a and
+  area elements is not required; when those elements do not have href attributes they do not create hyperlinks.
      
 
-   
      <aside>
- <ins>
-  Apples are <em>tasty</em>.
- </ins>
- <ins>
-  So are pears.
- </ins>
-</aside>
      
+  
      The target attribute, if present, must be
+  a valid browsing context name or keyword. It gives the name of the browsing
+  context that will be used. User agents use this name when
+  following hyperlinks.
      
 
-  
      
+  
      When an a or area element's activation behavior is
+  invoked, the user agent may allow the user to indicate a preference regarding whether the
+  hyperlink is to be used for navigation or whether the resource it
+  specifies is to be downloaded.
      
 
-  
      ins elements should not cross implied paragraph
-  boundaries.
      
+  
      In the absence of a user preference, the default should be navigation if the element has no
+  download attribute, and should be to download the
+  specified resource if it does.
      
 
-  
      
+  
      Whether determined by the user's preferences or via the presence or absence of the attribute,
+  if the decision is to use the hyperlink for navigation then the user
+  agent must follow the hyperlink, and if the decision is
+  to use the hyperlink to download a resource, the user agent must download the hyperlink. These terms are defined in subsequent sections
+  below.
      
 
-   
      The following example represents the addition of two paragraphs, the second of which was
-   inserted in two parts. The first ins element in this example thus crosses a
-   paragraph boundary, which is considered poor form.
      
+  
      The download attribute, if present,
+  indicates that the author intends the hyperlink to be used for downloading a resource. The
+  attribute may have a value; the value, if any, specifies the default file name that the author
+  recommends for use in labeling the resource in a local file system. There are no restrictions on
+  allowed values, but authors are cautioned that most file systems have limitations with regard to
+  what punctuation is supported in file names, and user agents are likely to adjust file names
+  accordingly.
      
 
-   
      <aside>
- <!-- don't do this -->
- <ins datetime="2005-03-16 00:00Z">
-  <p> I like fruit. </p>
-  Apples are <em>tasty</em>.
- </ins>
- <ins datetime="2007-12-19 00:00Z">
-  So are pears.
- </ins>
-</aside>
      
 
-   
      Here is a better way of marking this up. It uses more elements, but none of the elements cross
-   implied paragraph boundaries.
      
+  
      The ping attribute, if present,
+  gives the URLs of the resources that are interested in being notified if the user follows the
+  hyperlink. The value must be a set of space-separated tokens, each of which must be a
+  valid non-empty URL. The value is used by the user agent for
+  hyperlink auditing.
      
 
-   
      <aside>
- <ins datetime="2005-03-16 00:00Z">
-  <p> I like fruit. </p>
- </ins>
- <ins datetime="2005-03-16 00:00Z">
-  Apples are <em>tasty</em>.
- </ins>
- <ins datetime="2007-12-19 00:00Z">
-  So are pears.
- </ins>
-</aside>
      
+  
      The rel attribute on a and
+  area elements controls what kinds of links the elements create. The attribute's value
+  must be a set of space-separated tokens. The allowed keywords
+  and their meanings are defined below.
      
 
-   
+  
      The rel attribute has no default value. If the
+  attribute is omitted or if none of the values in the attribute are recognised by the user agent,
+  then the document has no particular relationship with the destination resource other than there
+  being a hyperlink between the two.
      
 
-  
      
+  
      The hreflang attribute on
+  a and area elements that create hyperlinks, if present, gives the language of the linked resource. It is
+  purely advisory. The value must be a valid BCP 47 language tag. [BCP47]
+  User agents must not consider this attribute authoritative — upon
+  fetching the resource, user agents must use only language information associated with the resource
+  to determine its language, not metadata included in the link to the resource.
      
 
+  
      The type attribute, if present, gives the
+  MIME type of the linked resource. It is purely advisory. The value must be a
+  valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the
+  resource, user agents must not use metadata included in the link to the resource to determine its
+  type.
      
 
-  
      4.6.2 The del element
      
 
-  
      Categories:
      Flow content.
      Phrasing content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      cite — Link to the source of the quotation or more information about the edit
      datetime — Date and (optionally) time of the change
      DOM interface:
      Uses the HTMLModElement interface.
      
+  
 
-  
      The del element represents a removal from the document.
      
+  
 
-  
      del elements should not cross implied paragraph
-  boundaries.
      
+  
      When a user follows a hyperlink created by an element
+  subject, the user agent must run the following steps:
      
 
-  
      
+  
      1. Let replace be false.
      2. Let source be the browsing context that contains the
+   Document object with which subject in question is
+   associated.
      3. 
 
-   
        The following shows a "to do" list where items that have been done are crossed-off with the
-   date and time of their completion.
        
+    
        If the user indicated a specific browsing context when following the hyperlink,
+    or if the user agent is configured to follow hyperlinks by navigating a particular browsing
+    context, then let target be that browsing context.
        
 
-   
        <h1>To Do</h1>
-<ul>
- <li>Empty the dishwasher</li>
- <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
- <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
- <li>Buy a printer</li>
-</ul>
        
+    
        Otherwise, if subject is an a or area element
+    that has a target attribute, then let target be the browsing context that is chosen by applying the
+    rules for choosing a browsing context given a browsing context name, using the value of
+    the target attribute as the browsing context name. If
+    these rules result in the creation of a new browsing context, set replace to true.
        
 
-  
      
+    
      Otherwise, if the hyperlink is a sidebar
+    hyperlink, the user agent implements a feature that can be considered a secondary
+    browsing context, and the user agent intends to use this feature in this instance, let
+    target be such a secondary browsing context.
      
 
+    
      Otherwise, if target is an a or area element
+    with no target attribute, but the
+    Document contains a base element with a target attribute, then let target be the
+    browsing context that is chosen by applying the rules for choosing a browsing
+    context given a browsing context name, using the value of the target attribute of the first such base element as
+    the browsing context name. If these rules result in the creation of a new browsing
+    context, set replace to true.
       
 
+    
      Otherwise, let target be the browsing context that subject itself is in.
      
 
-  
      4.6.3 Attributes common to ins and del elements
      
+   
    • Resolve the URL given by the href attribute of that element, relative to that
+   element.
    • 
 
-  
      The cite attribute may be used to specify the
-  address of a document that explains the change. When that document is long, for instance the
-  minutes of a meeting, authors are encouraged to include a fragment identifier pointing to the
-  specific part of that document that discusses the change.
      
+    
      If that is successful, let URL be the resulting absolute
+    URL.
      
 
-  
      If the cite attribute is present, it must be a valid
-  URL potentially surrounded by spaces that explains the change. To obtain
-  the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such
-  citation links, but they are primarily intended for private use (e.g. by server-side scripts
-  collecting statistics about a site's edits), not for readers.
      
+    
      Otherwise, if resolving the URL failed, the
+    user agent may report the error to the user in a user-agent-specific manner, may queue a
+    task to navigate the target
+    browsing context to an error page to report the error, or may ignore the error and
+    do nothing. In any case, the user agent must then abort these steps.
      
 
+   
    • In the case of server-side image maps, append the hyperlink
+   suffix to URL.
    • 
 
-  
      The datetime attribute may be used to specify
-  the time and date of the change.
      
+    
      Queue a task to navigate the target browsing context to URL. If replace is true, the navigation must be performed with replacement
+    enabled. The source browsing context must be source.
      
 
-  
      If present, the datetime attribute's value must be a
-  valid date string with optional time.
      
+   
+
+  
      The task source for the tasks mentioned above is the DOM manipulation task
+  source.
      
 
   
 
-  
      User agents must parse the datetime attribute according
-  to the parse a date or time string algorithm. If that doesn't return a date or a global date and time,
-  then the modification has no associated timestamp (the value is non-conforming; it is not a
-  valid date string with optional time). Otherwise, the modification is marked as
-  having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated
-  time-zone offset information to determine which time zone to present the given datetime in.
      
 
-  
 
-  
      This value may be shown to the user, but it is primarily intended for
-  private use.
      
 
-  
      The ins and del elements must implement the
-  HTMLModElement interface:
      
+  
      4.6.4 Downloading resources
      
 
-  
      interface HTMLModElement : HTMLElement {
-           attribute DOMString cite;
-           attribute DOMString dateTime;
-};
      
+  
      In some cases, resources are intended for later use rather than immediate viewing. To indicate
+  that a resource is intended to be downloaded for use later, rather than immediately used, the
+  download attribute can be specified on the
+  a or area element that creates the hyperlink to that
+  resource.
      
 
-  
+  
      The attribute can furthermore be given a value, to specify the file name that user agents are
+  to use when storing the resource in a file system. This value can be overridden by the Content-Disposition HTTP header's filename parameters. [RFC6266]
      
 
-  
      The cite IDL attribute must reflect
-  the element's cite content attribute. The dateTime IDL attribute must reflect the
-  element's datetime content attribute.
      
+  
      In cross-origin situations, the download attribute
+  has to be combined with the Content-Disposition HTTP
+  header, specifically with the attachment disposition type, to avoid the user
+  being warned of possibly nefarious activity. (This is to protect users from being made to download
+  sensitive personal or confidential information without their full understanding.)
      
 
   
 
+  
      
 
+  
      When a user downloads a hyperlink created by an
+  element, the user agent must run the following steps:
      
 
-  
      4.6.4 Edits and paragraphs
      
+  
      1. Resolve the URL given by the href attribute of that element, relative to that
+   element.
      2. If resolving the URL fails, the user agent
+   may report the error to the user in a user-agent-specific manner, may
+   navigate to an error page to report the error, or may
+   ignore the error and do nothing. In either case, the user agent must abort these steps.
        
 
-  
        This section is non-normative.
        
+   
      3. Otherwise, let URL be the resulting absolute
+   URL.
      4. In the case of server-side image maps, append the hyperlink
+   suffix to URL.
      5. Return to whatever algorithm invoked these steps and continue
+   these steps asynchronously.
      6. Fetch URL and handle the resulting resource
+   as a download.
      
 
-  
      Since the ins and del elements do not affect paragraphing, it is possible, in some cases where paragraphs are implied (without explicit p elements), for an
-  ins or del element to span both an entire paragraph or other
-  non-phrasing content elements and part of another paragraph. For example:
      
+  
      When a user agent is to handle a resource obtained from a fetch algorithm as
+  a download, it should provide the user with a way to save the resource for later use, if a
+  resource is successfully obtained; or otherwise should report any problems downloading the file to
+  the user.
      
 
-  
      <section>
- <ins>
-  <p>
-   This is a paragraph that was inserted.
-  </p>
-  This is another paragraph whose first sentence was inserted
-  at the same time as the paragraph above.
- </ins>
- This is a second sentence, which was there all along.
-</section>
      
+  
      If the user agent needs a file name for a resource being handled as a download, it
+  should select one using the following algorithm.
      
 
-  
      By only wrapping some paragraphs in p elements, one can even get the end of one
-  paragraph, a whole second paragraph, and the start of a third paragraph to be covered by the same
-  ins or del element (though this is very confusing, and not considered
-  good practice):
      
+  
      This algorithm is intended to mitigate security dangers involved in downloading
+  files from untrusted sites, and user agents are strongly urged to follow it.
       
 
-  
      <section>
- This is the first paragraph. <ins>This sentence was
- inserted.
- <p>This second paragraph was inserted.</p>
- This sentence was inserted too.</ins> This is the
- third paragraph in this example.
- <!-- (don't do this) -->
-</section>
      
+  
      1. Let filename be the void value.
      2. If the resource has a Content-Disposition
+   header, that header specifies the attachment disposition type, and the
+   header includes file name information, then let filename have the value
+   specified by the header, and jump to the step labeled sanitize below. [RFC6266]
      3. Let interface origin be the origin of the
+   Document in which the download or
+   navigate action resulting in the download was initiated, if any.
      4. Let resource origin be the origin of the URL of the
+   resource being downloaded, unless that URL's scheme
+   component is data, in which case let resource origin be
+   the same as the interface origin, if any.
      5. If there is no interface origin, then let trusted
+   operation be true. Otherwise, let trusted operation be true if resource origin is the same origin as interface
+   origin, and false otherwise.
      6. If trusted operation is true and the resource has a Content-Disposition header and that header includes file
+   name information, then let filename have the value specified by the header,
+   and jump to the step labeled sanitize below. [RFC6266]
      7. If the download was not initiated from a hyperlink created by an
+   a or area element, or if the element of the hyperlink from
+   which it was initiated did not have a download
+   attribute when the download was initiated, or if there was such an attribute but its value when
+   the download was initiated was the empty string, then jump to the step labeled no proposed
+   file name.
      8. Let proposed filename have the value of the download attribute of the element of the
+   hyperlink that initiated the download at the time the download was
+   initiated.
      9. If trusted operation is true, let filename have
+   the value of proposed filename, and jump to the step labeled sanitize
+   below.
      10. If the resource has a Content-Disposition
+   header and that header specifies the attachment disposition type, let filename have the value of proposed filename, and jump to the
+   step labeled sanitize below. [RFC6266]
      11. No proposed file name: If trusted operation is true, or if the
+   user indicated a preference for having the resource in question downloaded, let filename have a value derived from the URL of the resource in a
+   user-agent-defined manner, and jump to the step labeled sanitize below.
      12. 
 
-  
        However, due to the way implied paragraphs are defined, it is
-  not possible to mark up the end of one paragraph and the start of the very next one using the same
-  ins or del element. You instead have to use one (or two) p
-  element(s) and two ins or del elements, as for example:
        
+    
        Act in a user-agent-defined manner to safeguard the user from a potentially hostile
+    cross-origin download. If the download is not to be aborted, then let filename be set to the user's preferred file name or to a file name selected by
+    the user agent, and jump to the step labeled sanitize below.
        
 
-  
        <section>
- <p>This is the first paragraph. <del>This sentence was
- deleted.</del></p>
- <p><del>This sentence was deleted too.</del> That
- sentence needed a separate &lt;del&gt; element.</p>
-</section>
        
+    
        
 
-  
        Partly because of the confusion described above, authors are strongly encouraged to always mark
-  up all paragraphs with the p element, instead of having ins or
-  del elements that cross implied paragraphs
-  boundaries.
        
+     
        If the algorithm reaches this step, then a download was begun from a different origin than
+     the resource being downloaded, and the origin did not mark the file as suitable for
+     downloading, and the download was not initiated by the user. This could be because a download attribute was used to trigger the download, or
+     because the resource in question is not of a type that the user agent supports.
        
 
+     
        This could be dangerous, because, for instance, a hostile server could be trying to get a
+     user to unknowingly download private information and then re-upload it to the hostile server,
+     by tricking the user into thinking the data is from the hostile server.
        
 
-  
        4.6.5 Edits and lists
        
+     
        Thus, it is in the user's interests that the user be somehow notified that the resource in
+     question comes from quite a different source, and to prevent confusion, any suggested file name
+     from the potentially hostile interface origin should be ignored.
        
 
-  
        This section is non-normative.
        
+    
        
 
-  
        The content models of the ol and ul elements do not allow
-  ins and del elements as children. Lists always represent all their
-  items, including items that would otherwise have been marked as deleted.
        
+   
      13. Sanitize: Optionally, allow the user to influence filename. For
+   example, a user agent could prompt the user for a file name, potentially providing the value of
+   filename as determined above as a default value.
      14. 
 
-  
        To indicate that an item is inserted or deleted, an ins or del
-  element can be wrapped around the contents of the li element. To indicate that an
-  item has been replaced by another, a single li element can have one or more
-  del elements followed by one or more ins elements.
        
+    
        Adjust filename to be suitable for the local file system.
        
 
-  
        
+    
        For example, this could involve removing characters that are not legal in
+    file names, or trimming leading and trailing whitespace.
        
 
-   
        In the following example, a list that started empty had items added and removed from it over
-   time. The bits in the example that have been emphasized show the parts that are the "current"
-   state of the list. The list item numbers don't take into account the edits, though.
        
+   
      15. If the platform conventions do not in any way use extensions to determine the types of file on the file system,
+   then return filename as the file name and abort these steps.
      16. Let claimed type be the type given by the resource's Content-Type metadata, if any is known. Let named
+   type be the type given by filename's extension, if any is known. For the purposes of this step, a
+   type is a mapping of a MIME type to an extension.
      17. If named type is consistent with the user's preferences (e.g. because
+   the value of filename was determined by prompting the user), then return filename as the file name and abort these steps.
      18. If claimed type and named type are the same type
+   (i.e. the type given by the resource's Content-Type metadata is
+   consistent with the type given by filename's extension), then return filename as the file
+   name and abort these steps.
      19. 
 
-   
        <h1>Stop-ship bugs</h1>
-<ol>
- <li><ins datetime="2008-02-12T15:20Z">Bug 225:
- Rain detector doesn't work in snow</ins></li>
- <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
- Water buffer overflows in April</ins></del></li>
- <li><ins datetime="2008-02-16T13:50Z">Bug 230:
- Water heater doesn't use renewable fuels</ins></li>
- <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
- Carbon dioxide emissions detected after startup</ins></del></li>
-</ol>
        
+    
        If the claimed type is known, then alter filename to
+    add an extension corresponding to claimed
+    type.
        
 
-  
    • 
+    
    Otherwise, if named type is known to be potentially dangerous (e.g. it
+    will be treated by the platform conventions as a native executable, shell script, HTML
+    application, or executable-macro-capable document) then optionally alter filename to add a known-safe extension
+    (e.g. ".txt").
    
 
-  
    
+    
    This last step would make it impossible to download executables, which might not
+    be desirable. As always, implementors are forced to balance security and usability in this
+    matter.
    
 
-   
    In the following example, a list that started with just fruit was replaced by a list with just
-   colours.
    
+   
  • Return filename as the file name.
 
-   
    <h1>List of <del>fruits</del><ins>colours</ins></h1>
-<ul>
- <li><del>Lime</del><ins>Green</ins></li>
- <li><del>Apple</del></li>
- <li>Orange</li>
- <li><del>Pear</del></li>
- <li><ins>Teal</ins></li>
- <li><del>Lemon</del><ins>Yellow</ins></li>
- <li>Olive</li>
- <li><ins>Purple</ins></li>
-</ul>
    
+  
    For the purposes of this algorithm, a file extension
+  consists of any part of the file name that platform conventions dictate will be used for
+  identifying the type of the file. For example, many operating systems use the part of the file
+  name following the last dot (".") in the file name to determine the type of
+  the file, and from that the manner in which the file is to be opened or executed.
    
 
-  
    • 
+  
    User agents should ignore any directory or path information provided by the resource itself,
+  its URL, and any download attribute, in
+  deciding where to store the resulting file in the user's file system.
    
 
+  
 
-  
    4.6.6 Edits and tables
    
 
-  
    This section is non-normative.
    
 
-  
    The elements that form part of the table model have complicated content model requirements that
-  do not allow for the ins and del elements, so indicating edits to a
-  table can be difficult.
    
 
-  
    To indicate that an entire row or an entire column has been added or removed, the entire
-  contents of each cell in that row or column can be wrapped in ins or del
-  elements (respectively).
    
+  
 
-  
    
+  
 
-   
    Here, a table's row has been added:
    
+  
    If a hyperlink created by an a or area element has a
+  ping attribute, and the user follows the hyperlink, and
+  the value of the element's href attribute can be resolved, relative to the element, without failure, then the user
+  agent must take the ping attribute's value, split that string on spaces, resolve each resulting token relative to the element, and then each resulting absolute URL ping URL should
+  be fetched from the origin of the
+  Document containing the hyperlink  (as described below). (Tokens that fail to resolve are ignored.) This may be done in parallel
+  with the primary request, and is independent of the result of that request.
    
 
-   
    <table>
- <thead>
-  <tr> <th> Game name           <th> Game publisher   <th> Verdict
- <tbody>
-  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
-  <tr> <td> Portal              <td> Valve            <td> 10/10
-  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
-</table>
    
+  
    User agents should allow the user to adjust this behavior, for example in conjunction with a
+  setting that disables the sending of HTTP Referer (sic)
+  headers. Based on the user's preferences, UAs may either ignore the ping attribute altogether, or selectively ignore URLs in the
+  list (e.g. ignoring any third-party URLs).
    
 
-   
    Here, a column has been removed (the time at which it was removed is given also, as is a link
-   to the page explaining why):
    
+  
    For each ping URL that is an HTTP URL, the request must be performed using
+  the POST method, with an entity body with the MIME type text/ping
+  consisting of the four-character string "PING". All relevant cookie and
+  HTTP authentication headers must be included in the request. Which other headers are required
+  depends on the URLs involved, as follows. For the purposes of these requirements, target URL is the resulting absolute URL obtained from resolving the value of the element's href attribute.
    
 
-   
    <table>
- <thead>
-  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
- <tbody>
-  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
-  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
-  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
-</table>
    
+  
    If both the address of the Document
+   object containing the hyperlink being audited and ping URL have the
+   same origin
    The request must include a Ping-From HTTP header with,
+   as its value, the address of the document containing
+   the hyperlink, and a Ping-To HTTP header with, as its value,
+   the target URL. The request must not include a Referer (sic) HTTP header. 
    Otherwise, if the origins are different, but the document containing the hyperlink being
+   audited was not retrieved over an encrypted connection
    The request must include a Referer (sic) HTTP header with,
+   as its value, the address of the document containing
+   the hyperlink, a Ping-From HTTP header with the same value,
+   and a Ping-To HTTP header with, as its value, target URL.
    Otherwise, the origins are different and the document containing the hyperlink being audited
+   was retrieved over an encrypted connection
    The request must include a Ping-To HTTP header with, as
+   its value, target URL. The request must neither include a Referer (sic) HTTP header nor include a Ping-From HTTP header.
    
 
-  
    
+  
    To save bandwidth, implementors might also wish to consider omitting optional
+  headers such as Accept from these requests.
    
 
-  
    Generally speaking, there is no good way to indicate more complicated edits (e.g. that a cell
-  was removed, moving all subsequent cells up or to the left).
    
+  
    User agents must, unless otherwise specified by the user, honor the HTTP headers (including, in
+  particular, redirects and HTTP cookie headers), but must ignore any entity bodies returned in the
+  responses. User agents may close the connection prematurely once they start receiving an entity
+  body. [COOKIES]
    
+
+  
    When the ping attribute is present, user agents
+  should clearly indicate to the user that following the hyperlink will also cause secondary
+  requests to be sent in the background, possibly including listing the actual target URLs.
    
 
+  
    For example, a visual user agent could include the hostnames of the target ping
+  URLs along with the hyperlink's actual URL in a status bar or tooltip.
    
 
+  
 
+  
    
 
-  
    4.7 Embedded content
    
+   
    The ping attribute is redundant with pre-existing
+   technologies like HTTP redirects and JavaScript in allowing Web pages to track which off-site
+   links are most popular or allowing advertisers to track click-through rates.
    
 
+   
    However, the ping attribute provides these advantages
+   to the user over those alternatives:
    
 
+   
    • It allows the user to see the final target URL unobscured.
    • It allows the UA to inform the user about the out-of-band notifications.
    • It allows the user to disable the notifications without losing the underlying link
+    functionality.
    • It allows the UA to optimise the use of available network bandwidth so that the target page
+    loads faster.
    
 
+   
    Thus, while it is possible to track users without this feature, authors are encouraged to use
+   the ping attribute so that the user agent can make the
+   user experience more transparent.
    
 
+  
    
 
   
 
-  
    4.7.1 Introduction
    
 
-  
    This section is non-normative.
    
 
-  
    To embed an image in HTML, when there is only a single image resource,
-  use the img element and its src attribute.
    
+  
    4.6.5 Link types
    
 
-  
    
+  
    The following table summarizes the link types that are defined by this specification. This
+  table is non-normative; the actual definitions for the link types are given in the next few
+  sections.
    
 
-
    <h2>From today's featured article</h2>
-<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
-<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
-was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
    
+  
    In this section, the term referenced document refers to the resource identified by the
+  element representing the link, and the term current document refers to the resource within
+  which the element representing the link finds itself.
    
 
-  
    
+  
 
-  
    However, there are a number of situations for which the author might wish
-  to use multiple image resources that the user agent can choose from:
    
+  
    To determine which link types apply to a link, a, or
+  area element, the element's rel attribute must be split on spaces. The resulting tokens are the link types
+  that apply to that element.
    
 
-  
    • 
+  
 
-    
      Different users might have different environmental characteristics:
      
+  
      Except where otherwise specified, a keyword must not be specified more than once per rel attribute.
      
 
-    
      • 
+  
        Link types are always ASCII case-insensitive, and must be
+  compared as such.
        
 
-      
        The users' physical screen size might be different from one another.
        
+  
        Thus, rel="next" is the same as rel="NEXT".
        
 
-      
        A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14 inches diagonally.
        
+  
        Link typeEffect on...Brief description
        linka and area
        alternateHyperlinkHyperlinkGives alternate representations of the current document.
        authorHyperlinkHyperlinkGives a link to the author of the current document or article.
        bookmarknot allowedHyperlinkGives the permalink for the nearest ancestor section.
        externalnot allowedAnnotationIndicates that the referenced document is not part of the same site as the current document.
        helpHyperlinkHyperlinkProvides a link to context-sensitive help.
        iconExternal Resourcenot allowedImports an icon to represent the current document.
        licenseHyperlinkHyperlinkIndicates that the main content of the current document is covered by the copyright license described by the referenced document.
        nextHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the next document in the series is the referenced document.
        nofollownot allowedAnnotationIndicates that the current document's original author or publisher does not endorse the referenced document.
        noreferrernot allowedAnnotationRequires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.
        pingbackExternal Resourcenot allowedGives the address of the pingback server that handles pingbacks to the current document.
        prefetchExternal ResourceExternal ResourceSpecifies that the target resource should be preemptively cached.
        prevHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
        searchHyperlinkHyperlinkGives a link to a resource that can be used to search through the current document and its related pages.
        sidebarHyperlinkHyperlinkSpecifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).
        stylesheetExternal Resourcenot allowedImports a stylesheet.
        tagnot allowedHyperlinkGives a tag (identified by the given address) that applies to the current document.
        
 
-      
        This is only relevant when an image's rendered size depends on the viewport size.
        
+  
 
-     
      • 
+  
        Some of the types described below list synonyms for these values. These are to be handled as specified by user agents, but must not be used
+  in documents.
        
 
-      
        The users' screen pixel density might be different from one another.
        
+  
 
-      
        A mobile phone's screen might have three times as many physical pixels per inch
-      compared to another mobile phone's screen, regardless of their physical screen size.
        
+  
 
-     
      • 
 
-      
        The users' zoom level might be different from one another, or might change for a single user over time.
        
+  
        4.6.5.1 Link type "alternate"
        
 
-      
        A user might zoom in to a particular image to be able to get a more detailed look.
        
+  
        The alternate keyword may be used with link,
+  a, and area elements.
        
 
-      
        The zoom level and the screen pixel density (the previous point) can both affect the number of physical screen pixels per CSS pixel.
-      This ratio is usually referred to as device-pixel-ratio.
        
+  
        The meaning of this keyword depends on the values of the other attributes.
        
 
-     
      • 
+  
        If the element is a link element and the rel
+   attribute also contains the keyword stylesheet
        
 
-      
        The users' screen orientation might be different from one another, or might change for a single user over time.
        
+    
        The alternate keyword modifies the meaning of the stylesheet keyword in the way described for that keyword. The
+    alternate keyword does not create a link of its own.
        
 
-      
        A tablet can be held upright or rotated 90 degrees, so that the screen is either "portrait" or "landscape".
        
+   
        If the alternate keyword is used with the type attribute set to the value application/rss+xml or the value application/atom+xml
        
 
-     
      • 
+    
        The keyword creates a hyperlink referencing a syndication feed (though not
+    necessarily syndicating exactly the same content as the current page).
        
 
-      
        The users' network speed, network latency and bandwidth cost might be different from one another, or might change for a single user over time.
        
+    
 
-      
        A user might be on a fast, low-latency and constant-cost connection while at work,
-      on a slow, low-latency and constant-cost connection while at home,
-      and on a variable-speed, high-latency and variable-cost connection anywhere else.
        
+    
        The first link, a, or area element in the document (in
+    tree order) with the alternate keyword used with the type attribute set to the value application/rss+xml or the value application/atom+xml must
+    be treated as the default syndication feed for the purposes of feed autodiscovery.
        
 
-     
      
+    
      
+     
      The following link element gives the syndication
+     feed for the current page:
      
+     
      <link rel="alternate" type="application/atom+xml" href="data.xml">
      
+     
      The following extract offers various different syndication
+     feeds:
      
+     
      <p>You can access the planets database using Atom feeds:</p>
+<ul>
+ <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
+ <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
+ <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
+</ul>
      
+    
      
 
-   
    • 
+    
 
-    
      Authors might want to show different image content depending on the rendered size of the image.
-    This is usually referred to as art direction.
      
+   
      Otherwise
      
 
-    
      When a Web page is viewed on a screen with a large physical size (assuming a maximized browser window),
-    the author might wish to include some less relevant parts surrounding the critical part of the image.
-    When the same Web page is viewed on a screen with a small physical size,
-    the author might wish to show only the critical part of the image.
      
+    
      The keyword creates a hyperlink referencing an alternate representation of the
+    current document.
      
 
-   
    • 
+    
      The nature of the referenced document is given by the hreflang, and type attributes.
      
 
-    
      Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport.
-    This is usually referred to as viewport-based selection.
      
+    
      If the alternate keyword is used with the hreflang attribute, and that attribute's value differs
+    from the root element's language, it indicates that the referenced
+    document is a translation.
      
 
-    
      A Web page might have a banner at the top that always spans the entire viewport width.
-    In this case, the rendered size of the image depends on the physical size of the screen (assuming a maximized browser window).
      
+    
      If the alternate keyword is used with the type attribute, it indicates that the referenced document is
+    a reformulation of the current document in the specified format.
      
 
-    
      Another Web page might have images in columns,
-    with a single column for screens with a small physical size,
-    two columns for screens with medium physical size,
-    and three columns for screens with big physical size,
-    with the images varying in rendered size in each case to fill up the viewport.
-    In this case, the rendered size of an image might be bigger in the one-column layout compared to the two-column layout,
-    despite the screen being smaller.
      
+    
      The hreflang and type attributes can be combined when specified with the alternate keyword.
      
 
-   
    • 
+    
      
 
-    
      Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports.
-    This is usually referred to as image format-based selection.
      
+     
      For example, the following link is a French translation that uses the PDF format:
      
 
-    
      A Web page might have some images in the JPEG, WebP and JPEG XR image formats,
-    with the latter two having better compression abilities compared to JPEG.
-    Since different user agents can support different image formats,
-    with some formats offering better compression ratios,
-    the author would like to serve the better formats to user agenst that support them,
-    while providing JPEG fallback for user agents that don't.
      
+     
      <link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
      
 
-   
    
+
    -

    The above situations are not mutually exclusive. - For example, it is reasonable to combine different resources for different device-pixel-ratio - with different resources for art direction.

    +

    This relationship is transitive — that is, if a document links to two other documents + with the link type "alternate", then, in addition to implying + that those documents are alternative representations of the first document, it is also implying + that those two documents are alternative representations of each other.

    -

    While it is possible to solve these problems using scripting, doing so introduces some other problems:

    + -

    • Some user agents agressively download images specified in the HTML markup, - before scripts have had a chance to run, - so that Web pages complete loading sooner. - If a script changes which image to download, - the user agent will potentially start two separate downloads, - which can instead cause worse page loading performance.

    • If the author avoids specifying any image in the HTML markup - and instead instantiates a single download from script, - that avoids the double download problem above - but instead it makes no image be downloaded at all for users with scripting disabled - and it disables the agressive image downloading optimization.

    -

    With this in mind, this specification introduces a number of features to address the above problems in a declarative manner.

    -
    Device-pixel-ratio-based selection when the rendered size of the image is fixed
    + -

    The src and srcset - attributes on the img element can be used, - using the x descriptor, - to provide multiple images that only vary in their size - (the smaller image is a scaled-down version of the bigger image).

    +

    The author keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    -

    The x descriptor is not appropriate when the - rendered size of the image depends on the viewport width (viewport-based selection), - but can be used together with art direction.

    +

    For a and area elements, the author + keyword indicates that the referenced document provides further information about the author of + the nearest article element ancestor of the element defining the hyperlink, if there + is one, or of the page as a whole, otherwise.

    -
    +

    For link elements, the author keyword indicates + that the referenced document provides further information about the author for the page as a + whole.

    -
    <h2>From today's featured article</h2>
-<img src="/uploads/100-marie-lloyd.jpg"
-     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
-     alt="" width="100" height="150">
-<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
-was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
    +

    The "referenced document" can be, and often is, a mailto: URL giving the e-mail address of the author. [MAILTO]

    -

    The user agent can choose any of the given resources depending on - the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

    + -

    For backwards compatibility with older user agents that - don't yet understand the srcset attribute, - one of the URLs is specified in the img element's src attribute. - This will result in something useful (though perhaps lower-resolution than the user would like) - being displayed even in older user agents. - For new user agents, the src attribute participates in the resource selection, - as if it was specified in srcset with a 1x descriptor.

    +

    Synonyms: For historical reasons, user agents must also treat + link, a, and area elements that have a rev attribute with the value "made" as having the author keyword specified as a link relationship.

    -

    The image's rendered size is given in the - width and height attributes, - which allows the user agent to allocate space for the image before it is downloaded.

    + -
    -
    Art direction-based selection
    + -

    The picture element and the source element, - together with the media attribute, - can be used, to provide multiple images that vary the image content - (for intance the smaller image might be a cropped version of the bigger image).

    +

    The bookmark keyword may be used with a and + area elements. This keyword creates a hyperlink.

    -
    +

    The bookmark keyword gives a permalink for the nearest + ancestor article element of the linking element in question, or of the section the linking element is most closely associated with, if + there are no ancestor article elements.

    -
    <picture>
-  <source media="(min-width: 45em)" srcset="large.jpg">
-  <source media="(min-width: 32em)" srcset="med.jpg">
-  <img src="small.jpg" alt="The president giving an award.">
-</picture>
    +
    -

    The user agent will choose the first source element - for which the media query in the media attribute matches, - and then choose an appropriate URL from its srcset attribute.

    +

    The following snippet has three permalinks. A user agent could determine which permalink + applies to which part of the spec by looking at where the permalinks are given.

    -

    The rendered size of the image varies depending on which resource is chosen. - To specify dimensions that the user agent can use before having downloaded the image, - CSS can be used.

    + 
     ...
+ <body>
+  <h1>Example of permalinks</h1>
+  <div id="a">
+   <h2>First example</h2>
+   <p><a href="a.html" rel="bookmark">This permalink applies to
+   only the content from the first H2 to the second H2</a>. The DIV isn't
+   exactly that section, but it roughly corresponds to it.</p>
+  </div>
+  <h2>Second example</h2>
+  <article id="b">
+   <p><a href="b.html" rel="bookmark">This permalink applies to
+   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
+   <article id="c">
+    <p><a href="c.html" rel="bookmark">This permalink applies to
+    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
+   </article>
+  </article>
+ </body>
+ ...
    -
    img { width: 300px; height: 300px }
-@media (min-width: 32em) { img { width: 500px; height:300px } }
-@media (min-width: 45em) { img { width: 700px; height:400px } }
    +
    -
    -
    + + -

    This example combines art direction- and device-pixel-ratio-based selection. - A banner that takes half the viewport is provided in two versions, - one for wide screens and one for narrow screens.

    +

    The external keyword may be used with a and + area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the + implied hyperlink, if no other keywords create one).

    -
    <h1>
- <picture>
-  <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
-  <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
- </picture>
-</h1>
    +

    The external keyword indicates that the link is leading to a + document that is not part of the site that the current document forms a part of.

    -
    -
    Viewport-based selection
    + -

    The srcset and sizes attributes can be used, - using the w descriptor, - to provide multiple images that only vary in their size - (the smaller image is a scaled-down version of the bigger image).

    +

    The help keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    -
    +

    For a and area elements, the help + keyword indicates that the referenced document provides further help information for the parent of + the element defining the hyperlink, and its children.

    -

    In this example, a banner image takes up the entire viewport width - (using appropriate CSS).

    +
    -
    <h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
-     src="wolf-400.jpg" alt="The rad wolf"></h1>
    +

    In the following example, the form control has associated context-sensitive help. The user + agent could use this information, for example, displaying the referenced document if the user + presses the "Help" or "F1" key.

    -

    The user agent will calculate the effective pixel density of each image - from the specified w descriptors and the specified rendered size in the sizes attribute. - It can then choose any of the given resources depending on - the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

    + 
     <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>
    -

    If the user's screen is 320 CSS pixels wide, this is equivalent to specifying - wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. - On the other hand, if the user's screen is 1200 CSS pixels wide, - this is equivalent to specifying - wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. - By using the w descriptors and the sizes attribute, - the user agent can choose the correct image source to download regardless of how large the user's device is.

    +
    -

    For backwards compatibility, - one of the URLs is specified in the img element's src attribute. - In new user agents, the src attribute is ignored - when the srcset attribute uses w descriptors.

    +

    For link elements, the help keyword indicates that + the referenced document provides help for the page as a whole.

    -

    In this example, the sizes attribute could be omitted - because the default value is 100vw.

    +

    For a and area elements, on some browsers, the help keyword causes the link to use a different cursor.

    -
    -
    +
    4.6.5.6 Link type "icon"
    -

    In this example, the Web page has three layouts depending on the width of the viewport. - The narrow layout has one column of images (the width of each image is about 100%), - the middle layout has two columns of images (the width of each image is about 50%), - and the widest layout has three columns of images, and some page margin (the width of each image is about 33%). - It breaks between these layouts when the viewport is 30em wide and 50em wide, respectively.

    +

    The icon keyword may be used with link elements. + This keyword creates an external resource link.

    -
    <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
-     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
-     src="swing-400.jpg" alt="Kettlebell Swing">
    + -

    The sizes attribute sets up the - layout breakpoints at 30em and 50em, - and declares the image sizes between these breakpoints to be - 100vw, 50vw, or calc(33vw - 100px). - These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.

    +

    The specified resource is an icon representing the page or site, and should be used by the user + agent when representing the page in the user interface.

    -

    The user agent will pick a width from the sizes attribute, - using the first item with a <media-condition> (the part in parentheses) that evaluates to true, - or using the last item (calc(33vw - 100px)) if they all evaluate to false.

    + -

    For example, if the viewport width is 29em, - then (max-width: 30em) evaluates to true and 100vw is used, - so the image size, for the purpose of resource selection, is 29em. - If the viewport width is instead 32em, - then (max-width: 30em) evaluates to false, - but (max-width: 50em) evaluates to true and 50vw is used, - so the image size, for the purpose of resource selection, is 16em (half the viewport width). - Notice that the slightly wider viewport results in a smaller image because of the different layout.

    +

    Icons could be auditory icons, visual icons, or other kinds of icons. If + multiple icons are provided, the user agent must select the most appropriate icon according to the + type, media, and sizes attributes. If there are multiple equally appropriate icons, + user agents must use the last one declared in tree order at the time that the user + agent collected the list of icons. If the user agent tries to use an icon but that icon is + determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an + unsupported format), then the user agent must try the next-most-appropriate icon as determined by + the attributes.

    -

    The user agent can then calculate the effective pixel density and choose an appropriate resource - similarly to the previous example.

    + -
    +

    User agents are not required to update icons when the list of icons changes, but + are encouraged to do so.

    -
    Image format-based selection
    +

    There is no default type for resources given by the icon keyword. + However, for the purposes of determining the type of the + resource, user agents must expect the resource to be an image.

    -

    The type attribute - on the source element can be used, - to provide multiple images in different formats.

    + -
    +

    The sizes attribute gives the sizes of icons + for visual media. Its value, if present, is merely advisory. User agents may use the value to + decide which icon(s) to use if multiple icons are available.

    -
    <h2>From today's featured article</h2>
-<picture>
- <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
- <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
- <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
-</picture>
-<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
-was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
    +

    If specified, the attribute must have a value that is an unordered set of unique + space-separated tokens which are ASCII case-insensitive. Each value must be + either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT + ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN + CAPITAL LETTER X character.

    -

    In this example, the user agent will choose the first source that has - a type attribute with a supported MIME type. - If the user agent supports WebP images, - the first source element will be chosen. - If not, but the user agent does support JPEG XR images, - the second source element will be chosen. - If neither of those formats are supported, - the img element will be chosen.

    +

    The keywords represent icon sizes in raw pixels (as opposed to CSS pixels).

    -
    +

    An icon that is 50 CSS pixels wide intended for displays with a device pixel + density of two device pixels per CSS pixel (2x, 192dpi) would have a width of 100 raw pixels. This + feature does not support indicating that a different resource is to be used for small + high-resolution icons vs large low-resolution icons (e.g. 50×50 2x vs 100×100 1x).

    -
    + +

    To parse and process the attribute's value, the user agent must first split the attribute's value on spaces, and must then parse each resulting + keyword to determine what it represents.

    -

    4.7.2 Dependencies

    + -
    Media Queries [MQ] Correct reference is http://dev.w3.org/csswg/mediaqueries-4/
    <media-condition>
    CSS Values and Units [CSSVALUES]
    <length>
    CSS Syntax [CSSSYNTAX]
    Parse a comma-separated list of component values
    component value
    <whitespace-token>
    +

    The any keyword represents that the + resource contains a scalable icon, e.g. as provided by an SVG image.

    + -

    4.7.3 The picture element

    +

    Other keywords must be further parsed as follows to determine what they represent:

    -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    DOM interface:
    -
    interface HTMLPictureElement : HTMLElement {};
    -
    +

    • If the keyword doesn't contain exactly one U+0078 LATIN SMALL LETTER X or U+0058 LATIN + CAPITAL LETTER X character, then this keyword doesn't represent anything. Abort these steps for + that keyword.

    • Let width string be the string before the "x" or + "X".

    • Let height string be the string after the "x" or + "X".

    • If either width string or height string start with + a U+0030 DIGIT ZERO (0) character or contain any characters other than ASCII digits, + then this keyword doesn't represent anything. Abort these steps for that keyword.

    • Apply the rules for parsing non-negative integers to width + string to obtain width.

    • Apply the rules for parsing non-negative integers to height + string to obtain height.

    • The keyword represents that the resource contains a bitmap icon with a width of width device pixels and a height of height device + pixels.

    -

    The picture element is a container - which provides multiples sources to its contained img element - to allow authors to declaratively control or give hints to the user agent about which image resource to use, - based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

    + -

    The picture element is somewhat different - from the similar-looking video and audio elements. - While all of them contain source elements, - the source element's src attribute has no meaning - when the element is nested within a picture element, - and the resource selection algorithm is different. - As well, the picture element itself does not display anything; - it merely provides a context for its contained img element - that enables it to choose from multiple URLs.

    +

    The keywords specified on the sizes attribute must not + represent icon sizes that are not actually available in the linked resource.

    + -

    4.7.4 The source element when used with the picture element

    +

    In the absence of a link with the icon keyword, for + Documents obtained over HTTP or HTTPS, user agents may instead attempt to + fetch and use an icon with the absolute URL obtained by + resolving the URL "/favicon.ico" against the document's + address, as if the page had declared that icon using the icon + keyword.

    -
    Categories:
    Same as for the source element.
    Contexts in which this element can be used:
    As a child of a picture element, before the img element.
    Content model:
    Same as for the source element.
    Content attributes:
    Global attributes
    srcset
    sizes
    media
    type
    DOM interface:
    -
    partial interface HTMLSourceElement {
-           attribute DOMString srcset;
-           attribute DOMString sizes;
-           attribute DOMString media;
-};
    -
    + -

    The authoring requirements in this section only apply if the source element has - a parent that is a picture element.

    +
    -

    The source element allows authors to specify multiple alternative - source sets for img elements. - It does not represent anything on its own.

    +

    The following snippet shows the top part of an application with several icons.

    -

    The srcset attribute must be present, - and must consist of one or more image candidate strings, - each separated from the next by a U+002C COMMA character (,). - If an image candidate string contains no descriptors - and no space characters after the URL, - the following image candidate string, if there is one, - must begin with one or more space characters.

    + 
    <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>lsForums — Inbox</title>
+  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
+  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
+  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
+  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
+  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
+  <link rel=stylesheet href=lsforums.css>
+  <script src=lsforums.js></script>
+  <meta name=application-name content="lsForums">
+ </head>
+ <body>
+  ...
    -

    The sizes attribute may also be present. - If present, the value must be a valid source size list.

    +
    -

    The media attributes may also be present. - If present, the value must contain a valid media query.

    +

    For historical reasons, the icon keyword may be preceded by the + keyword "shortcut". If the "shortcut" keyword is + present, the rel attribute's entire value must be an + ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and + no other space characters).

    -

    The type attribute may also be present. - If present, the value must be a valid MIME type. - It gives the type of the images in the source set, - to allow the user agent to skip to the next source element - if it does not support the given type.

    -

    If the type attribute - is not specified, the user agent will not select a different - source element if it finds that it does not support - the image format after fetching it.

    + -

    When a source element has a following sibling - source element or img element with a - srcset attribute specified, it must have - at least one of the following:

    +

    The license keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    - +

    The license keyword indicates that the referenced document + provides the copyright license terms under which the main content of the current document is + provided.

    -

    The src attribute must not be present.

    +

    This specification does not specify how to distinguish between the main content of a document + and content that is not deemed to be part of that main content. The distinction should be made + clear to the user.

    - +
    -

    The IDL attributes srcset, - sizes and - media must reflect the - respective content attributes of the same name.

    +

    Consider a photo sharing site. A page on that site might describe and show a photograph, and + the page might be marked up as follows:

    + + 
    <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>Exampl Pictures: Kissat</title>
+  <link rel="stylesheet" href="/style/default">
+ </head>
+ <body>
+  <h1>Kissat</h1>
+  <nav>
+   <a href="../">Return to photo index</a>
+  </nav>
+  <figure>
+   <img src="/pix/39627052_fd8dcd98b5.jpg">
+   <figcaption>Kissat</figcaption>
+  </figure>
+  <p>One of them has six toes!</p>
+  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
+  <footer>
+   <a href="/">Home</a> | <a href="../">Photo index</a>
+   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
+  </footer>
+ </body>
+</html>
    + +

    In this case the license applies to just the photo (the main + content of the document), not the whole document. In particular not the design of the page + itself, which is covered by the copyright given at the bottom of the document. This could be made + clearer in the styling (e.g. making the license link prominently positioned near the photograph, + while having the page copyright in light small text at the foot of the page.

    + +
    +

    Synonyms: For historical reasons, user agents must also treat the keyword + "copyright" like the license keyword.

    -

    4.7.5 The img element

    + -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Form-associated element.
    If the element has a usemap attribute: Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    alt — Replacement text for use when images are not available
    src — Address of the resource
    srcset — Images to use in different situations (e.g. high-resolution displays, small monitors, etc)
    sizes
    crossorigin — How the element handles crossorigin requests
    usemap — Name of image map to use
    ismap — Whether the image is a server-side image map
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    -
    [NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]
-interface HTMLImageElement : HTMLElement {
-           attribute DOMString alt;
-           attribute DOMString src;
-           attribute DOMString srcset;
-           attribute DOMString sizes;
-           attribute DOMString crossOrigin;
-           attribute DOMString useMap;
-           attribute boolean isMap;
-           attribute unsigned long width;
-           attribute unsigned long height;
-  readonly attribute unsigned long naturalWidth;
-  readonly attribute unsigned long naturalHeight;
-  readonly attribute boolean complete;
-  readonly attribute DOMString currentSrc;
 
-  // also has obsolete members
-};
    -
    + -

    An img element represents an image.

    +

    The nofollow keyword may be used with a and + area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the + implied hyperlink, if no other keywords create one).

    - +

    The nofollow keyword indicates that the link is not endorsed + by the original author or publisher of the page, or that the link to the referenced document was + included primarily because of a commercial relationship between people affiliated with the two + pages.

    -

    The image given by the src and srcset attributes, - and any previous sibling source elements' - srcset attributes if the parent is a picture element, - is the embedded content; the value of - the alt attribute provides equivalent content for - those who cannot process images or who have image loading disabled (i.e. it is the - img element's fallback content).

    -

    The requirements on the alt attribute's value are described - in the next section.

    + -

    The src attribute must be present, and must contain a - valid non-empty URL potentially surrounded by spaces referencing a non-interactive, - optionally animated, image resource that is neither paged nor scripted.

    +

    The noreferrer keyword may be used with a and + area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the + implied hyperlink, if no other keywords create one).

    -

    The srcset attribute may also be present. - If present, its value must consist of one or more - image candidate strings, - each separated from the next by a U+002C COMMA character (,). - If an image candidate string contains no descriptors - and no space characters after the URL, - the following image candidate string, if there is one, - must begin with one or more space characters.

    +

    It indicates that no referrer information is to be leaked when following the link.

    -

    An image candidate string consists of the following components, in order, with the - further restrictions described below this list:

    +

    If a user agent follows a link defined by an a or area element that + has the noreferrer keyword, the user agent must not include a + Referer (sic) HTTP header (or equivalent for other protocols) in the + request.

    -

    1. Zero or more space characters.

    2. A valid non-empty URL that does not start or end with a U+002C COMMA character (,), - referencing a non-interactive, optionally animated, image resource - that is neither paged nor scripted.

    3. Zero or more space characters.

    4. +

      This keyword also causes the opener + attribute to remain null if the hyperlink creates a new browsing context.

      -

      Zero or one of the following:

      + -

      • A width descriptor, consisting of: - a space character, - a valid non-negative integer giving a number greater than zero - representing the width descriptor value, - and a U+0077 LATIN SMALL LETTER W character.

      • A pixel density descriptor, consisting of: - a space character, - a valid floating-point number giving a number greater than zero - representing the pixel density descriptor value, - and a U+0078 LATIN SMALL LETTER X character.

      + -

    5. Zero or more space characters.

    -

    There must not be an image candidate string for an element that - has the same width descriptor value as another - image candidate string's width descriptor value for the same element.

    + -

    There must not be an image candidate string for an element that - has the same pixel density descriptor value as another - image candidate string's pixel density descriptor value for the same element. - For the purpose of this requirement, - an image candidate string with no descriptors is equivalent to - an image candidate string with a 1x descriptor.

    +

    The pingback keyword may be used with link + elements. This keyword creates an external resource + link.

    -

    If a source element has a sizes attribute present - or an img element has a sizes attribute present, - all image candidate strings for that - element must have the width descriptor specified.

    +

    For the semantics of the pingback keyword, see the Pingback + 1.0 specification. [PINGBACK]

    -

    If an image candidate string for an source or img element - has the width descriptor specified, - all other image candidate strings for that element - must also have the width descriptor specified.

    -

    The specified width in an image candidate string's width descriptor - must match the intrinsic width in the resource given by the image candidate string's URL.

    + -

    The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs, - JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element), - animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root - element that use declarative SMIL animation), and so forth. However, these definitions preclude - SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text - documents, and so forth. [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] - [MNG]

    +

    The prefetch keyword may be used with link, + a, and area elements. This keyword creates an external resource link.

    -

    If the srcset attribute is present, - the sizes attribute may also be present. - If present, its value must be a valid source size list.

    +

    The prefetch keyword indicates that preemptively fetching and + caching the specified resource is likely to be beneficial, as it is highly likely that the user + will require this resource.

    -

    A valid source size list is a string that matches the following grammar: - [CSSVALUES] [MQ]

    +

    There is no default type for resources given by the prefetch + keyword.

    -
    <source-size-list> = <source-size># [ , <source-size-value> ]? | <source-size-value>
-<source-size> = <media-condition> <source-size-value>
-<source-size-value> = <length>
    -

    A <source-size-value> must not be negative.

    + -

    The img element must not be used as a layout tool. In particular, img - elements should not be used to display transparent images, as such images rarely convey meaning and - rarely add anything useful to the document.

    +

    The search keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    -
    +

    The search keyword indicates that the referenced document + provides an interface specifically for searching the document and its related resources.

    -

    The crossorigin attribute is a CORS - settings attribute. Its purpose is to allow images from third-party sites that allow - cross-origin access to be used with canvas.

    +

    OpenSearch description documents can be used with link elements and + the search link type to enable user agents to autodiscover search + interfaces. [OPENSEARCH]

    - -
    + -

    An img element has a current request and a pending request. - The current request is initially set to a new image request. - The pending request is initially set to null. - The current request is usually referred to as the img element itself.

    +

    The sidebar keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    -

    An image request has a state, current URL and image data.

    +

    The sidebar keyword indicates that the referenced document, if + retrieved, is intended to be shown in a secondary browsing context (if possible), + instead of in the current browsing context.

    -

    An image request's state is one of the following:

    +

    A hyperlink with the sidebar keyword specified is + a sidebar hyperlink.

    -
    Unavailable
    The user agent hasn't obtained any image data, - or has obtained some or all of the image data but - hasn't yet decoded enough of the image to get the image dimensions.
    Partially available
    The user agent has obtained some of the image data and at least the image dimensions are - available.
    Completely available
    The user agent has obtained all of the image data and at least the image dimensions are - available.
    Broken
    The user agent has obtained all of the image data that it can, but it cannot even decode the - image enough to get the image dimensions (e.g. the image is corrupted, or the format is not - supported, or no data could be obtained).
    -

    An image request's current URL is initially the empty string.

    -

    An image request's image data is the decoded image data.

    + -

    When an image request is either in the partially - available state or in the completely available state, it is - said to be available.

    +

    The stylesheet keyword may be used with link + elements. This keyword creates an external resource + link that contributes to the styling processing model.

    -

    An image request is initially unavailable.

    +

    The specified resource is a resource that describes how to present the document. Exactly how + the resource is to be processed depends on the actual type of the resource.

    -

    When an img element is available, it - provides a paint source whose width is the image's intrinsic width, whose height is - the image's intrinsic height, and whose appearance is the intrinsic appearance of the image.

    +

    If the alternate keyword is also specified on the + link element, then the link is an alternative stylesheet; in this case, + the title attribute must be specified on the link + element, with a non-empty value.

    -

    In a browsing context where scripting is - disabled, user agents may obtain images immediately or on demand. In a browsing - context where scripting is enabled, user agents - must obtain images immediately.

    +

    The default type for resources given by the stylesheet + keyword is text/css.

    -

    A user agent that obtains images immediately must synchronously - update the image data of an img element, - with the restart animation flag set if so stated, - whenever that element is created, - or has experienced relevant mutations, - and whenever that element's adopting steps are run.

    + -

    A user agent that obtains images on demand must update the image data of an - img element whenever it needs the image data (i.e. on demand), - but only if the img element is in the - unavailable state. When an img element - has experienced relevant mutations, - and whenever that element's adopting steps are run, if the user - agent only obtains images on demand, the img element must return to the unavailable state.

    +

    The appropriate times to obtain the resource are: -

    The relevant mutations for an img element are as follows:

    + -

    • The element's src, - srcset - or sizes attributes are set, changed, or removed.

    • The element's src attribute is set to the same value as the previous value. - This must set the restart animation flag for the update the image data algorithm.

    • The element's crossorigin attribute's state is changed.

    • The element is inserted into or removed from a picture parent element.

    • The element's parent is a picture element and a - source element is inserted as a previous sibling.

    • The element's parent is a picture element and a - source element that was a previous sibling is removed.

    • The element's parent is a picture element and a - source element that is a previous sibling has its - srcset, - sizes, - media - or type attributes set, changed, or removed.

    +

    Quirk: If the document has been set to quirks mode, has the + same origin as the URL of the external resource, + and the Content-Type metadata of the external resource is not a + supported style sheet type, the user agent must instead assume it to be text/css.

    -

    Each img element has a last selected source, which must initially be - null.

    +

    Once a resource has been obtained, if its Content-Type metadata is text/css, the user + agent must run these steps:

    -

    Each image request has a current pixel density, which must initially be undefined.

    + + -

    When an img element has a current pixel density that is not 1.0, the - element's image data must be treated as if its resolution, in device pixels per CSS pixels, was - the current pixel density.

    +

    1. Let element be the link element that created the + external resource link.

    2. If element has an associated CSS style sheet, remove the CSS style sheet in question.

    3. If element no longer creates an external resource link + that contributes to the styling processing model, or if, since the resource in question was obtained, it has become appropriate to obtain it again (meaning this algorithm is about to be + invoked again for a newly obtained resource), then abort these steps.

    4. -

      For example, if the current pixel density is 3.125, that means - that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has an - intrinsic dimension of 96 CSS pixels by 192 CSS pixels.

      +

      Create a CSS style sheet with the following properties:

      -

      Each Document object must have a list of available images. Each image - in this list is identified by a tuple consisting of an absolute URL, a CORS - settings attribute mode, and, if the mode is not No - CORS, an origin. - Each image furthermore has an ignore higher-layer caching flag. - User agents may copy entries from one Document - object's list of available images to another at any time (e.g. when the - Document is created, user agents can add to it all the images that are loaded in - other Documents), but must not change the keys of entries copied in this way when - doing so, and must unset the ignore higher-layer caching flag for the copied entry. - User agents may also remove images from such lists at any time (e.g. to save - memory). - User agents must remove entries in the list of available images as appropriate - given higher-layer caching semantics for the resource (e.g. the HTTP Cache-Control - response header) when the ignore higher-layer caching is unset.

      +
      type

      text/css

      location
      -

      The user agent can also store the image data in a separatly from the list of available images.

      +

      The resulting absolute URL determined during the obtain algorithm.

      -

      For example, if a resource has the HTTP response header Cache-Control: must-revalidate, - the user agent would remove it from the list of available images but could keep the image data separately, - and use that if the server responds with a 204 No Content status.

      +

      This is before any redirects get applied.

      -

      When the user agent is to update the image data of an img element, - optionally with the restart animations flag set, - it must run the following steps:

      +
      owner node

      element

      media
      -

      1. If the element's Document is not the active document, - abort these steps.

      2. If the user agent cannot support images, or its support for images has been disabled, then - abort the image request for the current request and the pending request, - set current request to the unavailable state, - let pending request be null, - and abort these steps.

      3. +

        The media attribute of element.

        -

        If the element does not have a srcset attribute specified and - it does not have a parent or it has a parent but it is not a picture element, - and it has a src attribute specified and - its value is not the empty string, let selected source be the value of the - element's src attribute, and selected pixel - density be 1.0. Otherwise, let selected source be null and selected pixel density be undefined.

        +

        This is a reference to the (possibly absent at this time) attribute, rather + than a copy of the attribute's current value. The CSSOM specification defines what happens + when the attribute is dynamically set, changed, or removed.

        -

      4. Let the img element's last selected source be selected source.

      5. +
        title
        -

        If selected source is not null, run these substeps:

        +

        The title attribute of element.

        -

        1. Resolve selected source, relative - to the element, and let the result be absolute URL. If that is not successful, then - abort these inner set of steps.

        2. Let key be a tuple consisting of the resulting absolute - URL, the img element's crossorigin - attribute's mode, and, if that mode is not No CORS, - the Document object's origin.

        3. If the list of available images contains an entry for key, then - set the ignore higher-layer caching flag for that entry, - abort the image request for the current request and the pending request, - let pending request be null, - let current request be a new image request whose image data is that of the entry - and whose state is set to the completely available state, - update the presentation of the image appropriately, - let the current request's current pixel density be selected pixel density, - queue a task to restart the animation if restart animation is set, - change current request's current URL to absolute URL, - and then fire a simple event named load at the img element, - and abort these steps.

        +

        This is similarly a reference to the attribute, rather than a copy of the + attribute's current value.

        -

      6. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. - The synchronous - section consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

      7. +
        alternate flag

        Set if the link is an alternative stylesheet; unset otherwise.

        origin-clean flag

        Set if the resource is CORS-same-origin; unset otherwise.

        parent CSS style sheet
        owner CSS rule

        null

        disabled flag

        Left at its default value.

        CSS rules

        Left uninitialized.

      -

      ⌛ If another instance of this algorithm for this img element was started - after this instance (even if it aborted and is no longer running), then abort these steps.

      +

      The CSS environment encoding is the result of running the following steps: [CSSSYNTAX]

      -

      Only the last instance takes effect, to avoid multiple requests when, for - example, the src, srcset, - and crossorigin attributes are all set in - succession.

      +

      1. If the element has a charset attribute, get an encoding from that attribute's value. If that + succeeds, return the resulting encoding and abort these steps. [ENCODING]

      2. Otherwise, return the document's character encoding. [DOM]

      -
    5. +
    -

    ⌛ Let selected source and selected pixel density be the - URL and pixel density that results from selecting an image source, - respectively.

    + -
  • -

    ⌛ If selected source is null, run these substeps:

    -

    1. ⌛ Set the current request to the broken state, - abort the image request for the current request and the pending request, - and let pending request be null.

    2. ⌛ Queue a task to change the current request's current URL to the empty string, - and then, if the element has a src attribute - or a srcset attribute - or a parent that is a picture element, - fire a simple event named error at the img element.

    3. ⌛ Abort this algorithm.

    + -
  • +

    The tag keyword may be used with a and + area elements. This keyword creates a hyperlink.

    -

    ⌛ Queue a task to fire a progress event named loadstart at - the img element.

    +

    The tag keyword indicates that the tag that the + referenced document represents applies to the current document.

    -

  • Resolve selected source, relative - to the element, and let the result be absolute URL. If that is not successful, then - abort the image request for the current request and the pending request, - set the current request to the broken state, - let pending request be null, - queue a task to - change the current request's current URL to absolute URL, - fire a simple event named error at the img element - and then fire a simple event named loadend at the img element, - and abort these steps.

  • +

    Since it indicates that the tag applies to the current document, it would + be inappropriate to use this keyword in the markup of a tag cloud, which + lists the popular tags across a set of pages.

    -

    ⌛ If the pending request is not null, - and absolute URL is the same as the pending request's current URL, - then abort these steps.

    +
    -

    ⌛ If absolute URL is the same as the current request's current URL, - and current request is in the partially available state, - then abort the image request for the pending request, - queue a task to restart the animation if restart animation is set, - and abort these steps.

    +

    This document is about some gems, and so it is tagged with "http://en.wikipedia.org/wiki/Gemstone" to unambiguously categorise it as applying + to the "jewel" kind of gems, and not to, say, the towns in the US, the Ruby package format, or + the Swiss locomotive class:

    -

    ⌛ If the pending request is not null, - abort the image request for the pending request.

    + 
    <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>My Precious</title>
+ </head>
+ <body>
+  <header><h1>My precious</h1> <p>Summer 2012</p></header>
+  <p>Recently I managed to dispose of a red gem that had been
+  bothering me. I now have a much nicer blue sapphire.</p>
+  <p>The red gem had been found in a bauxite stone while I was digging
+  out the office level, but nobody was willing to haul it away. The
+  same red gem stayed there for literally years.</p>
+  <footer>
+   Tags: <a rel=tag href="http://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
+  </footer>
+ </body>
+</html>
    -

    ⌛ Let image request be a new image request - whose current URL is absolute URL.

    +
    -

    ⌛ Let the pending request be image request.

    +
    -

    ⌛ Do a potentially CORS-enabled fetch of absolute URL, - with the mode being the current state of - the element's crossorigin content attribute, - the origin being the origin of the img element's - Document, and the default origin behaviour set to taint. - Let this instance of the fetching algorithm be associated with image request.

    +

    In this document, there are two articles. The "tag" + link, however, applies to the whole page (and would do so wherever it was placed, including if it + was within the article elements).

    -

    The resource obtained in this fashion, if any, is image request's image data. - It can be either CORS-same-origin or CORS-cross-origin; this affects - the origin of the image itself (e.g. when used on a canvas).

    + 
    <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>Gem 4/4</title>
+ </head>
+ <body>
+  <article>
+   <h1>801: Steinbock</h1>
+   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
+  </article>
+  <article>
+   <h1>802: Murmeltier</h1>
+   <figure>
+    <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
+         alt="The 802 was red with pantographs and tall vents on the side.">
+    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
+   </figure>
+   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
+  </article>
+  <p class="topic"><a rel=tag href="http://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
+ </body>
+</html>
    - -

    Fetching the image must delay the load event of the element's document until the - task that is queued by the - networking task source once the resource has been fetched (defined below) has been run. -

    +
    -

    This, unfortunately, can be used to perform a rudimentary port scan of the - user's local network (especially in conjunction with scripting, though scripting isn't actually - necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those - described above to mitigate this attack, but unfortunately such policies are typically not - compatible with existing Web content.

    -

    If the resource is CORS-same-origin, each task - that is queued by the networking task source - while the image is being fetched, - if image request is the current request, - must fire a progress event named progress at the img element.

    -

  • End the synchronous section, continuing the remaining steps asynchronously, - but without missing any data from the fetch algorithm.

  • + -

    As soon as possible, jump to the first applicable entry from the following list:

    +

    Some documents form part of a sequence of documents.

    -
    If the resource type is multipart/x-mixed-replace
    +

    A sequence of documents is one where each document can have a previous sibling and a + next sibling. A document with no previous sibling is the start of its sequence, a + document with no next sibling is the end of its sequence.

    -

    The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    +

    A document may be part of multiple sequences.

    -
    1. -

      If image request is the pending request - and the user agent is able to determine image request's image's width and height, - abort the image request for the current request, - upgrade the pending request to the current request and - set the current request's state to partially available.

      + -
    2. +

      The next keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

      -

      Otherwise, if image request is the pending request - and the user agent is able to determine that image request's image - is corrupted in some fatal way such that the image dimensions cannot be obtained, - abort the image request for the current request, - upgrade the pending request to the current request - and set the current request's state to broken.

      +

      The next keyword indicates that the document is part of a + sequence, and that the link is leading to the document that is the next logical document in the + sequence.

      -
    3. -

      Otherwise, if image request is the current request, - it is in the unavailable state, - and the user agent is able to determine image request's image's width and height, - set the current request's state to partially available.

      + -
    4. +

      The prev keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

      -

      Otherwise, if image request is the current request, - it is in the unavailable state, - and the user agent is able to determine that image request's image - is corrupted in some fatal way such that the image dimensions cannot be obtained, - set the current request's state to broken. -

      +

      The prev keyword indicates that the document is part of a + sequence, and that the link is leading to the document that is the previous logical document in + the sequence.

      -
    + -

    Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new body - part comes in, it must replace the previous image. Once one body part has been completely - decoded, the user agent must set the img element to the completely available state and queue a task to fire - a simple event named load at the img - element.

    +

    Synonyms: For historical reasons, user agents must also treat the keyword + "previous" like the prev keyword.

    -

    The progress and loadend events are not fired for - multipart/x-mixed-replace image streams.

    + -
    If the resource type and data corresponds to a supported image format, as described below
    -

    The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    + -
    1. +

      Extensions to the predefined set of link types may be + registered in the microformats + wiki existing-rel-values page. [MFREL]

      -

      If the user agent is able to determine image request's image's width and height, - and image request is pending request, - abort the image request for the current request, - upgrade the pending request to the current request, - update the img element's presentation appropriately, - and set image request's state to partially available.

      +

      Anyone is free to edit the microformats wiki existing-rel-values page at + any time to add a type. Extension types must be specified with the following information:

      -
    2. +
      Keyword
      -

      Otherwise, if the user agent is able to determine image request's image's width and height, - and image request is current request, - update the img element's presentation appropriately - and set image request's state to partially available.

      +

      The actual value being defined. The value should not be confusingly similar to any other + defined value (e.g. differing only in case).

      -
    3. +

      If the value contains a U+003A COLON character (:), it must also be an absolute + URL.

      -

      Otherwise, if the user agent is able to determine that image request's image - is corrupted in some fatal way such that the image dimensions cannot be obtained, - and image request is pending request, - abort the image request for the current request and the pending request, - upgrade the pending request to the current request, - set current request to the broken state, - fire a simple event named error at the img element, - fire a simple event named loadend at the img element, - and abort these steps.

      +
      Effect on... link
      -
    4. +

      One of the following:

      -

      Otherwise, if the user agent is able to determine that image request's image - is corrupted in some fatal way such that the image dimensions cannot be obtained, - and image request is current request, - abort the image request for image request, - fire a simple event named error at the img element, - fire a simple event named loadend at the img element, - and abort these steps.

      +
      Not allowed
      The keyword must not be specified on link elements.
      Hyperlink
      The keyword may be specified on a link element; it creates a + hyperlink.
      External Resource
      The keyword may be specified on a link element; it creates an external + resource link.
      -
    +
    Effect on... a and area
    -

    That task, and each subsequent task, that is queued by the - networking task source while the image is being fetched, - if image request is the current request, - must update the presentation of the image appropriately (e.g. if - the image is a progressive JPEG, each packet can improve the resolution of the image).

    +

    One of the following:

    -

    Furthermore, the last task that is queued by the networking task source once the resource has been - fetched must additionally run these steps:

    +
    Not allowed
    The keyword must not be specified on a and area elements.
    Hyperlink
    The keyword may be specified on a and area elements; it creates a + hyperlink.
    External Resource
    The keyword may be specified on a and area elements; it creates + an external resource link.
    Hyperlink Annotation
    The keyword may be specified on a and area elements; it annotates other hyperlinks + created by the element.
    -

    1. Set image request to the completely - available state.

      +
      Brief description

      A short non-normative description of what the keyword's meaning is.

      Specification

      A link to a more detailed description of the keyword's semantics and requirements. It + could be another page on the Wiki, or a link to an external page.

      Synonyms

      A list of other keyword values that have exactly the same processing requirements. Authors + should not use the values defined to be synonyms, they are only intended to allow user agents to + support legacy content. Anyone may remove synonyms that are not used in practice; only names that + need to be processed as synonyms for compatibility with legacy content are to be registered in + this way.

      Status
      -

    2. Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.

    3. Fire a progress event or simple event named load - at the img element, depending on the resource in image request.

    4. Fire a progress event or simple event named loadend - at the img element, depending on the resource in image request.

    +

    One of the following:

    -
    Otherwise
    +
    Proposed
    The keyword has not received wide peer review and approval. Someone has proposed it and is, + or soon will be, using it.
    Ratified
    The keyword has received wide peer review and approval. It has a specification that + unambiguously defines how to handle pages that use the keyword, including when they use it in + incorrect ways.
    Discontinued
    The keyword has received wide peer review and it has been found wanting. Existing pages are + using this keyword, but new pages should avoid it. The "brief description" and "specification" + entries will give details of what authors should use instead, if anything.
    -

    The image data is not in a supported file format; the user agent must set - image request to the broken state, - abort the image request for the current request and the pending request, - upgrade the pending request to the current request, - and then queue a task to first fire a simple event named error at the img element and then fire a simple - event named loadend at the img - element.

    +

    If a keyword is found to be redundant with existing values, it should be removed and listed + as a synonym for the existing value.

    -
    +

    If a keyword is registered in the "proposed" state for a period of a month or more without + being used or specified, then it may be removed from the registry.

    - +

    If a keyword is added with the "proposed" status and found to be redundant with existing + values, it should be removed and listed as a synonym for the existing value. If a keyword is + added with the "proposed" status and found to be harmful, then it should be changed to + "discontinued" status.

    -

    To abort the image request for an image request image request means to run the following steps:

    +

    Anyone can change the status at any time, but should only do so in accordance with the + definitions above.

    -

    1. Forget image request's image data, if any.

    2. Abort any instance of the fetching algorithm for image request, - discarding any pending tasks generated by that algorithm.

    + -

    To upgrade the pending request to the current request for an img element means to run the following steps:

    + -

    1. Let the img element's current request be the pending request.

    2. Let the img element's pending request be null.

    +

    Conformance checkers must use the information given on the microformats wiki + existing-rel-values page to establish if a value is allowed or not: values defined in this + specification or marked as "proposed" or "ratified" must be accepted when used on the elements for + which they apply as described in the "Effect on..." field, whereas values marked as "discontinued" + or not listed in either this specification or on the aforementioned page must be rejected as + invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid + the use of unreliable network connectivity).

    -

    To fire a progress event or simple event named type at an element e, - depending on resource r, means to - fire a progress event named type at e if r is CORS-same-origin, - and otherwise fire a simple event named type at e.

    +

    When an author uses a new type not defined by either this specification or the Wiki page, + conformance checkers should offer to add the value to the Wiki, with the details described above, + with the "proposed" status.

    -

    To restart the animation for an img element means that, - if the image is an animated image, - all animated images with the same absolute URL and the same image data in the img element's Document - are expected to restart their animation.

    + -

    While a user agent is running the above algorithm for an element x, there - must be a strong reference from the element's Document to the element x, even if that element is not in its - Document.

    +

    Types defined as extensions in the microformats + wiki existing-rel-values page with the status "proposed" or "ratified" may be used with the + rel attribute on link, a, and area + elements in accordance to the "Effect on..." field. [MFREL]

    -

    When an img element is in the completely available - state and the user agent can decode the media data without errors, then the - img element is said to be fully decodable.

    -

    Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code - or equivalent) must be ignored when determining - the image's type and whether it is a valid image.

    -

    This allows servers to return images with error responses, and have them - displayed.

    +

    4.7 Edits

    -

    The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official - type. If these rules are not applied, then the type of the image must be the type given by - the image's associated Content-Type headers.

    +

    The ins and del elements represent edits to the document.

    -

    User agents must not support non-image resources with the img element (e.g. XML - files whose root element is an HTML element). User agents must not run executable code (e.g. - scripts) embedded in the image resource. User agents must only display the first page of a - multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an - interactive fashion, but should honor any animation in the resource.

    -

    This specification does not specify which image types are to be supported.

    +

    4.7.1 The ins element

    -
    +
    Categories:
    Flow content.
    Phrasing content.
    Palpable content.
    Contexts in which this element can be used:
    Where phrasing content is expected.
    Content model:
    Transparent.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    cite — Link to the source of the quotation or more information about the edit
    datetime — Date and (optionally) time of the change
    DOM interface:
    Uses the HTMLModElement interface.
    -

    An img element is associated with a source set.

    +

    The ins element represents an addition to the document.

    -

    A source set is a set of zero or more image sources - and a source size.

    +
    -

    An image source is a URL, - and optionally either a density descriptor, or a width descriptor.

    +

    The following represents the addition of a single paragraph:

    -

    A source size is a <source-size-value>. - When a source size has a unit relative to the viewport, - it must be interpreted relative to the img element's document's viewport. - Other units must be interpreted the same as in Media Queries. [MQ]

    + 
    <aside>
+ <ins>
+  <p> I like fruit. </p>
+ </ins>
+</aside>
    -

    When asked to select an image source for a given img element el, - user agents must do the following:

    +

    As does the following, because everything in the aside element here counts as + phrasing content and therefore there is just one paragraph:

    -

    1. Update the source set for el.

    2. If el's source set is empty, - return null as the URL and undefined as the pixel density and abort these steps.

    3. Otherwise, take el's source set - and let it be source set.

    4. In a user agent-specific manner, - choose one image source from source set. - Let this be selected source.

    5. Return selected source and its associated pixel density.

    + 
    <aside>
+ <ins>
+  Apples are <em>tasty</em>.
+ </ins>
+ <ins>
+  So are pears.
+ </ins>
+</aside>
    -

    When asked to update the source set for a given img element el, - user agents must do the following:

    +
    -

    1. Set el's source set to an empty source set.

    2. If el has a parent node and that is a picture element, - let elements be an array containing el's parent node's child elements, retaining relative order. - Otherwise, let elements be array containing only el.

    3. +

      ins elements should not cross implied paragraph + boundaries.

      -

      Iterate through elements, - doing the following for each item child:

      +
      -
      1. +

        The following example represents the addition of two paragraphs, the second of which was + inserted in two parts. The first ins element in this example thus crosses a + paragraph boundary, which is considered poor form.

        -

        If child is el:

        + 
        <aside>
+ <!-- don't do this -->
+ <ins datetime="2005-03-16 00:00Z">
+  <p> I like fruit. </p>
+  Apples are <em>tasty</em>.
+ </ins>
+ <ins datetime="2007-12-19 00:00Z">
+  So are pears.
+ </ins>
+</aside>
        -

        1. If child has a srcset attribute, - parse child's srcset attribute - and let the returned source set be source set. - Otherwise, let source set be an empty source set.

        2. Parse child's sizes attribute and - let source set's source size be the returned value.

        3. If child has a src attribute - whose value is not the empty string - and source set does not contain an - image source with a density descriptor value of 1, - and no image source with a width descriptor, - append child's src attribute value to source set.

        4. Let el's source set be source set.

        5. Abort this algorithm.

        +

        Here is a better way of marking this up. It uses more elements, but none of the elements cross + implied paragraph boundaries.

        -

      2. If child is not a source element, - continue to the next child. - Otherwise, child is a source element.

      3. If child does not have a srcset attribute, - continue to the next child.

      4. Parse child's srcset attribute and - let the returned source set be source set.

      5. If source set has zero image sources, - continue to the next child.

      6. If child has a media attribute, - and its value is not a valid media query, - or is a valid media query that evaluates to false, - continue to the next child.

      7. Parse child's sizes attribute - and let source set's source size be the returned value.

      8. If child has a type attribute, - and its value is an unknown or unsupported MIME type, - continue to the next child.

      9. Normalize the source densities of source set.

      10. Let el's source set be source set.

      11. Abort this algorithm.

      + 
      <aside>
+ <ins datetime="2005-03-16 00:00Z">
+  <p> I like fruit. </p>
+ </ins>
+ <ins datetime="2005-03-16 00:00Z">
+  Apples are <em>tasty</em>.
+ </ins>
+ <ins datetime="2007-12-19 00:00Z">
+  So are pears.
+ </ins>
+</aside>
      -
    + -

    Each img element independently considers - its previous sibling source elements - plus the img element itself - for selecting an image source, ignoring any other (invalid) elements, - including other img elements in the same picture element, - or source elements that are following siblings - of the relevant img element.

    + -

    When asked to parse a srcset attribute from an element, - parse the value of the element's srcset attribute as follows:

    -

    1. Let input be the value passed to this algorithm.

    2. Let position be a pointer into input, - initially pointing at the start of the string.

    3. Let raw candidates be an initially empty - ordered list of URLs with associated unparsed descriptor list. - The order of entries in the lists is the order in which entries are added to the lists.

    4. Splitting loop: Collect a sequence of characters - that are space characters or U+002C COMMA characters.

    5. If position is past the end of input, - then jump to the step labeled descriptor parser.

    6. Collect a sequence of characters that are not - space characters, and let that be url.

    7. Let descriptors be a new empty list.

    8. +

      4.7.2 The del element

      -

      If url ends with a U+002C COMMA character (,), - follow these substeps:

      +
      Categories:
      Flow content.
      Phrasing content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      cite — Link to the source of the quotation or more information about the edit
      datetime — Date and (optionally) time of the change
      DOM interface:
      Uses the HTMLModElement interface.
      -

      1. Remove all trailing U+002C COMMA characters from url.

      2. If url is empty, - then jump to the step labeled splitting loop.

      +

      The del element represents a removal from the document.

      -

      Otherwise, follow these substeps:

      +

      del elements should not cross implied paragraph + boundaries.

      -

      1. Let current token be the empty string.

      2. Let state be start.

      3. +
        -

        Let c be the character at position. - Do the following depending on the value of state. - For the purpose of this step, "EOF" is a special character representing - that position is past the end of input.

        +

        The following shows a "to do" list where items that have been done are crossed-off with the + date and time of their completion.

        -
        Start
        + 
        <h1>To Do</h1>
+<ul>
+ <li>Empty the dishwasher</li>
+ <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
+ <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
+ <li>Buy a printer</li>
+</ul>
        -

        Do the following, depending on the value of c:

        +
        -
        Space character

        If current token is not empty, - append current token to descriptors - and let current token be the empty string. - Set state to after token.

        U+002C COMMA (,)

        Advance position to the next character in input. - If current token is not empty, - append current token to descriptors. - Jump to the step labeled add candidate.

        U+0028 LEFT PARANTHESIS (()

        Append c to current token. - Set state to in parens.

        EOF

        If current token is not empty, - append current token to descriptors. - Jump to the step labeled add candidate.

        Anything else

        Append c to current token.

        -
        In parens
        -

        Do the following, depending on the value of c:

        +

        4.7.3 Attributes common to ins and del elements

        -
        U+0029 RIGHT PARENTHESIS ())

        Append c to current token. - Set state to start.

        EOF

        Append current token to descriptors. - Jump to the step labeled add candidate.

        Anything else

        Append c to current token.

        +

        The cite attribute may be used to specify the + address of a document that explains the change. When that document is long, for instance the + minutes of a meeting, authors are encouraged to include a fragment identifier pointing to the + specific part of that document that discusses the change.

        -
        After token
        +

        If the cite attribute is present, it must be a valid + URL potentially surrounded by spaces that explains the change. To obtain + the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such + citation links, but they are primarily intended for private use (e.g. by server-side scripts + collecting statistics about a site's edits), not for readers.

        -

        Do the following, depending on the value of c:

        -
        Space character

        Stay in this state.

        EOF

        Jump to the step labeled add candidate.

        Anything else

        Set state to start. - Set position to the previous character in input.

        +

        The datetime attribute may be used to specify + the time and date of the change.

        - +

        If present, the datetime attribute's value must be a + valid date string with optional time.

        -

        Advance position to the next character in input. - Repeat this step.

        + -
      +

      User agents must parse the datetime attribute according + to the parse a date or time string algorithm. If that doesn't return a date or a global date and time, + then the modification has no associated timestamp (the value is non-conforming; it is not a + valid date string with optional time). Otherwise, the modification is marked as + having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated + time-zone offset information to determine which time zone to present the given datetime in.

      -

    9. Add candidate: Add url to raw candidates, - associated with descriptors.

    10. Return to the step labeled splitting loop.

    11. Descriptor parser: - Let candidates be an initially empty source set. - The order of entries in the list is the order in which entries are added to the list.

    12. + -

      For each entry in raw candidates with URL url - associated with the unparsed descriptor list descriptor list, - run these substeps:

      +

      This value may be shown to the user, but it is primarily intended for + private use.

      -

      1. Let error be no.

      2. Let width be absent.

      3. Let density be absent.

      4. Let future-compat-h be absent.

      5. +

        The ins and del elements must implement the + HTMLModElement interface:

        -

        For each token in descriptor list, - run the appropriate set of steps from the following list:

        + 
        interface HTMLModElement : HTMLElement {
+           attribute DOMString cite;
+           attribute DOMString dateTime;
+};
        -
        If the token consists of a valid non-negative integer - followed by a U+0077 LATIN SMALL LETTER W character
        + -

        1. If width and density - are not both absent, - then let error be yes.

        2. Apply the rules for parsing non-negative integers to the token. - If the result is zero, let error be yes. - Otherwise, let width be the result.

        +

        The cite IDL attribute must reflect + the element's cite content attribute. The dateTime IDL attribute must reflect the + element's datetime content attribute.

        -
        If the token consists of a valid floating-point number - followed by a U+0078 LATIN SMALL LETTER X character
        + -

        1. If width, density and future-compat-h - are not all absent, - then let error be yes.

        2. -

          Apply the rules for parsing floating-point number values to the token. - If the result is less than zero, let error be yes. - Otherwise, let density be the result.

          -

          If density is zero, - the intrinsic dimensions will be infinite. - User agents are expected to have limits in how big images can be rendered, - which is allowed by the hardware limitations clause.

          +

          4.7.4 Edits and paragraphs

          -
        +

        This section is non-normative.

        -
        If the token consists of a valid non-negative integer - followed by a U+0068 LATIN SMALL LETTER H character
        +

        Since the ins and del elements do not affect paragraphing, it is possible, in some cases where paragraphs are implied (without explicit p elements), for an + ins or del element to span both an entire paragraph or other + non-phrasing content elements and part of another paragraph. For example:

        -

        1. If future-compat-h and density - are not both absent, - then let error be yes.

        2. Apply the rules for parsing non-negative integers to the token. - If the result is zero, let error be yes. - Otherwise, let future-compat-h be the result.

        + 
        <section>
+ <ins>
+  <p>
+   This is a paragraph that was inserted.
+  </p>
+  This is another paragraph whose first sentence was inserted
+  at the same time as the paragraph above.
+ </ins>
+ This is a second sentence, which was there all along.
+</section>
        -
        +

        By only wrapping some paragraphs in p elements, one can even get the end of one + paragraph, a whole second paragraph, and the start of a third paragraph to be covered by the same + ins or del element (though this is very confusing, and not considered + good practice):

        -

      6. If error is still no, - then add a new image source to candidates - whose URL is url, - associated with a width width if not absent - and a pixel density density if not absent.

      + 
      <section>
+ This is the first paragraph. <ins>This sentence was
+ inserted.
+ <p>This second paragraph was inserted.</p>
+ This sentence was inserted too.</ins> This is the
+ third paragraph in this example.
+ <!-- (don't do this) -->
+</section>
      -

    13. Return candidates.

    +

    However, due to the way implied paragraphs are defined, it is + not possible to mark up the end of one paragraph and the start of the very next one using the same + ins or del element. You instead have to use one (or two) p + element(s) and two ins or del elements, as for example:

    -

    When asked to parse a sizes attribute from an element, - parse a comma-separated list of component values - from the value of the element's sizes attribute - (or the empty string, if the attribute is absent), - and let unparsed sizes list be the result. [CSSSYNTAX]

    + 
    <section>
+ <p>This is the first paragraph. <del>This sentence was
+ deleted.</del></p>
+ <p><del>This sentence was deleted too.</del> That
+ sentence needed a separate &lt;del&gt; element.</p>
+</section>
    -

    For each unparsed size in unparsed sizes list:

    +

    Partly because of the confusion described above, authors are strongly encouraged to always mark + up all paragraphs with the p element, instead of having ins or + del elements that cross implied paragraphs + boundaries.

    -

    1. Remove all consecutive <whitespace-token>s - from the end of unparsed size. - If unparsed size is now empty, - continue to the next iteration of this algorithm.

    2. If the last component value in unparsed size - is a valid non-negative <source-size-value>, - let size be its value - and remove the component value from unparsed size. - Otherwise, continue to the next iteration of this algorithm.

    3. Remove all consecutive <whitespace-token>s - from the end of unparsed size. - If unparsed size is now empty, - return size and exit this algorithm.

    4. Parse the remaining component values in unparsed size - as a <media-condition>. - If it does not parse correctly, - or it does parse correctly but the <media-condition> evaluates to false, - continue to the next iteration of this algorithm. [MQ]

    5. Return size and exit this algorithm.

    -

    If the above algorithm exhausts unparsed sizes list without returning a size value, - return 100vw.

    +

    4.7.5 Edits and lists

    -

    While a valid source size list only contains a bare <source-size-value> - (without an accompanying <media-condition>) - as the last entry in the <source-size-list>, - the parsing algorithm technically allows such at any point in the list, - and will accept it immediately as the size - if the preceding entries in the list weren't used. - This is to enable future extensions, - and protect against simple author errors such as a final trailing comma.

    +

    This section is non-normative.

    -

    An image source can have a density descriptor, - a width descriptor, - or no descriptor at all accompanying its URL. - Normalizing a source set gives every image source a density descriptor.

    +

    The content models of the ol and ul elements do not allow + ins and del elements as children. Lists always represent all their + items, including items that would otherwise have been marked as deleted.

    -

    When asked to normalize the source densities of a source set source set, - the user agent must do the following:

    +

    To indicate that an item is inserted or deleted, an ins or del + element can be wrapped around the contents of the li element. To indicate that an + item has been replaced by another, a single li element can have one or more + del elements followed by one or more ins elements.

    -

    1. Let source size be source set's source size.

    2. +
      -

      For each image source in source set:

      +

      In the following example, a list that started empty had items added and removed from it over + time. The bits in the example that have been emphasized show the parts that are the "current" + state of the list. The list item numbers don't take into account the edits, though.

      -

      1. If the image source has a density descriptor, - continue to the next image source.

      2. + 
        <h1>Stop-ship bugs</h1>
+<ol>
+ <li><ins datetime="2008-02-12T15:20Z">Bug 225:
+ Rain detector doesn't work in snow</ins></li>
+ <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
+ Water buffer overflows in April</ins></del></li>
+ <li><ins datetime="2008-02-16T13:50Z">Bug 230:
+ Water heater doesn't use renewable fuels</ins></li>
+ <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
+ Carbon dioxide emissions detected after startup</ins></del></li>
+</ol>
        -

        Otherwise, if the image source has a width descriptor, - replace the width descriptor with a density descriptor - with a value of the width descriptor divided by the source size - and a unit of x.

        +
      -

      If the source size is zero, - the density would be infinity, - which results in the intrinsic dimensions being zero by zero.

      +
      -

    3. Otherwise, give the image source a density descriptor of 1x.

    +

    In the following example, a list that started with just fruit was replaced by a list with just + colours.

    - + 
    <h1>List of <del>fruits</del><ins>colours</ins></h1>
+<ul>
+ <li><del>Lime</del><ins>Green</ins></li>
+ <li><del>Apple</del></li>
+ <li>Orange</li>
+ <li><del>Pear</del></li>
+ <li><ins>Teal</ins></li>
+ <li><del>Lemon</del><ins>Yellow</ins></li>
+ <li>Olive</li>
+ <li><ins>Purple</ins></li>
+</ul>
    -

    The user agent may at any time run the following algorithm to update an img - element's image in order to react to changes in the environment. (User agents are not - required to ever run this algorithm; for example, if the user is not looking at the page any - more, the user agent might want to wait until the user has returned to the page before determining - which image to use, in case the environment changes again in the meantime.)

    + -

    1. Asynchronously await a stable state. The synchronous section - consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    2. ⌛ If the img element does not have a srcset attribute specified and it either has no parent - or it is not a picture element, is not in the completely available state, has image data whose resource type is - multipart/x-mixed-replace, or if its update the image data algorithm is - running, then abort this algorithm.

    3. ⌛ Let selected source and selected pixel - density be the URL and pixel density that results from selecting an image source, respectively.

    4. ⌛ If selected source is null, then abort these steps.

    5. ⌛ If selected source and selected pixel - density are the same as the element's last selected source and current - pixel density, then abort these steps.

    6. ⌛ Resolve selected source, - relative to the element.

    7. ⌛ Let CORS mode be the state of the element's crossorigin content attribute.

    8. ⌛ If the resolve a URL algorithm is not successful, abort these - steps.

      -

    9. End the synchronous section, continuing the remaining steps - asynchronously.

    10. +

      4.7.6 Edits and tables

      -

      Do a potentially CORS-enabled fetch of the resulting absolute - URL, with the mode being CORS mode, the origin - being the origin of the img element's Document, and the - default origin behaviour set to taint.

      +

      This section is non-normative.

      -

      If this download fails in any way (other than the response code not being a 2xx code, as - mentioned earlier), or if the image format is unsupported (as determined by applying the image sniffing rules, again as mentioned earlier), - or if the resource type is multipart/x-mixed-replace, then abort these steps.

      +

      The elements that form part of the table model have complicated content model requirements that + do not allow for the ins and del elements, so indicating edits to a + table can be difficult.

      -

      Otherwise, wait for the fetch algorithm to queue its last task, and then - continue with these steps. The data obtained in this way is used in the steps below.

      +

      To indicate that an entire row or an entire column has been added or removed, the entire + contents of each cell in that row or column can be wrapped in ins or del + elements (respectively).

      -
    11. +
      -

      Queue a task to run the following substeps:

      +

      Here, a table's row has been added:

      -

      1. If the img element has experienced relevant mutations - since this algorithm started, then abort these steps.

        - -

      2. Let the img element's last selected source be selected source and the img element's current pixel - density be selected pixel density.

      3. Let the img element's current request's - current URL be the resulting absolute URL from the earlier step.

      4. Replace the img element's image data with the resource obtained by the - earlier step of this algorithm. It can be either CORS-same-origin or - CORS-cross-origin; this affects the origin of the image itself (e.g. - when used on a canvas).

      5. Fire a simple event named load at the - img element.

      + 
      <table>
+ <thead>
+  <tr> <th> Game name           <th> Game publisher   <th> Verdict
+ <tbody>
+  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
+  <tr> <td> Portal              <td> Valve            <td> 10/10
+  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
+</table>
      -
    +

    Here, a column has been removed (the time at which it was removed is given also, as is a link + to the page explaining why):

    -
    + 
    <table>
+ <thead>
+  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
+ <tbody>
+  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
+  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
+  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
+</table>
    -

    The task source for the tasks queued by algorithms in this section is the DOM manipulation task - source.

    + -
    +

    Generally speaking, there is no good way to indicate more complicated edits (e.g. that a cell + was removed, moving all subsequent cells up or to the left).

    -

    What an img element represents depends on the src attribute and the alt - attribute.

    -
    If the src attribute is set and the alt attribute is set to the empty string
    -

    The image is either decorative or supplemental to the rest of the content, redundant with - some other information in the document.

    -

    If the image is available and the user agent is configured - to display that image, then the element represents the element's image data.

    +

    4.8 Embedded content

    -

    Otherwise, the element represents nothing, and may be omitted completely from - the rendering. User agents may provide the user with a notification that an image is present but - has been omitted from the rendering.

    -
    If the src attribute is set and the alt attribute is set to a value that isn't empty
    -

    The image is a key part of the content; the alt attribute - gives a textual equivalent or replacement for the image.

    -

    If the image is available and the user agent is configured - to display that image, then the element represents the element's image data.

    -

    Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification - that an image is present but has been omitted from the rendering.

    + -
    If the src attribute is set and the alt attribute is not
    +

    4.8.1 Introduction

    -

    The image might be a key part of the content, and there is no textual equivalent of the image - available.

    +

    This section is non-normative.

    -

    In a conforming document, the absence of the alt attribute indicates that the image is a key part of the content - but that a textual replacement for the image was not available when the image was generated.

    +

    To embed an image in HTML, when there is only a single image resource, + use the img element and its src attribute.

    -

    If the image is available and the user agent is configured - to display that image, then the element represents the element's image data.

    +
    -

    Otherwise, the user agent should display some sort of indicator that there is an image that - is not being rendered, and may, if requested by the user, or if so configured, or when required - to provide contextual information in response to navigation, provide caption information for the - image, derived as follows:

    +
    <h2>From today's featured article</h2>
+<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
+<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
+was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
    -

    1. If the image has a title attribute whose value is not - the empty string, then the value of that attribute is the caption information; abort these - steps.

    2. If the image is a descendant of a figure element that has a child - figcaption element, and, ignoring the figcaption element and its - descendants, the figure element has no flow content descendants other - than inter-element whitespace and the img element, then the contents of the first such - figcaption element are the caption information; abort these steps.

    3. There is no caption information.

    +
    -
    If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all
    +

    However, there are a number of situations for which the author might wish + to use multiple image resources that the user agent can choose from:

    -

    The element represents nothing.

    +
    • -
      Otherwise
      +

      Different users might have different environmental characteristics:

      -

      The element represents the text given by the alt attribute.

      +
      • -
    +

    The users' physical screen size might be different from one another.

    -

    The alt attribute does not represent advisory information. - User agents must not present the contents of the alt attribute - in the same way as content of the title attribute.

    +

    A mobile phone's screen might be 4 inches diagonally, while a laptop's screen might be 14 inches diagonally.

    -

    User agents may always provide the user with the option to display any image, or to prevent any - image from being displayed. User agents may also apply heuristics to help the user make use of the - image when the user is unable to see it, e.g. due to a visual disability or because they are using - a text terminal with no graphics capabilities. Such heuristics could include, for instance, - optical character recognition (OCR) of text found within the image.

    +

    This is only relevant when an image's rendered size depends on the viewport size.

    -

    While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described - in detail below.

    +
  • -

    The contents of img elements, if any, are ignored for the purposes of - rendering.

    +

    The users' screen pixel density might be different from one another.

    - +

    A mobile phone's screen might have three times as many physical pixels per inch + compared to another mobile phone's screen, regardless of their physical screen size.

    -
    +
  • -

    The usemap attribute, - if present, can indicate that the image has an associated - image map.

    +

    The users' zoom level might be different from one another, or might change for a single user over time.

    -

    The ismap - attribute, when used on an element that is a descendant of an - a element with an href attribute, indicates by its - presence that the element provides access to a server-side image - map. This affects how events are handled on the corresponding - a element.

    +

    A user might zoom in to a particular image to be able to get a more detailed look.

    -

    The ismap attribute is a - boolean attribute. The attribute must not be specified - on an element that does not have an ancestor a element - with an href attribute.

    +

    The zoom level and the screen pixel density (the previous point) can both affect the number of physical screen pixels per CSS pixel. + This ratio is usually referred to as device-pixel-ratio.

    -

    The usemap and - ismap attributes - can result in confusing behavior when used together with - source elements with the - media attribute specified - in a picture element.

    +
  • -

    The img element supports dimension - attributes.

    +

    The users' screen orientation might be different from one another, or might change for a single user over time.

    - +

    A tablet can be held upright or rotated 90 degrees, so that the screen is either "portrait" or "landscape".

    -

    The alt, src, srcset and sizes IDL attributes must reflect the - respective content attributes of the same name.

    +
  • -

    The crossOrigin IDL attribute must - reflect the crossorigin content attribute, - limited to only known values.

    +

    The users' network speed, network latency and bandwidth cost might be different from one another, or might change for a single user over time.

    -

    The useMap IDL attribute must - reflect the usemap content attribute.

    +

    A user might be on a fast, low-latency and constant-cost connection while at work, + on a slow, low-latency and constant-cost connection while at home, + and on a variable-speed, high-latency and variable-cost connection anywhere else.

    -

    The isMap IDL attribute must reflect - the ismap content attribute.

    + - +
  • +

    Authors might want to show different image content depending on the rendered size of the image. + This is usually referred to as art direction.

    -
    image . width [ = value ]
    image . height [ = value ]
    +

    When a Web page is viewed on a screen with a large physical size (assuming a maximized browser window), + the author might wish to include some less relevant parts surrounding the critical part of the image. + When the same Web page is viewed on a screen with a small physical size, + the author might wish to show only the critical part of the image.

    +
  • -

    These attributes return the actual rendered dimensions of the - image, or zero if the dimensions are not known.

    +

    Authors might want to show the same image content but with different rendered size depending on, usually, the width of the viewport. + This is usually referred to as viewport-based selection.

    -

    They can be set, to change the corresponding content - attributes.

    +

    A Web page might have a banner at the top that always spans the entire viewport width. + In this case, the rendered size of the image depends on the physical size of the screen (assuming a maximized browser window).

    -
    image . naturalWidth
    image . naturalHeight
    +

    Another Web page might have images in columns, + with a single column for screens with a small physical size, + two columns for screens with medium physical size, + and three columns for screens with big physical size, + with the images varying in rendered size in each case to fill up the viewport. + In this case, the rendered size of an image might be bigger in the one-column layout compared to the two-column layout, + despite the screen being smaller.

    +
  • -

    These attributes return the intrinsic dimensions of the image, - or zero if the dimensions are not known.

    +

    Authors might want to show the same image content but using different image formats, depending on which image formats the user agent supports. + This is usually referred to as image format-based selection.

    -
    image . complete
    +

    A Web page might have some images in the JPEG, WebP and JPEG XR image formats, + with the latter two having better compression abilities compared to JPEG. + Since different user agents can support different image formats, + with some formats offering better compression ratios, + the author would like to serve the better formats to user agenst that support them, + while providing JPEG fallback for user agents that don't.

    + -

    Returns true if the image has been completely downloaded or if - no image is specified; otherwise, returns false.

    +

    The above situations are not mutually exclusive. + For example, it is reasonable to combine different resources for different device-pixel-ratio + with different resources for art direction.

    -
    image . currentSrc
    +

    While it is possible to solve these problems using scripting, doing so introduces some other problems:

    -

    Returns the image's absolute URL.

    +

    • Some user agents agressively download images specified in the HTML markup, + before scripts have had a chance to run, + so that Web pages complete loading sooner. + If a script changes which image to download, + the user agent will potentially start two separate downloads, + which can instead cause worse page loading performance.

    • If the author avoids specifying any image in the HTML markup + and instead instantiates a single download from script, + that avoids the double download problem above + but instead it makes no image be downloaded at all for users with scripting disabled + and it disables the agressive image downloading optimization.

    -
    image = new Image( [ width [, height ] ] )
    +

    With this in mind, this specification introduces a number of features to address the above problems in a declarative manner.

    +
    Device-pixel-ratio-based selection when the rendered size of the image is fixed
    -

    Returns a new img element, with the width and height attributes set to the values - passed in the relevant arguments, if applicable.

    +

    The src and srcset + attributes on the img element can be used, + using the x descriptor, + to provide multiple images that only vary in their size + (the smaller image is a scaled-down version of the bigger image).

    -
    +

    The x descriptor is not appropriate when the + rendered size of the image depends on the viewport width (viewport-based selection), + but can be used together with art direction.

    - +
    -

    The IDL attributes width and height must return the rendered width and height of the - image, in CSS pixels, if the image is being rendered, and is being rendered to a - visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is - available but not being rendered to a visual medium; or else 0, if - the image is not available. [CSS]

    +
    <h2>From today's featured article</h2>
+<img src="/uploads/100-marie-lloyd.jpg"
+     srcset="/uploads/150-marie-lloyd.jpg 1.5x, /uploads/200-marie-lloyd.jpg 2x"
+     alt="" width="100" height="150">
+<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
+was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
    -

    On setting, they must act as if they reflected the respective - content attributes of the same name.

    +

    The user agent can choose any of the given resources depending on + the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

    -

    The IDL attributes naturalWidth and naturalHeight must return the intrinsic width and - height of the image, in CSS pixels, if the image is available, or - else 0. [CSS]

    +

    For backwards compatibility with older user agents that + don't yet understand the srcset attribute, + one of the URLs is specified in the img element's src attribute. + This will result in something useful (though perhaps lower-resolution than the user would like) + being displayed even in older user agents. + For new user agents, the src attribute participates in the resource selection, + as if it was specified in srcset with a 1x descriptor.

    -

    The IDL attribute complete must return true if - any of the following conditions is true:

    +

    The image's rendered size is given in the + width and height attributes, + which allows the user agent to allocate space for the image before it is downloaded.

    -
    • Both the src attribute and the srcset attribute are omitted. +
    -
  • The srcset attribute is omitted and the src attribute's value is the empty string. +
    Art direction-based selection
    -
  • The final task that is queued by the networking task source once the resource has been fetched has been queued. +

    The picture element and the source element, + together with the media attribute, + can be used, to provide multiple images that vary the image content + (for intance the smaller image might be a cropped version of the bigger image).

    -
  • The img element is completely available. +
    -
  • The img element is broken. +
    <picture>
+  <source media="(min-width: 45em)" srcset="large.jpg">
+  <source media="(min-width: 32em)" srcset="med.jpg">
+  <img src="small.jpg" alt="The president giving an award.">
+</picture>
    - +

    The user agent will choose the first source element + for which the media query in the media attribute matches, + and then choose an appropriate URL from its srcset attribute.

    -

    Otherwise, the attribute must return false.

    +

    The rendered size of the image varies depending on which resource is chosen. + To specify dimensions that the user agent can use before having downloaded the image, + CSS can be used.

    -

    The value of complete can thus change while - a script is executing.

    +
    img { width: 300px; height: 300px }
+@media (min-width: 32em) { img { width: 500px; height:300px } }
+@media (min-width: 45em) { img { width: 700px; height:400px } }
    -

    The currentSrc IDL attribute - must return the img element's current request's current URL.

    + -

    A constructor is provided for creating HTMLImageElement objects (in addition to - the factory methods from DOM such as createElement()): Image(width, height). - When invoked as a constructor, this must return a new HTMLImageElement object (a new - img element). If the width argument is present, the new object's - width content attribute must be set to width. If the height argument is also present, the new object's - height content attribute must be set to height. The element's document must be the active document of the - browsing context of the Window object on which the interface object of - the invoked constructor is found.

    +
    - +

    This example combines art direction- and device-pixel-ratio-based selection. + A banner that takes half the viewport is provided in two versions, + one for wide screens and one for narrow screens.

    +
    <h1>
+ <picture>
+  <source media="(max-width: 500px)" srcset="banner-phone.jpeg, banner-phone-HD.jpeg 2x">
+  <img src="banner.jpeg" srcset="banner-HD.jpeg 2x" alt="The Breakfast Combo">
+ </picture>
+</h1>
    -
    +
    -

    A single image can have different appropriate alternative text depending on the context.

    +
    Viewport-based selection
    -

    In each of the following cases, the same image is used, yet the alt text is different each time. The image is the coat of arms of the - Carouge municipality in the canton Geneva in Switzerland.

    +

    The srcset and sizes attributes can be used, + using the w descriptor, + to provide multiple images that only vary in their size + (the smaller image is a scaled-down version of the bigger image).

    -

    Here it is used as a supplementary icon:

    - 
    <p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>
    +
    -

    Here it is used as an icon representing the town:

    - 
    <p>Home town: <img src="carouge.svg" alt="Carouge"></p>
    +

    In this example, a banner image takes up the entire viewport width + (using appropriate CSS).

    -

    Here it is used as part of a text on the town:

    +
    <h1><img sizes="100vw" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w"
+     src="wolf-400.jpg" alt="The rad wolf"></h1>
    - 
    <p>Carouge has a coat of arms.</p>
-<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
-<p>It is used as decoration all over the town.</p>
    +

    The user agent will calculate the effective pixel density of each image + from the specified w descriptors and the specified rendered size in the sizes attribute. + It can then choose any of the given resources depending on + the user's screen's pixel density, zoom level, and possibly other factors such as the user's network conditions.

    -

    Here it is used as a way to support a similar text where the description is given as well as, - instead of as an alternative to, the image:

    +

    If the user's screen is 320 CSS pixels wide, this is equivalent to specifying + wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. + On the other hand, if the user's screen is 1200 CSS pixels wide, + this is equivalent to specifying + wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. + By using the w descriptors and the sizes attribute, + the user agent can choose the correct image source to download regardless of how large the user's device is.

    - 
    <p>Carouge has a coat of arms.</p>
-<p><img src="carouge.svg" alt=""></p>
-<p>The coat of arms depicts a lion, sitting in front of a tree.
-It is used as decoration all over the town.</p>
    +

    For backwards compatibility, + one of the URLs is specified in the img element's src attribute. + In new user agents, the src attribute is ignored + when the srcset attribute uses w descriptors.

    -

    Here it is used as part of a story:

    +

    In this example, the sizes attribute could be omitted + because the default value is 100vw.

    - 
    <p>He picked up the folder and a piece of paper fell out.</p>
-<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
-red background, a green tree, and a yellow lion with its tongue
-hanging out and whose tail was shaped like an S."></p>
-<p>He stared at the folder. S! The answer he had been looking for all
-this time was simply the letter S! How had he not seen that before? It all
-came together now. The phone call where Hector had referred to a lion's tail,
-the time Marco had stuck his tongue out...</p>
    +
    -

    Here it is not known at the time of publication what the image will be, only that it will be a - coat of arms of some kind, and thus no replacement text can be provided, and instead only a brief - caption for the image is provided, in the title attribute:

    +
    - 
    <p>The last user to have uploaded a coat of arms uploaded this one:</p>
-<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>
    +

    In this example, the Web page has three layouts depending on the width of the viewport. + The narrow layout has one column of images (the width of each image is about 100%), + the middle layout has two columns of images (the width of each image is about 50%), + and the widest layout has three columns of images, and some page margin (the width of each image is about 33%). + It breaks between these layouts when the viewport is 30em wide and 50em wide, respectively.

    -

    Ideally, the author would find a way to provide real replacement text even in this case, e.g. - by asking the previous user. Not providing replacement text makes the document more difficult to - use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth - connections or who pay by the byte, or users who are forced to use a text-only Web browser.

    +
    <img sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
+     srcset="swing-200.jpg 200w, swing-400.jpg 400w, swing-800.jpg 800w, swing-1600.jpg 1600w"
+     src="swing-400.jpg" alt="Kettlebell Swing">
    -
    +

    The sizes attribute sets up the + layout breakpoints at 30em and 50em, + and declares the image sizes between these breakpoints to be + 100vw, 50vw, or calc(33vw - 100px). + These sizes do not necessarily have to match up exactly with the actual image width as specified in the CSS.

    -
    +

    The user agent will pick a width from the sizes attribute, + using the first item with a <media-condition> (the part in parentheses) that evaluates to true, + or using the last item (calc(33vw - 100px)) if they all evaluate to false.

    -

    Here are some more examples showing the same picture used in different contexts, with - different appropriate alternate texts each time.

    +

    For example, if the viewport width is 29em, + then (max-width: 30em) evaluates to true and 100vw is used, + so the image size, for the purpose of resource selection, is 29em. + If the viewport width is instead 32em, + then (max-width: 30em) evaluates to false, + but (max-width: 50em) evaluates to true and 50vw is used, + so the image size, for the purpose of resource selection, is 16em (half the viewport width). + Notice that the slightly wider viewport results in a smaller image because of the different layout.

    - 
    <article>
- <h1>My cats</h1>
- <h2>Fluffy</h2>
- <p>Fluffy is my favorite.</p>
- <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
- <p>She's just too cute.</p>
- <h2>Miles</h2>
- <p>My other cat, Miles just eats and sleeps.</p>
-</article>
    +

    The user agent can then calculate the effective pixel density and choose an appropriate resource + similarly to the previous example.

    - 
    <article>
- <h1>Photography</h1>
- <h2>Shooting moving targets indoors</h2>
- <p>The trick here is to know how to anticipate; to know at what speed and
- what distance the subject will pass by.</p>
- <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
- photographed quite nicely using this technique.">
- <h2>Nature by night</h2>
- <p>To achieve this, you'll need either an extremely sensitive film, or
- immense flash lights.</p>
-</article>
    +
    - 
    <article>
- <h1>About me</h1>
- <h2>My pets</h2>
- <p>I've got a cat named Fluffy and a dog named Miles.</p>
- <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
- <p>My dog Miles and I like go on long walks together.</p>
- <h2>music</h2>
- <p>After our walks, having emptied my mind, I like listening to Bach.</p>
-</article>
    +
    Image format-based selection
    - 
    <article>
- <h1>Fluffy and the Yarn</h1>
- <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
- <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
- <p>He would play in the morning, he would play in the evening.</p>
-</article>
    +

    The type attribute + on the source element can be used, + to provide multiple images in different formats.

    -
    +
    - +
    <h2>From today's featured article</h2>
+<picture>
+ <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
+ <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
+ <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
+</picture>
+<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
+was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
    +

    In this example, the user agent will choose the first source that has + a type attribute with a supported MIME type. + If the user agent supports WebP images, + the first source element will be chosen. + If not, but the user agent does support JPEG XR images, + the second source element will be chosen. + If neither of those formats are supported, + the img element will be chosen.

    -
    4.7.5.1 Requirements for providing text to act as an alternative for images
    +
    +
    • -
    4.7.5.1.1 General guidelines
    -

    Except where otherwise specified, the alt attribute must be - specified and its value must not be empty; the value must be an appropriate replacement for the - image. The specific requirements for the alt attribute depend on - what the image is intended to represent, as described in the following sections.

    +

    4.8.2 Dependencies

    -

    The most general rule to consider when writing alternative text is the following: the - intent is that replacing every image with the text of its alt - attribute not change the meaning of the page.

    +
    Media Queries [MQ] Correct reference is http://dev.w3.org/csswg/mediaqueries-4/
    <media-condition>
    CSS Values and Units [CSSVALUES]
    <length>
    CSS Syntax [CSSSYNTAX]
    Parse a comma-separated list of component values
    component value
    <whitespace-token>
    -

    So, in general, alternative text can be written by considering what one would have written had - one not been able to include the image.

    -

    A corollary to this is that the alt attribute's value should - never contain text that could be considered the image's caption, title, or - legend. It is supposed to contain replacement text that could be used by users - instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.

    +

    4.8.3 The picture element

    -

    Another corollary is that the alt attribute's value should - not repeat information that is already provided in the prose next to the image.

    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    DOM interface:
    +
    interface HTMLPictureElement : HTMLElement {};
    +
    -

    One way to think of alternative text is to think about how you would read the page - containing the image to someone over the phone, without mentioning that there is an image present. - Whatever you say instead of the image is typically a good start for writing the alternative - text.

    +

    The picture element is a container + which provides multiples sources to its contained img element + to allow authors to declaratively control or give hints to the user agent about which image resource to use, + based on the screen pixel density, viewport size, image format, and other factors. It represents its children.

    +

    The picture element is somewhat different + from the similar-looking video and audio elements. + While all of them contain source elements, + the source element's src attribute has no meaning + when the element is nested within a picture element, + and the resource selection algorithm is different. + As well, the picture element itself does not display anything; + it merely provides a context for its contained img element + that enables it to choose from multiple URLs.

    - -

    When an a element that creates a hyperlink, or a button - element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of - the link or button.

    +

    4.8.4 The source element when used with the picture element

    -
    +
    Categories:
    Same as for the source element.
    Contexts in which this element can be used:
    As a child of a picture element, before the img element.
    Content model:
    Same as for the source element.
    Content attributes:
    Global attributes
    srcset
    sizes
    media
    type
    DOM interface:
    +
    partial interface HTMLSourceElement {
+           attribute DOMString srcset;
+           attribute DOMString sizes;
+           attribute DOMString media;
+};
    +
    -

    In this example, a user is asked to pick his preferred colour from a list of three. Each colour - is given by an image, but for users who have configured their user agent not to display images, - the colour names are used instead:

    +

    The authoring requirements in this section only apply if the source element has + a parent that is a picture element.

    - 
    <h1>Pick your colour</h1>
-<ul>
- <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
- <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
- <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
-</ul>
    +

    The source element allows authors to specify multiple alternative + source sets for img elements. + It does not represent anything on its own.

    -
    +

    The srcset attribute must be present, + and must consist of one or more image candidate strings, + each separated from the next by a U+002C COMMA character (,). + If an image candidate string contains no descriptors + and no space characters after the URL, + the following image candidate string, if there is one, + must begin with one or more space characters.

    -
    +

    The sizes attribute may also be present. + If present, the value must be a valid source size list.

    -

    In this example, each button has a set of images to indicate the kind of colour output desired - by the user. The first image is used in each case to give the alternative text.

    +

    The media attributes may also be present. + If present, the value must contain a valid media query.

    - 
    <button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
-<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
    +

    The type attribute may also be present. + If present, the value must be a valid MIME type. + It gives the type of the images in the source set, + to allow the user agent to skip to the next source element + if it does not support the given type.

    -

    Since each image represents one part of the text, it could also be written like this:

    - - 
    <button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
-<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>
    - -

    However, with other alternative text, this might not work, and putting all the alternative - text into one image in each case might make more sense:

    - - 
    <button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
-<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
    - -
    - - - -
    4.7.5.1.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
    - -

    Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a - diagram, a graph, or a simple map showing directions. In such cases, an image can be given using - the img element, but the lesser textual version must still be given, so that users - who are unable to view the image (e.g. because they have a very slow connection, or because they - are using a text-only browser, or because they are listening to the page being read out by a - hands-free automobile voice Web browser, or simply because they are blind) are still able to - understand the message being conveyed.

    - -

    The text must be given in the alt attribute, and must convey - the same message as the image specified in the src - attribute.

    - -

    It is important to realise that the alternative text is a replacement for the image, - not a description of the image.

    - -
    - -

    In the following example we have a flowchart - in image form, with text in the alt attribute rephrasing the - flowchart in prose form:

    - - 
    <p>In the common case, the data handled by the tokenization stage
-comes from the network, but it can also come from script.</p>
-<p><img src="images/parsing-model-overview.png" alt="The Network
-passes data to the Input Stream Preprocessor, which passes it to the
-Tokenizer, which passes it to the Tree Construction stage. From there,
-data goes to both the DOM and to Script Execution. Script Execution is
-linked to the DOM, and, using document.write(), passes data to the
-Tokenizer."></p>
    - -
    - -
    - -

    Here's another example, showing a good solution and a bad solution to the problem of including - an image in a description.

    - -

    First, here's the good solution. This sample shows how the alternative text should just be - what you would have put in the prose if the image had never existed.

    - - 
    <!-- This is the correct way to do things. -->
-<p>
- You are standing in an open field west of a house.
- <img src="house.jpeg" alt="The house is white, with a boarded front door.">
- There is a small mailbox here.
-</p>
    - -

    Second, here's the bad solution. In this incorrect way of doing things, the alternative text - is simply a description of the image, instead of a textual replacement for the image. It's bad - because when the image isn't shown, the text doesn't flow as well as in the first example.

    - - 
    <!-- This is the wrong way to do things. -->
-<p>
- You are standing in an open field west of a house.
- <img src="house.jpeg" alt="A white house, with a boarded front door.">
- There is a small mailbox here.
-</p>
    - -

    Text such as "Photo of white house with boarded door" would be equally bad alternative text - (though it could be suitable for the title attribute or in the - figcaption element of a figure with this image).

    - -
    - - -
    4.7.5.1.4 A short phrase or label with an alternative graphical representation: icons, logos
    - -

    A document can contain information in iconic form. The icon is intended to help users of visual - browsers to recognise features at a glance.

    - -

    In some cases, the icon is supplemental to a text label conveying the same meaning. In those - cases, the alt attribute must be present but must be empty.

    - -
    - -

    Here the icons are next to text that conveys the same meaning, so they have an empty alt attribute:

    - - 
    <nav>
- <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
- <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
- Configuration Tools</a></p>
-</nav>
    - -
    - -

    In other cases, the icon has no text next to it describing what it means; the icon is supposed - to be self-explanatory. In those cases, an equivalent textual label must be given in the alt attribute.

    - -
    - -

    Here, posts on a news site are labeled with an icon indicating their topic.

    - - 
    <body>
- <article>
-  <header>
-   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
-   <p><img src="movies.png" alt="Movies"></p>
-  </header>
-  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
-  making this its 8th win in the last 12 years.</p>
- </article>
- <article>
-  <header>
-   <h1>Latest TWiT episode is online</h1>
-   <p><img src="podcasts.png" alt="Podcasts"></p>
-  </header>
-  <p>The latest TWiT episode has been posted, in which we hear
-  several tech news stories as well as learning much more about the
-  iPhone. This week, the panelists compare how reflective their
-  iPhones' Apple logos are.</p>
- </article>
-</body>
    - -
    - -

    Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such - as a company, organization, project, band, software package, country, or some such.

    - -

    If the logo is being used to represent the entity, e.g. as a page heading, the alt attribute must contain the name of the entity being represented by - the logo. The alt attribute must not contain text like - the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity - itself.

    - -

    If the logo is being used next to the name of the entity that it represents, then the logo is - supplemental, and its alt attribute must instead be empty.

    - -

    If the logo is merely used as decorative material (as branding, or, for example, as a side - image in an article that mentions the entity to which the logo belongs), then the entry below on - purely decorative images applies. If the logo is actually being discussed, then it is being used - as a phrase or paragraph (the description of the logo) with an alternative graphical - representation (the logo itself), and the first entry above applies.

    - -
    - -

    In the following snippets, all four of the above cases are present. First, we see a logo used - to represent a company:

    - - 
    <h1><img src="XYZ.gif" alt="The XYZ company"></h1>
    - -

    Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have - any alternative text: - - 

    <article>
- <h2>News</h2>
- <p>We have recently been looking at buying the <img src="alpha.gif"
- alt=""> ΑΒΓ company, a small Greek company
- specializing in our type of product.</p>
    - -

    In this third snippet, we have a logo being used in an aside, as part of the larger article - discussing the acquisition:

    +

    If the type attribute + is not specified, the user agent will not select a different + source element if it finds that it does not support + the image format after fetching it.

    -
     <aside><p><img src="alpha-large.gif" alt=""></p></aside>
- <p>The ΑΒΓ company has had a good quarter, and our
- pie chart studies of their accounts suggest a much bigger blue slice
- than its green and orange slices, which is always a good sign.</p>
-</article>
    +

    When a source element has a following sibling + source element or img element with a + srcset attribute specified, it must have + at least one of the following:

    -

    Finally, we have an opinion piece talking about a logo, and the logo is therefore described in - detail in the alternative text.

    + - 
    <p>Consider for a moment their logo:</p>
+  
    The src attribute must not be present.
    
 
-<p><img src="/images/logo" alt="It consists of a green circle with a
-green question mark centered inside it."></p>
+  
 
-<p>How unoriginal can you get? I mean, oooooh, a question mark, how
-<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
-sure everyone will rush to adopt those specifications now! They could
-at least have tried for some sort of, I don't know, sequence of
-rounded squares with varying shades of green and bold white outlines,
-at least that would look good on the cover of a blue book.</p>
    +

    The IDL attributes srcset, + sizes and + media must reflect the + respective content attributes of the same name.

    -

    This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into - the surrounding text, as if the image had never been there in the first place.

    + -
    +

    4.8.5 The img element

    -
    4.7.5.1.5 Text that has been rendered to a graphic for typographical effect
    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Form-associated element.
    If the element has a usemap attribute: Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    alt — Replacement text for use when images are not available
    src — Address of the resource
    srcset — Images to use in different situations (e.g. high-resolution displays, small monitors, etc)
    sizes
    crossorigin — How the element handles crossorigin requests
    usemap — Name of image map to use
    ismap — Whether the image is a server-side image map
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    +
    [NamedConstructor=Image(optional unsigned long width, optional unsigned long height)]
+interface HTMLImageElement : HTMLElement {
+           attribute DOMString alt;
+           attribute DOMString src;
+           attribute DOMString srcset;
+           attribute DOMString sizes;
+           attribute DOMString crossOrigin;
+           attribute DOMString useMap;
+           attribute boolean isMap;
+           attribute unsigned long width;
+           attribute unsigned long height;
+  readonly attribute unsigned long naturalWidth;
+  readonly attribute unsigned long naturalHeight;
+  readonly attribute boolean complete;
+  readonly attribute DOMString currentSrc;
 
-  
    Sometimes, an image just consists of text, and the purpose of the image is not to highlight the
-  actual typographic effects used to render the text, but just to convey the text itself.
    
+  // also has obsolete members
+};
    +
    -

    In such cases, the alt attribute must be present but must - consist of the same text as written in the image itself.

    +

    An img element represents an image.

    -
    + -

    Consider a graphic containing the text "Earth Day", but with the letters all decorated with - flowers and plants. If the text is merely being used as a heading, to spice up the page for - graphical users, then the correct alternative text is just the same text "Earth Day", and no - mention need be made of the decorations:

    +

    The image given by the src and srcset attributes, + and any previous sibling source elements' + srcset attributes if the parent is a picture element, + is the embedded content; the value of + the alt attribute provides equivalent content for + those who cannot process images or who have image loading disabled (i.e. it is the + img element's fallback content).

    - 
    <h1><img src="earthdayheading.png" alt="Earth Day"></h1>
    +

    The requirements on the alt attribute's value are described + in the next section.

    -
    +

    The src attribute must be present, and must contain a + valid non-empty URL potentially surrounded by spaces referencing a non-interactive, + optionally animated, image resource that is neither paged nor scripted.

    -
    +

    The srcset attribute may also be present. + If present, its value must consist of one or more + image candidate strings, + each separated from the next by a U+002C COMMA character (,). + If an image candidate string contains no descriptors + and no space characters after the URL, + the following image candidate string, if there is one, + must begin with one or more space characters.

    -

    An illuminated manuscript might use graphics for some of its images. The alternative text in - such a situation is just the character that the image represents.

    + - 
    <p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
-night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
-away, in a small house, on a hill, under a full moon...
    +

    An image candidate string consists of the following components, in order, with the + further restrictions described below this list:

    -
    +

    1. Zero or more space characters.

    2. A valid non-empty URL that does not start or end with a U+002C COMMA character (,), + referencing a non-interactive, optionally animated, image resource + that is neither paged nor scripted.

    3. Zero or more space characters.

    4. -

      When an image is used to represent a character that cannot otherwise be represented in Unicode, - for example gaiji, itaiji, or new characters such as novel currency symbols, the alternative text - should be a more conventional way of writing the same thing, e.g. using the phonetic hiragana or - katakana to give the character's pronunciation.

      +

      Zero or one of the following:

      -
      +

      • A width descriptor, consisting of: + a space character, + a valid non-negative integer giving a number greater than zero + representing the width descriptor value, + and a U+0077 LATIN SMALL LETTER W character.

      • A pixel density descriptor, consisting of: + a space character, + a valid floating-point number giving a number greater than zero + representing the pixel density descriptor value, + and a U+0078 LATIN SMALL LETTER X character.

      -

      In this example from 1997, a new-fangled currency symbol that looks like a curly E with two - bars in the middle instead of one is represented using an image. The alternative text gives the - character's pronunication.

      +

    5. Zero or more space characters.

    - 
    <p>Only <img src="euro.png" alt="euro ">5.99!
    +

    There must not be an image candidate string for an element that + has the same width descriptor value as another + image candidate string's width descriptor value for the same element.

    - +

    There must not be an image candidate string for an element that + has the same pixel density descriptor value as another + image candidate string's pixel density descriptor value for the same element. + For the purpose of this requirement, + an image candidate string with no descriptors is equivalent to + an image candidate string with a 1x descriptor.

    -

    An image should not be used if Unicode characters would serve an identical purpose. Only when - the text cannot be directly represented using Unicode, e.g. because of decorations or because the - character is not in the Unicode character set (as in the case of gaiji), would an image be - appropriate.

    +

    If a source element has a sizes attribute present + or an img element has a sizes attribute present, + all image candidate strings for that + element must have the width descriptor specified.

    -

    If an author is tempted to use an image because their default system font does not - support a given character, then Web Fonts are a better solution than images.

    +

    If an image candidate string for an source or img element + has the width descriptor specified, + all other image candidate strings for that element + must also have the width descriptor specified.

    +

    The specified width in an image candidate string's width descriptor + must match the intrinsic width in the resource given by the image candidate string's URL.

    +

    The requirements above imply that images can be static bitmaps (e.g. PNGs, GIFs, + JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element), + animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root + element that use declarative SMIL animation), and so forth. However, these definitions preclude + SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text + documents, and so forth. [PNG] [GIF] [JPEG] [PDF] [XML] [APNG] [SVG] + [MNG]

    -
    4.7.5.1.6 A graphical representation of some of the surrounding text
    +

    If the srcset attribute is present, + the sizes attribute may also be present. + If present, its value must be a valid source size list.

    -

    In many cases, the image is actually just supplementary, and its presence merely reinforces the - surrounding text. In these cases, the alt attribute must be - present but its value must be the empty string.

    +

    A valid source size list is a string that matches the following grammar: + [CSSVALUES] [MQ]

    -

    In general, an image falls into this category if removing the image doesn't make the page any - less useful, but including the image makes it a lot easier for users of visual browsers to - understand the concept.

    +
    <source-size-list> = <source-size># [ , <source-size-value> ]? | <source-size-value>
+<source-size> = <media-condition> <source-size-value>
+<source-size-value> = <length>
    -
    +

    A <source-size-value> must not be negative.

    -

    A flowchart that repeats the previous paragraph in graphical form:

    +

    The img element must not be used as a layout tool. In particular, img + elements should not be used to display transparent images, as such images rarely convey meaning and + rarely add anything useful to the document.

    - 
    <p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<p><img src="images/parsing-model-overview.png" alt=""></p>
    +
    -

    In these cases, it would be wrong to include alternative text that consists of just a caption. - If a caption is to be included, then either the title attribute - can be used, or the figure and figcaption elements can be used. In the - latter case, the image would in fact be a phrase or paragraph with an alternative graphical - representation, and would thus require alternative text.

    +

    The crossorigin attribute is a CORS + settings attribute. Its purpose is to allow images from third-party sites that allow + cross-origin access to be used with canvas.

    - 
    <!-- Using the title="" attribute -->
-<p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<p><img src="images/parsing-model-overview.png" alt=""
-        title="Flowchart representation of the parsing model."></p>
    + - 
    <!-- Using <figure> and <figcaption> -->
-<p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<figure>
- <img src="images/parsing-model-overview.png" alt="The Network leads to
- the Input Stream Preprocessor, which leads to the Tokenizer, which
- leads to the Tree Construction stage. The Tree Construction stage
- leads to two items. The first is Script Execution, which leads via
- document.write() back to the Tokenizer. The second item from which
- Tree Construction leads is the DOM. The DOM is related to the Script
- Execution.">
- <figcaption>Flowchart representation of the parsing model.</figcaption>
-</figure>
    +
    - 
    <!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
-<p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<p><img src="images/parsing-model-overview.png"
-        alt="Flowchart representation of the parsing model."></p>
-<!-- Never put the image's caption in the alt="" attribute! -->
    +

    An img element has a current request and a pending request. + The current request is initially set to a new image request. + The pending request is initially set to null. + The current request is usually referred to as the img element itself.

    -
    +

    An image request has a state, current URL and image data.

    -
    +

    An image request's state is one of the following:

    -

    A graph that repeats the previous paragraph in graphical form:

    +
    Unavailable
    The user agent hasn't obtained any image data, + or has obtained some or all of the image data but + hasn't yet decoded enough of the image to get the image dimensions.
    Partially available
    The user agent has obtained some of the image data and at least the image dimensions are + available.
    Completely available
    The user agent has obtained all of the image data and at least the image dimensions are + available.
    Broken
    The user agent has obtained all of the image data that it can, but it cannot even decode the + image enough to get the image dimensions (e.g. the image is corrupted, or the format is not + supported, or no data could be obtained).
    - 
    <p>According to a study covering several billion pages,
-about 62% of documents on the Web in 2007 triggered the Quirks
-rendering mode of Web browsers, about 30% triggered the Almost
-Standards mode, and about 9% triggered the Standards mode.</p>
-<p><img src="rendering-mode-pie-chart.png" alt=""></p>
    +

    An image request's current URL is initially the empty string.

    -
    +

    An image request's image data is the decoded image data.

    +

    When an image request is either in the partially + available state or in the completely available state, it is + said to be available.

    +

    An image request is initially unavailable.

    -
    4.7.5.1.7 A purely decorative image that doesn't add any information
    +

    When an img element is available, it + provides a paint source whose width is the image's intrinsic width, whose height is + the image's intrinsic height, and whose appearance is the intrinsic appearance of the image.

    -

    If an image is decorative but isn't especially page-specific — for example an image that - forms part of a site-wide design scheme — the image should be specified in the site's CSS, - not in the markup of the document.

    +

    In a browsing context where scripting is + disabled, user agents may obtain images immediately or on demand. In a browsing + context where scripting is enabled, user agents + must obtain images immediately.

    -

    However, a decorative image that isn't discussed by the surrounding text but still has some - relevance can be included in a page using the img element. Such images are - decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty - string.

    +

    A user agent that obtains images immediately must synchronously + update the image data of an img element, + with the restart animation flag set if so stated, + whenever that element is created, + or has experienced relevant mutations, + and whenever that element's adopting steps are run.

    -
    +

    A user agent that obtains images on demand must update the image data of an + img element whenever it needs the image data (i.e. on demand), + but only if the img element is in the + unavailable state. When an img element + has experienced relevant mutations, + and whenever that element's adopting steps are run, if the user + agent only obtains images on demand, the img element must return to the unavailable state.

    -

    Examples where the image is purely decorative despite being relevant would include things like - a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an - image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows - an example of the latter case (only the first verse is included in this snippet):

    +

    The relevant mutations for an img element are as follows:

    - 
    <h1>The Lady of Shalott</h1>
-<p><img src="shalott.jpeg" alt=""></p>
-<p>On either side the river lie<br>
-Long fields of barley and of rye,<br>
-That clothe the wold and meet the sky;<br>
-And through the field the road run by<br>
-To many-tower'd Camelot;<br>
-And up and down the people go,<br>
-Gazing where the lilies blow<br>
-Round an island there below,<br>
-The island of Shalott.</p>
    +

    • The element's src, + srcset + or sizes attributes are set, changed, or removed.

    • The element's src attribute is set to the same value as the previous value. + This must set the restart animation flag for the update the image data algorithm.

    • The element's crossorigin attribute's state is changed.

    • The element is inserted into or removed from a picture parent element.

    • The element's parent is a picture element and a + source element is inserted as a previous sibling.

    • The element's parent is a picture element and a + source element that was a previous sibling is removed.

    • The element's parent is a picture element and a + source element that is a previous sibling has its + srcset, + sizes, + media + or type attributes set, changed, or removed.

    -
    +

    Each img element has a last selected source, which must initially be + null.

    +

    Each image request has a current pixel density, which must initially be undefined.

    - +

    When an img element has a current pixel density that is not 1.0, the + element's image data must be treated as if its resolution, in device pixels per CSS pixels, was + the current pixel density.

    -

    When a picture has been sliced into smaller image files that are then displayed together to - form the complete picture again, one of the images must have its alt attribute set as per the relevant rules that would be appropriate - for the picture as a whole, and then all the remaining images must have their alt attribute set to the empty string.

    +

    For example, if the current pixel density is 3.125, that means + that there are 300 device pixels per CSS inch, and thus if the image data is 300x600, it has an + intrinsic dimension of 96 CSS pixels by 192 CSS pixels.

    -
    +

    Each Document object must have a list of available images. Each image + in this list is identified by a tuple consisting of an absolute URL, a CORS + settings attribute mode, and, if the mode is not No + CORS, an origin. + Each image furthermore has an ignore higher-layer caching flag. + User agents may copy entries from one Document + object's list of available images to another at any time (e.g. when the + Document is created, user agents can add to it all the images that are loaded in + other Documents), but must not change the keys of entries copied in this way when + doing so, and must unset the ignore higher-layer caching flag for the copied entry. + User agents may also remove images from such lists at any time (e.g. to save + memory). + User agents must remove entries in the list of available images as appropriate + given higher-layer caching semantics for the resource (e.g. the HTTP Cache-Control + response header) when the ignore higher-layer caching is unset.

    -

    In the following example, a picture representing a company logo for XYZ - Corp has been split into two pieces, the first containing the letters "XYZ" and the second - with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.

    +

    The user agent can also store the image data in a separatly from the list of available images.

    - 
    <h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>
    +

    For example, if a resource has the HTTP response header Cache-Control: must-revalidate, + the user agent would remove it from the list of available images but could keep the image data separately, + and use that if the server responds with a 204 No Content status.

    -
    +

    When the user agent is to update the image data of an img element, + optionally with the restart animations flag set, + it must run the following steps:

    -
    +

    1. If the element's Document is not the active document, + abort these steps.

    2. If the user agent cannot support images, or its support for images has been disabled, then + abort the image request for the current request and the pending request, + set current request to the unavailable state, + let pending request be null, + and abort these steps.

    3. -

      In the following example, a rating is shown as three filled stars and two empty stars. While - the alternative text could have been "★★★☆☆", the author has - instead decided to more helpfully give the rating in the form "3 out of 5". That is the - alternative text of the first image, and the rest have blank alternative text.

      +

      If the element does not have a srcset attribute specified and + it does not have a parent or it has a parent but it is not a picture element, + and it has a src attribute specified and + its value is not the empty string, let selected source be the value of the + element's src attribute, and selected pixel + density be 1.0. Otherwise, let selected source be null and selected pixel density be undefined.

      - 
      <p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
-  ><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
-  ><img src="0" alt=""></meter></p>
      +

    4. Let the img element's last selected source be selected source.

    5. -
    +

    If selected source is not null, run these substeps:

    +

    1. Resolve selected source, relative + to the element, and let the result be absolute URL. If that is not successful, then + abort these inner set of steps.

    2. Let key be a tuple consisting of the resulting absolute + URL, the img element's crossorigin + attribute's mode, and, if that mode is not No CORS, + the Document object's origin.

    3. If the list of available images contains an entry for key, then + set the ignore higher-layer caching flag for that entry, + abort the image request for the current request and the pending request, + let pending request be null, + let current request be a new image request whose image data is that of the entry + and whose state is set to the completely available state, + update the presentation of the image appropriately, + let the current request's current pixel density be selected pixel density, + queue a task to restart the animation if restart animation is set, + change current request's current URL to absolute URL, + and then fire a simple event named load at the img element, + and abort these steps.

    +

  • Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. + The synchronous + section consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

  • - +

    ⌛ If another instance of this algorithm for this img element was started + after this instance (even if it aborted and is no longer running), then abort these steps.

    -

    Generally, image maps should be used instead of slicing an image - for links.

    +

    Only the last instance takes effect, to avoid multiple requests when, for + example, the src, srcset, + and crossorigin attributes are all set in + succession.

    -

    However, if an image is indeed sliced and any of the components of the sliced picture are the - sole contents of links, then one image per link must have alternative text in its alt attribute representing the purpose of the link.

    +
  • -
    +

    ⌛ Let selected source and selected pixel density be the + URL and pixel density that results from selecting an image source, + respectively.

    -

    In the following example, a picture representing the flying spaghetti monster emblem, with - each of the left noodly appendages and the right noodly appendages in different images, so that - the user can pick the left side or the right side in an adventure.

    +
  • - 
    <h1>The Church</h1>
-<p>You come across a flying spaghetti monster. Which side of His
-Noodliness do you wish to reach out for?</p>
-<p><a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a
-  ><img src="fsm-middle.png" alt=""
-  ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>
    +

    ⌛ If selected source is null, run these substeps:

    - +

    1. ⌛ Set the current request to the broken state, + abort the image request for the current request and the pending request, + and let pending request be null.

    2. ⌛ Queue a task to change the current request's current URL to the empty string, + and then, if the element has a src attribute + or a srcset attribute + or a parent that is a picture element, + fire a simple event named error at the img element.

    3. ⌛ Abort this algorithm.

    +
  • +

    ⌛ Queue a task to fire a progress event named loadstart at + the img element.

    -
    4.7.5.1.10 A key part of the content
    +

  • Resolve selected source, relative + to the element, and let the result be absolute URL. If that is not successful, then + abort the image request for the current request and the pending request, + set the current request to the broken state, + let pending request be null, + queue a task to + change the current request's current URL to absolute URL, + fire a simple event named error at the img element + and then fire a simple event named loadend at the img element, + and abort these steps.

  • -

    In some cases, the image is a critical part of the content. This could be the case, for - instance, on a page that is part of a photo gallery. The image is the whole point of the - page containing it.

    +

    ⌛ If the pending request is not null, + and absolute URL is the same as the pending request's current URL, + then abort these steps.

    -

    How to provide alternative text for an image that is a key part of the content depends on the - image's provenance.

    +

    ⌛ If absolute URL is the same as the current request's current URL, + and current request is in the partially available state, + then abort the image request for the pending request, + queue a task to restart the animation if restart animation is set, + and abort these steps.

    -
    The general case
    +

    ⌛ If the pending request is not null, + abort the image request for the pending request.

    -

    When it is possible for detailed alternative text to be provided, for example if the image is - part of a series of screenshots in a magazine review, or part of a comic strip, or is a - photograph in a blog entry about that photograph, text that can serve as a substitute for the - image must be given as the contents of the alt attribute.

    +

    ⌛ Let image request be a new image request + whose current URL is absolute URL.

    -
    +

    ⌛ Let the pending request be image request.

    -

    A screenshot in a gallery of screenshots for a new OS, with some alternative text:

    +

    ⌛ Do a potentially CORS-enabled fetch of absolute URL, + with the mode being the current state of + the element's crossorigin content attribute, + the origin being the origin of the img element's + Document, and the default origin behaviour set to taint. + Let this instance of the fetching algorithm be associated with image request.

    - 
    <figure>
- <img src="KDE%20Light%20desktop.png"
-      alt="The desktop is blue, with icons along the left hand side in
-           two columns, reading System, Home, K-Mail, etc. A window is
-           open showing that menus wrap to a second line if they
-           cannot fit in the window. The window has a list of icons
-           along the top, with an address bar below it, a list of
-           icons for tabs along the left edge, a status bar on the
-           bottom, and two panes in the middle. The desktop has a bar
-           at the bottom of the screen with a few buttons, a pager, a
-           list of open applications, and a clock.">
- <figcaption>Screenshot of a KDE desktop.</figcaption>
-</figure>
    +

    The resource obtained in this fashion, if any, is image request's image data. + It can be either CORS-same-origin or CORS-cross-origin; this affects + the origin of the image itself (e.g. when used on a canvas).

    -
    + +

    Fetching the image must delay the load event of the element's document until the + task that is queued by the + networking task source once the resource has been fetched (defined below) has been run. +

    -
    +

    This, unfortunately, can be used to perform a rudimentary port scan of the + user's local network (especially in conjunction with scripting, though scripting isn't actually + necessary to carry out such an attack). User agents may implement cross-origin access control policies that are stricter than those + described above to mitigate this attack, but unfortunately such policies are typically not + compatible with existing Web content.

    -

    A graph in a financial report:

    +

    If the resource is CORS-same-origin, each task + that is queued by the networking task source + while the image is being fetched, + if image request is the current request, + must fire a progress event named progress at the img element.

    - 
    <img src="sales.gif"
-     title="Sales graph"
-     alt="From 1998 to 2005, sales increased by the following percentages
-     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">
    +

  • End the synchronous section, continuing the remaining steps asynchronously, + but without missing any data from the fetch algorithm.

  • -

    Note that "sales graph" would be inadequate alternative text for a sales graph. Text that - would be a good caption is not generally suitable as replacement text.

    +

    As soon as possible, jump to the first applicable entry from the following list:

    -
    • +
    If the resource type is multipart/x-mixed-replace
    -
    Images that defy a complete description
    +

    The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    -

    In certain cases, the nature of the image might be such that providing thorough alternative - text is impractical. For example, the image could be indistinct, or could be a complex fractal, - or could be a detailed topographical map.

    +
    1. -

      In these cases, the alt attribute must contain some - suitable alternative text, but it may be somewhat brief.

      +

      If image request is the pending request + and the user agent is able to determine image request's image's width and height, + abort the image request for the current request, + upgrade the pending request to the current request and + set the current request's state to partially available.

      -
      +
    2. -

      Sometimes there simply is no text that can do justice to an image. For example, there is - little that can be said to usefully describe a Rorschach inkblot test. However, a description, - even if brief, is still better than nothing:

      +

      Otherwise, if image request is the pending request + and the user agent is able to determine that image request's image + is corrupted in some fatal way such that the image dimensions cannot be obtained, + abort the image request for the current request, + upgrade the pending request to the current request + and set the current request's state to broken.

      - 
      <figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
- symmetry with indistinct edges, with a small gap in the center, two
- larger gaps offset slightly from the center, with two similar gaps
- under them. The outline is wider in the top half than the bottom
- half, with the sides extending upwards higher than the center, and
- the center extending below the sides.">
- <figcaption>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</figcaption>
-</figure>
      +
    3. -

      Note that the following would be a very bad use of alternative text:

      +

      Otherwise, if image request is the current request, + it is in the unavailable state, + and the user agent is able to determine image request's image's width and height, + set the current request's state to partially available.

      - 
      <!-- This example is wrong. Do not copy it. -->
-<figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
- of the first of the ten cards in the Rorschach inkblot test.">
- <figcaption>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</figcaption>
-</figure>
      +
    4. -

      Including the caption in the alternative text like this isn't useful because it effectively - duplicates the caption for users who don't have images, taunting them twice yet not helping - them any more than if they had only read or heard the caption once.

      +

      Otherwise, if image request is the current request, + it is in the unavailable state, + and the user agent is able to determine that image request's image + is corrupted in some fatal way such that the image dimensions cannot be obtained, + set the current request's state to broken. +

      - +
    -
    +

    Each task that is queued by the networking task source while the image is being fetched must update the presentation of the image, but as each new body + part comes in, it must replace the previous image. Once one body part has been completely + decoded, the user agent must set the img element to the completely available state and queue a task to fire + a simple event named load at the img + element.

    -

    Another example of an image that defies full description is a fractal, which, by definition, - is infinite in detail.

    +

    The progress and loadend events are not fired for + multipart/x-mixed-replace image streams.

    -

    The following example shows one possible way of providing alternative text for the full view - of an image of the Mandelbrot set.

    +
    If the resource type and data corresponds to a supported image format, as described below
    - 
    <img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
-its cusp on the real axis in the positive direction, with a smaller
-bulb aligned along the same center line, touching it in the negative
-direction, and with these two shapes being surrounded by smaller bulbs
-of various sizes.">
    +

    The next task that is queued by the networking task source while the image is being fetched must run the following steps:

    - +
    1. -
      +

      If the user agent is able to determine image request's image's width and height, + and image request is pending request, + abort the image request for the current request, + upgrade the pending request to the current request, + update the img element's presentation appropriately, + and set image request's state to partially available.

      -

      Similarly, a photograph of a person's face, for example in a biography, can be considered - quite relevant and key to the content, but it can be hard to fully substitute text for

      +
    2. - 
      <section class="bio">
- <h1>A Biography of Isaac Asimov</h1>
- <p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
- <p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
- Later in life, he wore long white sideburns.">
- <p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
- <p>...
-</section>
      +

      Otherwise, if the user agent is able to determine image request's image's width and height, + and image request is current request, + update the img element's presentation appropriately + and set image request's state to partially available.

      -

      In such cases it is unnecessary (and indeed discouraged) to include a reference to the - presence of the image itself in the alternative text, since such text would be redundant with - the browser itself reporting the presence of the image. For example, if the alternative text - was "A photo of Isaac Asimov", then a conforming user agent might read that out as "(Image) A - photo of Isaac Asimov" rather than the more useful "(Image) Isaac Asimov had dark hair, a tall - forehead, and wore glasses...".

      +
    3. - +

      Otherwise, if the user agent is able to determine that image request's image + is corrupted in some fatal way such that the image dimensions cannot be obtained, + and image request is pending request, + abort the image request for the current request and the pending request, + upgrade the pending request to the current request, + set current request to the broken state, + fire a simple event named error at the img element, + fire a simple event named loadend at the img element, + and abort these steps.

      -
      Images whose contents are not known
      +
    4. -

      In some unfortunate cases, there might be no alternative text available at all, either - because the image is obtained in some automated fashion without any associated alternative text - (e.g. a Webcam), or because the page is being generated by a script using user-provided images - where the user did not provide suitable or usable alternative text (e.g. photograph sharing - sites), or because the author does not himself know what the images represent (e.g. a blind - photographer sharing an image on his blog).

      +

      Otherwise, if the user agent is able to determine that image request's image + is corrupted in some fatal way such that the image dimensions cannot be obtained, + and image request is current request, + abort the image request for image request, + fire a simple event named error at the img element, + fire a simple event named loadend at the img element, + and abort these steps.

      -

      In such cases, the alt attribute may be omitted, but one of - the following conditions must be met as well:

      +
    -

    • The img element is in a - figure element that contains a figcaption element that contains - content other than inter-element whitespace, and, ignoring the - figcaption element and its descendants, the figure element has no - flow content descendants other than inter-element whitespace and the - img element.

    • +

      That task, and each subsequent task, that is queued by the + networking task source while the image is being fetched, + if image request is the current request, + must update the presentation of the image appropriately (e.g. if + the image is a progressive JPEG, each packet can improve the resolution of the image).

      -

      The title attribute is present and has a non-empty - value.

      +

      Furthermore, the last task that is queued by the networking task source once the resource has been + fetched must additionally run these steps:

      - -

      Relying on the title attribute is currently - discouraged as many user agents do not expose the attribute in an accessible manner as - required by this specification (e.g. requiring a pointing device such as a mouse to cause a - tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone - with a modern phone or tablet).

      +

      1. Set image request to the completely + available state.

        -
    +

  • Add the image to the list of available images using the key key, with the ignore higher-layer caching flag set.

  • Fire a progress event or simple event named load + at the img element, depending on the resource in image request.

  • Fire a progress event or simple event named loadend + at the img element, depending on the resource in image request. -

    Such cases are to be kept to an absolute minimum. If there is even the slightest - possibility of the author having the ability to provide real alternative text, then it would not - be acceptable to omit the alt attribute.

    +
    Otherwise
    -
    +

    The image data is not in a supported file format; the user agent must set + image request to the broken state, + abort the image request for the current request and the pending request, + upgrade the pending request to the current request, + and then queue a task to first fire a simple event named error at the img element and then fire a simple + event named loadend at the img + element.

    -

    A photo on a photo-sharing site, if the site received the image with no metadata other than - the caption, could be marked up as follows:

    +
    • - 
    <figure>
- <img src="1100670787_6a7c664aef.jpg">
- <figcaption>Bubbles traveled everywhere with us.</figcaption>
-</figure>
    + -

    It would be better, however, if a detailed description of the important parts of the image - obtained from the user and included on the page.

    +

    To abort the image request for an image request image request means to run the following steps:

    - +

    1. Forget image request's image data, if any.

    2. Abort any instance of the fetching algorithm for image request, + discarding any pending tasks generated by that algorithm.

    -
    +

    To upgrade the pending request to the current request for an img element means to run the following steps:

    -

    A blind user's blog in which a photo taken by the user is shown. Initially, the user might - not have any idea what the photo he took shows:

    +

    1. Let the img element's current request be the pending request.

    2. Let the img element's pending request be null.

    - 
    <article>
- <h1>I took a photo</h1>
- <p>I went out today and took a photo!</p>
- <figure>
-  <img src="photo2.jpeg">
-  <figcaption>A photograph taken blindly from my front porch.</figcaption>
- </figure>
-</article>
    +

    To fire a progress event or simple event named type at an element e, + depending on resource r, means to + fire a progress event named type at e if r is CORS-same-origin, + and otherwise fire a simple event named type at e.

    -

    Eventually though, the user might obtain a description of the image from his friends and - could then include alternative text:

    +

    To restart the animation for an img element means that, + if the image is an animated image, + all animated images with the same absolute URL and the same image data in the img element's Document + are expected to restart their animation.

    - 
    <article>
- <h1>I took a photo</h1>
- <p>I went out today and took a photo!</p>
- <figure>
-  <img src="photo2.jpeg" alt="The photograph shows my squirrel
-  feeder hanging from the edge of my roof. It is half full, but there
-  are no squirrels around. In the background, out-of-focus trees fill the
-  shot. The feeder is made of wood with a metal grate, and it contains
-  peanuts. The edge of the roof is wooden too, and is painted white
-  with light blue streaks.">
-  <figcaption>A photograph taken blindly from my front porch.</figcaption>
- </figure>
-</article>
    +

    While a user agent is running the above algorithm for an element x, there + must be a strong reference from the element's Document to the element x, even if that element is not in its + Document.

    -
    +

    When an img element is in the completely available + state and the user agent can decode the media data without errors, then the + img element is said to be fully decodable.

    -
    +

    Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code + or equivalent) must be ignored when determining + the image's type and whether it is a valid image.

    -

    Sometimes the entire point of the image is that a textual description is not available, and - the user is to provide the description. For instance, the point of a CAPTCHA image is to see if - the user can literally read the graphic. Here is one way to mark up a CAPTCHA (note the title attribute):

    +

    This allows servers to return images with error responses, and have them + displayed.

    - 
    <p><label>What does this image say?
-<img src="captcha.cgi?id=8934" title="CAPTCHA">
-<input type=text name=captcha></label>
-(If you cannot see the image, you can use an <a
-href="?audio">audio</a> test instead.)</p>
    +

    The user agent should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official + type. If these rules are not applied, then the type of the image must be the type given by + the image's associated Content-Type headers.

    -

    Another example would be software that displays images and asks for alternative text - precisely for the purpose of then writing a page with correct alternative text. Such a page - could have a table of images, like this:

    +

    User agents must not support non-image resources with the img element (e.g. XML + files whose root element is an HTML element). User agents must not run executable code (e.g. + scripts) embedded in the image resource. User agents must only display the first page of a + multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an + interactive fashion, but should honor any animation in the resource.

    - 
    <table>
- <thead>
-  <tr> <th> Image <th> Description
- <tbody>
-  <tr>
-   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
-   <td> <input name="alt2421">
-  <tr>
-   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
-   <td> <input name="alt2422">
-</table>
    +

    This specification does not specify which image types are to be supported.

    -

    Notice that even in this example, as much useful information as possible is still included - in the title attribute.

    +
    -
    +

    An img element is associated with a source set.

    -

    Since some users cannot use images at all (e.g. because they have a very slow - connection, or because they are using a text-only browser, or because they are listening to the - page being read out by a hands-free automobile voice Web browser, or simply because they are - blind), the alt attribute is only allowed to be omitted rather - than being provided with replacement text when no alternative text is available and none can be - made available, as in the above examples. Lack of effort from the part of the author is not an - acceptable reason for omitting the alt attribute.

    +

    A source set is a set of zero or more image sources + and a source size.

    -
    +

    An image source is a URL, + and optionally either a density descriptor, or a width descriptor.

    +

    A source size is a <source-size-value>. + When a source size has a unit relative to the viewport, + it must be interpreted relative to the img element's document's viewport. + Other units must be interpreted the same as in Media Queries. [MQ]

    +

    When asked to select an image source for a given img element el, + user agents must do the following:

    -
    4.7.5.1.11 An image not intended for the user
    +

    1. Update the source set for el.

    2. If el's source set is empty, + return null as the URL and undefined as the pixel density and abort these steps.

    3. Otherwise, take el's source set + and let it be source set.

    4. In a user agent-specific manner, + choose one image source from source set. + Let this be selected source.

    5. Return selected source and its associated pixel density.

    -

    Generally authors should avoid using img elements for purposes other than showing - images.

    +

    When asked to update the source set for a given img element el, + user agents must do the following:

    -

    If an img element is being used for purposes other than showing an image, e.g. as - part of a service to count page views, then the alt attribute - must be the empty string.

    +

    1. Set el's source set to an empty source set.

    2. If el has a parent node and that is a picture element, + let elements be an array containing el's parent node's child elements, retaining relative order. + Otherwise, let elements be array containing only el.

    3. -

      In such cases, the width and height attributes should both be set to zero.

      +

      Iterate through elements, + doing the following for each item child:

      +
      1. -
        4.7.5.1.12 An image in an e-mail or private document intended for a specific person who is known to be able to view images
        +

        If child is el:

        -

        This section does not apply to documents that are publicly accessible, or whose target - audience is not necessarily personally known to the author, such as documents on a Web site, - e-mails sent to public mailing lists, or software documentation.

        +

        1. If child has a srcset attribute, + parse child's srcset attribute + and let the returned source set be source set. + Otherwise, let source set be an empty source set.

        2. Parse child's sizes attribute and + let source set's source size be the returned value.

        3. If child has a src attribute + whose value is not the empty string + and source set does not contain an + image source with a density descriptor value of 1, + and no image source with a width descriptor, + append child's src attribute value to source set.

        4. Let el's source set be source set.

        5. Abort this algorithm.

        -

        When an image is included in a private communication (such as an HTML e-mail) aimed at a - specific person who is known to be able to view images, the alt - attribute may be omitted. However, even in such cases authors are strongly urged to include - alternative text (as appropriate according to the kind of image involved, as described in the - above entries), so that the e-mail is still usable should the user use a mail client that does not - support images, or should the document be forwarded on to other users whose abilities might not - include easily seeing images.

        +

      2. If child is not a source element, + continue to the next child. + Otherwise, child is a source element.

      3. If child does not have a srcset attribute, + continue to the next child.

      4. Parse child's srcset attribute and + let the returned source set be source set.

      5. If source set has zero image sources, + continue to the next child.

      6. If child has a media attribute, + and its value is not a valid media query, + or is a valid media query that evaluates to false, + continue to the next child.

      7. Parse child's sizes attribute + and let source set's source size be the returned value.

      8. If child has a type attribute, + and its value is an unknown or unsupported MIME type, + continue to the next child.

      9. Normalize the source densities of source set.

      10. Let el's source set be source set.

      11. Abort this algorithm.

      +
    +

    Each img element independently considers + its previous sibling source elements + plus the img element itself + for selecting an image source, ignoring any other (invalid) elements, + including other img elements in the same picture element, + or source elements that are following siblings + of the relevant img element.

    +

    When asked to parse a srcset attribute from an element, + parse the value of the element's srcset attribute as follows:

    - +

    1. Let input be the value passed to this algorithm.

    2. Let position be a pointer into input, + initially pointing at the start of the string.

    3. Let raw candidates be an initially empty + ordered list of URLs with associated unparsed descriptor list. + The order of entries in the lists is the order in which entries are added to the lists.

    4. Splitting loop: Collect a sequence of characters + that are space characters or U+002C COMMA characters.

    5. If position is past the end of input, + then jump to the step labeled descriptor parser.

    6. Collect a sequence of characters that are not + space characters, and let that be url.

    7. Let descriptors be a new empty list.

    8. -
      4.7.5.1.13 Guidance for markup generators
      +

      If url ends with a U+002C COMMA character (,), + follow these substeps:

      -

      Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain - alternative text from their users. However, it is recognised that in many cases, this will not be - possible.

      +

      1. Remove all trailing U+002C COMMA characters from url.

      2. If url is empty, + then jump to the step labeled splitting loop.

      -

      For images that are the sole contents of links, markup generators should examine the link - target to determine the title of the target, or the URL of the target, and use information - obtained in this manner as the alternative text.

      +

      Otherwise, follow these substeps:

      -

      For images that have captions, markup generators should use the figure and - figcaption elements, or the title attribute, to - provide the image's caption.

      +

      1. Let current token be the empty string.

      2. Let state be start.

      3. -

        As a last resort, implementors should either set the alt - attribute to the empty string, under the assumption that the image is a purely decorative image - that doesn't add any information but is still specific to the surrounding content, or omit the - alt attribute altogether, under the assumption that the image is - a key part of the content.

        +

        Let c be the character at position. + Do the following depending on the value of state. + For the purpose of this step, "EOF" is a special character representing + that position is past the end of input.

        -

        Markup generators may specify a generator-unable-to-provide-required-alt - attribute on img elements for which they have been unable to obtain alternative text - and for which they have therefore omitted the alt attribute. The - value of this attribute must be the empty string. Documents containing such attributes are not - conforming, but conformance checkers will silently - ignore this error.

        +
        Start
        -

        This is intended to avoid markup generators from being pressured into replacing - the error of omitting the alt attribute with the even more - egregious error of providing phony alternative text, because state-of-the-art automated - conformance checkers cannot distinguish phony alternative text from correct alternative text.

        +

        Do the following, depending on the value of c:

        -

        Markup generators should generally avoid using the image's own file name as the alternative - text. Similarly, markup generators should avoid generating alternative text from any content that - will be equally available to presentation user agents (e.g. Web browsers).

        +
        Space character

        If current token is not empty, + append current token to descriptors + and let current token be the empty string. + Set state to after token.

        U+002C COMMA (,)

        Advance position to the next character in input. + If current token is not empty, + append current token to descriptors. + Jump to the step labeled add candidate.

        U+0028 LEFT PARANTHESIS (()

        Append c to current token. + Set state to in parens.

        EOF

        If current token is not empty, + append current token to descriptors. + Jump to the step labeled add candidate.

        Anything else

        Append c to current token.

        -

        This is because once a page is generated, it will typically not be updated, - whereas the browsers that later read the page can be updated by the user, therefore the browser is - likely to have more up-to-date and finely-tuned heuristics than the markup generator did when - generating the page.

        +
        In parens
        - +

        Do the following, depending on the value of c:

        - +
        U+0029 RIGHT PARENTHESIS ())

        Append c to current token. + Set state to start.

        EOF

        Append current token to descriptors. + Jump to the step labeled add candidate.

        Anything else

        Append c to current token.

        -
        4.7.5.1.14 Guidance for conformance checkers
        +
        After token
        -

        A conformance checker must report the lack of an alt - attribute as an error unless one of the conditions listed below applies:

        +

        Do the following, depending on the value of c:

        -

        • The img element is in a figure element that satisfies the conditions described above.

        • The img element has a title attribute with a - value that is not the empty string (also as described - above).

        • The conformance checker has been configured to assume that the document is an e-mail or - document intended for a specific person who is known to be able to view images.

        • The img element has a (non-conforming) generator-unable-to-provide-required-alt - attribute whose value is the empty string. A conformance checker that is not reporting the lack - of an alt attribute as an error must also not report the - presence of the empty generator-unable-to-provide-required-alt - attribute as an error. (This case does not represent a case where the document is conforming, - only that the generator could not determine appropriate alternative text — validators are - not required to show an error in this case, because such an error might encourage markup - generators to include bogus alternative text purely in an attempt to silence validators. - Naturally, conformance checkers may report the lack of an alt attribute as an error even in the presence of the generator-unable-to-provide-required-alt - attribute; for example, there could be a user option to report all conformance errors - even those that might be the more or less inevitable result of using a markup - generator.)

        +
        Space character

        Stay in this state.

        EOF

        Jump to the step labeled add candidate.

        Anything else

        Set state to start. + Set position to the previous character in input.

        - +
        +

        Advance position to the next character in input. + Repeat this step.

        +
      +

    9. Add candidate: Add url to raw candidates, + associated with descriptors.

    10. Return to the step labeled splitting loop.

    11. Descriptor parser: + Let candidates be an initially empty source set. + The order of entries in the list is the order in which entries are added to the list.

    12. +

      For each entry in raw candidates with URL url + associated with the unparsed descriptor list descriptor list, + run these substeps:

      -

      4.7.6 The iframe element

      +

      1. Let error be no.

      2. Let width be absent.

      3. Let density be absent.

      4. Let future-compat-h be absent.

      5. -
        Categories:
        Flow content.
        Phrasing content.
        Embedded content.
        Interactive content.
        Palpable content.
        Contexts in which this element can be used:
        Where embedded content is expected.
        Content model:
        Text that conforms to the requirements given in the prose.
        Tag omission in text/html:
        Neither tag is omissible.
        Content attributes:
        Global attributes
        src — Address of the resource
        srcdoc — A document to render in the iframe
        name — Name of nested browsing context
        sandbox — Security rules for nested content
        seamless — Whether to apply the document's styles to the nested content
        allowfullscreen — Whether to allow the iframe's contents to use requestFullscreen()
        width — Horizontal dimension
        height — Vertical dimension
        DOM interface:
        -
        interface HTMLIFrameElement : HTMLElement {
-           attribute DOMString src;
-           attribute DOMString srcdoc;
-           attribute DOMString name;
-  [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
-           attribute boolean seamless;
-           attribute boolean allowFullscreen;
-           attribute DOMString width;
-           attribute DOMString height;
-  readonly attribute Document? contentDocument;
-  readonly attribute WindowProxy? contentWindow;
+      
        For each token in descriptor list,
+      run the appropriate set of steps from the following list:
        
 
-  // also has obsolete members
-};
        -
        +
        If the token consists of a valid non-negative integer + followed by a U+0077 LATIN SMALL LETTER W character
        - +

        1. If width and density + are not both absent, + then let error be yes.

        2. Apply the rules for parsing non-negative integers to the token. + If the result is zero, let error be yes. + Otherwise, let width be the result.

        -

        The iframe element represents a nested browsing - context.

        +
        If the token consists of a valid floating-point number + followed by a U+0078 LATIN SMALL LETTER X character
        +

        1. If width, density and future-compat-h + are not all absent, + then let error be yes.

        2. - +

          Apply the rules for parsing floating-point number values to the token. + If the result is less than zero, let error be yes. + Otherwise, let density be the result.

          -

          The src attribute gives the address of a page - that the nested browsing context is to contain. The attribute, if present, must be a - valid non-empty URL potentially surrounded by spaces. If the itemprop is specified on an iframe element, then the - src attribute must also be specified.

          +

          If density is zero, + the intrinsic dimensions will be infinite. + User agents are expected to have limits in how big images can be rendered, + which is allowed by the hardware limitations clause.

          -

          The srcdoc attribute gives the content of - the page that the nested browsing context is to contain. The value of the attribute - is the source of an iframe srcdoc - document.

          +
        -

        For iframe elements in HTML documents, the srcdoc attribute, if present, must have a value using the - HTML syntax that consists of the following syntactic components, in the given order:

        +
        If the token consists of a valid non-negative integer + followed by a U+0068 LATIN SMALL LETTER H character
        -
        1. Any number of comments and space characters.
        2. Optionally, a DOCTYPE. +

          1. If future-compat-h and density + are not both absent, + then let error be yes.

          2. Apply the rules for parsing non-negative integers to the token. + If the result is zero, let error be yes. + Otherwise, let future-compat-h be the result.

          -
        3. Any number of comments and space characters.
        4. The root element, in the form of an html element.
        5. Any number of comments and space characters.
        +
        -

        For iframe elements in XML documents, the srcdoc attribute, if present, must have a value that matches the - production labeled document in the XML specification. [XML]

        +

      6. If error is still no, + then add a new image source to candidates + whose URL is url, + associated with a width width if not absent + and a pixel density density if not absent.

      -
      +

    13. Return candidates.

    -

    Here a blog uses the srcdoc attribute in conjunction - with the sandbox and seamless attributes described below to provide users of user - agents that support this feature with an extra layer of protection from script injection in the - blog post comments:

    +

    When asked to parse a sizes attribute from an element, + parse a comma-separated list of component values + from the value of the element's sizes attribute + (or the empty string, if the attribute is absent), + and let unparsed sizes list be the result. [CSSSYNTAX]

    - 
    <article>
- <h1>I got my own magazine!</h1>
- <p>After much effort, I've finally found a publisher, and so now I
- have my own magazine! Isn't that awesome?! The first issue will come
- out in September, and we have articles about getting food, and about
- getting in boxes, it's going to be great!</p>
- <footer>
-  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
- </footer>
- <article>
-  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
-  <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
- </article>
- <article>
-  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
-  <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
- </article>
- <article>
-  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
-  <iframe seamless sandbox srcdoc="<p>hey that's earl's table.
-<p>you should get earl&amp;amp;me on the next cover."></iframe>
- </article>
    +

    For each unparsed size in unparsed sizes list:

    -

    Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw - ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be - doubly escaped — once so that the ampersand is preserved when originally parsing - the srcdoc attribute, and once more to prevent the - ampersand from being misinterpreted when parsing the sandboxed content.

    +

    1. Remove all consecutive <whitespace-token>s + from the end of unparsed size. + If unparsed size is now empty, + continue to the next iteration of this algorithm.

    2. If the last component value in unparsed size + is a valid non-negative <source-size-value>, + let size be its value + and remove the component value from unparsed size. + Otherwise, continue to the next iteration of this algorithm.

    3. Remove all consecutive <whitespace-token>s + from the end of unparsed size. + If unparsed size is now empty, + return size and exit this algorithm.

    4. Parse the remaining component values in unparsed size + as a <media-condition>. + If it does not parse correctly, + or it does parse correctly but the <media-condition> evaluates to false, + continue to the next iteration of this algorithm. [MQ]

    5. Return size and exit this algorithm.

    -

    Furthermore, notice that since the DOCTYPE is optional in - iframe srcdoc documents, and the html, - head, and body elements have optional - start and end tags, and the title element is also optional in iframe srcdoc - documents, the markup in a srcdoc attribute can be - relatively succint despite representing an entire document, since only the contents of the - body element need appear literally in the syntax. The other elements are still - present, but only by implication.

    +

    If the above algorithm exhausts unparsed sizes list without returning a size value, + return 100vw.

    - +

    While a valid source size list only contains a bare <source-size-value> + (without an accompanying <media-condition>) + as the last entry in the <source-size-list>, + the parsing algorithm technically allows such at any point in the list, + and will accept it immediately as the size + if the preceding entries in the list weren't used. + This is to enable future extensions, + and protect against simple author errors such as a final trailing comma.

    -

    In the HTML syntax, authors need only remember to use U+0022 - QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0022 - QUOTATION MARK (") and U+0026 AMPERSAND (&) characters, and to specify the sandbox attribute, to ensure safe embedding of content.

    +

    An image source can have a density descriptor, + a width descriptor, + or no descriptor at all accompanying its URL. + Normalizing a source set gives every image source a density descriptor.

    -

    Due to restrictions of the XHTML syntax, in XML the U+003C LESS-THAN - SIGN character (<) needs to be escaped as well. In order to prevent attribute-value normalization, some of XML's - whitespace characters — specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED - (LF), and U+000D CARRIAGE RETURN (CR) — also need to be escaped. [XML]

    +

    When asked to normalize the source densities of a source set source set, + the user agent must do the following:

    -

    If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority. This allows authors to provide - a fallback URL for legacy user agents that do not support the srcdoc attribute.

    +

    1. Let source size be source set's source size.

    2. +

      For each image source in source set:

      - +

      1. If the image source has a density descriptor, + continue to the next image source.

      2. -
        +

        Otherwise, if the image source has a width descriptor, + replace the width descriptor with a density descriptor + with a value of the width descriptor divided by the source size + and a unit of x.

        -

        When an iframe element is inserted - into a document, the user agent must create a nested browsing context, and - then process the iframe attributes for the "first time".

        +

        If the source size is zero, + the density would be infinity, + which results in the intrinsic dimensions being zero by zero.

        -

        When an iframe element is removed - from a document, the user agent must discard the nested browsing context.

        +

      3. Otherwise, give the image source a density descriptor of 1x.

      -

      This happens without any unload events firing - (the nested browsing context and its Document are discarded, not data-x="unload a - document">unloaded).

      +
    - +

    The user agent may at any time run the following algorithm to update an img + element's image in order to react to changes in the environment. (User agents are not + required to ever run this algorithm; for example, if the user is not looking at the page any + more, the user agent might want to wait until the user has returned to the page before determining + which image to use, in case the environment changes again in the meantime.)

    -

    Whenever an iframe element with a nested browsing context has its - srcdoc attribute set, changed, or removed, the user agent - must process the iframe attributes.

    +

    1. Asynchronously await a stable state. The synchronous section + consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    2. ⌛ If the img element does not have a srcset attribute specified and it either has no parent + or it is not a picture element, is not in the completely available state, has image data whose resource type is + multipart/x-mixed-replace, or if its update the image data algorithm is + running, then abort this algorithm.

    3. ⌛ Let selected source and selected pixel + density be the URL and pixel density that results from selecting an image source, respectively.

    4. ⌛ If selected source is null, then abort these steps.

    5. ⌛ If selected source and selected pixel + density are the same as the element's last selected source and current + pixel density, then abort these steps.

    6. ⌛ Resolve selected source, + relative to the element.

    7. ⌛ Let CORS mode be the state of the element's crossorigin content attribute.

    8. ⌛ If the resolve a URL algorithm is not successful, abort these + steps.

      -

      Similarly, whenever an iframe element with a nested browsing context - but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must - process the iframe attributes.

      +

    9. End the synchronous section, continuing the remaining steps + asynchronously.

    10. -

      When the user agent is to process the iframe attributes, it must run - the first appropriate steps from the following list:

      +

      Do a potentially CORS-enabled fetch of the resulting absolute + URL, with the mode being CORS mode, the origin + being the origin of the img element's Document, and the + default origin behaviour set to taint.

      -
      If the srcdoc attribute is specified

      Navigate the element's child browsing context - to a resource whose Content-Type is text/html, whose URL - is about:srcdoc, and whose data consists of the value of the attribute. The - resulting Document must be considered an iframe srcdoc document.

      Otherwise, if the element has no src attribute - specified, and the user agent is processing the iframe's attributes for the "first - time"
      +

      If this download fails in any way (other than the response code not being a 2xx code, as + mentioned earlier), or if the image format is unsupported (as determined by applying the image sniffing rules, again as mentioned earlier), + or if the resource type is multipart/x-mixed-replace, then abort these steps.

      -

      Queue a task to run the iframe load event steps.

      +

      Otherwise, wait for the fetch algorithm to queue its last task, and then + continue with these steps. The data obtained in this way is used in the steps below.

      -

      The task source for this task is the - DOM manipulation task source.

      +
    11. -
      Otherwise
      +

      Queue a task to run the following substeps:

      -
      1. +

        1. If the img element has experienced relevant mutations + since this algorithm started, then abort these steps.

          -

          If the value of the src attribute is missing, or its - value is the empty string, let url be the string - "about:blank".

          - +

        2. Let the img element's last selected source be selected source and the img element's current pixel + density be selected pixel density.

        3. Let the img element's current request's + current URL be the resulting absolute URL from the earlier step.

        4. Replace the img element's image data with the resource obtained by the + earlier step of this algorithm. It can be either CORS-same-origin or + CORS-cross-origin; this affects the origin of the image itself (e.g. + when used on a canvas).

        5. Fire a simple event named load at the + img element.

        -

        Otherwise, resolve the value of the src attribute, relative to the iframe element.

        +
      -

      If that is not successful, then let url be the string - "about:blank". Otherwise, let url be the resulting - absolute URL.

      +
      -
    12. +

      The task source for the tasks queued by algorithms in this section is the DOM manipulation task + source.

      -

      If there exists an ancestor browsing context whose active - document's address, ignoring fragment - identifiers, is equal to url, then abort these steps.

      - - - +
      -
    13. +

      What an img element represents depends on the src attribute and the alt + attribute.

      -

      Navigate the element's child browsing context - to url.

      +
      If the src attribute is set and the alt attribute is set to the empty string
      -
    +

    The image is either decorative or supplemental to the rest of the content, redundant with + some other information in the document.

    - +

    If the image is available and the user agent is configured + to display that image, then the element represents the element's image data.

    -

    Any navigation required of the user agent in the process - the iframe attributes algorithm must be completed as an explicit - self-navigation override and with the iframe element's document's - browsing context as the source browsing context.

    +

    Otherwise, the element represents nothing, and may be omitted completely from + the rendering. User agents may provide the user with a notification that an image is present but + has been omitted from the rendering.

    -

    Furthermore, if the active document of the element's child browsing - context before such a navigation was not completely - loaded at the time of the new navigation, then the navigation must be completed with replacement enabled.

    +
    If the src attribute is set and the alt attribute is set to a value that isn't empty
    -

    Similarly, if the child browsing context's session history contained - only one Document when the process the iframe attributes - algorithm was invoked, and that was the about:blank Document created - when the child browsing context was created, then any navigation required of the user agent in that algorithm must be completed - with replacement enabled.

    +

    The image is a key part of the content; the alt attribute + gives a textual equivalent or replacement for the image.

    -

    When a Document in an iframe is marked as completely - loaded, the user agent must synchronously run the iframe load event steps.

    +

    If the image is available and the user agent is configured + to display that image, then the element represents the element's image data.

    -

    A load event is also fired at the - iframe element when it is created if no other data is loaded in it.

    +

    Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification + that an image is present but has been omitted from the rendering.

    -

    Each Document has an iframe load in progress flag and a mute - iframe load flag. When a Document is created, these flags must be unset for - that Document.

    +
    If the src attribute is set and the alt attribute is not
    -

    The iframe load event steps are as follows:

    +

    The image might be a key part of the content, and there is no textual equivalent of the image + available.

    -

    1. Let child document be the active document of the - iframe element's nested browsing context.

    2. If child document has its mute iframe load flag set, - abort these steps.

    3. Set child document's iframe load in progress - flag.

    4. Fire a simple event named load at the - iframe element.

    5. Unset child document's iframe load in progress - flag.

    +

    In a conforming document, the absence of the alt attribute indicates that the image is a key part of the content + but that a textual replacement for the image was not available when the image was generated.

    -

    This, in conjunction with scripting, can be used to probe the URL space of the - local network's HTTP servers. User agents may implement cross-origin - access control policies that are stricter than those described above to mitigate this attack, but - unfortunately such policies are typically not compatible with existing Web content.

    +

    If the image is available and the user agent is configured + to display that image, then the element represents the element's image data.

    -

    When the iframe's browsing context's active document is - not ready for post-load tasks, and when anything in the iframe is delaying the load event of the iframe's - browsing context's active document, and when the iframe's - browsing context is in the delaying load events - mode, the iframe must delay the load event of its document.

    +

    Otherwise, the user agent should display some sort of indicator that there is an image that + is not being rendered, and may, if requested by the user, or if so configured, or when required + to provide contextual information in response to navigation, provide caption information for the + image, derived as follows:

    -

    If, during the handling of the load event, the - browsing context in the iframe is again navigated, that will further delay the load event.

    +

    1. If the image has a title attribute whose value is not + the empty string, then the value of that attribute is the caption information; abort these + steps.

    2. If the image is a descendant of a figure element that has a child + figcaption element, and, ignoring the figcaption element and its + descendants, the figure element has no flow content descendants other + than inter-element whitespace and the img element, then the contents of the first such + figcaption element are the caption information; abort these steps.

    3. There is no caption information.

    - +
    If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all
    - +

    The element represents nothing.

    -

    If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be - resolved, the browsing context will remain at the initial - about:blank page.

    +
    Otherwise
    -

    If the user navigates away from this page, the - iframe's corresponding WindowProxy object will proxy new - Window objects for new Document objects, but the src attribute will not change.

    +

    The element represents the text given by the alt attribute.

    + -
    +

    The alt attribute does not represent advisory information. + User agents must not present the contents of the alt attribute + in the same way as content of the title attribute.

    -

    The name attribute, if present, must be a - valid browsing context name. The given value is used to name the nested - browsing context. When the browsing context is created, if the attribute - is present, the browsing context name must be set to the value of this attribute; - otherwise, the browsing context name must be set to the empty string.

    +

    User agents may always provide the user with the option to display any image, or to prevent any + image from being displayed. User agents may also apply heuristics to help the user make use of the + image when the user is unable to see it, e.g. due to a visual disability or because they are using + a text terminal with no graphics capabilities. Such heuristics could include, for instance, + optical character recognition (OCR) of text found within the image.

    - +

    While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described + in detail below.

    -

    Whenever the name attribute is set, the nested - browsing context's name must be changed to - the new value. If the attribute is removed, the browsing context name must be set to - the empty string.

    +

    The contents of img elements, if any, are ignored for the purposes of + rendering.

    +
    -
    - -

    The sandbox attribute, when specified, - enables a set of extra restrictions on any content hosted by the iframe. Its value - must be an unordered set of unique space-separated tokens that are ASCII - case-insensitive. The allowed values are allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation.

    - -

    When the attribute is set, the content is treated as being from a unique origin, - forms, scripts, and various potentially annoying APIs are disabled, links are prevented from - targeting other browsing contexts, and plugins are secured. - The allow-same-origin keyword causes - the content to be treated as being from its real origin instead of forcing it into a unique - origin; the allow-top-navigation - keyword allows the content to navigate its top-level browsing context; - and the allow-forms, allow-pointer-lock, allow-popups and allow-scripts keywords re-enable forms, the - pointer lock API, popups, and scripts respectively. [POINTERLOCK]

    +

    The usemap attribute, + if present, can indicate that the image has an associated + image map.

    -

    Setting both the allow-scripts and allow-same-origin keywords together when the - embedded page has the same origin as the page containing the iframe - allows the embedded page to simply remove the sandbox - attribute and then reload itself, effectively breaking out of the sandbox altogether.

    +

    The ismap + attribute, when used on an element that is a descendant of an + a element with an href attribute, indicates by its + presence that the element provides access to a server-side image + map. This affects how events are handled on the corresponding + a element.

    -

    These flags only take effect when the nested browsing context of - the iframe is navigated. Removing them, or removing the - entire sandbox attribute, has no effect on an - already-loaded page.

    +

    The ismap attribute is a + boolean attribute. The attribute must not be specified + on an element that does not have an ancestor a element + with an href attribute.

    -

    Potentially hostile files should not be served from the same server as the file - containing the iframe element. Sandboxing hostile content is of minimal help if an - attacker can convince the user to just visit the hostile content directly, rather than in the - iframe. To limit the damage that can be caused by hostile HTML content, it should be - served from a separate dedicated domain. Using a different domain ensures that scripts in the - files are unable to attack the site, even if the user is tricked into visiting those pages - directly, without the protection of the sandbox - attribute.

    +

    The usemap and + ismap attributes + can result in confusing behavior when used together with + source elements with the + media attribute specified + in a picture element.

    - +

    The img element supports dimension + attributes.

    -

    When an iframe element with a sandbox - attribute has its nested browsing context created (before the initial - about:blank Document is created), and when an iframe - element's sandbox attribute is set or changed while it - has a nested browsing context, the user agent must parse the sandboxing directive using the attribute's value as the input, the iframe element's nested browsing context's - iframe sandboxing flag set as the output, and, if the - iframe has an allowfullscreen - attribute, the allow fullscreen flag.

    +

    The alt, src, srcset and sizes IDL attributes must reflect the + respective content attributes of the same name.

    -

    When an iframe element's sandbox - attribute is removed while it has a nested browsing context, the user agent must - empty the iframe element's nested browsing context's - iframe sandboxing flag set as the output.

    +

    The crossOrigin IDL attribute must + reflect the crossorigin content attribute, + limited to only known values.

    - +

    The useMap IDL attribute must + reflect the usemap content attribute.

    -
    +

    The isMap IDL attribute must reflect + the ismap content attribute.

    -

    In this example, some completely-unknown, potentially hostile, user-provided HTML content is - embedded in a page. Because it is served from a separate domain, it is affected by all the normal - cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, - forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or - windows it itself embeds).

    + - 
    <p>We're not scared of you! Here is your content, unedited:</p>
-<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
    -

    It is important to use a separate domain so that if the attacker convinces the - user to visit that page directly, the page doesn't run in the context of the site's origin, which - would make the user vulnerable to any attack found in the page.

    +
    image . width [ = value ]
    image . height [ = value ]
    -
    -
    +

    These attributes return the actual rendered dimensions of the + image, or zero if the dimensions are not known.

    -

    In this example, a gadget from another site is embedded. The gadget has scripting and forms - enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with - its originating server. The sandbox is still useful, however, as it disables plugins and popups, - thus reducing the risk of the user being exposed to malware and other annoyances.

    +

    They can be set, to change the corresponding content + attributes.

    - 
    <iframe sandbox="allow-same-origin allow-forms allow-scripts"
-        src="http://maps.example.com/embedded.html"></iframe>
    +
    image . naturalWidth
    image . naturalHeight
    - -
    +

    These attributes return the intrinsic dimensions of the image, + or zero if the dimensions are not known.

    -

    Suppose a file A contained the following fragment:

    +
    image . complete
    - 
    <iframe sandbox="allow-same-origin allow-forms" src=B></iframe>
    -

    Suppose that file B contained an iframe also:

    +

    Returns true if the image has been completely downloaded or if + no image is specified; otherwise, returns false.

    - 
    <iframe sandbox="allow-scripts" src=C></iframe>
    +
    image . currentSrc
    -

    Further, suppose that file C contained a link:

    +

    Returns the image's absolute URL.

    - 
    <a href=D>Link</a>
    +
    image = new Image( [ width [, height ] ] )
    -

    For this example, suppose all the files were served as text/html.

    -

    Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the - iframe in A has scripts disabled, and this overrides the allow-scripts keyword set on the - iframe in B. Forms are also disabled, because the inner iframe (in B) - does not have the allow-forms keyword - set.

    +

    Returns a new img element, with the width and height attributes set to the values + passed in the relevant arguments, if applicable.

    -

    Suppose now that a script in A removes all the sandbox attributes in A and B. - This would change nothing immediately. If the user clicked the link in C, loading page D into the - iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the - state of the nested browsing context in the iframe in A when page B was - loaded.

    + -

    Generally speaking, dynamically removing or changing the sandbox attribute is ill-advised, because it can make it quite - hard to reason about what will be allowed and what will not.

    + - +

    The IDL attributes width and height must return the rendered width and height of the + image, in CSS pixels, if the image is being rendered, and is being rendered to a + visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is + available but not being rendered to a visual medium; or else 0, if + the image is not available. [CSS]

    +

    On setting, they must act as if they reflected the respective + content attributes of the same name.

    -
    +

    The IDL attributes naturalWidth and naturalHeight must return the intrinsic width and + height of the image, in CSS pixels, if the image is available, or + else 0. [CSS]

    -

    The seamless attribute is a boolean - attribute. When specified, it indicates that the iframe element's - browsing context is to be rendered in a manner that makes it appear to be part of the - containing document (seamlessly included in the parent document).

    +

    The IDL attribute complete must return true if + any of the following conditions is true:

    -
    +
    • Both the src attribute and the srcset attribute are omitted. -

      An HTML inclusion is effected using this attribute as in the following example. - In this case, the inclusion is of a site-wide navigation bar. Any links in the - iframe will, in new user agents, be automatically opened in the - iframe's parent browsing context; for legacy user agents, the site could also - include a base element with a target - attribute with the value _parent. Similarly, in new user agents the styles - of the parent page will be automatically applied to the contents of the frame, but to support - legacy user agents authors might wish to include the styles explicitly.

      +
    • The srcset attribute is omitted and the src attribute's value is the empty string. - 
      <!DOCTYPE HTML>
-<title>Mirror Mirror — MovieInfo™</title>
-<header>
- <hgroup>
-  <h1>Mirror Mirror</h1>
-  <h2>Part of the MovieInfo™ Database</h2>
- </hgroup>
- <nav>
-  <iframe seamless src="nav.inc"></iframe>
- </nav>
-</header>
-...
      +
    • The final task that is queued by the networking task source once the resource has been fetched has been queued. -
    +
  • The img element is completely available. - +
  • The img element is broken. -

    An iframe element is said to be in seamless mode when all of the - following conditions are met:

    + - +

    A single image can have different appropriate alternative text depending on the context.

    -

    When an iframe element is in seamless mode, the following - requirements apply:

    +

    In each of the following cases, the same image is used, yet the alt text is different each time. The image is the coat of arms of the + Carouge municipality in the canton Geneva in Switzerland.

    -

    • The user agent must set the seamless browsing context flag to true for that - browsing context. This will cause links to open in the - parent browsing context unless an explicit self-navigation override is used - (target="_self").

    • Media queries in the context of the iframe's browsing context - (e.g. on media attributes of style elements in - Documents in that iframe) must be evaluated with respect to the nearest - ancestor browsing context that is not itself being nested through an iframe that is in seamless - mode. [MQ]

    • In a CSS-supporting user agent: the user agent must add all the style sheets that apply to - the iframe element to the cascade of the active document of the - iframe element's nested browsing context, at the appropriate cascade - levels, before any style sheets specified by the document itself.

    • In a CSS-supporting user agent: the user agent must, for the purpose of CSS property - inheritance only, treat the root element of the active document of the - iframe element's nested browsing context as being a child of the - iframe element. (Thus inherited properties on the root element of the document in - the iframe will inherit the computed values of those properties on the - iframe element instead of taking their initial values.)

    • In visual media, in a CSS-supporting user agent: the user agent should set the intrinsic - width of the iframe to the width that the element would have if it was a - non-replaced block-level element with 'width: auto', unless that width would be zero (e.g. if the - element is floating or absolutely positioned), in which case the user agent should set the - intrinsic width of the iframe to the shrink-to-fit width of the root element (if - any) of the content rendered in the iframe.

    • In visual media, in a CSS-supporting user agent: the user agent should set the intrinsic - height of the iframe to the shortest height that would make the content rendered in - the iframe at its current width (as given in the previous bullet point) have no - scrollable overflow at its bottom edge. Scrollable overflow is any overflow that would increase the range to - which a scrollbar or other scrolling mechanism can scroll.

    • +

      Here it is used as a supplementary icon:

      + 
      <p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>
      -

      In visual media, in a CSS-supporting user agent: the user agent must force the height of the - initial containing block of the active document of the nested browsing - context of the iframe to zero.

      +

      Here it is used as an icon representing the town:

      + 
      <p>Home town: <img src="carouge.svg" alt="Carouge"></p>
      -

      This is intended to get around the otherwise circular dependency of percentage - dimensions that depend on the height of the containing block, thus affecting the height of the - document's bounding box, thus affecting the height of the viewport, thus affecting the size of - the initial containing block.

      +

      Here it is used as part of a text on the town:

      -

    • In speech media, the user agent should render the nested browsing context - without announcing that it is a separate document.

    • + 
      <p>Carouge has a coat of arms.</p>
+<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
+<p>It is used as decoration all over the town.</p>
      -

      User agents should, in general, act as if the active document of the - iframe's nested browsing context was part of the document that the - iframe is in, if any.

      +

      Here it is used as a way to support a similar text where the description is given as well as, + instead of as an alternative to, the image:

      -

      For example if the user agent supports listing all the links in a document, - links in "seamlessly" nested documents would be included in that list without being - significantly distinguished from links in the document itself.

      + 
      <p>Carouge has a coat of arms.</p>
+<p><img src="carouge.svg" alt=""></p>
+<p>The coat of arms depicts a lion, sitting in front of a tree.
+It is used as decoration all over the town.</p>
      -

    • The nested browsing context's Window object's - cross-boundary event parent is the browsing context container. [DOM]

    +

    Here it is used as part of a story:

    -

    If the attribute is not specified, or if the origin conditions listed above are - not met, then the user agent should render the nested browsing context in a manner - that is clearly distinguishable as a separate browsing context, and the - seamless browsing context flag must be set to false for that browsing - context.

    + 
    <p>He picked up the folder and a piece of paper fell out.</p>
+<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
+red background, a green tree, and a yellow lion with its tongue
+hanging out and whose tail was shaped like an S."></p>
+<p>He stared at the folder. S! The answer he had been looking for all
+this time was simply the letter S! How had he not seen that before? It all
+came together now. The phone call where Hector had referred to a lion's tail,
+the time Marco had stuck his tongue out...</p>
    -

    It is important that user agents recheck the above conditions whenever the - active document of the nested browsing context of the - iframe changes, such that the seamless browsing context flag gets unset - if the nested browsing context is navigated to another - origin.

    +

    Here it is not known at the time of publication what the image will be, only that it will be a + coat of arms of some kind, and thus no replacement text can be provided, and instead only a brief + caption for the image is provided, in the title attribute:

    - + 
    <p>The last user to have uploaded a coat of arms uploaded this one:</p>
+<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>
    -

    The attribute can be set or removed dynamically, with the rendering updating in - tandem.

    +

    Ideally, the author would find a way to provide real replacement text even in this case, e.g. + by asking the previous user. Not providing replacement text makes the document more difficult to + use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth + connections or who pay by the byte, or users who are forced to use a text-only Web browser.

    -

    The contenteditable attribute does not - propagate into seamless iframes.

    + +
    -
    +

    Here are some more examples showing the same picture used in different contexts, with + different appropriate alternate texts each time.

    -

    The allowfullscreen attribute is a - boolean attribute. When specified, it indicates that Document objects in - the iframe element's browsing context are to be allowed to use requestFullscreen() (if it's not blocked for other - reasons, e.g. there is another ancestor iframe without this attribute set).

    + 
    <article>
+ <h1>My cats</h1>
+ <h2>Fluffy</h2>
+ <p>Fluffy is my favorite.</p>
+ <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
+ <p>She's just too cute.</p>
+ <h2>Miles</h2>
+ <p>My other cat, Miles just eats and sleeps.</p>
+</article>
    -
    + 
    <article>
+ <h1>Photography</h1>
+ <h2>Shooting moving targets indoors</h2>
+ <p>The trick here is to know how to anticipate; to know at what speed and
+ what distance the subject will pass by.</p>
+ <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
+ photographed quite nicely using this technique.">
+ <h2>Nature by night</h2>
+ <p>To achieve this, you'll need either an extremely sensitive film, or
+ immense flash lights.</p>
+</article>
    -

    Here, an iframe is used to embed a player from a video site. The allowfullscreen attribute is needed to enable the - player to show its video full-screen.

    + 
    <article>
+ <h1>About me</h1>
+ <h2>My pets</h2>
+ <p>I've got a cat named Fluffy and a dog named Miles.</p>
+ <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
+ <p>My dog Miles and I like go on long walks together.</p>
+ <h2>music</h2>
+ <p>After our walks, having emptied my mind, I like listening to Bach.</p>
+</article>
    <article>
- <header>
-  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
-  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
- </header>
- <main>
-  <p>Check out my new ride!</p>
-  <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
- </main>
+ <h1>Fluffy and the Yarn</h1>
+ <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
+ <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
+ <p>He would play in the morning, he would play in the evening.</p>
 </article>
    + -
    -

    The iframe element supports dimension attributes for cases where the - embedded content has specific dimensions (e.g. ad units have well-defined dimensions).

    +
    4.8.5.1 Requirements for providing text to act as an alternative for images
    -

    An iframe element never has fallback content, as it will always - create a nested browsing context, regardless of whether the specified initial - contents are successfully used.

    +
    4.8.5.1.1 General guidelines
    -
    +

    Except where otherwise specified, the alt attribute must be + specified and its value must not be empty; the value must be an appropriate replacement for the + image. The specific requirements for the alt attribute depend on + what the image is intended to represent, as described in the following sections.

    -

    Descendants of iframe elements represent nothing. (In legacy user agents that do - not support iframe elements, the contents would be parsed as markup that could act as - fallback content.)

    +

    The most general rule to consider when writing alternative text is the following: the + intent is that replacing every image with the text of its alt + attribute not change the meaning of the page.

    -

    When used in HTML documents, the allowed content model - of iframe elements is text, except that invoking the HTML fragment parsing - algorithm with the iframe element as the context element and the text contents as the input must result in a list of nodes that are all phrasing content, - with no parse errors having occurred, with no script - elements being anywhere in the list or as descendants of elements in the list, and with all the - elements in the list (including their descendants) being themselves conforming.

    +

    So, in general, alternative text can be written by considering what one would have written had + one not been able to include the image.

    -

    The iframe element must be empty in XML documents.

    +

    A corollary to this is that the alt attribute's value should + never contain text that could be considered the image's caption, title, or + legend. It is supposed to contain replacement text that could be used by users + instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.

    -

    The HTML parser treats markup inside iframe elements as - text.

    +

    Another corollary is that the alt attribute's value should + not repeat information that is already provided in the prose next to the image.

    +

    One way to think of alternative text is to think about how you would read the page + containing the image to someone over the phone, without mentioning that there is an image present. + Whatever you say instead of the image is typically a good start for writing the alternative + text.

    - -
    + -

    The IDL attributes src, srcdoc, name, sandbox, and seamless must reflect the respective - content attributes of the same name.

    +

    When an a element that creates a hyperlink, or a button + element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of + the link or button.

    -

    The allowFullscreen IDL attribute - must reflect the allowfullscreen - content attribute.

    +
    -

    The contentDocument IDL attribute - must return the Document object of the active document of the - iframe element's nested browsing context, if any and if its - effective script origin is the same origin as the effective script - origin specified by the incumbent settings object, or null otherwise.

    +

    In this example, a user is asked to pick his preferred colour from a list of three. Each colour + is given by an image, but for users who have configured their user agent not to display images, + the colour names are used instead:

    -

    The contentWindow IDL attribute must - return the WindowProxy object of the iframe element's nested - browsing context, if any, or null otherwise.

    + 
    <h1>Pick your colour</h1>
+<ul>
+ <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
+ <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
+ <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
+</ul>
    - +
    -

    Here is an example of a page using an iframe to include advertising from an - advertising broker:

    +

    In this example, each button has a set of images to indicate the kind of colour output desired + by the user. The first image is used in each case to give the alternative text.

    - 
    <iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
-        width="468" height="60"></iframe>
    + 
    <button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
+<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
    -
    +

    Since each image represents one part of the text, it could also be written like this:

    + 
    <button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
+<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>
    +

    However, with other alternative text, this might not work, and putting all the alternative + text into one image in each case might make more sense:

    + 
    <button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
+<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
    -

    4.7.7 The embed element

    +
    -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    src — Address of the resource
    type — Type of embedded resource
    width — Horizontal dimension
    height — Vertical dimension
    Any other attribute that has no namespace (see prose).
    DOM interface:
    -
    interface HTMLEmbedElement : HTMLElement {
-           attribute DOMString src;
-           attribute DOMString type;
-           attribute DOMString width;
-           attribute DOMString height;
-  legacycaller any (any... arguments);
+  
    4.8.5.1.3 A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
    
 
-  // also has obsolete members
-};
    - -

    Depending on the type of content instantiated by the - embed element, the node may also support other - interfaces.

    - -
    +

    Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a + diagram, a graph, or a simple map showing directions. In such cases, an image can be given using + the img element, but the lesser textual version must still be given, so that users + who are unable to view the image (e.g. because they have a very slow connection, or because they + are using a text-only browser, or because they are listening to the page being read out by a + hands-free automobile voice Web browser, or simply because they are blind) are still able to + understand the message being conveyed.

    -

    The embed element provides an integration point for an external (typically - non-HTML) application or interactive content.

    +

    The text must be given in the alt attribute, and must convey + the same message as the image specified in the src + attribute.

    -

    The src attribute gives the address of the - resource being embedded. The attribute, if present, must contain a valid non-empty URL - potentially surrounded by spaces.

    +

    It is important to realise that the alternative text is a replacement for the image, + not a description of the image.

    -

    If the itemprop attribute is specified on an - embed element, then the src attribute must also - be specified.

    +
    -

    The type attribute, if present, gives the - MIME type by which the plugin to instantiate is selected. The value must be a - valid MIME type. If both the type attribute and - the src attribute are present, then the type attribute must specify the same type as the explicit Content-Type metadata of the resource given by the src attribute.

    +

    In the following example we have a flowchart + in image form, with text in the alt attribute rephrasing the + flowchart in prose form:

    - + 
    <p>In the common case, the data handled by the tokenization stage
+comes from the network, but it can also come from script.</p>
+<p><img src="images/parsing-model-overview.png" alt="The Network
+passes data to the Input Stream Preprocessor, which passes it to the
+Tokenizer, which passes it to the Tree Construction stage. From there,
+data goes to both the DOM and to Script Execution. Script Execution is
+linked to the DOM, and, using document.write(), passes data to the
+Tokenizer."></p>
    -

    While any of the following conditions are occurring, any plugin instantiated for - the element must be removed, and the embed element represents - nothing:

    +
    - +
    -

    An embed element is said to be potentially - active when the following conditions are all met simultaneously:

    +

    Here's another example, showing a good solution and a bad solution to the problem of including + an image in a description.

    - +

    First, here's the good solution. This sample shows how the alternative text should just be + what you would have put in the prose if the image had never existed.

    -

    Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is - remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must - queue a task using the embed task source to run the - embed element setup steps.

    + 
    <!-- This is the correct way to do things. -->
+<p>
+ You are standing in an open field west of a house.
+ <img src="house.jpeg" alt="The house is white, with a boarded front door.">
+ There is a small mailbox here.
+</p>
    + +

    Second, here's the bad solution. In this incorrect way of doing things, the alternative text + is simply a description of the image, instead of a textual replacement for the image. It's bad + because when the image isn't shown, the text doesn't flow as well as in the first example.

    + + 
    <!-- This is the wrong way to do things. -->
+<p>
+ You are standing in an open field west of a house.
+ <img src="house.jpeg" alt="A white house, with a boarded front door.">
+ There is a small mailbox here.
+</p>
    -

    The embed element setup steps are as follows:

    +

    Text such as "Photo of white house with boarded door" would be equally bad alternative text + (though it could be suitable for the title attribute or in the + figcaption element of a figure with this image).

    -

    1. If another task has since been queued to run the - embed element setup steps for this element, then abort these steps.

    2. +
    -
    If the element has a src attribute set
    -

    The user agent must resolve the value of the element's - src attribute, relative to the element. If that is - successful, the user agent should fetch the resulting absolute - URL, from the element's browsing context scope origin if it has one. The task that - is queued by the networking task source once - the resource has been fetched must run the following steps:

    - +
    4.8.5.1.4 A short phrase or label with an alternative graphical representation: icons, logos
    -

    1. If another task has since been queued to run - the embed element setup steps for this element, then abort these - steps.

    2. +

      A document can contain information in iconic form. The icon is intended to help users of visual + browsers to recognise features at a glance.

      -

      Determine the type of the content being embedded, as - follows (stopping at the first substep that determines the type):

      +

      In some cases, the icon is supplemental to a text label conveying the same meaning. In those + cases, the alt attribute must be present but must be empty.

      -

      1. If the element has a type attribute, and that - attribute's value is a type that a plugin supports, then the value of the - type attribute is the content's type.

      2. +
        - +

        Here the icons are next to text that conveys the same meaning, so they have an empty alt attribute:

        -

        Otherwise, if applying the URL parser algorithm to the URL of - the specified resource (after any redirects) results in a parsed URL whose - path component matches a pattern that a - plugin supports, then the content's - type is the type that that plugin can handle.

        + 
        <nav>
+ <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
+ <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
+ Configuration Tools</a></p>
+</nav>
        -

        For example, a plugin might say that it can handle resources with path components that end with the four character string - ".swf".

        +
        - - +

        In other cases, the icon has no text next to it describing what it means; the icon is supposed + to be self-explanatory. In those cases, an equivalent textual label must be given in the alt attribute.

        -

      3. Otherwise, if the specified resource has explicit - Content-Type metadata, then that is the content's - type.

      4. Otherwise, the content has no type and there - can be no appropriate plugin for it.

      +
      -
    3. +

      Here, posts on a news site are labeled with an icon indicating their topic.

      -

      If the previous step determined that the content's - type is image/svg+xml, then run the following substeps:

      + 
      <body>
+ <article>
+  <header>
+   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
+   <p><img src="movies.png" alt="Movies"></p>
+  </header>
+  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
+  making this its 8th win in the last 12 years.</p>
+ </article>
+ <article>
+  <header>
+   <h1>Latest TWiT episode is online</h1>
+   <p><img src="podcasts.png" alt="Podcasts"></p>
+  </header>
+  <p>The latest TWiT episode has been posted, in which we hear
+  several tech news stories as well as learning much more about the
+  iPhone. This week, the panelists compare how reflective their
+  iPhones' Apple logos are.</p>
+ </article>
+</body>
      -

      1. If the embed element is not associated with a nested browsing - context, associate the element with a newly created nested browsing - context, and, if the element has a name - attribute, set the browsing context name of the element's nested - browsing context to the value of this attribute.

        - + -

      2. Navigate the nested browsing context to - the fetched resource, with replacement enabled, and with the - embed element's document's browsing context as the source - browsing context. (The src attribute of the - embed element doesn't get updated if the browsing context gets further - navigated to other locations.)

      3. The embed element now represents its associated - nested browsing context.

      +

      Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such + as a company, organization, project, band, software package, country, or some such.

      -
    4. +

      If the logo is being used to represent the entity, e.g. as a page heading, the alt attribute must contain the name of the entity being represented by + the logo. The alt attribute must not contain text like + the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity + itself.

      -

      Otherwise, find and instantiate an appropriate plugin based on the content's type, and hand that plugin the - content of the resource, replacing any previously instantiated plugin for the element. The - embed element now represents this plugin instance.

      +

      If the logo is being used next to the name of the entity that it represents, then the logo is + supplemental, and its alt attribute must instead be empty.

      -

    5. Once the resource or plugin has completely loaded, queue a task to - fire a simple event named load at the - element.

    +

    If the logo is merely used as decorative material (as branding, or, for example, as a side + image in an article that mentions the entity to which the logo belongs), then the entry below on + purely decorative images applies. If the logo is actually being discussed, then it is being used + as a phrase or paragraph (the description of the logo) with an alternative graphical + representation (the logo itself), and the first entry above applies.

    -

    Whether the resource is fetched successfully or not (e.g. whether the response code was a - 2xx code or equivalent) must be ignored - when determining the content's type and when handing - the resource to the plugin.

    +
    -

    This allows servers to return data for plugins even with error responses (e.g. - HTTP 500 Internal Server Error codes can still contain plugin data).

    +

    In the following snippets, all four of the above cases are present. First, we see a logo used + to represent a company:

    -

    Fetching the resource must delay the load event of the element's document.

    - - - + 
    <h1><img src="XYZ.gif" alt="The XYZ company"></h1>
    -
    If the element has no src attribute set
    +

    Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have + any alternative text: -

    The user agent should find and instantiate an appropriate plugin based on the - value of the type attribute. The embed - element now represents this plugin instance.

    + 
    <article>
+ <h2>News</h2>
+ <p>We have recently been looking at buying the <img src="alpha.gif"
+ alt=""> ΑΒΓ company, a small Greek company
+ specializing in our type of product.</p>
    -

    Once the plugin is completely loaded, queue a task to fire a simple - event named load at the element.

    +

    In this third snippet, we have a logo being used in an aside, as part of the larger article + discussing the acquisition:

    -
    +
     <aside><p><img src="alpha-large.gif" alt=""></p></aside>
+ <p>The ΑΒΓ company has had a good quarter, and our
+ pie chart studies of their accounts suggest a much bigger blue slice
+ than its green and orange slices, which is always a good sign.</p>
+</article>
    - +

    Finally, we have an opinion piece talking about a logo, and the logo is therefore described in + detail in the alternative text.

    -

    The embed element has no fallback content. If the user agent can't - find a suitable plugin when attempting to find and instantiate one for the algorithm above, then - the user agent must use a default plugin. This default could be as simple as saying "Unsupported - Format".

    + 
    <p>Consider for a moment their logo:</p>
 
-  
    Whenever an embed element that was potentially
-  active stops being potentially active, any
-  plugin that had been instantiated for that element must be unloaded.
    
+<p><img src="/images/logo" alt="It consists of a green circle with a
+green question mark centered inside it."></p>
 
-  
    When a plugin is to be instantiated but it cannot be secured and the sandboxed plugins browsing context
-  flag is set on the embed element's Document's active
-  sandboxing flag set, then the user agent must not instantiate the plugin, and
-  must instead render the embed element in a manner that conveys that the
-  plugin was disabled. The user agent may offer the user the option to override the
-  sandbox and instantiate the plugin anyway; if the user invokes such an option, the
-  user agent must act as if the conditions above did not apply for the purposes of this element.
    
+<p>How unoriginal can you get? I mean, oooooh, a question mark, how
+<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
+sure everyone will rush to adopt those specifications now! They could
+at least have tried for some sort of, I don't know, sequence of
+rounded squares with varying shades of green and bold white outlines,
+at least that would look good on the cover of a blue book.</p>
    -

    Plugins that cannot be secured are - disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by - the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User - agents should convey the danger of overriding the sandbox to the user if an option to do so is - provided.

    +

    This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into + the surrounding text, as if the image had never been there in the first place.

    -

    When an embed element represents a nested browsing context: if the - embed element's nested browsing context's active document - is not ready for post-load tasks, and when anything is delaying the load event of the embed element's browsing - context's active document, and when the embed element's - browsing context is in the delaying load - events mode, the embed must delay the load event of its - document.

    + -

    The task source for the tasks mentioned in this - section is the DOM manipulation task source.

    - +
    4.8.5.1.5 Text that has been rendered to a graphic for typographical effect
    -

    Any namespace-less attribute other than name, align, hspace, and vspace may be - specified on the embed element, so long as its name is XML-compatible - and contains no uppercase ASCII letters. These attributes are then passed as - parameters to the plugin.

    +

    Sometimes, an image just consists of text, and the purpose of the image is not to highlight the + actual typographic effects used to render the text, but just to convey the text itself.

    -

    All attributes in HTML documents get lowercased automatically, so the - restriction on uppercase letters doesn't affect such documents.

    +

    In such cases, the alt attribute must be present but must + consist of the same text as written in the image itself.

    -

    The four exceptions are to exclude legacy attributes that have side-effects beyond - just sending parameters to the plugin.

    +
    - +

    Consider a graphic containing the text "Earth Day", but with the letters all decorated with + flowers and plants. If the text is merely being used as a heading, to spice up the page for + graphical users, then the correct alternative text is just the same text "Earth Day", and no + mention need be made of the decorations:

    -

    The user agent should pass the names and values of all the attributes of the embed - element that have no namespace to the plugin used, when one is instantiated.

    + 
    <h1><img src="earthdayheading.png" alt="Earth Day"></h1>
    -

    The HTMLEmbedElement object representing the element must expose the scriptable - interface of the plugin instantiated for the embed element, if any. At a - minimum, this interface must implement the legacy caller - operation. (It is suggested that the default behavior of this legacy caller operation, e.g. - the behavior of the default plugin's legacy caller operation, be to throw a - NotSupportedError exception.)

    +
    - +
    -

    The embed element supports dimension attributes.

    +

    An illuminated manuscript might use graphics for some of its images. The alternative text in + such a situation is just the character that the image represents.

    - + 
    <p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
+night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
+away, in a small house, on a hill, under a full moon...
    -

    The IDL attributes src and type each must reflect the respective - content attributes of the same name.

    +
    - +

    When an image is used to represent a character that cannot otherwise be represented in Unicode, + for example gaiji, itaiji, or new characters such as novel currency symbols, the alternative text + should be a more conventional way of writing the same thing, e.g. using the phonetic hiragana or + katakana to give the character's pronunciation.

    -

    Here's a way to embed a resource that requires a proprietary plugin, like Flash:

    - - 
    <embed src="catgame.swf">
    +

    In this example from 1997, a new-fangled currency symbol that looks like a curly E with two + bars in the middle instead of one is represented using an image. The alternative text gives the + character's pronunication.

    -

    If the user does not have the plugin (for example if the plugin vendor doesn't support the - user's platform), then the user will be unable to use the resource.

    + 
    <p>Only <img src="euro.png" alt="euro ">5.99!
    -

    To pass the plugin a parameter "quality" with the value "high", an attribute can be - specified:

    +
    - 
    <embed src="catgame.swf" quality="high">
    +

    An image should not be used if Unicode characters would serve an identical purpose. Only when + the text cannot be directly represented using Unicode, e.g. because of decorations or because the + character is not in the Unicode character set (as in the case of gaiji), would an image be + appropriate.

    -

    This would be equivalent to the following, when using an object element - instead:

    +

    If an author is tempted to use an image because their default system font does not + support a given character, then Web Fonts are a better solution than images.

    - 
    <object data="catgame.swf">
- <param name="quality" value="high">
-</object>
    - +
    4.8.5.1.6 A graphical representation of some of the surrounding text
    +

    In many cases, the image is actually just supplementary, and its presence merely reinforces the + surrounding text. In these cases, the alt attribute must be + present but its value must be the empty string.

    +

    In general, an image falls into this category if removing the image doesn't make the page any + less useful, but including the image makes it a lot easier for users of visual browsers to + understand the concept.

    -

    4.7.8 The object element

    +
    -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a usemap attribute: Interactive content.
    Listed, submittable, and reassociateable form-associated element.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Zero or more param elements, then, transparent.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    data — Address of the resource
    type — Type of embedded resource
    typemustmatch — Whether the type attribute and the Content-Type value need to match for the resource to be used
    name — Name of nested browsing context
    usemap — Name of image map to use
    form — Associates the control with a form element
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    -
    interface HTMLObjectElement : HTMLElement {
-           attribute DOMString data;
-           attribute DOMString type;
-           attribute boolean typeMustMatch;
-           attribute DOMString name;
-           attribute DOMString useMap;
-  readonly attribute HTMLFormElement? form;
-           attribute DOMString width;
-           attribute DOMString height;
-  readonly attribute Document? contentDocument;
-  readonly attribute WindowProxy? contentWindow;
+   
    A flowchart that repeats the previous paragraph in graphical form:
    
 
-  readonly attribute boolean willValidate;
-  readonly attribute ValidityState validity;
-  readonly attribute DOMString validationMessage;
-  boolean checkValidity();
-  boolean reportValidity();
-  void setCustomValidity(DOMString error);
+   
    <p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<p><img src="images/parsing-model-overview.png" alt=""></p>
    
 
-  legacycaller any (any... arguments);
+   
    In these cases, it would be wrong to include alternative text that consists of just a caption.
+   If a caption is to be included, then either the title attribute
+   can be used, or the figure and figcaption elements can be used. In the
+   latter case, the image would in fact be a phrase or paragraph with an alternative graphical
+   representation, and would thus require alternative text.
    
 
-  // also has obsolete members
-};
    - -

    Depending on the type of content instantiated by the - object element, the node also supports other - interfaces.

    - -
    + 
    <!-- Using the title="" attribute -->
+<p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<p><img src="images/parsing-model-overview.png" alt=""
+        title="Flowchart representation of the parsing model."></p>
    -

    The object element can represent an external resource, which, depending on the - type of the resource, will either be treated as an image, as a nested browsing - context, or as an external resource to be processed by a plugin.

    + 
    <!-- Using <figure> and <figcaption> -->
+<p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<figure>
+ <img src="images/parsing-model-overview.png" alt="The Network leads to
+ the Input Stream Preprocessor, which leads to the Tokenizer, which
+ leads to the Tree Construction stage. The Tree Construction stage
+ leads to two items. The first is Script Execution, which leads via
+ document.write() back to the Tokenizer. The second item from which
+ Tree Construction leads is the DOM. The DOM is related to the Script
+ Execution.">
+ <figcaption>Flowchart representation of the parsing model.</figcaption>
+</figure>
    -

    The data attribute, if present, specifies the - address of the resource. If present, the attribute must be a valid non-empty URL potentially - surrounded by spaces.

    + 
    <!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
+<p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<p><img src="images/parsing-model-overview.png"
+        alt="Flowchart representation of the parsing model."></p>
+<!-- Never put the image's caption in the alt="" attribute! -->
    -

    Authors who reference resources from other origins - that they do not trust are urged to use the typemustmatch attribute defined below. Without that - attribute, it is possible in certain cases for an attacker on the remote host to use the plugin - mechanism to run arbitrary scripts, even if the author has used features such as the Flash - "allowScriptAccess" parameter.

    +
    -

    The type attribute, if present, specifies the - type of the resource. If present, the attribute must be a valid MIME type.

    +
    -

    At least one of either the data attribute or the type attribute must be present.

    +

    A graph that repeats the previous paragraph in graphical form:

    -

    If the itemprop attribute is specified on an object - element, then the data attribute must also be specified.

    + 
    <p>According to a study covering several billion pages,
+about 62% of documents on the Web in 2007 triggered the Quirks
+rendering mode of Web browsers, about 30% triggered the Almost
+Standards mode, and about 9% triggered the Standards mode.</p>
+<p><img src="rendering-mode-pie-chart.png" alt=""></p>
    -

    The typemustmatch attribute is a - boolean attribute whose presence indicates that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the - aforementioned resource match.

    +
    -

    The typemustmatch attribute must not be - specified unless both the data attribute and the type attribute are present.

    -

    The name attribute, if present, must be a - valid browsing context name. The given value is used to name the nested - browsing context, if applicable.

    - +
    4.8.5.1.7 A purely decorative image that doesn't add any information
    -

    Whenever one of the following conditions occur:

    +

    If an image is decorative but isn't especially page-specific — for example an image that + forms part of a site-wide design scheme — the image should be specified in the site's CSS, + not in the markup of the document.

    -
    • the element is created, +

      However, a decorative image that isn't discussed by the surrounding text but still has some + relevance can be included in a page using the img element. Such images are + decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty + string.

      -
    • the element is popped off the stack of open elements of an HTML - parser or XML parser, +
      -
    • the element is not on the stack of open elements of an HTML parser - or XML parser, and it is either inserted into a document or removed from a document, +

      Examples where the image is purely decorative despite being relevant would include things like + a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an + image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows + an example of the latter case (only the first verse is included in this snippet):

      -
    • the element's Document changes whether it is fully active, + 
      <h1>The Lady of Shalott</h1>
+<p><img src="shalott.jpeg" alt=""></p>
+<p>On either side the river lie<br>
+Long fields of barley and of rye,<br>
+That clothe the wold and meet the sky;<br>
+And through the field the road run by<br>
+To many-tower'd Camelot;<br>
+And up and down the people go,<br>
+Gazing where the lilies blow<br>
+Round an island there below,<br>
+The island of Shalott.</p>
      -
    • one of the element's ancestor object elements changes to or from showing its - fallback content, + -
    • the element's classid attribute is set, changed, or - removed, -
    • the element's classid attribute is not present, and - its data attribute is set, changed, or removed, + -
    • neither the element's classid attribute nor its - data attribute are present, and its type attribute is set, changed, or removed, +

      When a picture has been sliced into smaller image files that are then displayed together to + form the complete picture again, one of the images must have its alt attribute set as per the relevant rules that would be appropriate + for the picture as a whole, and then all the remaining images must have their alt attribute set to the empty string.

      -
    • the element changes from being rendered to not being rendered, or vice versa, +
      -
    +

    In the following example, a picture representing a company logo for XYZ + Corp has been split into two pieces, the first containing the letters "XYZ" and the second + with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.

    -

    ...the user agent must queue a task to run the following steps to (re)determine - what the object element represents. This task - being queued or actively running must delay the load - event of the element's document.

    + 
    <h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>
    -
    1. + -

      If the user has indicated a preference that this object element's fallback - content be shown instead of the element's usual behavior, then jump to the step below - labeled fallback.

      +
      -

      For example, a user could ask for the element's fallback content to - be shown because that content uses a format that the user finds more accessible.

      +

      In the following example, a rating is shown as three filled stars and two empty stars. While + the alternative text could have been "★★★☆☆", the author has + instead decided to more helpfully give the rating in the form "3 out of 5". That is the + alternative text of the first image, and the rest have blank alternative text.

      -
    2. + 
      <p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
+  ><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
+  ><img src="0" alt=""></meter></p>
      -

      If the element has an ancestor media element, or has an ancestor - object element that is not showing its fallback content, or - if the element is not in a Document with a - browsing context, or if the element's Document is not fully - active, or if the element is still in the stack of open elements of an - HTML parser or XML parser, or if the element is not being - rendered, then jump to the step below labeled fallback.

      + -
    3. - -

      If the classid attribute is present, and has a - value that isn't the empty string, then: if the user agent can find a plugin - suitable according to the value of the classid - attribute, and either plugins aren't being sandboxed or that - plugin can be secured, then that - plugin should be used, and the value of the data attribute, if any, should be passed to the - plugin. If no suitable plugin can be found, or if the - plugin reports an error, jump to the step below labeled fallback.

      + - +

      Generally, image maps should be used instead of slicing an image + for links.

      -

    4. If the data attribute is present and its value is - not the empty string, then:

      +

      However, if an image is indeed sliced and any of the components of the sliced picture are the + sole contents of links, then one image per link must have alternative text in its alt attribute representing the purpose of the link.

      -

      1. If the type attribute is present and its value is - not a type that the user agent supports, and is not a type that the user agent can find a - plugin for, then the user agent may jump to the step below labeled fallback - without fetching the content to examine its real type.

      2. Resolve the URL specified by the data attribute, relative to the element.

      3. If that failed, fire a simple event named error at the element, then jump to the step below labeled - fallback.

      4. +
        -

        Fetch the resulting absolute URL, from the element's - browsing context scope origin if it has one.

        +

        In the following example, a picture representing the flying spaghetti monster emblem, with + each of the left noodly appendages and the right noodly appendages in different images, so that + the user can pick the left side or the right side in an adventure.

        - -

        Fetching the resource must delay the load event of the element's document - until the task that is queued by the networking task source once the resource has been - fetched (defined next) has been run.

        + 
        <h1>The Church</h1>
+<p>You come across a flying spaghetti monster. Which side of His
+Noodliness do you wish to reach out for?</p>
+<p><a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a
+  ><img src="fsm-middle.png" alt=""
+  ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>
        -

        For the purposes of the application cache networking model, this - fetch operation is not for a child browsing context (though it might - end up being used for one after all, as defined below).

        +
        -

      5. If the resource is not yet available (e.g. because the resource was not available in the - cache, so that loading the resource required making a request over the network), then jump to - the step below labeled fallback. The task that is - queued by the networking task source once the - resource is available must restart this algorithm from this step. Resources can load - incrementally; user agents may opt to consider a resource "available" whenever enough data has - been obtained to begin processing the resource.

      6. If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire - a simple event named error at the element, then jump to - the step below labeled fallback.

      7. -

        Determine the resource type, as follows:

        +
        4.8.5.1.10 A key part of the content
        +

        In some cases, the image is a critical part of the content. This could be the case, for + instance, on a page that is part of a photo gallery. The image is the whole point of the + page containing it.

        -
        1. +

          How to provide alternative text for an image that is a key part of the content depends on the + image's provenance.

          -

          Let the resource type be unknown.

          +
          The general case
          -
        2. +

          When it is possible for detailed alternative text to be provided, for example if the image is + part of a series of screenshots in a magazine review, or part of a comic strip, or is a + photograph in a blog entry about that photograph, text that can serve as a substitute for the + image must be given as the contents of the alt attribute.

          -

          If the object element has a type - attribute and a typemustmatch attribute, and - the resource has associated Content-Type metadata, and the - type specified in the resource's Content-Type metadata is - an ASCII case-insensitive match for the value of the element's type attribute, then let resource type - be that type and jump to the step below labeled handler.

          +
          - +

          A screenshot in a gallery of screenshots for a new OS, with some alternative text:

          -
        3. + 
          <figure>
+ <img src="KDE%20Light%20desktop.png"
+      alt="The desktop is blue, with icons along the left hand side in
+           two columns, reading System, Home, K-Mail, etc. A window is
+           open showing that menus wrap to a second line if they
+           cannot fit in the window. The window has a list of icons
+           along the top, with an address bar below it, a list of
+           icons for tabs along the left edge, a status bar on the
+           bottom, and two panes in the middle. The desktop has a bar
+           at the bottom of the screen with a few buttons, a pager, a
+           list of open applications, and a clock.">
+ <figcaption>Screenshot of a KDE desktop.</figcaption>
+</figure>
          -

          If the object element has a typemustmatch attribute, jump to the step below - labeled handler.

          + -
        4. +
          - +

          A graph in a financial report:

          -

          If the user agent is configured to strictly obey Content-Type headers for this resource, - and the resource has associated Content-Type metadata, - then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below - labeled handler.

          + 
          <img src="sales.gif"
+     title="Sales graph"
+     alt="From 1998 to 2005, sales increased by the following percentages
+     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">
          -

          This can introduce a vulnerability, wherein a site is trying to embed a - resource that uses a particular plugin, but the remote site overrides that and instead - furnishes the user agent with a resource that triggers a different plugin with different - security characteristics.

          +

          Note that "sales graph" would be inadequate alternative text for a sales graph. Text that + would be a good caption is not generally suitable as replacement text.

          -
        5. + -

          If there is a type attribute present on the - object element, and that attribute's value is not a type that the user agent - supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled - handler.

          +
          Images that defy a complete description
          -
        6. +

          In certain cases, the nature of the image might be such that providing thorough alternative + text is impractical. For example, the image could be indistinct, or could be a complex fractal, + or could be a detailed topographical map.

          -

          Run the appropriate set of steps from the following - list:

          +

          In these cases, the alt attribute must contain some + suitable alternative text, but it may be somewhat brief.

          -
          If the resource has associated Content-Type - metadata
          +
          -
          1. +

            Sometimes there simply is no text that can do justice to an image. For example, there is + little that can be said to usefully describe a Rorschach inkblot test. However, a description, + even if brief, is still better than nothing:

            -

            Let binary be false.

            + 
            <figure>
+ <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
+ symmetry with indistinct edges, with a small gap in the center, two
+ larger gaps offset slightly from the center, with two similar gaps
+ under them. The outline is wider in the top half than the bottom
+ half, with the sides extending upwards higher than the center, and
+ the center extending below the sides.">
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
+</figure>
            -
          2. +

            Note that the following would be a very bad use of alternative text:

            -

            If the type specified in the resource's Content-Type - metadata is "text/plain", and the result of applying the rules for distinguishing if a resource is - text or binary to the resource is that the resource is not - text/plain, then set binary to true.

            + 
            <!-- This example is wrong. Do not copy it. -->
+<figure>
+ <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+ of the first of the ten cards in the Rorschach inkblot test.">
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
+</figure>
            -
          3. +

            Including the caption in the alternative text like this isn't useful because it effectively + duplicates the caption for users who don't have images, taunting them twice yet not helping + them any more than if they had only read or heard the caption once.

            -

            If the type specified in the resource's Content-Type - metadata is "application/octet-stream", then set binary to true.

            +
          -
        7. +
          -

          If binary is false, then let the resource - type be the type specified in the resource's - Content-Type metadata, and jump to the step below labeled handler.

          +

          Another example of an image that defies full description is a fractal, which, by definition, + is infinite in detail.

          -
        8. +

          The following example shows one possible way of providing alternative text for the full view + of an image of the Mandelbrot set.

          -

          If there is a type attribute present on the - object element, and its value is not application/octet-stream, - then run the following steps:

          + 
          <img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
+its cusp on the real axis in the positive direction, with a smaller
+bulb aligned along the same center line, touching it in the negative
+direction, and with these two shapes being surrounded by smaller bulbs
+of various sizes.">
          -
          1. + -

            If the attribute's value is a type that a plugin supports, or the - attribute's value is a type that starts with "image/" that is - not also an XML MIME type, then let the resource type be the - type specified in that type attribute.

            +
            -
          2. +

            Similarly, a photograph of a person's face, for example in a biography, can be considered + quite relevant and key to the content, but it can be hard to fully substitute text for

            -

            Jump to the step below labeled handler.

            + 
            <section class="bio">
+ <h1>A Biography of Isaac Asimov</h1>
+ <p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
+ <p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
+ Later in life, he wore long white sideburns.">
+ <p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
+ <p>...
+</section>
            -
          +

          In such cases it is unnecessary (and indeed discouraged) to include a reference to the + presence of the image itself in the alternative text, since such text would be redundant with + the browser itself reporting the presence of the image. For example, if the alternative text + was "A photo of Isaac Asimov", then a conforming user agent might read that out as "(Image) A + photo of Isaac Asimov" rather than the more useful "(Image) Isaac Asimov had dark hair, a tall + forehead, and wore glasses...".

          -
        + -
        Otherwise, if the resource does not have associated - Content-Type metadata
        +
        Images whose contents are not known
        -
        1. +

          In some unfortunate cases, there might be no alternative text available at all, either + because the image is obtained in some automated fashion without any associated alternative text + (e.g. a Webcam), or because the page is being generated by a script using user-provided images + where the user did not provide suitable or usable alternative text (e.g. photograph sharing + sites), or because the author does not himself know what the images represent (e.g. a blind + photographer sharing an image on his blog).

          -

          If there is a type attribute present on the - object element, then let the tentative type be the type - specified in that type attribute.

          +

          In such cases, the alt attribute may be omitted, but one of + the following conditions must be met as well:

          -

          Otherwise, let tentative type be the sniffed type of the resource.

          +

          • The img element is in a + figure element that contains a figcaption element that contains + content other than inter-element whitespace, and, ignoring the + figcaption element and its descendants, the figure element has no + flow content descendants other than inter-element whitespace and the + img element.

          • -
          • +

            The title attribute is present and has a non-empty + value.

            -

            If tentative type is not - application/octet-stream, then let resource type be - tentative type and jump to the step below labeled - handler.

            + +

            Relying on the title attribute is currently + discouraged as many user agents do not expose the attribute in an accessible manner as + required by this specification (e.g. requiring a pointing device such as a mouse to cause a + tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone + with a modern phone or tablet).

            -
        + - +

        Such cases are to be kept to an absolute minimum. If there is even the slightest + possibility of the author having the ability to provide real alternative text, then it would not + be acceptable to omit the alt attribute.

        -
      8. +
        - +

        A photo on a photo-sharing site, if the site received the image with no metadata other than + the caption, could be marked up as follows:

        -

        If applying the URL parser algorithm to the URL of the - specified resource (after any redirects) results in a parsed URL whose path component matches a pattern that a plugin - supports, then let resource type be the type that that plugin can - handle.

        + 
        <figure>
+ <img src="1100670787_6a7c664aef.jpg">
+ <figcaption>Bubbles traveled everywhere with us.</figcaption>
+</figure>
        -

        For example, a plugin might say that it can handle resources with path components that end with the four character string - ".swf".

        +

        It would be better, however, if a detailed description of the important parts of the image + obtained from the user and included on the page.

        - - +
        -
      +
      -

      It is possible for this step to finish, or for one of the substeps above to - jump straight to the next step, with resource type still being unknown. In - both cases, the next step will trigger fallback.

      +

      A blind user's blog in which a photo taken by the user is shown. Initially, the user might + not have any idea what the photo he took shows:

      -

    5. Handler: Handle the content as given by the first of the following cases that - matches:

      + 
      <article>
+ <h1>I took a photo</h1>
+ <p>I went out today and took a photo!</p>
+ <figure>
+  <img src="photo2.jpeg">
+  <figcaption>A photograph taken blindly from my front porch.</figcaption>
+ </figure>
+</article>
      -
      If the resource type is not a type that the user agent supports, but - it is a type that a plugin supports
      +

      Eventually though, the user might obtain a description of the image from his friends and + could then include alternative text:

      -

      If plugins are being sandboxed and the plugin that - supports resource type cannot be secured, jump to the step below labeled fallback.

      + 
      <article>
+ <h1>I took a photo</h1>
+ <p>I went out today and took a photo!</p>
+ <figure>
+  <img src="photo2.jpeg" alt="The photograph shows my squirrel
+  feeder hanging from the edge of my roof. It is half full, but there
+  are no squirrels around. In the background, out-of-focus trees fill the
+  shot. The feeder is made of wood with a metal grate, and it contains
+  peanuts. The edge of the roof is wooden too, and is painted white
+  with light blue streaks.">
+  <figcaption>A photograph taken blindly from my front porch.</figcaption>
+ </figure>
+</article>
      -

      Otherwise, the user agent should use the plugin that supports - resource type and pass the content of the resource to that - plugin. If the plugin reports an error, then jump to the step - below labeled fallback.

      + -
      If the resource type is an XML MIME type, or if the resource type - does not start with "image/"
      +
      -

      The object element must be associated with a newly created nested - browsing context, if it does not already have one.

      +

      Sometimes the entire point of the image is that a textual description is not available, and + the user is to provide the description. For instance, the point of a CAPTCHA image is to see if + the user can literally read the graphic. Here is one way to mark up a CAPTCHA (note the title attribute):

      -

      If the URL of the given resource is not about:blank, the - element's nested browsing context must then be navigated to that resource, with - replacement enabled, and with the object element's document's - browsing context as the source browsing context. (The data attribute of the object element doesn't - get updated if the browsing context gets further navigated to other locations.)

      + 
      <p><label>What does this image say?
+<img src="captcha.cgi?id=8934" title="CAPTCHA">
+<input type=text name=captcha></label>
+(If you cannot see the image, you can use an <a
+href="?audio">audio</a> test instead.)</p>
      -

      If the URL of the given resource is about:blank, then, - instead, the user agent must queue a task to fire a simple event - named load at the object element. No load event is fired at the - about:blank document itself.

      +

      Another example would be software that displays images and asks for alternative text + precisely for the purpose of then writing a page with correct alternative text. Such a page + could have a table of images, like this:

      -

      The object element represents the nested browsing - context.

      + 
      <table>
+ <thead>
+  <tr> <th> Image <th> Description
+ <tbody>
+  <tr>
+   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
+   <td> <input name="alt2421">
+  <tr>
+   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
+   <td> <input name="alt2422">
+</table>
      -

      If the name attribute is present, the - browsing context name must be set to the value of this attribute; otherwise, - the browsing context name must be set to the empty string.

      +

      Notice that even in this example, as much useful information as possible is still included + in the title attribute.

      -

      In certain situations, e.g. if the resource was fetched from an application cache but it is an HTML file - with a manifest attribute that points to a different - application cache manifest, the navigation of the browsing context will be restarted so - as to load the resource afresh from the network or a different application - cache. Even if the resource is then found to have a different type, it is still used - as part of a nested browsing context: only the navigate algorithm - is restarted, not this object algorithm.

      +
      - +

      Since some users cannot use images at all (e.g. because they have a very slow + connection, or because they are using a text-only browser, or because they are listening to the + page being read out by a hands-free automobile voice Web browser, or simply because they are + blind), the alt attribute is only allowed to be omitted rather + than being provided with replacement text when no alternative text is available and none can be + made available, as in the above examples. Lack of effort from the part of the author is not an + acceptable reason for omitting the alt attribute.

      -
      If the resource type starts with "image/", and support - for images has not been disabled
      +
      -

      Apply the image sniffing rules to - determine the type of the image.

      -

      The object element represents the specified image. The image is - not a nested browsing context.

      -

      If the image cannot be rendered, e.g. because it is malformed or in an unsupported - format, jump to the step below labeled fallback.

      +
      4.8.5.1.11 An image not intended for the user
      -
      Otherwise
      +

      Generally authors should avoid using img elements for purposes other than showing + images.

      -

      The given resource type is not supported. Jump to the step below - labeled fallback.

      +

      If an img element is being used for purposes other than showing an image, e.g. as + part of a service to count page views, then the alt attribute + must be the empty string.

      -

      If the previous step ended with the resource type being - unknown, this is the case that is triggered.

      +

      In such cases, the width and height attributes should both be set to zero.

      - -

    6. The element's contents are not part of what the object element - represents.

      +
      4.8.5.1.12 An image in an e-mail or private document intended for a specific person who is known to be able to view images
      -
    7. +

      This section does not apply to documents that are publicly accessible, or whose target + audience is not necessarily personally known to the author, such as documents on a Web site, + e-mails sent to public mailing lists, or software documentation.

      -

      Abort these steps. Once the resource is completely loaded, queue a task to - fire a simple event named load at the - element.

      +

      When an image is included in a private communication (such as an HTML e-mail) aimed at a + specific person who is known to be able to view images, the alt + attribute may be omitted. However, even in such cases authors are strongly urged to include + alternative text (as appropriate according to the kind of image involved, as described in the + above entries), so that the e-mail is still usable should the user use a mail client that does not + support images, or should the document be forwarded on to other users whose abilities might not + include easily seeing images.

      -
    -

  • If the data attribute is absent but the type attribute is present, and the user agent can find a - plugin suitable according to the value of the type attribute, and either plugins aren't being sandboxed or the plugin can be - secured, then that plugin should be used. If these conditions cannot be met, or if the - plugin reports an error, jump to the step below labeled fallback. Otherwise - abort these steps; once the plugin is completely loaded, queue a task to fire - a simple event named load at the element.

  • Fallback: The object element represents the element's - children, ignoring any leading param element children. This is the element's - fallback content. If the element has an instantiated plugin, then - unload it. -

    When the algorithm above instantiates a plugin, the user agent - should pass to the plugin used the names and values of all the attributes on the - element, in the order they were added to the element, with the attributes added by the parser - being ordered in source order, followed by a parameter named "PARAM" whose value is null, followed - by all the names and values of parameters given by - param elements that are children of the object element, in tree - order. If the plugin supports a scriptable interface, the - HTMLObjectElement object representing the element should expose that interface. The - object element represents the plugin. The - plugin is not a nested browsing context.

    -

    Plugins are considered sandboxed for the purpose of an - object element if the sandboxed plugins browsing context flag is set on - the object element's Document's active sandboxing flag - set.

    + -

    Due to the algorithm above, the contents of object elements act as fallback - content, used only when referenced resources can't be shown (e.g. because it returned a 404 - error). This allows multiple object elements to be nested inside each other, - targeting multiple user agents with different capabilities, with the user agent picking the first - one it supports.

    +
    4.8.5.1.13 Guidance for markup generators
    -

    When an object element represents a nested browsing context: if the - object element's nested browsing context's active document - is not ready for post-load tasks, and when anything is delaying the load event of the object element's browsing - context's active document, and when the object element's - browsing context is in the delaying load - events mode, the object must delay the load event of its - document.

    +

    Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain + alternative text from their users. However, it is recognised that in many cases, this will not be + possible.

    -

    The task source for the tasks mentioned in this - section is the DOM manipulation task source.

    +

    For images that are the sole contents of links, markup generators should examine the link + target to determine the title of the target, or the URL of the target, and use information + obtained in this manner as the alternative text.

    -

    Whenever the name attribute is set, if the - object element has a nested browsing context, its name must be changed to the new value. If the attribute is removed, if the - object element has a browsing context, the browsing context - name must be set to the empty string.

    +

    For images that have captions, markup generators should use the figure and + figcaption elements, or the title attribute, to + provide the image's caption.

    - +

    As a last resort, implementors should either set the alt + attribute to the empty string, under the assumption that the image is a purely decorative image + that doesn't add any information but is still specific to the surrounding content, or omit the + alt attribute altogether, under the assumption that the image is + a key part of the content.

    -

    The usemap attribute, if present while the - object element represents an image, can indicate that the object has an associated - image map. The attribute must be ignored if the - object element doesn't represent an image.

    +

    Markup generators may specify a generator-unable-to-provide-required-alt + attribute on img elements for which they have been unable to obtain alternative text + and for which they have therefore omitted the alt attribute. The + value of this attribute must be the empty string. Documents containing such attributes are not + conforming, but conformance checkers will silently + ignore this error.

    -

    The form attribute is used to explicitly associate the - object element with its form owner.

    +

    This is intended to avoid markup generators from being pressured into replacing + the error of omitting the alt attribute with the even more + egregious error of providing phony alternative text, because state-of-the-art automated + conformance checkers cannot distinguish phony alternative text from correct alternative text.

    - +

    Markup generators should generally avoid using the image's own file name as the alternative + text. Similarly, markup generators should avoid generating alternative text from any content that + will be equally available to presentation user agents (e.g. Web browsers).

    -

    Constraint validation: object elements are always barred - from constraint validation.

    +

    This is because once a page is generated, it will typically not be updated, + whereas the browsers that later read the page can be updated by the user, therefore the browser is + likely to have more up-to-date and finely-tuned heuristics than the markup generator did when + generating the page.

    -

    The object element supports dimension attributes.

    - -

    The IDL attributes data, type and name each must reflect the respective - content attributes of the same name. The typeMustMatch IDL attribute must - reflect the typemustmatch content - attribute. The useMap IDL attribute must - reflect the usemap content attribute.

    +
    4.8.5.1.14 Guidance for conformance checkers
    -

    The contentDocument IDL attribute - must return the Document object of the active document of the - object element's nested browsing context, if any and if its - effective script origin is the same origin as the effective script - origin specified by the incumbent settings object, or null otherwise.

    +

    A conformance checker must report the lack of an alt + attribute as an error unless one of the conditions listed below applies:

    -

    The contentWindow IDL attribute must - return the WindowProxy object of the object element's nested - browsing context, if it has one; otherwise, it must return null.

    +

    • The img element is in a figure element that satisfies the conditions described above.

    • The img element has a title attribute with a + value that is not the empty string (also as described + above).

    • The conformance checker has been configured to assume that the document is an e-mail or + document intended for a specific person who is known to be able to view images.

    • The img element has a (non-conforming) generator-unable-to-provide-required-alt + attribute whose value is the empty string. A conformance checker that is not reporting the lack + of an alt attribute as an error must also not report the + presence of the empty generator-unable-to-provide-required-alt + attribute as an error. (This case does not represent a case where the document is conforming, + only that the generator could not determine appropriate alternative text — validators are + not required to show an error in this case, because such an error might encourage markup + generators to include bogus alternative text purely in an attempt to silence validators. + Naturally, conformance checkers may report the lack of an alt attribute as an error even in the presence of the generator-unable-to-provide-required-alt + attribute; for example, there could be a user option to report all conformance errors + even those that might be the more or less inevitable result of using a markup + generator.)

    -

    The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the - constraint validation API. The form IDL attribute - is part of the element's forms API.

    + -

    All object elements have a legacy caller - operation. If the object element has an instantiated plugin that - supports a scriptable interface that defines a legacy caller operation, then that must be the - behavior of the object's legacy caller operation. Otherwise, the object's legacy caller operation - must be to throw a NotSupportedError exception.

    - -
    -

    In the following example, a Java applet is embedded in a page using the object - element. (Generally speaking, it is better to avoid using applets like these and instead use - native JavaScript and HTML to provide the functionality, since that way the application will work - on all Web browsers without requiring a third-party plugin. Many devices, especially embedded - devices, do not support third-party technologies like Java.)

    - 
    <figure>
- <object type="application/x-java-applet">
-  <param name="code" value="MyJavaClass">
-  <p>You do not have Java available, or it is disabled.</p>
- </object>
- <figcaption>My Java Clock</figcaption>
-</figure>
    +

    4.8.6 The iframe element

    -
    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Text that conforms to the requirements given in the prose.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    srcdoc — A document to render in the iframe
    name — Name of nested browsing context
    sandbox — Security rules for nested content
    seamless — Whether to apply the document's styles to the nested content
    allowfullscreen — Whether to allow the iframe's contents to use requestFullscreen()
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    +
    interface HTMLIFrameElement : HTMLElement {
+           attribute DOMString src;
+           attribute DOMString srcdoc;
+           attribute DOMString name;
+  [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
+           attribute boolean seamless;
+           attribute boolean allowFullscreen;
+           attribute DOMString width;
+           attribute DOMString height;
+  readonly attribute Document? contentDocument;
+  readonly attribute WindowProxy? contentWindow;
 
-  
    
+  // also has obsolete members
+};
    +
    -

    In this example, an HTML page is embedded in another using the object - element.

    + - 
    <figure>
- <object data="clock.html"></object>
- <figcaption>My HTML Clock</figcaption>
-</figure>
    +

    The iframe element represents a nested browsing + context.

    - -
    + -

    The following example shows how a plugin can be used in HTML (in this case the Flash plugin, - to show a video file). Fallback is provided for users who do not have Flash enabled, in this case - using the video element to show the video for those using user agents that support - video, and finally providing a link to the video for those who have neither Flash - nor a video-capable browser.

    +

    The src attribute gives the address of a page + that the nested browsing context is to contain. The attribute, if present, must be a + valid non-empty URL potentially surrounded by spaces. If the itemprop is specified on an iframe element, then the + src attribute must also be specified.

    - 
    <p>Look at my video:
- <object type="application/x-shockwave-flash">
-  <param name=movie value="http://video.example.com/library/watch.swf">
-  <param name=allowfullscreen value=true>
-  <param name=flashvars value="http://video.example.com/vids/315981">
-  <video controls src="http://video.example.com/vids/315981">
-   <a href="http://video.example.com/vids/315981">View video</a>.
-  </video>
- </object>
-</p>
    +

    The srcdoc attribute gives the content of + the page that the nested browsing context is to contain. The value of the attribute + is the source of an iframe srcdoc + document.

    -
    +

    For iframe elements in HTML documents, the srcdoc attribute, if present, must have a value using the + HTML syntax that consists of the following syntactic components, in the given order:

    +
    1. Any number of comments and space characters.
    2. Optionally, a DOCTYPE. +
    3. Any number of comments and space characters.
    4. The root element, in the form of an html element.
    5. Any number of comments and space characters.
    -

    4.7.9 The param element

    +

    For iframe elements in XML documents, the srcdoc attribute, if present, must have a value that matches the + production labeled document in the XML specification. [XML]

    -
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of an object element, before any flow content.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    name — Name of parameter
    value — Value of parameter
    DOM interface:
    -
    interface HTMLParamElement : HTMLElement {
-           attribute DOMString name;
-           attribute DOMString value;
+  
    
 
-  // also has obsolete members
-};
    -
    +

    Here a blog uses the srcdoc attribute in conjunction + with the sandbox and seamless attributes described below to provide users of user + agents that support this feature with an extra layer of protection from script injection in the + blog post comments:

    -

    The param element defines parameters for plugins invoked by object - elements. It does not represent anything on its own.

    + 
    <article>
+ <h1>I got my own magazine!</h1>
+ <p>After much effort, I've finally found a publisher, and so now I
+ have my own magazine! Isn't that awesome?! The first issue will come
+ out in September, and we have articles about getting food, and about
+ getting in boxes, it's going to be great!</p>
+ <footer>
+  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
+ </footer>
+ <article>
+  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
+  <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
+ </article>
+ <article>
+  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
+  <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
+ </article>
+ <article>
+  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
+  <iframe seamless sandbox srcdoc="<p>hey that's earl's table.
+<p>you should get earl&amp;amp;me on the next cover."></iframe>
+ </article>
    -

    The name attribute gives the name of the - parameter.

    +

    Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw + ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be + doubly escaped — once so that the ampersand is preserved when originally parsing + the srcdoc attribute, and once more to prevent the + ampersand from being misinterpreted when parsing the sandboxed content.

    -

    The value attribute gives the value of the - parameter.

    +

    Furthermore, notice that since the DOCTYPE is optional in + iframe srcdoc documents, and the html, + head, and body elements have optional + start and end tags, and the title element is also optional in iframe srcdoc + documents, the markup in a srcdoc attribute can be + relatively succint despite representing an entire document, since only the contents of the + body element need appear literally in the syntax. The other elements are still + present, but only by implication.

    -

    Both attributes must be present. They may have any value.

    + - +

    In the HTML syntax, authors need only remember to use U+0022 + QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0022 + QUOTATION MARK (") and U+0026 AMPERSAND (&) characters, and to specify the sandbox attribute, to ensure safe embedding of content.

    -

    If both attributes are present, and if the parent element of the param is an - object element, then the element defines a parameter with the given name-value pair.

    +

    Due to restrictions of the XHTML syntax, in XML the U+003C LESS-THAN + SIGN character (<) needs to be escaped as well. In order to prevent attribute-value normalization, some of XML's + whitespace characters — specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED + (LF), and U+000D CARRIAGE RETURN (CR) — also need to be escaped. [XML]

    -

    If either the name or value of a parameter defined - by a param element that is the child of an object element that - represents an instantiated plugin changes, and if that - plugin is communicating with the user agent using an API that features the ability to - update the plugin when the name or value of a parameter so changes, then the user agent must - appropriately exercise that ability to notify the plugin of the change.

    +

    If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority. This allows authors to provide + a fallback URL for legacy user agents that do not support the srcdoc attribute.

    -

    The IDL attributes name and value must both reflect the respective - content attributes of the same name.

    -
    - -

    The following example shows how the param element can be used to pass a parameter - to a plugin, in this case the O3D plugin.

    +
    - 
    <!DOCTYPE HTML>
-<html lang="en">
-  <head>
-   <title>O3D Utah Teapot</title>
-  </head>
-  <body>
-   <p>
-    <object type="application/vnd.o3d.auto">
-     <param name="o3d_features" value="FloatingPointTextures">
-     <img src="o3d-teapot.png"
-          title="3D Utah Teapot illustration rendered using O3D."
-          alt="When O3D renders the Utah Teapot, it appears as a squat
-          teapot with a shiny metallic finish on which the
-          surroundings are reflected, with a faint shadow caused by
-          the lighting.">
-     <p>To see the teapot actually rendered by O3D on your
-     computer, please download and install the <a
-     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
-    </object>
-    <script src="o3d-teapot.js"></script>
-   </p>
-  </body>
-</html>
    +

    When an iframe element is inserted + into a document, the user agent must create a nested browsing context, and + then process the iframe attributes for the "first time".

    -
    +

    When an iframe element is removed + from a document, the user agent must discard the nested browsing context.

    +

    This happens without any unload events firing + (the nested browsing context and its Document are discarded, not data-x="unload a + document">unloaded).

    + -

    4.7.10 The video element

    +

    Whenever an iframe element with a nested browsing context has its + srcdoc attribute set, changed, or removed, the user agent + must process the iframe attributes.

    -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a controls attribute: Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    If the element has a src attribute: - zero or more track elements, then - transparent, but with no media element descendants.
    If the element does not have a src attribute: zero or more source elements, then - zero or more track elements, then - transparent, but with no media element descendants.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    crossorigin — How the element handles crossorigin requests
    poster — Poster frame to show prior to video playback
    preload — Hints how much buffering the media resource will likely need
    autoplay — Hint that the media resource can be started automatically when the page is loaded
    mediagroup — Groups media elements together with an implicit MediaController
    loop — Whether to loop the media resource
    muted — Whether to mute the media resource by default
    controls — Show user agent controls
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    - 
    interface HTMLVideoElement : HTMLMediaElement {
-           attribute unsigned long width;
-           attribute unsigned long height;
-  readonly attribute unsigned long videoWidth;
-  readonly attribute unsigned long videoHeight;
-           attribute DOMString poster;
-};
    -
    +

    Similarly, whenever an iframe element with a nested browsing context + but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must + process the iframe attributes.

    -

    A video element is used for playing videos or movies, and audio files with - captions.

    +

    When the user agent is to process the iframe attributes, it must run + the first appropriate steps from the following list:

    -

    Content may be provided inside the video element. User agents - should not show this content to the user; it is intended for older Web browsers which do - not support video, so that legacy video plugins can be tried, or to show text to the - users of these older browsers informing them of how to access the video contents.

    +
    If the srcdoc attribute is specified

    Navigate the element's child browsing context + to a resource whose Content-Type is text/html, whose URL + is about:srcdoc, and whose data consists of the value of the attribute. The + resulting Document must be considered an iframe srcdoc document.

    Otherwise, if the element has no src attribute + specified, and the user agent is processing the iframe's attributes for the "first + time"
    -

    In particular, this content is not intended to address accessibility concerns. To - make video content accessible to the partially sighted, the blind, the hard-of-hearing, the deaf, - and those with other physical or cognitive disabilities, a variety of features are available. - Captions can be provided, either embedded in the video stream or as external files using the - track element. Sign-language tracks can be provided, again either embedded in the - video stream or by synchronizing multiple video elements using the mediagroup attribute or a MediaController - object. Audio descriptions can be provided, either as a separate track embedded in the video - stream, or a separate audio track in an audio element slaved to the same controller as the video element(s), or in text - form using a WebVTT file referenced using the track element and - synthesized into speech by the user agent. WebVTT can also be used to provide chapter titles. For - users who would rather not use a media element at all, transcripts or other textual alternatives - can be provided by simply linking to them in the prose near the video element. [WEBVTT]

    +

    Queue a task to run the iframe load event steps.

    -

    The video element is a media element whose media data is - ostensibly video data, possibly with associated audio data.

    +

    The task source for this task is the + DOM manipulation task source.

    -

    The src, preload, - autoplay, mediagroup, loop, muted, and controls - attributes are the attributes common to all media - elements.

    +
    Otherwise
    -

    The poster attribute gives the address of an - image file that the user agent can show while no video data is available. The attribute, if - present, must contain a valid non-empty URL potentially surrounded by spaces.

    +
    1. - +

      If the value of the src attribute is missing, or its + value is the empty string, let url be the string + "about:blank".

      + -

      If the specified resource is to be used, then, when the element is created or when the poster attribute is set, changed, or removed, the user agent must - run the following steps to determine the element's poster frame (regardless of the - value of the element's show poster flag):

      +

      Otherwise, resolve the value of the src attribute, relative to the iframe element.

      -

      1. If there is an existing instance of this algorithm running for this video - element, abort that instance of this algorithm without changing the poster - frame.

      2. If the poster attribute's value is the empty string - or if the attribute is absent, then there is no poster frame; abort these - steps.

      3. Resolve the poster attribute's value relative to the element. If this fails, - then there is no poster frame; abort these steps.

      4. Fetch the resulting absolute URL, from the element's - Document's origin. This must delay the load event of the - element's document.

      5. If an image is thus obtained, the poster frame is that image. Otherwise, - there is no poster frame.

      +

      If that is not successful, then let url be the string + "about:blank". Otherwise, let url be the resulting + absolute URL.

      - +
    2. -

      The image given by the poster attribute, - the poster frame, is intended to be a representative frame of the - video (typically one of the first non-blank frames) that gives the user an idea of what the video - is like.

      +

      If there exists an ancestor browsing context whose active + document's address, ignoring fragment + identifiers, is equal to url, then abort these steps.

      + + + - +
    3. -
      +

      Navigate the element's child browsing context + to url.

      -

      A video element represents what is given for the first matching condition in the - list below:

      +
    -
    When no video data is available (the element's readyState attribute is either HAVE_NOTHING, or HAVE_METADATA but no video data has yet been obtained at - all, or the element's readyState attribute is any - subsequent value but the media resource does not have a video channel)
    The video element represents its poster frame, if any, - or else transparent black with no intrinsic dimensions.
    When the video element is paused, the current playback position is the first frame of video, - and the element's show poster flag is set
    The video element represents its poster frame, if any, - or else the first frame of the video.
    When the video element is paused, and the - frame of video corresponding to the current playback - position is not available (e.g. because the video is seeking or buffering)
    When the video element is neither potentially playing nor paused (e.g. when seeking or stalled)
    The video element represents the last frame of the video to have - been rendered.
    When the video element is paused
    The video element represents the frame of video corresponding to - the current playback position.
    Otherwise (the video element has a video channel and is potentially - playing)
    The video element represents the frame of video at the continuously - increasing "current" position. When the - current playback position changes such that the last frame rendered is no longer the - frame corresponding to the current playback position in the video, the new frame - must be rendered.
    +
    -

    Frames of video must be obtained from the video track that was selected when the event loop last reached - step 1.

    +

    Any navigation required of the user agent in the process + the iframe attributes algorithm must be completed as an explicit + self-navigation override and with the iframe element's document's + browsing context as the source browsing context.

    -

    Which frame in a video stream corresponds to a particular playback position is - defined by the video stream's format.

    +

    Furthermore, if the active document of the element's child browsing + context before such a navigation was not completely + loaded at the time of the new navigation, then the navigation must be completed with replacement enabled.

    -

    The video element also represents any text track cues whose text track cue active flag is set and whose - text track is in the showing mode, and any - audio from the media resource, at the current playback position.

    +

    Similarly, if the child browsing context's session history contained + only one Document when the process the iframe attributes + algorithm was invoked, and that was the about:blank Document created + when the child browsing context was created, then any navigation required of the user agent in that algorithm must be completed + with replacement enabled.

    -

    Any audio associated with the media resource must, if played, be played - synchronised with the current playback position, at the element's effective - media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step - 1.

    +

    When a Document in an iframe is marked as completely + loaded, the user agent must synchronously run the iframe load event steps.

    -

    In addition to the above, the user agent may provide messages to the user (such as "buffering", - "no video loaded", "error", or more detailed information) by overlaying text or icons on the video - or other areas of the element's playback area, or in another appropriate manner.

    +

    A load event is also fired at the + iframe element when it is created if no other data is loaded in it.

    -

    User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video - data itself.

    +

    Each Document has an iframe load in progress flag and a mute + iframe load flag. When a Document is created, these flags must be unset for + that Document.

    -

    When a video element's media resource has a video channel, the - element provides a paint source whose width is the media resource's - intrinsic width, whose height is the - media resource's intrinsic - height, and whose appearance is the frame of video corresponding to the current playback position, if that is available, or else - (e.g. when the video is seeking or buffering) its previous appearance, if any, or else (e.g. - because the video is still loading the first frame) blackness.

    +

    The iframe load event steps are as follows:

    -
    +

    1. Let child document be the active document of the + iframe element's nested browsing context.

    2. If child document has its mute iframe load flag set, + abort these steps.

    3. Set child document's iframe load in progress + flag.

    4. Fire a simple event named load at the + iframe element.

    5. Unset child document's iframe load in progress + flag.

    - +

    This, in conjunction with scripting, can be used to probe the URL space of the + local network's HTTP servers. User agents may implement cross-origin + access control policies that are stricter than those described above to mitigate this attack, but + unfortunately such policies are typically not compatible with existing Web content.

    -
    video . videoWidth
    video . videoHeight
    +

    When the iframe's browsing context's active document is + not ready for post-load tasks, and when anything in the iframe is delaying the load event of the iframe's + browsing context's active document, and when the iframe's + browsing context is in the delaying load events + mode, the iframe must delay the load event of its document.

    -

    These attributes return the intrinsic dimensions of the video, - or zero if the dimensions are not known.

    +

    If, during the handling of the load event, the + browsing context in the iframe is again navigated, that will further delay the load event.

    -
    + -

    The intrinsic width and intrinsic height of the media resource - are the dimensions of the resource in CSS pixels after taking into account the resource's - dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used - by the resource. If an anamorphic format does not define how to apply the aspect ratio to the - video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the - ratio by increasing one dimension and leaving the other unchanged.

    +

    If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be + resolved, the browsing context will remain at the initial + about:blank page.

    -

    The videoWidth IDL attribute must return - the intrinsic width of the video in CSS pixels. - The videoHeight IDL attribute must return - the intrinsic height of the video in CSS - pixels. If the element's readyState attribute is HAVE_NOTHING, then the attributes must return 0.

    +

    If the user navigates away from this page, the + iframe's corresponding WindowProxy object will proxy new + Window objects for new Document objects, but the src attribute will not change.

    -

    Whenever the intrinsic width - or intrinsic height of the video changes - (including, for example, because the selected video - track was changed), if the element's readyState - attribute is not HAVE_NOTHING, the user agent must - queue a task to fire a simple event named resize at the media element.

    + +
    + +

    The name attribute, if present, must be a + valid browsing context name. The given value is used to name the nested + browsing context. When the browsing context is created, if the attribute + is present, the browsing context name must be set to the value of this attribute; + otherwise, the browsing context name must be set to the empty string.

    -

    The video element supports dimension attributes.

    +

    Whenever the name attribute is set, the nested + browsing context's name must be changed to + the new value. If the attribute is removed, the browsing context name must be set to + the empty string.

    -

    In the absence of style rules to the contrary, video content should be rendered inside the - element's playback area such that the video content is shown centered in the playback area at the - largest possible size that fits completely within it, with the video content's aspect ratio being - preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the - video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area - that do not contain the video represent nothing.

    -

    In user agents that implement CSS, the above requirement can be implemented by - using the style rule suggested in the rendering section.

    +
    -

    The intrinsic width of a video element's playback area is the intrinsic width of - the poster frame, if that is available and the element currently - represents its poster frame; otherwise, it is the intrinsic width of the video resource, if that is - available; otherwise the intrinsic width is missing.

    +

    The sandbox attribute, when specified, + enables a set of extra restrictions on any content hosted by the iframe. Its value + must be an unordered set of unique space-separated tokens that are ASCII + case-insensitive. The allowed values are allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation.

    -

    The intrinsic height of a video element's playback area is the intrinsic height of - the poster frame, if that is available and the element currently - represents its poster frame; otherwise it is the intrinsic height of the video resource, if that is - available; otherwise the intrinsic height is missing.

    +

    When the attribute is set, the content is treated as being from a unique origin, + forms, scripts, and various potentially annoying APIs are disabled, links are prevented from + targeting other browsing contexts, and plugins are secured. + The allow-same-origin keyword causes + the content to be treated as being from its real origin instead of forcing it into a unique + origin; the allow-top-navigation + keyword allows the content to navigate its top-level browsing context; + and the allow-forms, allow-pointer-lock, allow-popups and allow-scripts keywords re-enable forms, the + pointer lock API, popups, and scripts respectively. [POINTERLOCK]

    -

    The default object size is a width of 300 CSS pixels and a height of 150 CSS - pixels. [CSSIMAGES]

    +

    Setting both the allow-scripts and allow-same-origin keywords together when the + embedded page has the same origin as the page containing the iframe + allows the embedded page to simply remove the sandbox + attribute and then reload itself, effectively breaking out of the sandbox altogether.

    -
    +

    These flags only take effect when the nested browsing context of + the iframe is navigated. Removing them, or removing the + entire sandbox attribute, has no effect on an + already-loaded page.

    -

    User agents should provide controls to enable or disable the display of closed captions, audio - description tracks, and other additional data associated with the video stream, though such - features should, again, not interfere with the page's normal rendering.

    +

    Potentially hostile files should not be served from the same server as the file + containing the iframe element. Sandboxing hostile content is of minimal help if an + attacker can convince the user to just visit the hostile content directly, rather than in the + iframe. To limit the damage that can be caused by hostile HTML content, it should be + served from a separate dedicated domain. Using a different domain ensures that scripts in the + files are unable to attack the site, even if the user is tricked into visiting those pages + directly, without the protection of the sandbox + attribute.

    -

    User agents may allow users to view the video content in manners more suitable to the user - (e.g. full-screen or in an independent resizable window). As for the other user interface - features, controls to enable this should not interfere with the page's normal rendering unless the - user agent is exposing a user interface. - In such an independent context, however, user agents may make full user interfaces visible, with, - e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

    + -

    User agents may allow video playback to affect system features that could interfere with the - user's experience; for example, user agents could disable screensavers while video playback is in - progress.

    + -
    +

    When an iframe element with a sandbox + attribute has its nested browsing context created (before the initial + about:blank Document is created), and when an iframe + element's sandbox attribute is set or changed while it + has a nested browsing context, the user agent must parse the sandboxing directive using the attribute's value as the input, the iframe element's nested browsing context's + iframe sandboxing flag set as the output, and, if the + iframe has an allowfullscreen + attribute, the allow fullscreen flag.

    -

    The poster IDL attribute must - reflect the poster content attribute.

    +

    When an iframe element's sandbox + attribute is removed while it has a nested browsing context, the user agent must + empty the iframe element's nested browsing context's + iframe sandboxing flag set as the output.

    -

    This example shows how to detect when a video has failed to play correctly:

    +

    In this example, some completely-unknown, potentially hostile, user-provided HTML content is + embedded in a page. Because it is served from a separate domain, it is affected by all the normal + cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, + forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or + windows it itself embeds).

    - 
    <script>
- function failed(e) {
-   // video playback failed - show a message saying why
-   switch (e.target.error.code) {
-     case e.target.error.MEDIA_ERR_ABORTED:
-       alert('You aborted the video playback.');
-       break;
-     case e.target.error.MEDIA_ERR_NETWORK:
-       alert('A network error caused the video download to fail part-way.');
-       break;
-     case e.target.error.MEDIA_ERR_DECODE:
-       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
-       break;
-     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
-       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
-       break;
-     default:
-       alert('An unknown error occurred.');
-       break;
-   }
- }
-</script>
-<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
-<p><a href="tgif.vid">Download the video file</a>.</p>
    + 
    <p>We're not scared of you! Here is your content, unedited:</p>
+<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
    + +

    It is important to use a separate domain so that if the attacker convinces the + user to visit that page directly, the page doesn't run in the context of the site's origin, which + would make the user vulnerable to any attack found in the page.

    +
    +

    In this example, a gadget from another site is embedded. The gadget has scripting and forms + enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with + its originating server. The sandbox is still useful, however, as it disables plugins and popups, + thus reducing the risk of the user being exposed to malware and other annoyances.

    + 
    <iframe sandbox="allow-same-origin allow-forms allow-scripts"
+        src="http://maps.example.com/embedded.html"></iframe>
    - +
    +
    +

    Suppose a file A contained the following fragment:

    + 
    <iframe sandbox="allow-same-origin allow-forms" src=B></iframe>
    +

    Suppose that file B contained an iframe also:

    -

    4.7.11 The audio element

    + 
    <iframe sandbox="allow-scripts" src=C></iframe>
    -
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a controls attribute: Interactive content.
    If the element has a controls attribute: Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    If the element has a src attribute: -zero or more track elements, then -transparent, but with no media element descendants.
    If the element does not have a src attribute: zero or more source elements, then - zero or more track elements, then - transparent, but with no media element descendants.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    crossorigin — How the element handles crossorigin requests
    preload — Hints how much buffering the media resource will likely need
    autoplay — Hint that the media resource can be started automatically when the page is loaded
    mediagroup — Groups media elements together with an implicit MediaController
    loop — Whether to loop the media resource
    muted — Whether to mute the media resource by default
    controls — Show user agent controls
    DOM interface:
    - 
    [NamedConstructor=Audio(optional DOMString src)]
-interface HTMLAudioElement : HTMLMediaElement {};
    -
    +

    Further, suppose that file C contained a link:

    + + 
    <a href=D>Link</a>
    + +

    For this example, suppose all the files were served as text/html.

    + +

    Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the + iframe in A has scripts disabled, and this overrides the allow-scripts keyword set on the + iframe in B. Forms are also disabled, because the inner iframe (in B) + does not have the allow-forms keyword + set.

    -

    An audio element represents a sound or audio stream.

    +

    Suppose now that a script in A removes all the sandbox attributes in A and B. + This would change nothing immediately. If the user clicked the link in C, loading page D into the + iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the + state of the nested browsing context in the iframe in A when page B was + loaded.

    - +

    Generally speaking, dynamically removing or changing the sandbox attribute is ill-advised, because it can make it quite + hard to reason about what will be allowed and what will not.

    -

    Content may be provided inside the audio element. User agents - should not show this content to the user; it is intended for older Web browsers which do - not support audio, so that legacy audio plugins can be tried, or to show text to the - users of these older browsers informing them of how to access the audio contents.

    +
    -

    In particular, this content is not intended to address accessibility concerns. To - make audio content accessible to the deaf or to those with other physical or cognitive - disabilities, a variety of features are available. If captions or a sign language video are - available, the video element can be used instead of the audio element to - play the audio, allowing users to enable the visual alternatives. Chapter titles can be provided - to aid navigation, using the track element and a WebVTT file. And, - naturally, transcripts or other textual alternatives can be provided by simply linking to them in - the prose near the audio element. [WEBVTT]

    -

    The audio element is a media element whose media data is - ostensibly audio data.

    +
    -

    The src, preload, - autoplay, mediagroup, loop, muted, and controls - attributes are the attributes common to all media - elements.

    +

    The seamless attribute is a boolean + attribute. When specified, it indicates that the iframe element's + browsing context is to be rendered in a manner that makes it appear to be part of the + containing document (seamlessly included in the parent document).

    - +
    -

    When an audio element is potentially playing, it must have its audio - data played synchronised with the current playback position, at the element's - effective media volume. The user agent must play the audio from audio tracks that - were enabled when the event loop last reached step 1.

    +

    An HTML inclusion is effected using this attribute as in the following example. + In this case, the inclusion is of a site-wide navigation bar. Any links in the + iframe will, in new user agents, be automatically opened in the + iframe's parent browsing context; for legacy user agents, the site could also + include a base element with a target + attribute with the value _parent. Similarly, in new user agents the styles + of the parent page will be automatically applied to the contents of the frame, but to support + legacy user agents authors might wish to include the styles explicitly.

    -

    When an audio element is not potentially playing, audio must not play - for the element.

    + 
    <!DOCTYPE HTML>
+<title>Mirror Mirror — MovieInfo™</title>
+<header>
+ <hgroup>
+  <h1>Mirror Mirror</h1>
+  <h2>Part of the MovieInfo™ Database</h2>
+ </hgroup>
+ <nav>
+  <iframe seamless src="nav.inc"></iframe>
+ </nav>
+</header>
+...
    - +
    -
    audio = new Audio( [ url ] )
    + -

    Returns a new audio element, with the src - attribute set to the value passed in the argument, if applicable.

    +

    An iframe element is said to be in seamless mode when all of the + following conditions are met:

    -
    + +

    When an iframe element is in seamless mode, the following + requirements apply:

    -

    4.7.12 The source element

    + -
    +

    If the attribute is not specified, or if the origin conditions listed above are + not met, then the user agent should render the nested browsing context in a manner + that is clearly distinguishable as a separate browsing context, and the + seamless browsing context flag must be set to false for that browsing + context.

    -

    The following list shows some examples of how to use the codecs= MIME - parameter in the type attribute.

    +

    It is important that user agents recheck the above conditions whenever the + active document of the nested browsing context of the + iframe changes, such that the seamless browsing context flag gets unset + if the nested browsing context is navigated to another + origin.

    -
    H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
    H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
    MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
    MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
    MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
    <source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
    Theora video and Vorbis audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
    Theora video and Speex audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
    Vorbis audio alone in Ogg container
    <source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
    Speex audio alone in Ogg container
    <source src='audio.spx' type='audio/ogg; codecs=speex'>
    FLAC audio alone in Ogg container
    <source src='audio.oga' type='audio/ogg; codecs=flac'>
    Dirac video and Vorbis audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
    + -
    +

    The attribute can be set or removed dynamically, with the rendering updating in + tandem.

    - +

    The contenteditable attribute does not + propagate into seamless iframes.

    -

    If a source element is inserted as a child of a media element that - has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media - element's resource selection - algorithm.

    -

    The IDL attributes src and type must reflect the respective content - attributes of the same name.

    +
    - +

    The allowfullscreen attribute is a + boolean attribute. When specified, it indicates that Document objects in + the iframe element's browsing context are to be allowed to use requestFullscreen() (if it's not blocked for other + reasons, e.g. there is another ancestor iframe without this attribute set).

    -

    If the author isn't sure if user agents will all be able to render the media resources - provided, the author can listen to the error event on the last - source element and trigger fallback behavior:

    +

    Here, an iframe is used to embed a player from a video site. The allowfullscreen attribute is needed to enable the + player to show its video full-screen.

    - 
    <script>
- function fallback(video) {
-   // replace <video> with its contents
-   while (video.hasChildNodes()) {
-     if (video.firstChild instanceof HTMLSourceElement)
-       video.removeChild(video.firstChild);
-     else
-       video.parentNode.insertBefore(video.firstChild, video);
-   }
-   video.parentNode.removeChild(video);
- }
-</script>
-<video controls autoplay>
- <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
- <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
-         onerror="fallback(parentNode)">
- ...
-</video>
    + 
    <article>
+ <header>
+  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
+  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
+ </header>
+ <main>
+  <p>Check out my new ride!</p>
+  <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
+ </main>
+</article>
    +
    -

    4.7.13 The track element

    +

    The iframe element supports dimension attributes for cases where the + embedded content has specific dimensions (e.g. ad units have well-defined dimensions).

    -
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of a media element, before any flow content.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    kind — The type of text track
    src — Address of the resource
    srclang — Language of the text track
    label — User-visible label
    default — Enable the track if no other text track is more suitable
    DOM interface:
    -
    interface HTMLTrackElement : HTMLElement {
-           attribute DOMString kind;
-           attribute DOMString src;
-           attribute DOMString srclang;
-           attribute DOMString label;
-           attribute boolean default;
+  
    An iframe element never has fallback content, as it will always
+  create a nested browsing context, regardless of whether the specified initial
+  contents are successfully used.
    
 
-  const unsigned short NONE = 0;
-  const unsigned short LOADING = 1;
-  const unsigned short LOADED = 2;
-  const unsigned short ERROR = 3;
-  readonly attribute unsigned short readyState;
 
-  readonly attribute TextTrack track;
-};
    -
    +
    -

    The track element allows authors to specify explicit external timed text tracks for media elements. It - does not represent anything on its own.

    +

    Descendants of iframe elements represent nothing. (In legacy user agents that do + not support iframe elements, the contents would be parsed as markup that could act as + fallback content.)

    -

    The kind attribute is an enumerated - attribute. The following table lists the keywords defined for this attribute. The keyword - given in the first cell of each row maps to the state given in the second cell.

    +

    When used in HTML documents, the allowed content model + of iframe elements is text, except that invoking the HTML fragment parsing + algorithm with the iframe element as the context element and the text contents as the input must result in a list of nodes that are all phrasing content, + with no parse errors having occurred, with no script + elements being anywhere in the list or as descendants of elements in the list, and with all the + elements in the list (including their descendants) being themselves conforming.

    -
    Keyword - State - Brief description -
    subtitles - Subtitles - - Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the media resource's audio track). - Overlaid on the video. -
    captions - Captions - - Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf). - Overlaid on the video; labeled as appropriate for the hard-of-hearing. -
    descriptions - Descriptions - - Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). - Synthesized as audio. -
    chapters - Chapters - - Chapter titles, intended to be used for navigating the media resource. - Displayed as an interactive (potentially nested) list in the user agent's interface. -
    metadata - Metadata - - Tracks intended for use from script. - Not displayed by the user agent. -
    +

    The iframe element must be empty in XML documents.

    -

    The attribute may be omitted. The missing value default is the subtitles state.

    +

    The HTML parser treats markup inside iframe elements as + text.

    -

    The src attribute gives the address of the text - track data. The value must be a valid non-empty URL potentially surrounded by spaces. - This attribute must be present.

    -

    If the element has a src attribute whose value is not the - empty string and whose value, when the attribute was set, could be successfully resolved relative to the element, then the element's track - URL is the resulting absolute URL. Otherwise, the element's track - URL is the empty string.

    +
    - +

    The IDL attributes src, srcdoc, name, sandbox, and seamless must reflect the respective + content attributes of the same name.

    -

    If the element's track URL identifies a WebVTT resource, and the - element's kind attribute is not in the metadata state, then the WebVTT file must be - a WebVTT file using cue text. [WEBVTT]

    +

    The allowFullscreen IDL attribute + must reflect the allowfullscreen + content attribute.

    -

    Furthermore, if the element's track URL identifies a WebVTT resource, - and the element's kind attribute is in the chapters state, then the WebVTT file must be - both a WebVTT file using chapter title text and a WebVTT file using only nested - cues. [WEBVTT]

    +

    The contentDocument IDL attribute + must return the Document object of the active document of the + iframe element's nested browsing context, if any and if its + effective script origin is the same origin as the effective script + origin specified by the incumbent settings object, or null otherwise.

    -

    The srclang attribute gives the language of - the text track data. The value must be a valid BCP 47 language tag. This attribute must be present - if the element's kind attribute is in the subtitles state. [BCP47]

    +

    The contentWindow IDL attribute must + return the WindowProxy object of the iframe element's nested + browsing context, if any, or null otherwise.

    -

    If the element has a srclang attribute whose value is - not the empty string, then the element's track language is the value of the attribute. - Otherwise, the element has no track language.

    +
    - +

    Here is an example of a page using an iframe to include advertising from an + advertising broker:

    -

    The label attribute gives a user-readable - title for the track. This title is used by user agents when listing subtitle, caption, and audio description tracks in their user interface.

    + 
    <iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
+        width="468" height="60"></iframe>
    -

    The value of the label attribute, if the attribute is - present, must not be the empty string. Furthermore, there must not be two track - element children of the same media element whose kind attributes are in the same state, whose srclang attributes are both missing or have values that - represent the same language, and whose label attributes are - again both missing or both have the same value.

    +
    - -

    If the element has a label attribute whose value is not - the empty string, then the element's track label is the value of the attribute. - Otherwise, the element's track label is an empty string.

    - -

    The default attribute is a boolean - attribute, which, if specified, indicates that the track is to be enabled if the user's - preferences do not indicate that another track would be more appropriate.

    +

    4.8.7 The embed element

    -

    Each media element must have no more than one track element child - whose kind attribute is in the subtitles or captions state and whose default attribute is specified.

    -

    Each media element must have no more than one track element child - whose kind attribute is in the description state and whose default attribute is specified.

    -

    Each media element must have no more than one track element child - whose kind attribute is in the chapters state and whose default attribute is specified.

    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    src — Address of the resource
    type — Type of embedded resource
    width — Horizontal dimension
    height — Vertical dimension
    Any other attribute that has no namespace (see prose).
    DOM interface:
    +
    interface HTMLEmbedElement : HTMLElement {
+           attribute DOMString src;
+           attribute DOMString type;
+           attribute DOMString width;
+           attribute DOMString height;
+  legacycaller any (any... arguments);
 
-  
    There is no limit on the number of track elements whose kind attribute is in the metadata state and whose default attribute is specified.
    
+  // also has obsolete members
+};
    + +

    Depending on the type of content instantiated by the + embed element, the node may also support other + interfaces.

    + +
    -
    track . readyState
    -

    Returns the text track readiness state, - represented by a number from the following list:

    -
    track . NONE (0)
    -

    The text track not loaded state.

    -
    track . LOADING (1)
    -

    The text track loading state.

    -
    track . LOADED (2)
    -

    The text track loaded state.

    -
    track . ERROR (3)
    -

    The text track failed to load state.

    -
    -
    track . track
    +

    The embed element provides an integration point for an external (typically + non-HTML) application or interactive content.

    -

    Returns the TextTrack object corresponding to the text track of the track element.

    +

    The src attribute gives the address of the + resource being embedded. The attribute, if present, must contain a valid non-empty URL + potentially surrounded by spaces.

    -
    +

    If the itemprop attribute is specified on an + embed element, then the src attribute must also + be specified.

    - +

    The type attribute, if present, gives the + MIME type by which the plugin to instantiate is selected. The value must be a + valid MIME type. If both the type attribute and + the src attribute are present, then the type attribute must specify the same type as the explicit Content-Type metadata of the resource given by the src attribute.

    -

    The readyState attribute must return the - numeric value corresponding to the text track readiness state of the - track element's text track, as defined by the following list:

    + -
    NONE (numeric value 0)
    The text track not loaded state.
    LOADING (numeric value 1)
    The text track loading state.
    LOADED (numeric value 2)
    The text track loaded state.
    ERROR (numeric value 3)
    The text track failed to load state.
    +

    While any of the following conditions are occurring, any plugin instantiated for + the element must be removed, and the embed element represents + nothing:

    -

    The track IDL attribute must, on getting, - return the track element's text track's corresponding - TextTrack object.

    + -

    The src, srclang, label, and default IDL attributes must reflect the - respective content attributes of the same name. The kind IDL attribute must reflect the content - attribute of the same name, limited to only known values.

    +

    An embed element is said to be potentially + active when the following conditions are all met simultaneously:

    - + -
    +

    Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is + remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must + queue a task using the embed task source to run the + embed element setup steps.

    -

    This video has subtitles in several languages:

    +

    The embed element setup steps are as follows:

    - 
    <video src="brave.webm">
- <track kind=subtitles src=brave.en.vtt srclang=en label="English">
- <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
- <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
- <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
-</video>
    +

    1. If another task has since been queued to run the + embed element setup steps for this element, then abort these steps.

    2. -

      (The lang attributes on the last two describe the language of - the label attribute, not the language of the subtitles - themselves. The language of the subtitles is given by the srclang attribute.)

      +
      If the element has a src attribute set
      -
    +

    The user agent must resolve the value of the element's + src attribute, relative to the element. If that is + successful, the user agent should fetch the resulting absolute + URL, from the element's browsing context scope origin if it has one. The task that + is queued by the networking task source once + the resource has been fetched must run the following steps:

    + +

    1. If another task has since been queued to run + the embed element setup steps for this element, then abort these + steps.

    2. -

      4.7.14 Media elements

      +

      Determine the type of the content being embedded, as + follows (stopping at the first substep that determines the type):

      -

      Media elements (audio and video, in - this specification) implement the following interface:

      +

      1. If the element has a type attribute, and that + attribute's value is a type that a plugin supports, then the value of the + type attribute is the content's type.

      2. - 
        enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
-interface HTMLMediaElement : HTMLElement {
+          
 
-  // error state
-  readonly attribute MediaError? error;
+          
        Otherwise, if applying the URL parser algorithm to the URL of
+          the specified resource (after any redirects) results in a parsed URL whose
+          path component matches a pattern that a
+          plugin supports, then the content's
+          type is the type that that plugin can handle.
        
 
-  // network state
-           attribute DOMString src;
-  readonly attribute DOMString currentSrc;
-           attribute DOMString crossOrigin;
-  const unsigned short NETWORK_EMPTY = 0;
-  const unsigned short NETWORK_IDLE = 1;
-  const unsigned short NETWORK_LOADING = 2;
-  const unsigned short NETWORK_NO_SOURCE = 3;
-  readonly attribute unsigned short networkState;
-           attribute DOMString preload;
-  readonly attribute TimeRanges buffered;
-  void load();
-  CanPlayTypeResult canPlayType(DOMString type);
+          
        For example, a plugin might say that it can handle resources with path components that end with the four character string
+          ".swf".
        
 
-  // ready state
-  const unsigned short HAVE_NOTHING = 0;
-  const unsigned short HAVE_METADATA = 1;
-  const unsigned short HAVE_CURRENT_DATA = 2;
-  const unsigned short HAVE_FUTURE_DATA = 3;
-  const unsigned short HAVE_ENOUGH_DATA = 4;
-  readonly attribute unsigned short readyState;
-  readonly attribute boolean seeking;
+          
+          
 
-  // playback state
-           attribute double currentTime;
-  void fastSeek(double time);
-  readonly attribute unrestricted double duration;
-  Date getStartDate();
-  readonly attribute boolean paused;
-           attribute double defaultPlaybackRate;
-           attribute double playbackRate;
-  readonly attribute TimeRanges played;
-  readonly attribute TimeRanges seekable;
-  readonly attribute boolean ended;
-           attribute boolean autoplay;
-           attribute boolean loop;
-  void play();
-  void pause();
+         
      3. Otherwise, if the specified resource has explicit
+         Content-Type metadata, then that is the content's
+         type.
      4. Otherwise, the content has no type and there
+         can be no appropriate plugin for it.
      - // media controller - attribute DOMString mediaGroup; - attribute MediaController? controller; +
    3. - // controls - attribute boolean controls; - attribute double volume; - attribute boolean muted; - attribute boolean defaultMuted; +

      If the previous step determined that the content's + type is image/svg+xml, then run the following substeps:

      - // tracks - readonly attribute AudioTrackList audioTracks; - readonly attribute VideoTrackList videoTracks; - readonly attribute TextTrackList textTracks; - TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = ""); -}; +

      1. If the embed element is not associated with a nested browsing + context, associate the element with a newly created nested browsing + context, and, if the element has a name + attribute, set the browsing context name of the element's nested + browsing context to the value of this attribute.

        + -

        The media element attributes, src, crossorigin, preload, autoplay, - mediagroup, loop, - muted, and controls, apply to all media - elements. They are defined in this section.

        +

      2. Navigate the nested browsing context to + the fetched resource, with replacement enabled, and with the + embed element's document's browsing context as the source + browsing context. (The src attribute of the + embed element doesn't get updated if the browsing context gets further + navigated to other locations.)

      3. The embed element now represents its associated + nested browsing context.

      - +
    4. - +

      Otherwise, find and instantiate an appropriate plugin based on the content's type, and hand that plugin the + content of the resource, replacing any previously instantiated plugin for the element. The + embed element now represents this plugin instance.

      -

      Media elements are used to present audio data, or video and - audio data, to the user. This is referred to as media data in this section, since this - section applies equally to media elements for audio or for - video. +

    5. Once the resource or plugin has completely loaded, queue a task to + fire a simple event named load at the + element.

    - The term media resource is used to refer to the complete set of media data, e.g. the - complete video file, or complete audio file. +

    Whether the resource is fetched successfully or not (e.g. whether the response code was a + 2xx code or equivalent) must be ignored + when determining the content's type and when handing + the resource to the plugin.

    -

    +

    This allows servers to return data for plugins even with error responses (e.g. + HTTP 500 Internal Server Error codes can still contain plugin data).

    -

    A media resource can have multiple audio and video tracks. For the purposes of a - media element, the video data of the media resource is only that of the - currently selected track (if any) as given by the element's videoTracks attribute when the event loop last - reached step 1, and the audio data of the media resource is the result of mixing all - the currently enabled tracks (if any) given by the element's audioTracks attribute when the event loop last - reached step 1.

    +

    Fetching the resource must delay the load event of the element's document.

    + + + -

    Both audio and video elements can be used for both audio - and video. The main difference between the two is simply that the audio element has - no playback area for visual content (such as video or captions), whereas the video - element does.

    +
    If the element has no src attribute set
    - +

    The user agent should find and instantiate an appropriate plugin based on the + value of the type attribute. The embed + element now represents this plugin instance.

    -

    Except where otherwise explicitly specified, the task source for all the tasks - queued in this section and its subsections is the media - element event task source of the media element in question.

    +

    Once the plugin is completely loaded, queue a task to fire a simple + event named load at the element.

    - + + +

    The embed element has no fallback content. If the user agent can't + find a suitable plugin when attempting to find and instantiate one for the algorithm above, then + the user agent must use a default plugin. This default could be as simple as saying "Unsupported + Format".

    -
    4.7.14.1 Error codes
    +

    Whenever an embed element that was potentially + active stops being potentially active, any + plugin that had been instantiated for that element must be unloaded.

    -
    media . error
    +

    When a plugin is to be instantiated but it cannot be secured and the sandboxed plugins browsing context + flag is set on the embed element's Document's active + sandboxing flag set, then the user agent must not instantiate the plugin, and + must instead render the embed element in a manner that conveys that the + plugin was disabled. The user agent may offer the user the option to override the + sandbox and instantiate the plugin anyway; if the user invokes such an option, the + user agent must act as if the conditions above did not apply for the purposes of this element.

    -

    Returns a MediaError object representing the current error state of the - element.

    +

    Plugins that cannot be secured are + disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by + the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User + agents should convey the danger of overriding the sandbox to the user if an option to do so is + provided.

    -

    Returns null if there is no error.

    +

    When an embed element represents a nested browsing context: if the + embed element's nested browsing context's active document + is not ready for post-load tasks, and when anything is delaying the load event of the embed element's browsing + context's active document, and when the embed element's + browsing context is in the delaying load + events mode, the embed must delay the load event of its + document.

    -
    +

    The task source for the tasks mentioned in this + section is the DOM manipulation task source.

    -

    All media elements have an associated error status, which - records the last error the element encountered since its resource selection algorithm was last invoked. The - error attribute, on getting, must return the - MediaError object created for this last error, or null if there has not been an - error.

    +

    Any namespace-less attribute other than name, align, hspace, and vspace may be + specified on the embed element, so long as its name is XML-compatible + and contains no uppercase ASCII letters. These attributes are then passed as + parameters to the plugin.

    + +

    All attributes in HTML documents get lowercased automatically, so the + restriction on uppercase letters doesn't affect such documents.

    + +

    The four exceptions are to exclude legacy attributes that have side-effects beyond + just sending parameters to the plugin.

    - 
    interface MediaError {
-  const unsigned short MEDIA_ERR_ABORTED = 1;
-  const unsigned short MEDIA_ERR_NETWORK = 2;
-  const unsigned short MEDIA_ERR_DECODE = 3;
-  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
-  readonly attribute unsigned short code;
-};
    +

    The user agent should pass the names and values of all the attributes of the embed + element that have no namespace to the plugin used, when one is instantiated.

    -
    media . error . code
    +

    The HTMLEmbedElement object representing the element must expose the scriptable + interface of the plugin instantiated for the embed element, if any. At a + minimum, this interface must implement the legacy caller + operation. (It is suggested that the default behavior of this legacy caller operation, e.g. + the behavior of the default plugin's legacy caller operation, be to throw a + NotSupportedError exception.)

    -

    Returns the current error's error code, from the list below.

    + -
    +

    The embed element supports dimension attributes.

    -

    The code attribute of a - MediaError object must return the code for the error, which must be one of the - following:

    +

    The IDL attributes src and type each must reflect the respective + content attributes of the same name.

    -
    MEDIA_ERR_ABORTED (numeric value 1)
    The fetching process for the media resource was aborted by the user agent at the - user's request.
    MEDIA_ERR_NETWORK (numeric value 2)
    A network error of some description caused the user agent to stop fetching the media - resource, after the resource was established to be usable.
    MEDIA_ERR_DECODE (numeric value 3)
    An error of some description occurred while decoding the media resource, after - the resource was established to be usable.
    MEDIA_ERR_SRC_NOT_SUPPORTED (numeric value 4)
    The media resource indicated by the src - attribute was not suitable.
    +
    +

    Here's a way to embed a resource that requires a proprietary plugin, like Flash:

    + 
    <embed src="catgame.swf">
    -
    4.7.14.2 Location of the media resource
    +

    If the user does not have the plugin (for example if the plugin vendor doesn't support the + user's platform), then the user will be unable to use the resource.

    -

    The src content attribute on media elements gives the address of the media resource (video, audio) to show. The - attribute, if present, must contain a valid non-empty URL potentially surrounded by - spaces.

    +

    To pass the plugin a parameter "quality" with the value "high", an attribute can be + specified:

    -

    If the itemprop attribute is specified on the media - element, then the src attribute must also be - specified.

    + 
    <embed src="catgame.swf" quality="high">
    -

    The crossorigin content attribute on - media elements is a CORS settings attribute.

    +

    This would be equivalent to the following, when using an object element + instead:

    - + 
    <object data="catgame.swf">
+ <param name="quality" value="high">
+</object>
    -

    If a media element is created with a - src attribute, the user agent must synchronously invoke the - media element's resource selection - algorithm.

    +
    -

    If a src attribute of a media element is set - or changed, the user agent must invoke the media element's media element load - algorithm. (Removing the src attribute does - not do this, even if there are source elements present.)

    -

    The src IDL attribute on media elements must reflect the content attribute of the same - name.

    -

    The crossOrigin IDL attribute must - reflect the crossorigin content - attribute, limited to only known values.

    - +

    4.8.8 The object element

    -
    media . currentSrc
    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a usemap attribute: Interactive content.
    Listed, submittable, and reassociateable form-associated element.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    Zero or more param elements, then, transparent.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    data — Address of the resource
    type — Type of embedded resource
    typemustmatch — Whether the type attribute and the Content-Type value need to match for the resource to be used
    name — Name of nested browsing context
    usemap — Name of image map to use
    form — Associates the control with a form element
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    +
    interface HTMLObjectElement : HTMLElement {
+           attribute DOMString data;
+           attribute DOMString type;
+           attribute boolean typeMustMatch;
+           attribute DOMString name;
+           attribute DOMString useMap;
+  readonly attribute HTMLFormElement? form;
+           attribute DOMString width;
+           attribute DOMString height;
+  readonly attribute Document? contentDocument;
+  readonly attribute WindowProxy? contentWindow;
 
-    
    Returns the address of the current media resource.
    
+  readonly attribute boolean willValidate;
+  readonly attribute ValidityState validity;
+  readonly attribute DOMString validationMessage;
+  boolean checkValidity();
+  boolean reportValidity();
+  void setCustomValidity(DOMString error);
 
-    
    Returns the empty string when there is no media resource.
    
+  legacycaller any (any... arguments);
 
+  // also has obsolete members
+};
    + +

    Depending on the type of content instantiated by the + object element, the node also supports other + interfaces.

    +
    - +

    The object element can represent an external resource, which, depending on the + type of the resource, will either be treated as an image, as a nested browsing + context, or as an external resource to be processed by a plugin.

    -

    The currentSrc IDL attribute is initially - the empty string. Its value is changed by the resource - selection algorithm defined below.

    +

    The data attribute, if present, specifies the + address of the resource. If present, the attribute must be a valid non-empty URL potentially + surrounded by spaces.

    - +

    Authors who reference resources from other origins + that they do not trust are urged to use the typemustmatch attribute defined below. Without that + attribute, it is possible in certain cases for an attacker on the remote host to use the plugin + mechanism to run arbitrary scripts, even if the author has used features such as the Flash + "allowScriptAccess" parameter.

    -

    There are two ways to specify a media resource, the src attribute, or source elements. The attribute - overrides the elements.

    +

    The type attribute, if present, specifies the + type of the resource. If present, the attribute must be a valid MIME type.

    + +

    At least one of either the data attribute or the type attribute must be present.

    + +

    If the itemprop attribute is specified on an object + element, then the data attribute must also be specified.

    +

    The typemustmatch attribute is a + boolean attribute whose presence indicates that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the + aforementioned resource match.

    +

    The typemustmatch attribute must not be + specified unless both the data attribute and the type attribute are present.

    -
    4.7.14.3 MIME types
    +

    The name attribute, if present, must be a + valid browsing context name. The given value is used to name the nested + browsing context, if applicable.

    -

    A media resource can be described in terms of its type, specifically a - MIME type, in some cases with a codecs parameter. (Whether the - codecs parameter is allowed or not depends on the MIME type.) [RFC4281]

    + -

    Types are usually somewhat incomplete descriptions; for example "video/mpeg" doesn't say anything except what the container type is, and even a - type like "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" doesn't - include information like the actual bitrate (only the maximum bitrate). Thus, given a type, a user - agent can often only know whether it might be able to play media of that type (with - varying levels of confidence), or whether it definitely cannot play media of that - type.

    +

    Whenever one of the following conditions occur:

    -

    A type that the user agent knows it cannot render is one that describes a resource - that the user agent definitely does not support, for example because it doesn't recognise the - container type, or it doesn't support the listed codecs.

    + -

    This script tests to see if the user agent supports a (fictional) new format to dynamically - decide whether to use a video element or a plugin:

    +

    ...the user agent must queue a task to run the following steps to (re)determine + what the object element represents. This task + being queued or actively running must delay the load + event of the element's document.

    - 
    <section id="video">
- <p><a href="playing-cats.nfv">Download video</a></p>
-</section>
-<script>
- var videoSection = document.getElementById('video');
- var videoElement = document.createElement('video');
- var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
- if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
-   // not confident of browser support
-   // but we have a plugin
-   // so use plugin instead
-   videoElement = document.createElement("embed");
- } else if (support == "") {
-   // no support from browser and no plugin
-   // do nothing
-   videoElement = null;
- }
- if (videoElement) {
-   while (videoSection.hasChildNodes())
-     videoSection.removeChild(videoSection.firstChild);
-   videoElement.setAttribute("src", "playing-cats.nfv");
-   videoSection.appendChild(videoElement);
- }
-</script>
    +
    1. - +

      If the user has indicated a preference that this object element's fallback + content be shown instead of the element's usual behavior, then jump to the step below + labeled fallback.

      -

      The type attribute of the - source element allows the user agent to avoid downloading resources that use formats - it cannot render.

      +

      For example, a user could ask for the element's fallback content to + be shown because that content uses a format that the user finds more accessible.

      +
    2. -
      4.7.14.4 Network states
      +

      If the element has an ancestor media element, or has an ancestor + object element that is not showing its fallback content, or + if the element is not in a Document with a + browsing context, or if the element's Document is not fully + active, or if the element is still in the stack of open elements of an + HTML parser or XML parser, or if the element is not being + rendered, then jump to the step below labeled fallback.

      -
      media . networkState
      +
    3. -

      Returns the current state of network activity for the element, from the codes in the list - below.

      + -
      4. +

      If the classid attribute is present, and has a + value that isn't the empty string, then: if the user agent can find a plugin + suitable according to the value of the classid + attribute, and either plugins aren't being sandboxed or that + plugin can be secured, then that + plugin should be used, and the value of the data attribute, if any, should be passed to the + plugin. If no suitable plugin can be found, or if the + plugin reports an error, jump to the step below labeled fallback.

      - + -

      As media elements interact with the network, their current - network activity is represented by the networkState attribute. On getting, it must - return the current network state of the element, which must be one of the following values:

      +

    4. If the data attribute is present and its value is + not the empty string, then:

      - +

      1. If the type attribute is present and its value is + not a type that the user agent supports, and is not a type that the user agent can find a + plugin for, then the user agent may jump to the step below labeled fallback + without fetching the content to examine its real type.

      2. Resolve the URL specified by the data attribute, relative to the element.

      3. If that failed, fire a simple event named error at the element, then jump to the step below labeled + fallback.

      4. -
        NETWORK_EMPTY (numeric value 0)
        The element has not yet been initialized. All attributes are in their initial states.
        NETWORK_IDLE (numeric value 1)
        The element's resource - selection algorithm is active and has selected a resource, but it is not actually using the network at this time.
        NETWORK_LOADING (numeric value 2)
        The user agent is actively trying to download data.
        NETWORK_NO_SOURCE (numeric value 3)
        The element's resource - selection algorithm is active, but it has not yet found a resource to use.
        +

        Fetch the resulting absolute URL, from the element's + browsing context scope origin if it has one.

        - + +

        Fetching the resource must delay the load event of the element's document + until the task that is queued by the networking task source once the resource has been + fetched (defined next) has been run.

        -

        The resource selection algorithm defined - below describes exactly when the networkState - attribute changes value and what events fire to indicate changes in this state.

        +

        For the purposes of the application cache networking model, this + fetch operation is not for a child browsing context (though it might + end up being used for one after all, as defined below).

        - +

      5. If the resource is not yet available (e.g. because the resource was not available in the + cache, so that loading the resource required making a request over the network), then jump to + the step below labeled fallback. The task that is + queued by the networking task source once the + resource is available must restart this algorithm from this step. Resources can load + incrementally; user agents may opt to consider a resource "available" whenever enough data has + been obtained to begin processing the resource.

      6. If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire + a simple event named error at the element, then jump to + the step below labeled fallback.

      7. +

        Determine the resource type, as follows:

        -
        4.7.14.5 Loading the media resource
        +
        1. -
          media . load()
          +

          Let the resource type be unknown.

          -

          Causes the element to reset and start selecting and loading a new media resource - from scratch.

          +
        2. -
          3. +

          If the object element has a type + attribute and a typemustmatch attribute, and + the resource has associated Content-Type metadata, and the + type specified in the resource's Content-Type metadata is + an ASCII case-insensitive match for the value of the element's type attribute, then let resource type + be that type and jump to the step below labeled handler.

          - + -

          All media elements have an autoplaying flag, - which must begin in the true state, and a delaying-the-load-event flag, which must - begin in the false state. While the delaying-the-load-event flag is true, the element - must delay the load event of its document.

          +
        3. -

          When the load() method on a media - element is invoked, the user agent must run the media element load - algorithm.

          +

          If the object element has a typemustmatch attribute, jump to the step below + labeled handler.

          -

          The media element load algorithm consists of the following steps.

          +
        4. -

          1. Abort any already-running instance of the resource selection algorithm for this - element.

          2. + -

            If there are any tasks from the media - element's media element event task source in one of the task queues, then remove those tasks.

            +

            If the user agent is configured to strictly obey Content-Type headers for this resource, + and the resource has associated Content-Type metadata, + then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below + labeled handler.

            +

            This can introduce a vulnerability, wherein a site is trying to embed a + resource that uses a particular plugin, but the remote site overrides that and instead + furnishes the user agent with a resource that triggers a different plugin with different + security characteristics.

            +
          3. -

            Basically, pending events and callbacks for the media element are discarded when - the media element starts loading a new resource.

            +

            If there is a type attribute present on the + object element, and that attribute's value is not a type that the user agent + supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled + handler.

            -

          4. If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a task to fire a - simple event named abort at the media - element.

          5. +
          6. -

            If the media element's networkState - is not set to NETWORK_EMPTY, then run these - substeps:

            +

            Run the appropriate set of steps from the following + list:

            -

            1. Queue a task to fire a simple event named emptied at the media element.

            2. If a fetching process is in progress for the media - element, the user agent should stop it.

            3. Forget the media element's media-resource-specific tracks.

            4. If readyState is not set to HAVE_NOTHING, then set it to that state. - -

            5. If the paused attribute is false, then set it to - true.

            6. If seeking is true, set it to false.

            7. +
              If the resource has associated Content-Type + metadata
              -

              Set the current playback position to 0.

              +
              1. -

                Set the official playback position to 0.

                +

                Let binary be false.

                -

                If this changed the official playback position, then queue a task - to fire a simple event named timeupdate at the media element.

                +
              2. -

              3. Set the initial playback position to 0.

              4. Set the timeline offset to Not-a-Number (NaN).

              5. +

                If the type specified in the resource's Content-Type + metadata is "text/plain", and the result of applying the rules for distinguishing if a resource is + text or binary to the resource is that the resource is not + text/plain, then set binary to true.

                -

                Update the duration attribute to Not-a-Number - (NaN).

                +
              6. -

                The user agent will not fire a durationchange event for this particular change of - the duration.

                +

                If the type specified in the resource's Content-Type + metadata is "application/octet-stream", then set binary to true.

                -
              +
            8. -

            9. Set the playbackRate attribute to the value of - the defaultPlaybackRate attribute.

            10. Set the error attribute to null and the - autoplaying flag to true.

            11. Invoke the media element's resource selection algorithm.

            12. +

              If binary is false, then let the resource + type be the type specified in the resource's + Content-Type metadata, and jump to the step below labeled handler.

              -

              Playback of any previously playing media resource for this element - stops.

              +
            13. + +

              If there is a type attribute present on the + object element, and its value is not application/octet-stream, + then run the following steps:

              -
            +
            1. -

              The resource selection algorithm for a - media element is as follows. This algorithm is always invoked synchronously, but one - of the first steps in the algorithm is to return and continue running the remaining steps - asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts - closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop - algorithm). Steps in such sections are marked with ⌛.

              +

              If the attribute's value is a type that a plugin supports, or the + attribute's value is a type that starts with "image/" that is + not also an XML MIME type, then let the resource type be the + type specified in that type attribute.

              -

              1. Set the element's networkState attribute to - the NETWORK_NO_SOURCE value.

              2. Set the element's show poster flag to true.

              3. Set the media element's delaying-the-load-event flag to true - (this delays the load event).

              4. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous - section consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

              5. +
              6. -

                ⌛ If the media element's blocked-on-parser flag is false, - then populate the list of pending text tracks.

                +

                Jump to the step below labeled handler.

                -
              7. +
              -

              ⌛ If the media element has a src - attribute, then let mode be attribute.

              +
            -

            ⌛ Otherwise, if the media element does not have a src attribute but has a source element child, then - let mode be children and let candidate - be the first such source element child in tree order.

            +
            Otherwise, if the resource does not have associated + Content-Type metadata
            -

            ⌛ Otherwise the media element has neither a src attribute nor a source element child: set the - networkState to NETWORK_EMPTY, and abort these steps; the - synchronous section ends.

            +
            1. -

            2. ⌛ Set the media element's networkState to NETWORK_LOADING.

            3. ⌛ Queue a task to fire a simple event named loadstart at the media element.

            4. +

              If there is a type attribute present on the + object element, then let the tentative type be the type + specified in that type attribute.

              -

              If mode is attribute, then run these substeps:

              +

              Otherwise, let tentative type be the sniffed type of the resource.

              -

              1. ⌛ If the src - attribute's value is the empty string, then end the synchronous section, and jump - down to the failed with attribute step below.

              2. ⌛ Let absolute URL be the absolute URL that - would have resulted from resolving the URL - specified by the src attribute's value relative to the - media element when the src attribute was last - changed.

                +
              3. -

              4. ⌛ If absolute URL was obtained successfully, set the currentSrc attribute to absolute - URL.

              5. End the synchronous section, continuing the remaining steps - asynchronously.

              6. If absolute URL was obtained successfully, run the resource fetch algorithm with absolute - URL. If that algorithm returns without aborting this one, then the load - failed.

              7. +

                If tentative type is not + application/octet-stream, then let resource type be + tentative type and jump to the step below labeled + handler.

                -

                Failed with attribute: Reaching this step indicates that the media resource - failed to load or that the given URL could not be resolved. Queue a task to run the following steps:

                +
              -

              1. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_SRC_NOT_SUPPORTED.

              2. Forget the media element's media-resource-specific tracks.

              3. Set the element's networkState attribute - to the NETWORK_NO_SOURCE value.

              4. Set the element's show poster flag to true.

              5. Fire a simple event named error at - the media element.

              6. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

              +
    -

  • Wait for the task queued by the previous step to have - executed.

  • Abort these steps. Until the load() method is - invoked or the src attribute is changed, the element won't - attempt to load another resource. +

  • -

    Otherwise, the source elements will be used; run these substeps:

    + -
    1. +

      If applying the URL parser algorithm to the URL of the + specified resource (after any redirects) results in a parsed URL whose path component matches a pattern that a plugin + supports, then let resource type be the type that that plugin can + handle.

      -

      ⌛ Let pointer be a position defined by two adjacent nodes in the - media element's child list, treating the start of the list (before the first - child in the list, if any) and end of the list (after the last child in the list, if any) as - nodes in their own right. One node is the node before pointer, and the - other node is the node after pointer. Initially, let pointer be the position between the candidate node and the - next node, if there are any, or the end of the list, if it is the last node.

      +

      For example, a plugin might say that it can handle resources with path components that end with the four character string + ".swf".

      -

      As nodes are inserted and removed into the media element, pointer must be updated as follows:

      + + -
      If a new node is inserted between the two nodes that define pointer
      Let pointer be the point between the node before pointer and the new node. In other words, insertions at pointer go after pointer.
      If the node before pointer is removed
      Let pointer be the point between the node after pointer and the node before the node after pointer. In - other words, pointer doesn't move relative to the remaining nodes.
      If the node after pointer is removed
      Let pointer be the point between the node before pointer and the node after the node before pointer. Just - as with the previous case, pointer doesn't move relative to the remaining - nodes.
      +
    -

    Other changes don't affect pointer.

    +

    It is possible for this step to finish, or for one of the substeps above to + jump straight to the next step, with resource type still being unknown. In + both cases, the next step will trigger fallback.

    -

  • ⌛ Process candidate: If candidate does not have a - src attribute, or if its src attribute's value is the empty string, then end the - synchronous section, and jump down to the failed with elements step - below.

  • ⌛ Let absolute URL be the absolute URL that - would have resulted from resolving the URL - specified by candidate's src - attribute's value relative to the candidate when the src attribute was last changed.

    +

  • Handler: Handle the content as given by the first of the following cases that + matches:

    -

  • ⌛ If absolute URL was not obtained successfully, then end the - synchronous section, and jump down to the failed with elements step - below.

  • ⌛ If candidate has a type attribute whose value, when parsed as a MIME - type (including any codecs described by the codecs parameter, for - types that define that parameter), represents a type that the user agent knows it cannot - render, then end the synchronous section, and jump down to the failed with elements step below.

  • ⌛ Set the currentSrc attribute to absolute URL.

  • End the synchronous section, continuing the remaining steps - asynchronously.

  • Run the resource fetch algorithm with - absolute URL. If that algorithm returns without aborting this one, - then the load failed.

  • Failed with elements: Queue a task to fire a simple - event named error at the candidate element.

  • Asynchronously await a stable state. The synchronous section - consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

  • ⌛ Forget the media element's media-resource-specific - tracks.

  • ⌛ Find next candidate: Let candidate be - null.

  • ⌛ Search loop: If the node after pointer is - the end of the list, then jump to the waiting step below.

  • ⌛ If the node after pointer is a source element, - let candidate be that element.

  • ⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node - after pointer is the node after the node that used to be after pointer, if any.

  • ⌛ If candidate is null, jump back to the search - loop step. Otherwise, jump back to the process candidate step.

  • ⌛ Waiting: Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

  • ⌛ Set the element's show poster flag to true.

  • ⌛ Queue a task to set the element's delaying-the-load-event - flag to false. This stops delaying the load - event.

  • End the synchronous section, continuing the remaining steps - asynchronously.

  • Wait until the node after pointer is a node other than the end of - the list. (This step might wait forever.)

  • Asynchronously await a stable state. The synchronous section - consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

  • ⌛ Set the element's delaying-the-load-event flag back to true (this - delays the load event again, in case it hasn't been - fired yet).

    +
    If the resource type is not a type that the user agent supports, but + it is a type that a plugin supports
    -

  • ⌛ Set the networkState back to NETWORK_LOADING.

  • ⌛ Jump back to the find next candidate step above. +

    If plugins are being sandboxed and the plugin that + supports resource type cannot be secured, jump to the step below labeled fallback.

    - +

    Otherwise, the user agent should use the plugin that supports + resource type and pass the content of the resource to that + plugin. If the plugin reports an error, then jump to the step + below labeled fallback.

    -

    The resource fetch algorithm for a media - element and a given absolute URL is as follows:

    +
    If the resource type is an XML MIME type, or if the resource type + does not start with "image/"
    -

    1. Let the current media resource be the resource given by the - absolute URL passed to this algorithm. This is now the element's media - resource.

    2. Remove all media-resource-specific text - tracks from the media element's list of pending text tracks, if - any.

      +

      The object element must be associated with a newly created nested + browsing context, if it does not already have one.

      -

    3. Optionally, run the following substeps. This is the expected behavior if the user agent - intends to not attempt to fetch the resource until the user requests it explicitly (e.g. as a way - to implement the preload attribute's none keyword).

      +

      If the URL of the given resource is not about:blank, the + element's nested browsing context must then be navigated to that resource, with + replacement enabled, and with the object element's document's + browsing context as the source browsing context. (The data attribute of the object element doesn't + get updated if the browsing context gets further navigated to other locations.)

      -

      1. Set the networkState to NETWORK_IDLE.

      2. Queue a task to fire a simple event named suspend at the element.

      3. Queue a task to set the element's delaying-the-load-event flag - to false. This stops delaying the load - event.

      4. Wait for the task to be run.

      5. Wait for an implementation-defined event (e.g. the user requesting that the media - element begin playback).

      6. Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired - yet).

        +

        If the URL of the given resource is about:blank, then, + instead, the user agent must queue a task to fire a simple event + named load at the object element. No load event is fired at the + about:blank document itself.

        -

      7. Set the networkState to NETWORK_LOADING.

      +

      The object element represents the nested browsing + context.

      -
    4. +

      If the name attribute is present, the + browsing context name must be set to the value of this attribute; otherwise, + the browsing context name must be set to the empty string.

      -

      Perform a potentially CORS-enabled fetch of the current media resource's absolute URL, with the mode being - the state of the media element's crossorigin content attribute, the origin - being the origin of the media element's Document, and the - default origin behaviour set to taint.

      +

      In certain situations, e.g. if the resource was fetched from an application cache but it is an HTML file + with a manifest attribute that points to a different + application cache manifest, the navigation of the browsing context will be restarted so + as to load the resource afresh from the network or a different application + cache. Even if the resource is then found to have a different type, it is still used + as part of a nested browsing context: only the navigate algorithm + is restarted, not this object algorithm.

      -

      The resource obtained in this fashion, if any, contains the media data. It can - be CORS-same-origin or CORS-cross-origin; this affects whether - subtitles referenced in the media data are exposed in the API and, for - video elements, whether a canvas gets tainted when the video is drawn - on it.

      + -

      While the load is not suspended (see below), every 350ms (±200ms) or for every byte - received, whichever is least frequent, queue a task to fire a simple - event named progress at the element.

      +
      If the resource type starts with "image/", and support + for images has not been disabled
      -

      The stall timeout is a user-agent defined length of time, which should be about - three seconds. When a media element that is actively attempting to obtain - media data has failed to receive any data for a duration equal to the stall - timeout, the user agent must queue a task to fire a simple - event named stalled at the element.

      +

      Apply the image sniffing rules to + determine the type of the image.

      -

      User agents may allow users to selectively block or slow media data downloads. - When a media element's download has been blocked altogether, the user agent must - act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the - download may also be throttled automatically by the user agent, e.g. to balance the download - with other connections sharing the same bandwidth.

      +

      The object element represents the specified image. The image is + not a nested browsing context.

      -

      User agents may decide to not download more content at any time, e.g. - after buffering five minutes of a one hour media resource, while waiting for the user to decide - whether to play the resource or not, while waiting for user input in an interactive resource, or - when the user navigates away from the page. When a media element's download has - been suspended, the user agent must queue a task, to set the networkState to NETWORK_IDLE and fire a simple event named - suspend at the element. If and when downloading of the - resource resumes, the user agent must queue a task to set the networkState to NETWORK_LOADING. Between the queuing of these tasks, - the load is suspended (so progress events don't fire, - as described above).

      +

      If the image cannot be rendered, e.g. because it is malformed or in an unsupported + format, jump to the step below labeled fallback.

      -

      The preload attribute provides a hint - regarding how much buffering the author thinks is advisable, even in the absence of the autoplay attribute.

      +
      Otherwise
      -

      When a user agent decides to completely stall a download, e.g. if it is waiting until the - user starts playback before downloading any further content, the user agent must queue a - task to set the element's delaying-the-load-event flag to false. This stops - delaying the load event.

      +

      The given resource type is not supported. Jump to the step below + labeled fallback.

      -

      The user agent may use whatever means necessary to fetch the resource (within the constraints - put forward by this and other specifications); for example, reconnecting to the server in the - face of network errors, using HTTP range retrieval requests, or switching to a streaming - protocol. The user agent must consider a resource erroneous only if it has given up trying to - fetch it.

      +

      If the previous step ended with the resource type being + unknown, this is the case that is triggered.

      -

      This specification does not currently say whether or how to check the MIME - types of the media resources, or whether or how to perform file type sniffing using the actual - file data. Implementors differ in their intentions on this matter and it is therefore unclear - what the right solution is. In the absence of any requirement here, the HTTP specification's - strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media - type of the underlying data." ... "If and only if the media type is not given by a Content-Type - field, the recipient MAY attempt to guess the media type via inspection of its content - and/or the name extension(s) of the URI used to identify the resource.").

      +
    • -

    The networking task source tasks to process - the data as it is being fetched must each immediately queue a task to run the first - appropriate steps from the following list. (A new task is used for this so that the work - described below occurs relative to the media element event task source rather than - the networking task source.)

    +

  • The element's contents are not part of what the object element + represents.

    -
    If the media data cannot be fetched at all, due to network errors, causing the - user agent to give up trying to fetch the resource
    If the media data can be fetched but is found by inspection to be in an - unsupported format, or can otherwise not be rendered at all
    +
  • -

    DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal - network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported - container format, or using unsupported codecs for all the data, must cause the user agent to - execute the following steps:

    +

    Abort these steps. Once the resource is completely loaded, queue a task to + fire a simple event named load at the + element.

    -

    1. The user agent should cancel the fetching process.

    2. Abort this subalgorithm, returning to the resource selection algorithm.

      +
    - +

  • If the data attribute is absent but the type attribute is present, and the user agent can find a + plugin suitable according to the value of the type attribute, and either plugins aren't being sandboxed or the plugin can be + secured, then that plugin should be used. If these conditions cannot be met, or if the + plugin reports an error, jump to the step below labeled fallback. Otherwise + abort these steps; once the plugin is completely loaded, queue a task to fire + a simple event named load at the element.

  • Fallback: The object element represents the element's + children, ignoring any leading param element children. This is the element's + fallback content. If the element has an instantiated plugin, then + unload it. -

    If the media resource is found to have an audio - track
    +

    When the algorithm above instantiates a plugin, the user agent + should pass to the plugin used the names and values of all the attributes on the + element, in the order they were added to the element, with the attributes added by the parser + being ordered in source order, followed by a parameter named "PARAM" whose value is null, followed + by all the names and values of parameters given by + param elements that are children of the object element, in tree + order. If the plugin supports a scriptable interface, the + HTMLObjectElement object representing the element should expose that interface. The + object element represents the plugin. The + plugin is not a nested browsing context.

    -

    1. Create an AudioTrack object to represent the audio track.

    2. Update the media element's audioTracks attribute's AudioTrackList - object with the new AudioTrack object.

    3. Let enable be unknown.

    4. +

      Plugins are considered sandboxed for the purpose of an + object element if the sandboxed plugins browsing context flag is set on + the object element's Document's active sandboxing flag + set.

      -

      If either the media resource or the address of the current - media resource indicate a particular set of audio tracks to enable, or if the user - agent has information that would facilitate the selection of specific audio tracks to - improve the user's experience, then: if this audio track is one of the ones to enable, then - set enable to true, otherwise, set enable - to false.

      +

      Due to the algorithm above, the contents of object elements act as fallback + content, used only when referenced resources can't be shown (e.g. because it returned a 404 + error). This allows multiple object elements to be nested inside each other, + targeting multiple user agents with different capabilities, with the user agent picking the first + one it supports.

      -

      This could be triggered by Media Fragments URI fragment - identifier syntax, but it could also be triggered e.g. by the user agent selecting a 5.1 - surround sound audio track over a stereo audio track. [MEDIAFRAG]

      +

      When an object element represents a nested browsing context: if the + object element's nested browsing context's active document + is not ready for post-load tasks, and when anything is delaying the load event of the object element's browsing + context's active document, and when the object element's + browsing context is in the delaying load + events mode, the object must delay the load event of its + document.

      -

    5. If enable is still unknown, then, if the media - element does not yet have an enabled - audio track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then enable this audio track, - otherwise, do not enable this audio track.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, - and that uses the TrackEvent interface, with the track attribute initialised to the new - AudioTrack object, at this AudioTrackList object.

    +

    The task source for the tasks mentioned in this + section is the DOM manipulation task source.

    -
    If the media resource is found to have a video - track
    +

    Whenever the name attribute is set, if the + object element has a nested browsing context, its name must be changed to the new value. If the attribute is removed, if the + object element has a browsing context, the browsing context + name must be set to the empty string.

    -

    1. Create a VideoTrack object to represent the video track.

    2. Update the media element's videoTracks attribute's VideoTrackList - object with the new VideoTrack object.

    3. Let enable be unknown.

    4. + -

      If either the media resource or the address of the current - media resource indicate a particular set of video tracks to enable, or if the user - agent has information that would facilitate the selection of specific video tracks to - improve the user's experience, then: if this video track is the first such video track, then - set enable to true, otherwise, set enable - to false.

      +

      The usemap attribute, if present while the + object element represents an image, can indicate that the object has an associated + image map. The attribute must be ignored if the + object element doesn't represent an image.

      -

      This could again be triggered by Media Fragments URI - fragment identifier syntax.

      +

      The form attribute is used to explicitly associate the + object element with its form owner.

      -

    5. If enable is still unknown, then, if the media - element does not yet have a selected - video track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then select this track and unselect any - previously selected video tracks, otherwise, do not select this video track. If other tracks - are unselected, then a change event will be fired.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, - and that uses the TrackEvent interface, with the track attribute initialised to the new - VideoTrack object, at this VideoTrackList object.

    + -
    Once enough of the media data has been fetched to - determine the duration of the media resource, its dimensions, and other - metadata
    +

    Constraint validation: object elements are always barred + from constraint validation.

    -

    This indicates that the resource is usable. The user agent must follow these substeps:

    + -
    1. +

      The object element supports dimension attributes.

      -

      Establish the media timeline for the purposes of the current playback - position, the earliest possible position, and the initial playback - position, based on the media data.

      + -
    2. +

      The IDL attributes data, type and name each must reflect the respective + content attributes of the same name. The typeMustMatch IDL attribute must + reflect the typemustmatch content + attribute. The useMap IDL attribute must + reflect the usemap content attribute.

      -

      Update the timeline offset to the date and time that corresponds to the zero - time in the media timeline established in the previous step, if any. If no - explicit time and date is given by the media resource, the timeline - offset must be set to Not-a-Number (NaN).

      +

      The contentDocument IDL attribute + must return the Document object of the active document of the + object element's nested browsing context, if any and if its + effective script origin is the same origin as the effective script + origin specified by the incumbent settings object, or null otherwise.

      -

    3. Set the current playback position and the official playback - position to the earliest possible position.

    4. +

      The contentWindow IDL attribute must + return the WindowProxy object of the object element's nested + browsing context, if it has one; otherwise, it must return null.

      -

      Update the duration attribute with the time of - the last frame of the resource, if known, on the media timeline established - above. If it is not known (e.g. a stream that is in principle infinite), update the duration attribute to the value positive Infinity.

      +

      The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the + constraint validation API. The form IDL attribute + is part of the element's forms API.

      -

      The user agent will queue a task - to fire a simple event named durationchange at the element at this point.

      +

      All object elements have a legacy caller + operation. If the object element has an instantiated plugin that + supports a scriptable interface that defines a legacy caller operation, then that must be the + behavior of the object's legacy caller operation. Otherwise, the object's legacy caller operation + must be to throw a NotSupportedError exception.

      -
    5. + -

      For video elements, set the videoWidth and videoHeight attributes, and queue a task - to fire a simple event named resize at - the media element.

      +
      -

      Further resize events will be fired - if the dimensions subsequently change.

      +

      In the following example, a Java applet is embedded in a page using the object + element. (Generally speaking, it is better to avoid using applets like these and instead use + native JavaScript and HTML to provide the functionality, since that way the application will work + on all Web browsers without requiring a third-party plugin. Many devices, especially embedded + devices, do not support third-party technologies like Java.)

      -
    6. + 
      <figure>
+ <object type="application/x-java-applet">
+  <param name="code" value="MyJavaClass">
+  <p>You do not have Java available, or it is disabled.</p>
+ </object>
+ <figcaption>My Java Clock</figcaption>
+</figure>
      -

      Set the readyState attribute to HAVE_METADATA.

      + -

      A loadedmetadata DOM event - will be fired as part of setting the readyState attribute to a new value.

      +
      - +

      In this example, an HTML page is embedded in another using the object + element.

      -

    7. Let jumped be false.

    8. If the media element's default playback start position is - greater than zero, then seek to that time, and let jumped be true.

    9. Let the media element's default playback - start position be zero.

    10. + 
      <figure>
+ <object data="clock.html"></object>
+ <figcaption>My HTML Clock</figcaption>
+</figure>
      -

      If either the media resource or the address of the current - media resource indicate a particular start time, then set the initial playback - position to that time and, if jumped is still false, seek to that time and let jumped be - true.

      + -

      For example, with media formats that support the Media Fragments - URI fragment identifier syntax, the fragment identifier can be used to indicate a - start position. [MEDIAFRAG]

      +
      -

    11. If there is no enabled audio track, then - enable an audio track. This will cause a change event to be fired.

    12. If there is no selected video track, - then select a video track. This will cause a change event to be fired.

    13. If the media element has a current media controller, then: - if jumped is true and the initial playback position, - relative to the current media controller's timeline, is greater than the - current media controller's media controller position, then - seek the media controller to the media element's initial - playback position, relative to the current media controller's timeline; - otherwise, seek the media element to the - media controller position, relative to the media element's - timeline.

    +

    The following example shows how a plugin can be used in HTML (in this case the Flash plugin, + to show a video file). Fallback is provided for users who do not have Flash enabled, in this case + using the video element to show the video for those using user agents that support + video, and finally providing a link to the video for those who have neither Flash + nor a video-capable browser.

    -

    Once the readyState attribute reaches HAVE_CURRENT_DATA, after - the loadeddata event has been fired, set the - element's delaying-the-load-event flag to false. This stops delaying the load event.

    + 
    <p>Look at my video:
+ <object type="application/x-shockwave-flash">
+  <param name=movie value="http://video.example.com/library/watch.swf">
+  <param name=allowfullscreen value=true>
+  <param name=flashvars value="http://video.example.com/vids/315981">
+  <video controls src="http://video.example.com/vids/315981">
+   <a href="http://video.example.com/vids/315981">View video</a>.
+  </video>
+ </object>
+</p>
    -

    A user agent that is attempting to reduce network usage while still fetching - the metadata for each media resource would also stop buffering at this point, - following the rules described previously, which involve the - networkState attribute switching to the NETWORK_IDLE value and a suspend event firing.

    + -

    The user agent is required to determine the duration of the - media resource and go through this step before playing.

    -
    Once the entire media resource has been fetched - (but potentially before any of it has been decoded)
    -

    Fire a simple event named progress - at the media element.

    +

    4.8.9 The param element

    -

    Set the networkState to NETWORK_IDLE and fire a simple event named - suspend at the media element.

    +
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of an object element, before any flow content.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    name — Name of parameter
    value — Value of parameter
    DOM interface:
    +
    interface HTMLParamElement : HTMLElement {
+           attribute DOMString name;
+           attribute DOMString value;
 
-      
    If the user agent ever discards any media data and then needs to resume the
-      network activity to obtain it again, then it must queue a task to set the networkState to NETWORK_LOADING.
    
+  // also has obsolete members
+};
    +
    -

    If the user agent can keep the media resource loaded, then the - algorithm will continue to its final step below, which aborts the algorithm.

    +

    The param element defines parameters for plugins invoked by object + elements. It does not represent anything on its own.

    -
    If the connection is interrupted after some media data has been received, - causing the user agent to give up trying to fetch the resource
    +

    The name attribute gives the name of the + parameter.

    -

    Fatal network errors that occur after the user agent has established whether the current media resource is usable (i.e. once the media element's - readyState attribute is no longer HAVE_NOTHING) must cause the user agent to execute the - following steps:

    +

    The value attribute gives the value of the + parameter.

    -

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_NETWORK.

    3. Fire a simple event named error at - the media element.

    4. Set the element's networkState attribute - to the NETWORK_IDLE value.

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection - algorithm.

    +

    Both attributes must be present. They may have any value.

    -
    If the media data is corrupted
    + -

    Fatal errors in decoding the media data that occur after the user agent has - established whether the current media resource is usable must cause the - user agent to execute the following steps:

    +

    If both attributes are present, and if the parent element of the param is an + object element, then the element defines a parameter with the given name-value pair.

    -

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_DECODE.

    3. Fire a simple event named error at - the media element.

    4. +

      If either the name or value of a parameter defined + by a param element that is the child of an object element that + represents an instantiated plugin changes, and if that + plugin is communicating with the user agent using an API that features the ability to + update the plugin when the name or value of a parameter so changes, then the user agent must + appropriately exercise that ability to notify the plugin of the change.

      -

      If the media element's readyState - attribute has a value equal to HAVE_NOTHING, set - the element's networkState attribute to the - NETWORK_EMPTY value, set the element's - show poster flag to true, and fire a simple event named emptied at the element.

      +

      The IDL attributes name and value must both reflect the respective + content attributes of the same name.

      -

      Otherwise, set the element's networkState - attribute to the NETWORK_IDLE value.

      + -

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection - algorithm.

    +
    -
    If the media data fetching process is aborted by the user
    +

    The following example shows how the param element can be used to pass a parameter + to a plugin, in this case the O3D plugin.

    -

    The fetching process is aborted by the user, e.g. because the user - pressed a "stop" button, the user agent must execute the following steps. These steps are not - followed if the load() method itself is invoked while - these steps are running, as the steps above handle that particular kind of abort.

    + 
    <!DOCTYPE HTML>
+<html lang="en">
+  <head>
+   <title>O3D Utah Teapot</title>
+  </head>
+  <body>
+   <p>
+    <object type="application/vnd.o3d.auto">
+     <param name="o3d_features" value="FloatingPointTextures">
+     <img src="o3d-teapot.png"
+          title="3D Utah Teapot illustration rendered using O3D."
+          alt="When O3D renders the Utah Teapot, it appears as a squat
+          teapot with a shiny metallic finish on which the
+          surroundings are reflected, with a faint shadow caused by
+          the lighting.">
+     <p>To see the teapot actually rendered by O3D on your
+     computer, please download and install the <a
+     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
+    </object>
+    <script src="o3d-teapot.js"></script>
+   </p>
+  </body>
+</html>
    -

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_ABORTED.

    3. Fire a simple event named abort at - the media element.

    4. + -

      If the media element's readyState - attribute has a value equal to HAVE_NOTHING, set - the element's networkState attribute to the - NETWORK_EMPTY value, set the element's - show poster flag to true, and fire a simple event named emptied at the element.

      -

      Otherwise, set the element's networkState - attribute to the NETWORK_IDLE value.

      -

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection - algorithm.

    +

    4.8.10 The video element

    -
    If the media data can be fetched but has non-fatal - errors or uses, in part, codecs that are unsupported, preventing the user agent from rendering - the content completely correctly but not preventing playback altogether
    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a controls attribute: Interactive content.
    Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    If the element has a src attribute: + zero or more track elements, then + transparent, but with no media element descendants.
    If the element does not have a src attribute: zero or more source elements, then + zero or more track elements, then + transparent, but with no media element descendants.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    crossorigin — How the element handles crossorigin requests
    poster — Poster frame to show prior to video playback
    preload — Hints how much buffering the media resource will likely need
    autoplay — Hint that the media resource can be started automatically when the page is loaded
    mediagroup — Groups media elements together with an implicit MediaController
    loop — Whether to loop the media resource
    muted — Whether to mute the media resource by default
    controls — Show user agent controls
    width — Horizontal dimension
    height — Vertical dimension
    DOM interface:
    + 
    interface HTMLVideoElement : HTMLMediaElement {
+           attribute unsigned long width;
+           attribute unsigned long height;
+  readonly attribute unsigned long videoWidth;
+  readonly attribute unsigned long videoHeight;
+           attribute DOMString poster;
+};
    +
    -

    The server returning data that is partially usable but cannot be optimally rendered must - cause the user agent to render just the bits it can handle, and ignore the rest.

    +

    A video element is used for playing videos or movies, and audio files with + captions.

    - +

    Content may be provided inside the video element. User agents + should not show this content to the user; it is intended for older Web browsers which do + not support video, so that legacy video plugins can be tried, or to show text to the + users of these older browsers informing them of how to access the video contents.

    -
    If the media resource is - found to declare a media-resource-specific text track that the user agent - supports
    +

    In particular, this content is not intended to address accessibility concerns. To + make video content accessible to the partially sighted, the blind, the hard-of-hearing, the deaf, + and those with other physical or cognitive disabilities, a variety of features are available. + Captions can be provided, either embedded in the video stream or as external files using the + track element. Sign-language tracks can be provided, again either embedded in the + video stream or by synchronizing multiple video elements using the mediagroup attribute or a MediaController + object. Audio descriptions can be provided, either as a separate track embedded in the video + stream, or a separate audio track in an audio element slaved to the same controller as the video element(s), or in text + form using a WebVTT file referenced using the track element and + synthesized into speech by the user agent. WebVTT can also be used to provide chapter titles. For + users who would rather not use a media element at all, transcripts or other textual alternatives + can be provided by simply linking to them in the prose near the video element. [WEBVTT]

    -

    If the media data is CORS-same-origin, run the steps to - expose a media-resource-specific text track with the relevant data.

    +

    The video element is a media element whose media data is + ostensibly video data, possibly with associated audio data.

    -

    Cross-origin videos do not expose their subtitles, since that would allow - attacks such as hostile sites reading subtitles from confidential videos on a user's - intranet.

    +

    The src, preload, + autoplay, mediagroup, loop, muted, and controls + attributes are the attributes common to all media + elements.

    -
    • +

    The poster attribute gives the address of an + image file that the user agent can show while no video data is available. The attribute, if + present, must contain a valid non-empty URL potentially surrounded by spaces.

    -

    When the networking task source has queued the - last task as part of fetching the - media resource (i.e. once the download has completed), if the fetching process - completes without errors, including decoding the media data, and if all of the data is available - to the user agent without network access, then, the user agent must move on to the next step. - This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the - resource is longer than the user agent's ability to cache data.

    + -

    While the user agent might still need network access to obtain parts of the media - resource, the user agent must remain on this step.

    +

    If the specified resource is to be used, then, when the element is created or when the poster attribute is set, changed, or removed, the user agent must + run the following steps to determine the element's poster frame (regardless of the + value of the element's show poster flag):

    -

    For example, if the user agent has discarded the first half of a video, the - user agent will remain at this step even once the playback has - ended, because there is always the chance the user will seek back to the start. In fact, - in this situation, once playback has ended, the user agent - will end up firing a suspend event, as described - earlier.

    +

    1. If there is an existing instance of this algorithm running for this video + element, abort that instance of this algorithm without changing the poster + frame.

    2. If the poster attribute's value is the empty string + or if the attribute is absent, then there is no poster frame; abort these + steps.

    3. Resolve the poster attribute's value relative to the element. If this fails, + then there is no poster frame; abort these steps.

    4. Fetch the resulting absolute URL, from the element's + Document's origin. This must delay the load event of the + element's document.

    5. If an image is thus obtained, the poster frame is that image. Otherwise, + there is no poster frame.

    -

  • If the user agent ever reaches this step (which can only happen if the entire resource - gets loaded and kept available): abort the overall resource selection algorithm. + -

    When a media element is to forget the media element's media-resource-specific - tracks, the user agent must remove from the media element's list of text - tracks all the media-resource-specific - text tracks, then empty the media element's audioTracks attribute's AudioTrackList object, - then empty the media element's videoTracks - attribute's VideoTrackList object. No events (in particular, no removetrack events) are fired as part of this; the error and emptied - events, fired by the algorithms that invoke this one, can be used instead.

    +

    The image given by the poster attribute, + the poster frame, is intended to be a representative frame of the + video (typically one of the first non-blank frames) that gives the user an idea of what the video + is like.

    -

    The preload attribute is an enumerated - attribute. The following table lists the keywords and states for the attribute — the - keywords in the left column map to the states in the cell in the second column on the same row as - the keyword. The attribute can be changed even once the media resource is being - buffered or played; the descriptions in the table below are to be interpreted with that in - mind.

    +

    A video element represents what is given for the first matching condition in the + list below:

    -
    Keyword - State - Brief description -
    none - None - Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic. - This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play"). -
    metadata - Metadata - Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, track list, duration, etc), and maybe even the first few frames, is reasonable. If the user agent precisely fetches no more than the metadata, then the media element will end up with its readyState attribute set to HAVE_METADATA; typically though, some frames will be obtained as well and it will probably be HAVE_CURRENT_DATA or HAVE_FUTURE_DATA. - When the media resource is playing, hints to the user agent that bandwidth is to be considered scarce, e.g. suggesting throttling the download so that the media data is obtained at the slowest possible rate that still maintains consistent playback. -
    auto - Automatic - Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource. -
    +
    When no video data is available (the element's readyState attribute is either HAVE_NOTHING, or HAVE_METADATA but no video data has yet been obtained at + all, or the element's readyState attribute is any + subsequent value but the media resource does not have a video channel)
    The video element represents its poster frame, if any, + or else transparent black with no intrinsic dimensions.
    When the video element is paused, the current playback position is the first frame of video, + and the element's show poster flag is set
    The video element represents its poster frame, if any, + or else the first frame of the video.
    When the video element is paused, and the + frame of video corresponding to the current playback + position is not available (e.g. because the video is seeking or buffering)
    When the video element is neither potentially playing nor paused (e.g. when seeking or stalled)
    The video element represents the last frame of the video to have + been rendered.
    When the video element is paused
    The video element represents the frame of video corresponding to + the current playback position.
    Otherwise (the video element has a video channel and is potentially + playing)
    The video element represents the frame of video at the continuously + increasing "current" position. When the + current playback position changes such that the last frame rendered is no longer the + frame corresponding to the current playback position in the video, the new frame + must be rendered.
    -

    The empty string is also a valid keyword, and maps to the Automatic state. The attribute's missing value default is user-agent defined, though the Metadata state is suggested as a compromise - between reducing server load and providing an optimal user experience.

    +

    Frames of video must be obtained from the video track that was selected when the event loop last reached + step 1.

    -

    Authors might switch the attribute from "none" or "metadata" to "auto" dynamically once the user begins playback. For - example, on a page with many videos this might be used to indicate that the many videos are not to - be downloaded unless requested, but that once one is requested it is to be downloaded - aggressively.

    +

    Which frame in a video stream corresponds to a particular playback position is + defined by the video stream's format.

    - +

    The video element also represents any text track cues whose text track cue active flag is set and whose + text track is in the showing mode, and any + audio from the media resource, at the current playback position.

    -

    The preload attribute is intended to provide a hint to - the user agent about what the author thinks will lead to the best user experience. The attribute - may be ignored altogether, for example based on explicit user preferences or based on the - available connectivity.

    +

    Any audio associated with the media resource must, if played, be played + synchronised with the current playback position, at the element's effective + media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step + 1.

    -

    The preload IDL attribute must - reflect the content attribute of the same name, limited to only known - values.

    +

    In addition to the above, the user agent may provide messages to the user (such as "buffering", + "no video loaded", "error", or more detailed information) by overlaying text or icons on the video + or other areas of the element's playback area, or in another appropriate manner.

    - +

    User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video + data itself.

    -

    The autoplay attribute can override the - preload attribute (since if the media plays, it naturally - has to buffer first, regardless of the hint given by the preload attribute). Including both is not an error, however.

    +

    When a video element's media resource has a video channel, the + element provides a paint source whose width is the media resource's + intrinsic width, whose height is the + media resource's intrinsic + height, and whose appearance is the frame of video corresponding to the current playback position, if that is available, or else + (e.g. when the video is seeking or buffering) its previous appearance, if any, or else (e.g. + because the video is still loading the first frame) blackness.

    + +
    video . videoWidth
    video . videoHeight
    -
    media . buffered
    - -

    Returns a TimeRanges object that represents the ranges of the media - resource that the user agent has buffered.

    +

    These attributes return the intrinsic dimensions of the video, + or zero if the dimensions are not known.

    -

    The buffered attribute must return a new - static normalised TimeRanges object that represents the ranges of the - media resource, if any, that the user agent has buffered, at the time the attribute - is evaluated. Users agents must accurately determine the ranges available, even for media streams - where this can only be determined by tedious inspection.

    - -

    Typically this will be a single range anchored at the zero point, but if, e.g. the - user agent uses HTTP range requests in response to seeking, then there could be multiple - ranges.

    +

    The intrinsic width and intrinsic height of the media resource + are the dimensions of the resource in CSS pixels after taking into account the resource's + dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used + by the resource. If an anamorphic format does not define how to apply the aspect ratio to the + video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the + ratio by increasing one dimension and leaving the other unchanged.

    -

    User agents may discard previously buffered data.

    +

    The videoWidth IDL attribute must return + the intrinsic width of the video in CSS pixels. + The videoHeight IDL attribute must return + the intrinsic height of the video in CSS + pixels. If the element's readyState attribute is HAVE_NOTHING, then the attributes must return 0.

    -

    Thus, a time position included within a range of the objects return by the buffered attribute at one time can end up being not included in - the range(s) of objects returned by the same attribute at later times.

    +

    Whenever the intrinsic width + or intrinsic height of the video changes + (including, for example, because the selected video + track was changed), if the element's readyState + attribute is not HAVE_NOTHING, the user agent must + queue a task to fire a simple event named resize at the media element.

    +

    The video element supports dimension attributes.

    + -
    4.7.14.6 Offsets into the media resource
    +

    In the absence of style rules to the contrary, video content should be rendered inside the + element's playback area such that the video content is shown centered in the playback area at the + largest possible size that fits completely within it, with the video content's aspect ratio being + preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the + video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area + that do not contain the video represent nothing.

    -
    media . duration
    +

    In user agents that implement CSS, the above requirement can be implemented by + using the style rule suggested in the rendering section.

    -

    Returns the length of the media resource, in seconds, assuming that the start of - the media resource is at time zero.

    +

    The intrinsic width of a video element's playback area is the intrinsic width of + the poster frame, if that is available and the element currently + represents its poster frame; otherwise, it is the intrinsic width of the video resource, if that is + available; otherwise the intrinsic width is missing.

    -

    Returns NaN if the duration isn't available.

    +

    The intrinsic height of a video element's playback area is the intrinsic height of + the poster frame, if that is available and the element currently + represents its poster frame; otherwise it is the intrinsic height of the video resource, if that is + available; otherwise the intrinsic height is missing.

    -

    Returns Infinity for unbounded streams.

    +

    The default object size is a width of 300 CSS pixels and a height of 150 CSS + pixels. [CSSIMAGES]

    -
    media . currentTime [ = value ]
    +
    -

    Returns the official playback position, in seconds.

    +

    User agents should provide controls to enable or disable the display of closed captions, audio + description tracks, and other additional data associated with the video stream, though such + features should, again, not interfere with the page's normal rendering.

    -

    Can be set, to seek to the given time.

    +

    User agents may allow users to view the video content in manners more suitable to the user + (e.g. full-screen or in an independent resizable window). As for the other user interface + features, controls to enable this should not interfere with the page's normal rendering unless the + user agent is exposing a user interface. + In such an independent context, however, user agents may make full user interfaces visible, with, + e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

    -

    Will throw an InvalidStateError exception if there is no selected media - resource or if there is a current media controller.

    +

    User agents may allow video playback to affect system features that could interfere with the + user's experience; for example, user agents could disable screensavers while video playback is in + progress.

    -
    +
    + +

    The poster IDL attribute must + reflect the poster content attribute.

    -

    A media resource has a media timeline that maps times (in seconds) to - positions in the media resource. The origin of a timeline is its earliest defined - position. The duration of a timeline is its last defined position.

    +
    -

    Establishing the media - timeline: If the media resource somehow specifies an explicit timeline whose - origin is not negative (i.e. gives each frame a specific time offset and gives the first frame a - zero or positive offset), then the media timeline should be that timeline. (Whether - the media resource can specify a timeline or not depends on the media resource's format.) If the media resource specifies an - explicit start time and date, then that time and date should be considered the zero point - in the media timeline; the timeline offset will be the time and date, - exposed using the getStartDate() method.

    +

    This example shows how to detect when a video has failed to play correctly:

    -

    If the media resource has a discontinuous timeline, the user agent must extend the - timeline used at the start of the resource across the entire resource, so that the media - timeline of the media resource increases linearly starting from the - earliest possible position (as defined below), even if the underlying media - data has out-of-order or even overlapping time codes.

    + 
    <script>
+ function failed(e) {
+   // video playback failed - show a message saying why
+   switch (e.target.error.code) {
+     case e.target.error.MEDIA_ERR_ABORTED:
+       alert('You aborted the video playback.');
+       break;
+     case e.target.error.MEDIA_ERR_NETWORK:
+       alert('A network error caused the video download to fail part-way.');
+       break;
+     case e.target.error.MEDIA_ERR_DECODE:
+       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
+       break;
+     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
+       break;
+     default:
+       alert('An unknown error occurred.');
+       break;
+   }
+ }
+</script>
+<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
+<p><a href="tgif.vid">Download the video file</a>.</p>
    -

    For example, if two clips have been concatenated into one video file, but the - video format exposes the original times for the two clips, the video data might expose a timeline - that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those - times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.

    +
    -

    In the rare case of a media resource that does not have an explicit timeline, the - zero time on the media timeline should correspond to the first frame of the - media resource. In the even rarer case of a media resource with no - explicit timings of any kind, not even frame durations, the user agent must itself determine the - time for each frame in a user-agent-defined manner. - (This is a fingerprinting vector.) -

    -

    An example of a file format with no explicit timeline but with explicit frame - durations is the Animated GIF format. An example of a file format with no explicit timings at all - is the JPEG-push format (multipart/x-mixed-replace with JPEG frames, often - used as the format for MJPEG streams).

    -

    If, in the case of a resource with no timing information, the user agent will nonetheless be - able to seek to an earlier point than the first frame originally provided by the server, then the - zero time should correspond to the earliest seekable time of the media resource; - otherwise, it should correspond to the first frame received from the server (the point in the - media resource at which the user agent began receiving the stream).

    -

    At the time of writing, there is no known format that lacks explicit frame time - offsets yet still supports seeking to a frame before the first frame sent by the server.

    + -
    -

    Consider a stream from a TV broadcaster, which begins streaming on a sunny Friday afternoon in - October, and always sends connecting user agents the media data on the same media timeline, with - its zero time set to the start of this stream. Months later, user agents connecting to this - stream will find that the first frame they receive has a time with millions of seconds. The getStartDate() method would always return the date that the - broadcast started; this would allow controllers to display real times in their scrubber (e.g. - "2:30pm") rather than a time relative to when the broadcast began ("8 months, 4 hours, 12 - minutes, and 23 seconds").

    -

    Consider a stream that carries a video with several concatenated fragments, broadcast by a - server that does not allow user agents to request specific times but instead just streams the - video data in a predetermined order, with the first frame delivered always being identified as - the frame with time zero. If a user agent connects to this stream and receives fragments defined - as covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 - UTC to 2010-02-12 14:35:00 UTC, it would expose this with a media timeline starting - at 0s and extending to 3,600s (one hour). Assuming the streaming server disconnected at the end - of the second clip, the duration attribute would then - return 3,600. The getStartDate() method would return a - Date object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a - different user agent connected five minutes later, it would (presumably) receive - fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 - 14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a media timeline - starting at 0s and extending to 3,300s (fifty five minutes). In this case, the getStartDate() method would return a Date object - with a time corresponding to 2010-03-20 23:20:00 UTC.

    -

    In both of these examples, the seekable attribute - would give the ranges that the controller would want to actually display in its UI; typically, if - the servers don't support seeking to arbitrary times, this would be the range of time from the - moment the user agent connected to the stream up to the latest frame that the user agent has - obtained; however, if the user agent starts discarding earlier information, the actual range - might be shorter.

    -
    +

    4.8.11 The audio element

    -

    In any case, the user agent must ensure that the earliest possible position (as - defined below) using the established media timeline, is greater than or equal to - zero.

    +
    Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a controls attribute: Interactive content.
    If the element has a controls attribute: Palpable content.
    Contexts in which this element can be used:
    Where embedded content is expected.
    Content model:
    If the element has a src attribute: +zero or more track elements, then +transparent, but with no media element descendants.
    If the element does not have a src attribute: zero or more source elements, then + zero or more track elements, then + transparent, but with no media element descendants.
    Tag omission in text/html:
    Neither tag is omissible.
    Content attributes:
    Global attributes
    src — Address of the resource
    crossorigin — How the element handles crossorigin requests
    preload — Hints how much buffering the media resource will likely need
    autoplay — Hint that the media resource can be started automatically when the page is loaded
    mediagroup — Groups media elements together with an implicit MediaController
    loop — Whether to loop the media resource
    muted — Whether to mute the media resource by default
    controls — Show user agent controls
    DOM interface:
    + 
    [NamedConstructor=Audio(optional DOMString src)]
+interface HTMLAudioElement : HTMLMediaElement {};
    +
    -

    The media timeline also has an associated clock. Which clock is used is user-agent - defined, and may be media resource-dependent, but it should approximate the user's - wall clock.

    +

    An audio element represents a sound or audio stream.

    -

    All the media elements that share current - media controller use the same clock for their media timeline.

    + -

    Media elements have a current playback position, - which must initially (i.e. in the absence of media data) be zero seconds. The - current playback position is a time on the media timeline.

    +

    Content may be provided inside the audio element. User agents + should not show this content to the user; it is intended for older Web browsers which do + not support audio, so that legacy audio plugins can be tried, or to show text to the + users of these older browsers informing them of how to access the audio contents.

    -

    Media elements also have an official playback - position, which must initially be set to zero seconds. The official playback - position is an approximation of the current playback position that is kept - stable while scripts are running.

    +

    In particular, this content is not intended to address accessibility concerns. To + make audio content accessible to the deaf or to those with other physical or cognitive + disabilities, a variety of features are available. If captions or a sign language video are + available, the video element can be used instead of the audio element to + play the audio, allowing users to enable the visual alternatives. Chapter titles can be provided + to aid navigation, using the track element and a WebVTT file. And, + naturally, transcripts or other textual alternatives can be provided by simply linking to them in + the prose near the audio element. [WEBVTT]

    -

    Media elements also have a default playback start - position, which must initially be set to zero seconds. This time is used to allow the - element to be seeked even before the media is loaded.

    +

    The audio element is a media element whose media data is + ostensibly audio data.

    -

    Each media element has a show poster flag. When a media - element is created, this flag must be set to true. This flag is used to control when the - user agent is to show a poster frame for a video element instead of showing the video - contents.

    +

    The src, preload, + autoplay, mediagroup, loop, muted, and controls + attributes are the attributes common to all media + elements.

    -

    The currentTime attribute must, on - getting, return the media element's default playback start position, - unless that is zero, in which case it must return the element's official playback - position. The returned value must be expressed in seconds. On setting, if the media - element has a current media controller, then the user agent must throw an - InvalidStateError exception; otherwise, if the media element's readyState is HAVE_NOTHING, then it must set the media - element's default playback start position to the new value; otherwise, it must - set the official playback position to the new value and then seek to the new value. The new value must be interpreted as being in - seconds.

    + + +

    When an audio element is potentially playing, it must have its audio + data played synchronised with the current playback position, at the element's + effective media volume. The user agent must play the audio from audio tracks that + were enabled when the event loop last reached step 1.

    + +

    When an audio element is not potentially playing, audio must not play + for the element.

    + + -

    Media elements have an initial playback position, - which must initially (i.e. in the absence of media data) be zero seconds. The - initial playback position is updated when a media resource is loaded. - The initial playback position is a time on the media timeline.

    +
    audio = new Audio( [ url ] )
    -

    If the media resource is a streaming resource, then the user agent might be unable - to obtain certain parts of the resource after it has expired from its buffer. Similarly, some - media resources might have a media timeline that - doesn't start at zero. The earliest possible position is the earliest position in the - stream or resource that the user agent can ever obtain again. It is also a time on the media - timeline.

    +

    Returns a new audio element, with the src + attribute set to the value passed in the argument, if applicable.

    -

    The earliest possible position is not explicitly exposed in the API; - it corresponds to the start time of the first range in the seekable attribute's TimeRanges object, if any, or - the current playback position otherwise.

    +
    -

    When the earliest possible position changes, then: if the current playback - position is before the earliest possible position, the user agent must seek to the earliest possible position; otherwise, if - the user agent has not fired a timeupdate event at the - element in the past 15 to 250ms and is not still running event handlers for such an event, then - the user agent must queue a task to fire a simple event named timeupdate at the element.

    + -

    Because of the above requirement and the requirement in the resource fetch algorithm that kicks in when the metadata of the clip becomes known, the current - playback position can never be less than the earliest possible position.

    +

    A constructor is provided for creating HTMLAudioElement objects (in addition to + the factory methods from DOM such as createElement()): Audio(src). When invoked as a + constructor, it must return a new HTMLAudioElement object (a new audio + element). The element must be created with its preload + attribute set to the literal value "auto". If the + src argument is present, the object created must be created with its src content attribute set to the provided value (this will cause the user agent to invoke the object's + resource selection algorithm before returning). + The element's document must be the active document of the browsing + context of the Window object on which the interface object of the invoked + constructor is found.

    + + + -

    If at any time the user agent learns that an audio or video track has ended and all media - data relating to that track corresponds to parts of the media timeline that - are before the earliest possible position, the user agent may queue a - task to first remove the track from the audioTracks - attribute's AudioTrackList object or the videoTracks attribute's VideoTrackList object as - appropriate and then fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that - uses the TrackEvent interface, with the track attribute initialised to the AudioTrack or - VideoTrack object representing the track, at the media element's - aforementioned AudioTrackList or VideoTrackList object.

    -

    The duration attribute must return the time - of the end of the media resource, in seconds, on the media timeline. If - no media data is available, then the attributes must return the Not-a-Number (NaN) - value. If the media resource is not known to be bounded (e.g. streaming radio, or a - live event with no announced end time), then the attribute must return the positive Infinity - value.

    -

    The user agent must determine the duration of the media resource before playing - any part of the media data and before setting readyState to a value equal to or greater than HAVE_METADATA, even if doing so requires fetching multiple - parts of the resource.

    +

    4.8.12 The source element

    -

    When the length of the media resource changes to a known value - (e.g. from being unknown to known, or from a previously established length to a new length) the - user agent must queue a task to fire a simple event named durationchange at the media element. (The - event is not fired when the duration is reset as part of loading a new media resource.) If the - duration is changed such that the current playback position ends up being greater - than the time of the end of the media resource, then the user agent must also seek to the time of the end of the media resource.

    +
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of a media element, before any flow content + or track elements.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    src — Address of the resource
    type — Type of embedded resource
    DOM interface:
    +
    interface HTMLSourceElement : HTMLElement {
+           attribute DOMString src;
+           attribute DOMString type;
 
-  
    If an "infinite" stream ends for some reason, then the duration would change
-  from positive Infinity to the time of the last frame or sample in the stream, and the durationchange event would be fired. Similarly, if the
-  user agent initially estimated the media resource's duration instead of determining
-  it precisely, and later revises the estimate based on new information, then the duration would
-  change and the durationchange event would be
-  fired.
    
+  // also has obsolete members
+};
    +
    -

    Some video files also have an explicit date and time corresponding to the zero time in the - media timeline, known as the timeline offset. Initially, the - timeline offset must be set to Not-a-Number (NaN).

    +

    The source element allows authors to specify multiple alternative media resources for media + elements. It does not represent anything on its own.

    -

    The getStartDate() method must return a new Date object representing the current - timeline offset.

    +

    The src attribute gives the address of the + media resource. The value must be a valid non-empty URL potentially surrounded + by spaces. This attribute must be present.

    - +

    Dynamically modifying a source element and its attribute when the + element is already inserted in a video or audio element will have no + effect. To change what is playing, just use the src attribute + on the media element directly, possibly making use of the canPlayType() method to pick from amongst available + resources. Generally, manipulating source elements manually after the document has + been parsed is an unnecessarily complicated approach.

    -
    +

    The type attribute gives the type of the + media resource, to help the user agent determine if it can play this media + resource before fetching it. If specified, its value must be a valid MIME + type. The codecs parameter, which certain MIME types define, might be + necessary to specify exactly how the resource is encoded. [RFC4281]

    -

    The loop attribute is a boolean - attribute that, if specified, indicates that the media element is to seek back - to the start of the media resource upon reaching the end.

    +
    -

    The loop attribute has no effect while the element has a - current media controller.

    +

    The following list shows some examples of how to use the codecs= MIME + parameter in the type attribute.

    - +
    H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
    H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
    MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
    MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
    MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
    <source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
    Theora video and Vorbis audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
    Theora video and Speex audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
    Vorbis audio alone in Ogg container
    <source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
    Speex audio alone in Ogg container
    <source src='audio.spx' type='audio/ogg; codecs=speex'>
    FLAC audio alone in Ogg container
    <source src='audio.oga' type='audio/ogg; codecs=flac'>
    Dirac video and Vorbis audio in Ogg container
    <source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
    -

    The loop IDL attribute must reflect - the content attribute of the same name.

    +
    +

    If a source element is inserted as a child of a media element that + has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media + element's resource selection + algorithm.

    +

    The IDL attributes src and type must reflect the respective content + attributes of the same name.

    -
    4.7.14.7 Ready states
    + -
    media . readyState
    +
    -

    Returns a value that expresses the current state of the element with respect to rendering the - current playback position, from the codes in the list below.

    +

    If the author isn't sure if user agents will all be able to render the media resources + provided, the author can listen to the error event on the last + source element and trigger fallback behavior:

    -
    + 
    <script>
+ function fallback(video) {
+   // replace <video> with its contents
+   while (video.hasChildNodes()) {
+     if (video.firstChild instanceof HTMLSourceElement)
+       video.removeChild(video.firstChild);
+     else
+       video.parentNode.insertBefore(video.firstChild, video);
+   }
+   video.parentNode.removeChild(video);
+ }
+</script>
+<video controls autoplay>
+ <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+ <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
+         onerror="fallback(parentNode)">
+ ...
+</video>
    - + -

    Media elements have a ready state, which describes to - what degree they are ready to be rendered at the current playback position. The - possible values are as follows; the ready state of a media element at any particular time is the - greatest value describing the state of the element:

    - -
    HAVE_NOTHING (numeric value 0)

    No information regarding the media resource is available. No data for the - current playback position is available. Media - elements whose networkState attribute are set - to NETWORK_EMPTY are always in the HAVE_NOTHING state.

    HAVE_METADATA (numeric value 1)

    Enough of the resource has been obtained that the duration of the resource is available. - In the case of a video element, the dimensions of the video are also available. The - API will no longer throw an exception when seeking. No media data is available for - the immediate current playback position.

    HAVE_CURRENT_DATA (numeric value 2)

    Data for the immediate current playback position is available, but either not - enough data is available that the user agent could successfully advance the current - playback position in the direction of playback at all without immediately - reverting to the HAVE_METADATA state, or there is no - more data to obtain in the direction of playback. For example, in video this - corresponds to the user agent having data from the current frame, but not the next frame, when - the current playback position is at the end of the current frame; and to when playback has ended.

    HAVE_FUTURE_DATA (numeric value 3)

    Data for the immediate current playback position is available, as well as - enough data for the user agent to advance the current playback position in the - direction of playback at least a little without immediately reverting to the HAVE_METADATA state, and the text tracks are - ready. For example, in video this corresponds to the user agent having data for at least - the current frame and the next frame when the current playback position is at the - instant in time between the two frames, or to the user agent having the video data for the - current frame and audio data to keep playing at least a little when the current playback - position is in the middle of a frame. The user agent cannot be in this state if playback has ended, as the current playback position - can never advance in this case.

    HAVE_ENOUGH_DATA (numeric value 4)
    +

    4.8.13 The track element

    -

    All the conditions described for the HAVE_FUTURE_DATA state are met, and, in addition, - either of the following conditions is also true:

    +
    Categories:
    None.
    Contexts in which this element can be used:
    As a child of a media element, before any flow content.
    Content model:
    Empty.
    Tag omission in text/html:
    No end tag.
    Content attributes:
    Global attributes
    kind — The type of text track
    src — Address of the resource
    srclang — Language of the text track
    label — User-visible label
    default — Enable the track if no other text track is more suitable
    DOM interface:
    +
    interface HTMLTrackElement : HTMLElement {
+           attribute DOMString kind;
+           attribute DOMString src;
+           attribute DOMString srclang;
+           attribute DOMString label;
+           attribute boolean default;
 
-    
    • The user agent estimates that data is being fetched at a rate where the current
-     playback position, if it were to advance at the effective playback rate,
-     would not overtake the available data before playback reaches the end of the media
-     resource.
    • The user agent has entered a state where waiting longer will not result in further data
-     being obtained, and therefore nothing would be gained by delaying playback any further. (For
-     example, the buffer might be full.)
    
+  const unsigned short NONE = 0;
+  const unsigned short LOADING = 1;
+  const unsigned short LOADED = 2;
+  const unsigned short ERROR = 3;
+  readonly attribute unsigned short readyState;
 
+  readonly attribute TextTrack track;
+};
    -

    In practice, the difference between HAVE_METADATA and HAVE_CURRENT_DATA is negligible. Really the only time - the difference is relevant is when painting a video element onto a - canvas, where it distinguishes the case where something will be drawn (HAVE_CURRENT_DATA or greater) from the case where - nothing is drawn (HAVE_METADATA or less). Similarly, - the difference between HAVE_CURRENT_DATA (only - the current frame) and HAVE_FUTURE_DATA (at least - this frame and the next) can be negligible (in the extreme, only one frame). The only time that - distinction really matters is when a page provides an interface for "frame-by-frame" - navigation.

    +

    The track element allows authors to specify explicit external timed text tracks for media elements. It + does not represent anything on its own.

    - +

    The kind attribute is an enumerated + attribute. The following table lists the keywords defined for this attribute. The keyword + given in the first cell of each row maps to the state given in the second cell.

    -

    When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the user agent must follow the steps - given below:

    +
    Keyword + State + Brief description +
    subtitles + Subtitles + + Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the media resource's audio track). + Overlaid on the video. +
    captions + Captions + + Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf). + Overlaid on the video; labeled as appropriate for the hard-of-hearing. +
    descriptions + Descriptions + + Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). + Synthesized as audio. +
    chapters + Chapters + + Chapter titles, intended to be used for navigating the media resource. + Displayed as an interactive (potentially nested) list in the user agent's interface. +
    metadata + Metadata + + Tracks intended for use from script. + Not displayed by the user agent. +
    -
    1. +

      The attribute may be omitted. The missing value default is the subtitles state.

      -

      Apply the first applicable set of substeps from the following list:

      +

      The src attribute gives the address of the text + track data. The value must be a valid non-empty URL potentially surrounded by spaces. + This attribute must be present.

      + -
      If the previous ready state was HAVE_NOTHING, - and the new ready state is HAVE_METADATA
      +

      If the element has a src attribute whose value is not the + empty string and whose value, when the attribute was set, could be successfully resolved relative to the element, then the element's track + URL is the resulting absolute URL. Otherwise, the element's track + URL is the empty string.

      -

      Queue a task to fire a simple event named loadedmetadata at the element.

      + -

      Before this task is run, as part of the event loop mechanism, the - rendering will have been updated to resize the video element if appropriate.

      +

      If the element's track URL identifies a WebVTT resource, and the element's kind attribute is not in the metadata state, then the WebVTT file must be a + WebVTT file using cue text. [WEBVTT]

      -
      If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater
      +

      Furthermore, if the element's track URL identifies a WebVTT resource, and the + element's kind attribute is in the chapters state, then the WebVTT file must be both a + WebVTT file using chapter title text and a WebVTT file using only nested + cues. [WEBVTT]

      -

      If this is the first time this occurs for this media - element since the load() algorithm was last - invoked, the user agent must queue a task to fire a simple event - named loadeddata at the element.

      +

      The srclang attribute gives the language of + the text track data. The value must be a valid BCP 47 language tag. This attribute must be present + if the element's kind attribute is in the subtitles state. [BCP47]

      -

      If the new ready state is HAVE_FUTURE_DATA - or HAVE_ENOUGH_DATA, then the relevant steps - below must then be run also.

      + -
      If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready state is - HAVE_CURRENT_DATA or less
      +

      If the element has a srclang attribute whose value is + not the empty string, then the element's track language is the value of the attribute. + Otherwise, the element has no track language.

      -

      If the media element was potentially - playing before its readyState attribute - changed to a value lower than HAVE_FUTURE_DATA, and the element has not - ended playback, and playback has not stopped due to errors, - paused for user interaction, or paused for in-band content, the user - agent must queue a task to fire a simple event named timeupdate at the element, and queue a task - to fire a simple event named waiting at - the element.

      + -
      If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state - is HAVE_FUTURE_DATA
      +

      The label attribute gives a user-readable + title for the track. This title is used by user agents when listing subtitle, caption, and audio description tracks in their user interface.

      -

      The user agent must queue a task to fire a simple event named - canplay at the element.

      +

      The value of the label attribute, if the attribute is + present, must not be the empty string. Furthermore, there must not be two track + element children of the same media element whose kind attributes are in the same state, whose srclang attributes are both missing or have values that + represent the same language, and whose label attributes are + again both missing or both have the same value.

      -

      If the element's paused attribute is false, the user - agent must queue a task to fire a simple event named playing at the element.

      + -
      If the new ready state is HAVE_ENOUGH_DATA
      +

      If the element has a label attribute whose value is not + the empty string, then the element's track label is the value of the attribute. + Otherwise, the element's track label is an empty string.

      -

      If the previous ready state was HAVE_CURRENT_DATA or less, the user agent must - queue a task to fire a simple event named canplay at the element, and, if the element's paused attribute is false, queue a task to - fire a simple event named playing - at the element.

      + -

      If the autoplaying flag is true, and the paused attribute is true, and the media element - has an autoplay attribute specified, and the - media element's Document's active sandboxing flag set - does not have the sandboxed automatic features browsing context flag set, then - the user agent may also run the following substeps:

      +

      The default attribute is a boolean + attribute, which, if specified, indicates that the track is to be enabled if the user's + preferences do not indicate that another track would be more appropriate.

      -
      1. Set the paused attribute to false.
      2. If the element's show poster flag is true, set it to false and run the - time marches on steps.
      3. Queue a task to fire a simple event named play at the element.
      4. Queue a task to fire a simple event named playing at the element.
      +

      Each media element must have no more than one track element child + whose kind attribute is in the subtitles or captions state and whose default attribute is specified.

      -

      User agents do not need to support autoplay, and it is suggested that user - agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the - video to play, so as to allow the user to override the behavior if so desired.

      +

      Each media element must have no more than one track element child + whose kind attribute is in the description state and whose default attribute is specified.

      -

      In any case, the user agent must finally queue a task to fire a simple - event named canplaythrough at the element.

      +

      Each media element must have no more than one track element child + whose kind attribute is in the chapters state and whose default attribute is specified.

      + +

      There is no limit on the number of track elements whose kind attribute is in the metadata state and whose default attribute is specified.

      +
      track . readyState
      +

      Returns the text track readiness state, + represented by a number from the following list:

      +
      track . NONE (0)
      +

      The text track not loaded state.

      +
      track . LOADING (1)
      +

      The text track loading state.

      +
      track . LOADED (2)
      +

      The text track loaded state.

      +
      track . ERROR (3)
      +

      The text track failed to load state.

      +
      track . track
      -

    2. If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

    +

    Returns the TextTrack object corresponding to the text track of the track element.

    + +
    -

    It is possible for the ready state of a media element to jump between these states - discontinuously. For example, the state of a media element can jump straight from HAVE_METADATA to HAVE_ENOUGH_DATA without passing through the HAVE_CURRENT_DATA and HAVE_FUTURE_DATA states.

    +

    The readyState attribute must return the + numeric value corresponding to the text track readiness state of the + track element's text track, as defined by the following list:

    - +
    NONE (numeric value 0)
    The text track not loaded state.
    LOADING (numeric value 1)
    The text track loading state.
    LOADED (numeric value 2)
    The text track loaded state.
    ERROR (numeric value 3)
    The text track failed to load state.
    -

    The readyState IDL attribute must, on - getting, return the value described above that describes the current ready state of the - media element.

    +

    The track IDL attribute must, on getting, + return the track element's text track's corresponding + TextTrack object.

    + +

    The src, srclang, label, and default IDL attributes must reflect the + respective content attributes of the same name. The kind IDL attribute must reflect the content + attribute of the same name, limited to only known values.

    -

    The autoplay attribute is a boolean - attribute. When present, the user agent (as described in the algorithm - described herein) will automatically begin playback of the media resource as - soon as it can do so without stopping.

    +
    -

    Authors are urged to use the autoplay - attribute rather than using script to trigger automatic playback, as this allows the user to - override the automatic playback when it is not desired, e.g. when using a screen reader. Authors - are also encouraged to consider not using the automatic playback behavior at all, and instead to - let the user agent wait for the user to start playback explicitly.

    +

    This video has subtitles in several languages:

    - + 
    <video src="brave.webm">
+ <track kind=subtitles src=brave.en.vtt srclang=en label="English">
+ <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
+ <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
+ <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
+</video>
    -

    The autoplay IDL attribute must - reflect the content attribute of the same name.

    +

    (The lang attributes on the last two describe the language of + the label attribute, not the language of the subtitles + themselves. The language of the subtitles is given by the srclang attribute.)

    - +
    +

    4.8.14 Media elements

    -
    4.7.14.8 Playing the media resource
    +

    Media elements (audio and video, in + this specification) implement the following interface:

    -
    media . paused
    + 
    enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
+interface HTMLMediaElement : HTMLElement {
 
-    
    Returns true if playback is paused; false otherwise.
    
+  // error state
+  readonly attribute MediaError? error;
 
-   
    media . ended
    
+  // network state
+           attribute DOMString src;
+  readonly attribute DOMString currentSrc;
+           attribute DOMString crossOrigin;
+  const unsigned short NETWORK_EMPTY = 0;
+  const unsigned short NETWORK_IDLE = 1;
+  const unsigned short NETWORK_LOADING = 2;
+  const unsigned short NETWORK_NO_SOURCE = 3;
+  readonly attribute unsigned short networkState;
+           attribute DOMString preload;
+  readonly attribute TimeRanges buffered;
+  void load();
+  CanPlayTypeResult canPlayType(DOMString type);
 
-    
    Returns true if playback has reached the end of the media resource.
    
+  // ready state
+  const unsigned short HAVE_NOTHING = 0;
+  const unsigned short HAVE_METADATA = 1;
+  const unsigned short HAVE_CURRENT_DATA = 2;
+  const unsigned short HAVE_FUTURE_DATA = 3;
+  const unsigned short HAVE_ENOUGH_DATA = 4;
+  readonly attribute unsigned short readyState;
+  readonly attribute boolean seeking;
 
-   
    media . defaultPlaybackRate [ = value ]
    
+  // playback state
+           attribute double currentTime;
+  void fastSeek(double time);
+  readonly attribute unrestricted double duration;
+  Date getStartDate();
+  readonly attribute boolean paused;
+           attribute double defaultPlaybackRate;
+           attribute double playbackRate;
+  readonly attribute TimeRanges played;
+  readonly attribute TimeRanges seekable;
+  readonly attribute boolean ended;
+           attribute boolean autoplay;
+           attribute boolean loop;
+  void play();
+  void pause();
 
-    
    Returns the default rate of playback, for when the user is not fast-forwarding or reversing
-    through the media resource.
    
+  // media controller
+           attribute DOMString mediaGroup;
+           attribute MediaController? controller;
 
-    
    Can be set, to change the default rate of playback.
    
+  // controls
+           attribute boolean controls;
+           attribute double volume;
+           attribute boolean muted;
+           attribute boolean defaultMuted;
 
-    
    The default rate has no direct effect on playback, but if the user switches to a fast-forward
-    mode, when they return to the normal playback mode, it is expected that the rate of playback
-    will be returned to the default rate of playback.
    
+  // tracks
+  readonly attribute AudioTrackList audioTracks;
+  readonly attribute VideoTrackList videoTracks;
+  readonly attribute TextTrackList textTracks;
+  TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = "");
+};
    -

    When the element has a current media controller, the defaultPlaybackRate attribute is ignored and the - current media controller's defaultPlaybackRate is used instead.

    +

    The media element attributes, src, crossorigin, preload, autoplay, + mediagroup, loop, + muted, and controls, apply to all media + elements. They are defined in this section.

    -
    media . playbackRate [ = value ]
    + -

    Returns the current rate playback, where 1.0 is normal speed.

    + -

    Can be set, to change the rate of playback.

    +

    Media elements are used to present audio data, or video and + audio data, to the user. This is referred to as media data in this section, since this + section applies equally to media elements for audio or for + video. -

    When the element has a current media controller, the playbackRate attribute is ignored and the current - media controller's playbackRate is - used instead.

    + The term media resource is used to refer to the complete set of media data, e.g. the + complete video file, or complete audio file. -
    media . played
    +

    -

    Returns a TimeRanges object that represents the ranges of the media - resource that the user agent has played.

    +

    A media resource can have multiple audio and video tracks. For the purposes of a + media element, the video data of the media resource is only that of the + currently selected track (if any) as given by the element's videoTracks attribute when the event loop last + reached step 1, and the audio data of the media resource is the result of mixing all + the currently enabled tracks (if any) given by the element's audioTracks attribute when the event loop last + reached step 1.

    -
    media . play()
    +

    Both audio and video elements can be used for both audio + and video. The main difference between the two is simply that the audio element has + no playback area for visual content (such as video or captions), whereas the video + element does.

    -

    Sets the paused attribute to false, loading the - media resource and beginning playback if necessary. If the playback had ended, will - restart it from the start.

    + -
    media . pause()
    +

    Except where otherwise explicitly specified, the task source for all the tasks + queued in this section and its subsections is the media + element event task source of the media element in question.

    + + + + + +
    4.8.14.1 Error codes
    + +
    media . error
    + +

    Returns a MediaError object representing the current error state of the + element.

    -

    Sets the paused attribute to true, loading the - media resource if necessary.

    +

    Returns null if there is no error.

    -

    The paused attribute represents whether the - media element is paused or not. The attribute must initially be true.

    +

    All media elements have an associated error status, which + records the last error the element encountered since its resource selection algorithm was last invoked. The + error attribute, on getting, must return the + MediaError object created for this last error, or null if there has not been an + error.

    -

    A media element is a blocked media element if its readyState attribute is in the HAVE_NOTHING state, the HAVE_METADATA state, or the HAVE_CURRENT_DATA state, or if the element has - paused for user interaction or paused for in-band content.

    + -

    A media element is said to be potentially playing when its paused attribute is false, the element has not ended - playback, playback has not stopped due to errors, the element either has no - current media controller or has a current media controller but is not - blocked on its media controller, and the element is not a blocked media - element.

    + 
    interface MediaError {
+  const unsigned short MEDIA_ERR_ABORTED = 1;
+  const unsigned short MEDIA_ERR_NETWORK = 2;
+  const unsigned short MEDIA_ERR_DECODE = 3;
+  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+  readonly attribute unsigned short code;
+};
    -

    A waiting DOM event can be fired as a result of an element that is - potentially playing stopping playback due to its readyState attribute changing to a value lower than HAVE_FUTURE_DATA.

    +
    media . error . code
    -

    A media element is said to have ended playback when:

    +

    Returns the current error's error code, from the list below.

    -
    -
  • + -

    Either: +

    The code attribute of a + MediaError object must return the code for the error, which must be one of the + following:

    - -

    Or: +

    4.8.14.2 Location of the media resource
    - +

    The crossorigin content attribute on + media elements is a CORS settings attribute.

    - + -

    The ended attribute must return true if, the - last time the event loop reached step 1, the media element had - ended playback and the direction of playback was forwards, and false - otherwise.

    +

    If a media element is created with a + src attribute, the user agent must synchronously invoke the + media element's resource selection + algorithm.

    -

    A media element is said to have stopped due to errors when the - element's readyState attribute is HAVE_METADATA or greater, and the user agent encounters a non-fatal error during the processing of the - media data, and due to that error, is not able to play the content at the - current playback position.

    +

    If a src attribute of a media element is set + or changed, the user agent must invoke the media element's media element load + algorithm. (Removing the src attribute does + not do this, even if there are source elements present.)

    -

    A media element is said to have paused for user interaction when its - paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a point - in the media resource where the user has to make a selection for the resource to - continue. If the media element has a current media controller when this - happens, then the user agent must report the controller state for the media - element's current media controller. If the media element has a - current media controller when the user makes a selection, allowing playback to - resume, the user agent must similarly report the controller state for the media - element's current media controller.

    +

    The src IDL attribute on media elements must reflect the content attribute of the same + name.

    -

    It is possible for a media element to have both ended playback and - paused for user interaction at the same time.

    +

    The crossOrigin IDL attribute must + reflect the crossorigin content + attribute, limited to only known values.

    -

    When a media element that is potentially playing stops playing - because it has paused for user interaction, the user agent must queue a - task to fire a simple event named timeupdate at the element.

    + -

    A media element is said to have paused for in-band content when its - paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has suspended - playback of the media resource in order to play content that is temporally anchored - to the media resource and has a non-zero length, or to play content that is - temporally anchored to a segment of the media resource but has a length longer than - that segment. If the media element has a current media controller when - this happens, then the user agent must report the controller state for the - media element's current media controller. If the media - element has a current media controller when the user agent unsuspends - playback, the user agent must similarly report the controller state for the - media element's current media controller.

    +
    media . currentSrc
    -

    One example of when a media element would be paused for - in-band content is when the user agent is playing audio descriptions from an external WebVTT file, and - the synthesized speech generated for a cue is longer than the time between the text track - cue start time and the text track cue end time.

    +

    Returns the address of the current media resource.

    -
    +

    Returns the empty string when there is no media resource.

    -

    When the current playback position reaches the end of the - media resource when the direction of playback is forwards, then the user - agent must follow these steps:

    +
    -

    1. If the media element has a loop - attribute specified and does not have a current media controller, then seek to the earliest possible position of the - media resource and abort these steps.

    2. As defined above, the ended IDL attribute starts - returning true once the event loop returns to step 1.

    3. Queue a task to fire a simple event named timeupdate at the media element.

    4. Queue a task that, if the media element does not have a - current media controller, and the media element has still ended - playback, and the direction of playback is still forwards, and paused is false, changes paused to true and fires a - simple event named pause at the media - element.

    5. Queue a task to fire a simple event named ended at the media element.

    6. If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

    + -

    When the current playback position reaches the earliest possible - position of the media resource when the direction of playback is - backwards, then the user agent must only queue a task to fire a simple - event named timeupdate at the element.

    +

    The currentSrc IDL attribute is initially + the empty string. Its value is changed by the resource + selection algorithm defined below.

    -

    The word "reaches" here does not imply that the current playback - position needs to have changed during normal playback; it could be via seeking, for instance.

    + -
    +

    There are two ways to specify a media resource, the src attribute, or source elements. The attribute + overrides the elements.

    -

    The defaultPlaybackRate attribute - gives the desired speed at which the media resource is to play, as a multiple of its - intrinsic speed. The attribute is mutable: on getting it must return the last value it was set to, - or 1.0 if it hasn't yet been set; on setting the attribute must be set to the new value.

    -

    The defaultPlaybackRate is used - by the user agent when it exposes a user - interface to the user.

    -

    The playbackRate attribute gives the - effective playback rate (assuming there is no current media controller - overriding it), which is the speed at which the media resource plays, as a multiple - of its intrinsic speed. If it is not equal to the defaultPlaybackRate, then the implication is that the - user is using a feature such as fast forward or slow motion playback. The attribute is mutable: on - getting it must return the last value it was set to, or 1.0 if it hasn't yet been set; on setting - the attribute must be set to the new value, and the playback will change speed (if the element is - potentially playing and there is no current media controller).

    +
    4.8.14.3 MIME types
    -

    When the defaultPlaybackRate - or playbackRate attributes change value (either by - being set by script or by being changed directly by the user agent, e.g. in response to user - control) the user agent must queue a task to fire a simple event named - ratechange at the media element.

    +

    A media resource can be described in terms of its type, specifically a + MIME type, in some cases with a codecs parameter. (Whether the + codecs parameter is allowed or not depends on the MIME type.) [RFC4281]

    -

    The defaultPlaybackRate and - playbackRate attributes have no effect when the - media element has a current media controller; the namesake attributes on - the MediaController object are used instead in that situation.

    +

    Types are usually somewhat incomplete descriptions; for example "video/mpeg" doesn't say anything except what the container type is, and even a + type like "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" doesn't + include information like the actual bitrate (only the maximum bitrate). Thus, given a type, a user + agent can often only know whether it might be able to play media of that type (with + varying levels of confidence), or whether it definitely cannot play media of that + type.

    -
    +

    A type that the user agent knows it cannot render is one that describes a resource + that the user agent definitely does not support, for example because it doesn't recognise the + container type, or it doesn't support the listed codecs.

    -

    The played attribute must return a new static - normalised TimeRanges object that represents the ranges of points on the - media timeline of the media resource reached through the usual monotonic - increase of the current playback position during normal playback, if any, at the time - the attribute is evaluated.

    +

    The MIME type "application/octet-stream" with no parameters is never + a type that the user agent knows it cannot render. User agents must treat that type + as equivalent to the lack of any explicit Content-Type metadata + when it is used to label a potential media resource.

    -
    +

    Only the MIME type "application/octet-stream" with no + parameters is special-cased here; if any parameter appears with it, it will be treated just like + any other MIME type. This is a deviation from the rule that unknown MIME type parameters should be ignored.

    -

    When the play() method on a media - element is invoked, the user agent must run the following steps.

    +
    media . canPlayType(type)
    -

    1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's - resource selection algorithm.

    2. +

      Returns the empty string (a negative response), "maybe", or "probably" based on how confident + the user agent is that it can play media resources of the given type.

      -

      If the playback has ended and the direction of - playback is forwards, and the media element does not have a current - media controller, seek to the earliest possible - position of the media resource.

      +
    -

    This will cause the user agent to queue a - task to fire a simple event named timeupdate at the media element.

    - + -

  • If the media element has a current media controller, then - bring the media element up to speed with its new media controller.

    +

    The canPlayType(type) method must return the + empty string if type is a type that the user agent knows it cannot + render or is the type "application/octet-stream"; it must return "probably" if the user agent is confident + that the type represents a media resource that it can render if used in with this + audio or video element; and it must return "maybe" otherwise. Implementors are encouraged + to return "maybe" unless the type can be + confidently established as being supported or not. Generally, a user agent should never return + "probably" for a type that allows the codecs parameter if that parameter is not present.

    -
  • + -

    If the media element's paused attribute is - true, run the following substeps:

    +
    -

    1. Change the value of paused to false.

    2. If the show poster flag is true, set the element's show poster - flag to false and run the time marches on steps.

    3. Queue a task to fire a simple event named play at the element.

    4. +

      This script tests to see if the user agent supports a (fictional) new format to dynamically + decide whether to use a video element or a plugin:

      -

      If the media element's readyState - attribute has the value HAVE_NOTHING, HAVE_METADATA, or HAVE_CURRENT_DATA, queue a task to - fire a simple event named waiting at the - element.

      + 
      <section id="video">
+ <p><a href="playing-cats.nfv">Download video</a></p>
+</section>
+<script>
+ var videoSection = document.getElementById('video');
+ var videoElement = document.createElement('video');
+ var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
+ if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
+   // not confident of browser support
+   // but we have a plugin
+   // so use plugin instead
+   videoElement = document.createElement("embed");
+ } else if (support == "") {
+   // no support from browser and no plugin
+   // do nothing
+   videoElement = null;
+ }
+ if (videoElement) {
+   while (videoSection.hasChildNodes())
+     videoSection.removeChild(videoSection.firstChild);
+   videoElement.setAttribute("src", "playing-cats.nfv");
+   videoSection.appendChild(videoElement);
+ }
+</script>
      -

      Otherwise, the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA: queue a task to - fire a simple event named playing at the - element.

      +
    - +

    The type attribute of the + source element allows the user agent to avoid downloading resources that use formats + it cannot render.

    -

  • Set the media element's autoplaying flag to false.

  • If the media element has a current media controller, then - report the controller state for the media element's current media - controller. -

    +
    4.8.14.4 Network states
    -

    When the pause() method is invoked, and when - the user agent is required to pause the media element, the user agent must run the - following steps:

    +
    media . networkState
    -

    1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's - resource selection algorithm.

    2. Run the internal pause steps for the media element.

    +

    Returns the current state of network activity for the element, from the codes in the list + below.

    -

    The internal pause steps for a media element are as follows:

    +
    -

    1. Set the media element's autoplaying flag to false.

    2. If the media element's paused attribute - is false, run the following steps:

      + -

      1. Change the value of paused to true.

      2. Queue a task to fire a simple - event named timeupdate at the - element.

      3. Queue a task to fire a simple - event named pause - at the element.

      4. Set the official playback position to the current playback - position.

      +

      As media elements interact with the network, their current + network activity is represented by the networkState attribute. On getting, it must + return the current network state of the element, which must be one of the following values:

      -

    3. If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

    + -
    +
    NETWORK_EMPTY (numeric value 0)
    The element has not yet been initialized. All attributes are in their initial states.
    NETWORK_IDLE (numeric value 1)
    The element's resource + selection algorithm is active and has selected a resource, but it is not actually using the network at this time.
    NETWORK_LOADING (numeric value 2)
    The user agent is actively trying to download data.
    NETWORK_NO_SOURCE (numeric value 3)
    The element's resource + selection algorithm is active, but it has not yet found a resource to use.
    -

    The effective playback rate is not necessarily the element's playbackRate. When a media element has a - current media controller, its effective playback rate is the - MediaController's media controller playback rate. Otherwise, the - effective playback rate is just the element's playbackRate. Thus, the current media - controller overrides the media element.

    + -

    If the effective playback rate is positive or zero, then the direction of - playback is forwards. Otherwise, it is backwards.

    +

    The resource selection algorithm defined + below describes exactly when the networkState + attribute changes value and what events fire to indicate changes in this state.

    -

    When a media element is potentially playing and - its Document is a fully active Document, its current - playback position must increase monotonically at effective playback rate units - of media time per unit time of the media timeline's clock. (This specification always - refers to this as an increase, but that increase could actually be a decrease if - the effective playback rate is negative.)

    + -

    The effective playback rate can be 0.0, in which case the - current playback position doesn't move, despite playback not being paused (paused doesn't become true, and the pause event doesn't fire).

    -

    This specification doesn't define how the user agent achieves the appropriate - playback rate — depending on the protocol and media available, it is plausible that the user - agent could negotiate with the server to have the server provide the media data at the appropriate - rate, so that (except for the period between when the rate is changed and when the server updates - the stream's playback rate) the client doesn't actually have to drop or interpolate any - frames.

    -

    Any time the user agent provides a stable state, - the official playback position must be set to the current playback - position.

    -

    While the direction of playback is backwards, any corresponding audio must be - muted. While the effective playback rate is - so low or so high that the user agent cannot play audio usefully, the corresponding audio must - also be muted. If the effective playback - rate is not 1.0, the user agent may apply pitch adjustments to the audio as necessary to - render it faithfully.

    +
    4.8.14.5 Loading the media resource
    -

    Media elements that are potentially playing - while not in a Document must not play any video, but should play any - audio component. Media elements must not stop playing just because all references to them have - been removed; only once a media element is in a state where no further audio could ever be played - by that element may the element be garbage collected.

    +
    media . load()
    -

    It is possible for an element to which no explicit references exist to play audio, - even if such an element is not still actively playing: for instance, it could have a current - media controller that still has references and can still be unpaused, or it could be - unpaused but stalled waiting for content to buffer.

    +

    Causes the element to reset and start selecting and loading a new media resource + from scratch.

    -
    +
    -

    Each media element has a list of newly introduced cues, which must be - initially empty. Whenever a text track cue is added to the list of cues of a text track that is in the list of text - tracks for a media element, that cue must - be added to the media element's list of newly introduced cues. Whenever - a text track is added to the list of text tracks for a media - element, all of the cues in that text - track's list of cues must be added to the - media element's list of newly introduced cues. When a media - element's list of newly introduced cues has new cues added while the - media element's show poster flag is not set, then the user agent must - run the time marches on steps.

    + -

    When a text track cue is removed from the list of cues of a text track that is in the list of text - tracks for a media element, and whenever a text track is removed - from the list of text tracks of a media element, if the media - element's show poster flag is not set, then the user agent must run the - time marches on steps.

    +

    All media elements have an autoplaying flag, + which must begin in the true state, and a delaying-the-load-event flag, which must + begin in the false state. While the delaying-the-load-event flag is true, the element + must delay the load event of its document.

    -

    When the current playback position of a media element changes (e.g. - due to playback or seeking), the user agent must run the time marches on steps. If the - current playback position changes while the steps are running, then the user agent - must wait for the steps to complete, and then must immediately rerun the steps. (These steps are - thus run as often as possible or needed — if one iteration takes a long time, this can cause - certain cues to be skipped over as the user agent rushes ahead - to "catch up".)

    +

    When the load() method on a media + element is invoked, the user agent must run the media element load + algorithm.

    -

    The time marches on steps are as follows:

    +

    The media element load algorithm consists of the following steps.

    -

    1. Let current cues be a list of cues, initialised to contain all the cues of all - the hidden or showing text tracks of the media - element (not the disabled ones) whose start times are less than or equal to the current - playback position and whose end times are - greater than the current playback position.

    2. Let other cues be a list of cues, - initialised to contain all the cues of hidden and showing text tracks of the media element that are not present in current cues.

    3. Let last time be the current playback position at the - time this algorithm was last run for this media element, if this is not the first - time it has run.

    4. If the current playback position has, since the last time this algorithm was - run, only changed through its usual monotonic increase during normal playback, then let missed cues be the list of cues in other cues whose start times are - greater than or equal to last time and whose end times are less than or equal to the current playback position. - Otherwise, let missed cues be an empty list.

    5. Remove all the cues in missed cues - that are also in the media element's list of newly introduced cues, and - then empty the element's list of newly introduced cues.

    6. If the time was reached through the usual monotonic increase of the current playback - position during normal playback, and if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and - is not still running event handlers for such an event, then the user agent must queue a - task to fire a simple event named timeupdate at the element. (In the other cases, such as - explicit seeks, relevant events get fired as part of the overall process of changing the - current playback position.)

      +

      1. Abort any already-running instance of the resource selection algorithm for this + element.

      2. -

        The event thus is not to be fired faster than about 66Hz or slower than 4Hz - (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to - vary the frequency of the event based on the system load and the average cost of processing the - event each time, so that the UI updates are not any more frequent than the user agent can - comfortably handle while decoding the video.

      3. If all of the cues in current cues - have their text track cue active flag set, none of the cues in other cues have their text track cue active - flag set, and missed cues is empty, then abort these steps.

      4. +

        If there are any tasks from the media + element's media element event task source in one of the task queues, then remove those tasks.

        -

        If the time was reached through the usual monotonic increase of the current playback - position during normal playback, and there are cues - in other cues that have their text track cue pause-on-exit flag - set and that either have their text track cue active flag set or are also in missed cues, then immediately pause the - media element.

        -

        In the other cases, such as explicit seeks, playback is not paused by going past - the end time of a cue, even if that cue has its text track cue pause-on-exit flag set.

        -
      5. +

        Basically, pending events and callbacks for the media element are discarded when + the media element starts loading a new resource.

        -

        Let events be a list of tasks, - initially empty. Each task in this list will be associated - with a text track, a text track cue, and a time, which are used to - sort the list before the tasks are queued.

        +

      6. If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a task to fire a + simple event named abort at the media + element.

      7. -

        Let affected tracks be a list of text - tracks, initially empty.

        +

        If the media element's networkState + is not set to NETWORK_EMPTY, then run these + substeps:

        -

        When the steps below say to prepare an event named event for a - text track cue target with a time time, the - user agent must run these substeps:

        +

        1. Queue a task to fire a simple event named emptied at the media element.

        2. If a fetching process is in progress for the media + element, the user agent should stop it.

        3. Forget the media element's media-resource-specific tracks.

        4. If readyState is not set to HAVE_NOTHING, then set it to that state. + +

        5. If the paused attribute is false, then set it to + true.

        6. If seeking is true, set it to false.

        7. -

          1. Let track be the text track with which the text - track cue target is associated.

          2. Create a task to fire a simple event - named event at target.

          3. Add the newly created task to events, associated with the time time, the text - track track, and the text track cue target.

          4. Add track to affected tracks.

          +

          Set the current playback position to 0.

          -

        8. For each text track cue in missed - cues, prepare an event named enter for the - TextTrackCue object with the text track cue start time.

        9. For each text track cue in other - cues that either has its text track cue active flag set or is in missed cues, prepare an event named exit for the TextTrackCue object with the later of the - text track cue end time and the text track cue start time.

        10. For each text track cue in current - cues that does not have its text track cue active flag set, prepare an - event named enter for the TextTrackCue - object with the text track cue start time.

        11. +

          Set the official playback position to 0.

          -

          Sort the tasks in events in ascending - time order (tasks with earlier times first).

          +

          If this changed the official playback position, then queue a task + to fire a simple event named timeupdate at the media element.

          -

          Further sort tasks in events that have - the same time by the relative text track cue order of the text track cues associated with these tasks.

          +

        12. Set the initial playback position to 0.

        13. Set the timeline offset to Not-a-Number (NaN).

        14. -

          Finally, sort tasks in events that have - the same time and same text track cue order by placing tasks that fire enter events before - those that fire exit events.

          +

          Update the duration attribute to Not-a-Number + (NaN).

          -

        15. Queue each task in - events, in list order.

        16. Sort affected tracks in the same order as the text tracks appear in the media element's list of text - tracks, and remove duplicates.

          +

          The user agent will not fire a durationchange event for this particular change of + the duration.

          -

        17. For each text track in affected tracks, in the list - order, queue a task to fire a simple event named cuechange at the TextTrack object, and, if the - text track has a corresponding track element, to then fire a - simple event named cuechange at the - track element as well.

        18. Set the text track cue active flag of all the cues in the current cues, and unset the text track cue - active flag of all the cues in the other - cues.

        19. Run the rules for updating the text track rendering of each of the text tracks in affected tracks that are showing. For example, for text - tracks based on WebVTT, the rules for updating the display of WebVTT - text tracks. [WEBVTT]

        +
      -

      For the purposes of the algorithm above, a text track cue is considered to be part - of a text track only if it is listed in the text track list of cues, not - merely if it is associated with the text track.

      +

    7. Set the playbackRate attribute to the value of + the defaultPlaybackRate attribute.

    8. Set the error attribute to null and the + autoplaying flag to true.

    9. Invoke the media element's resource selection algorithm.

    10. -

      If the media element's Document stops being a - fully active document, then the playback will stop - until the document is active again.

      +

      Playback of any previously playing media resource for this element + stops.

      -

      When a media element is removed - from a Document, the user agent must run the following steps:

      +
    + +

    The resource selection algorithm for a + media element is as follows. This algorithm is always invoked synchronously, but one + of the first steps in the algorithm is to return and continue running the remaining steps + asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts + closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop + algorithm). Steps in such sections are marked with ⌛.

    + +

    1. Set the element's networkState attribute to + the NETWORK_NO_SOURCE value.

    2. Set the element's show poster flag to true.

    3. Set the media element's delaying-the-load-event flag to true + (this delays the load event).

    4. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous + section consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    5. + +

      ⌛ If the media element's blocked-on-parser flag is false, + then populate the list of pending text tracks.

      -

      1. Asynchronously await a stable state, allowing the task that removed the media element from the - Document to continue. The synchronous section consists of all the - remaining steps of this algorithm. (Steps in the synchronous section are marked with - ⌛.)

      2. ⌛ If the media element is in a Document, - abort these steps.

      3. ⌛ Run the internal pause steps for the media element.

        +
      4. -
      +

      ⌛ If the media element has a src + attribute, then let mode be attribute.

      - +

      ⌛ Otherwise, if the media element does not have a src attribute but has a source element child, then + let mode be children and let candidate + be the first such source element child in tree order.

      +

      ⌛ Otherwise the media element has neither a src attribute nor a source element child: set the + networkState to NETWORK_EMPTY, and abort these steps; the + synchronous section ends.

      +

    6. ⌛ Set the media element's networkState to NETWORK_LOADING.

    7. ⌛ Queue a task to fire a simple event named loadstart at the media element.

    8. -
      4.7.14.9 Seeking
      +

      If mode is attribute, then run these substeps:

      -
      media . seeking
      +

      1. ⌛ If the src + attribute's value is the empty string, then end the synchronous section, and jump + down to the failed with attribute step below.

      2. ⌛ Let absolute URL be the absolute URL that + would have resulted from resolving the URL + specified by the src attribute's value relative to the + media element when the src attribute was last + changed.

        -

        Returns true if the user agent is currently seeking.

        +

      3. ⌛ If absolute URL was obtained successfully, set the currentSrc attribute to absolute + URL.

      4. End the synchronous section, continuing the remaining steps + asynchronously.

      5. If absolute URL was obtained successfully, run the resource fetch algorithm with absolute + URL. If that algorithm returns without aborting this one, then the load + failed.

      6. -
        media . seekable
        +

        Failed with attribute: Reaching this step indicates that the media resource + failed to load or that the given URL could not be resolved. Queue a task to run the following steps:

        -

        Returns a TimeRanges object that represents the ranges of the media - resource to which it is possible for the user agent to seek.

        +

        1. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_SRC_NOT_SUPPORTED.

        2. Forget the media element's media-resource-specific tracks.

        3. Set the element's networkState attribute + to the NETWORK_NO_SOURCE value.

        4. Set the element's show poster flag to true.

        5. Fire a simple event named error at + the media element.

        6. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

        -
        media . fastSeek( time )
        +

      7. Wait for the task queued by the previous step to have + executed.

      8. Abort these steps. Until the load() method is + invoked or the src attribute is changed, the element won't + attempt to load another resource.

      -

      Seeks to near the given time as fast as possible, trading precision for - speed. (To seek to a precise time, use the currentTime attribute.)

      +

      Otherwise, the source elements will be used; run these substeps:

      -

      This does nothing if the media resource has not been loaded.

      +
      1. -
      +

      ⌛ Let pointer be a position defined by two adjacent nodes in the + media element's child list, treating the start of the list (before the first + child in the list, if any) and end of the list (after the last child in the list, if any) as + nodes in their own right. One node is the node before pointer, and the + other node is the node after pointer. Initially, let pointer be the position between the candidate node and the + next node, if there are any, or the end of the list, if it is the last node.

      - +

      As nodes are inserted and removed into the media element, pointer must be updated as follows:

      -

      The seeking attribute must initially have the - value false.

      +
      If a new node is inserted between the two nodes that define pointer
      Let pointer be the point between the node before pointer and the new node. In other words, insertions at pointer go after pointer.
      If the node before pointer is removed
      Let pointer be the point between the node after pointer and the node before the node after pointer. In + other words, pointer doesn't move relative to the remaining nodes.
      If the node after pointer is removed
      Let pointer be the point between the node before pointer and the node after the node before pointer. Just + as with the previous case, pointer doesn't move relative to the remaining + nodes.
      -

      The fastSeek() method must seek to the time given by the method's argument, with the - approximate-for-speed flag set.

      +

      Other changes don't affect pointer.

      -

      When the user agent is required to seek to a particular new playback position in the media resource, optionally with the - approximate-for-speed flag set, it means that the user agent must run the following steps. - This algorithm interacts closely with the event loop mechanism; in particular, it has - a synchronous section (which is triggered as part of the event loop - algorithm). Steps in that section are marked with ⌛.

      +

    9. ⌛ Process candidate: If candidate does not have a + src attribute, or if its src attribute's value is the empty string, then end the + synchronous section, and jump down to the failed with elements step + below.

    10. ⌛ Let absolute URL be the absolute URL that + would have resulted from resolving the URL + specified by candidate's src + attribute's value relative to the candidate when the src attribute was last changed.

      -

      1. Set the media element's show poster flag to false.

      2. If the media element's readyState - is HAVE_NOTHING, abort these steps.

      3. If the element's seeking IDL attribute is true, - then another instance of this algorithm is already running. Abort that other instance of the - algorithm without waiting for the step that it is running to complete.

      4. Set the seeking IDL attribute to true.

      5. If the seek was in response to a DOM method call or setting of an IDL attribute, then - continue the script. The remainder of these steps must be run asynchronously. With the exception - of the steps marked with ⌛, they could be aborted at any time by another instance of this - algorithm being invoked.

      6. If the new playback position is later than the end of the media - resource, then let it be the end of the media resource instead.

      7. If the new playback position is less than the earliest possible - position, let it be that position instead.

      8. If the (possibly now changed) new playback position is not in one of - the ranges given in the seekable attribute, then let it - be the position in one of the ranges given in the seekable attribute that is the nearest to the new - playback position. If two positions both satisfy that constraint (i.e. the new playback position is exactly in the middle between two ranges in the seekable attribute) then use the position that is closest to - the current playback position. If there are no ranges given in the seekable attribute then set the seeking IDL attribute to false and abort these steps.

      9. +

      10. ⌛ If absolute URL was not obtained successfully, then end the + synchronous section, and jump down to the failed with elements step + below.

      11. ⌛ If candidate has a type attribute whose value, when parsed as a MIME + type (including any codecs described by the codecs parameter, for + types that define that parameter), represents a type that the user agent knows it cannot + render, then end the synchronous section, and jump down to the failed with elements step below.

      12. ⌛ Set the currentSrc attribute to absolute URL.

      13. End the synchronous section, continuing the remaining steps + asynchronously.

      14. Run the resource fetch algorithm with + absolute URL. If that algorithm returns without aborting this one, + then the load failed.

      15. Failed with elements: Queue a task to fire a simple + event named error at the candidate element.

      16. Asynchronously await a stable state. The synchronous section + consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

      17. ⌛ Forget the media element's media-resource-specific + tracks.

      18. ⌛ Find next candidate: Let candidate be + null.

      19. ⌛ Search loop: If the node after pointer is + the end of the list, then jump to the waiting step below.

      20. ⌛ If the node after pointer is a source element, + let candidate be that element.

      21. ⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node + after pointer is the node after the node that used to be after pointer, if any.

      22. ⌛ If candidate is null, jump back to the search + loop step. Otherwise, jump back to the process candidate step.

      23. ⌛ Waiting: Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

      24. ⌛ Set the element's show poster flag to true.

      25. ⌛ Queue a task to set the element's delaying-the-load-event + flag to false. This stops delaying the load + event.

      26. End the synchronous section, continuing the remaining steps + asynchronously.

      27. Wait until the node after pointer is a node other than the end of + the list. (This step might wait forever.)

      28. Asynchronously await a stable state. The synchronous section + consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

      29. ⌛ Set the element's delaying-the-load-event flag back to true (this + delays the load event again, in case it hasn't been + fired yet).

        -

        If the approximate-for-speed flag is set, adjust the new playback - position to a value that will allow for playback to resume promptly. If new - playback position before this step is before current playback position, then - the adjusted new playback position must also be before the current - playback position. Similarly, if the new playback position before - this step is after current playback position, then the adjusted new - playback position must also be after the current playback position.

        +

      30. ⌛ Set the networkState back to NETWORK_LOADING.

      31. ⌛ Jump back to the find next candidate step above.

      -

      For example, the user agent could snap to the nearest key frame, so that it - doesn't have to spend time decoding then discarding intermediate frames before resuming - playback.

      +
    -

  • Queue a task to fire a simple event named seeking at the element.

  • +

    The resource fetch algorithm for a media + element and a given absolute URL is as follows:

    -

    Set the current playback position to the given new playback - position.

    +

    1. Let the current media resource be the resource given by the + absolute URL passed to this algorithm. This is now the element's media + resource.

    2. Remove all media-resource-specific text + tracks from the media element's list of pending text tracks, if + any.

      -

      If the media element was potentially playing - immediately before it started seeking, but seeking caused its readyState attribute to change to a value lower than HAVE_FUTURE_DATA, then a waiting will be - fired at the element.

      - +

    3. Optionally, run the following substeps. This is the expected behavior if the user agent + intends to not attempt to fetch the resource until the user requests it explicitly (e.g. as a way + to implement the preload attribute's none keyword).

      -

      This step sets the current playback position, and thus can - immediately trigger other conditions, such as the rules regarding when playback "reaches the end of the media resource" (part of the logic that - handles looping), even before the user agent is actually able to render the media data for that - position (as determined in the next step).

      +

      1. Set the networkState to NETWORK_IDLE.

      2. Queue a task to fire a simple event named suspend at the element.

      3. Queue a task to set the element's delaying-the-load-event flag + to false. This stops delaying the load + event.

      4. Wait for the task to be run.

      5. Wait for an implementation-defined event (e.g. the user requesting that the media + element begin playback).

      6. Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired + yet).

        -

        The currentTime attribute does not - get updated asynchronously, as it returns the official playback position, not the - current playback position.

        +

      7. Set the networkState to NETWORK_LOADING.

      -

    4. Wait until the user agent has established whether or not the media data for - the new playback position is available, and, if it is, until it has decoded - enough data to play back that position.

      - -

    5. Await a stable state. The synchronous section consists of all - the remaining steps of this algorithm. (Steps in the synchronous section are marked - with ⌛.)

    6. ⌛ Set the seeking IDL attribute to - false.

    7. ⌛ Run the time marches on steps.

    8. ⌛ Queue a task to fire a simple event - named timeupdate at the element.

    9. ⌛ Queue a task to fire a simple event named seeked at the element.

    +
  • -
    +

    Perform a potentially CORS-enabled fetch of the current media resource's absolute URL, with the mode being + the state of the media element's crossorigin content attribute, the origin + being the origin of the media element's Document, and the + default origin behaviour set to taint.

    -

    The seekable attribute must return a new - static normalised TimeRanges object that represents the ranges of the - media resource, if any, that the user agent is able to seek to, at the time the - attribute is evaluated.

    +

    The resource obtained in this fashion, if any, contains the media data. It can + be CORS-same-origin or CORS-cross-origin; this affects whether + subtitles referenced in the media data are exposed in the API and, for + video elements, whether a canvas gets tainted when the video is drawn + on it.

    -

    If the user agent can seek to anywhere in the media resource, e.g. - because it is a simple movie file and the user agent and the server support HTTP Range requests, - then the attribute would return an object with one range, whose start is the time of the first - frame (the earliest possible position, typically zero), and whose end is the same as - the time of the first frame plus the duration attribute's - value (which would equal the time of the last frame, and might be positive Infinity).

    +

    While the load is not suspended (see below), every 350ms (±200ms) or for every byte + received, whichever is least frequent, queue a task to fire a simple + event named progress at the element.

    -

    The range might be continuously changing, e.g. if the user agent is buffering a - sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for - instance.

    +

    The stall timeout is a user-agent defined length of time, which should be about + three seconds. When a media element that is actively attempting to obtain + media data has failed to receive any data for a duration equal to the stall + timeout, the user agent must queue a task to fire a simple + event named stalled at the element.

    -

    Media resources might be internally scripted or - interactive. Thus, a media element could play in a non-linear fashion. If this - happens, the user agent must act as if the algorithm for seeking was used whenever the current playback position - changes in a discontinuous fashion (so that the relevant events fire). If the media - element has a current media controller, then the user agent must seek - the media controller appropriately instead.

    +

    User agents may allow users to selectively block or slow media data downloads. + When a media element's download has been blocked altogether, the user agent must + act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the + download may also be throttled automatically by the user agent, e.g. to balance the download + with other connections sharing the same bandwidth.

    - +

    User agents may decide to not download more content at any time, e.g. + after buffering five minutes of a one hour media resource, while waiting for the user to decide + whether to play the resource or not, while waiting for user input in an interactive resource, or + when the user navigates away from the page. When a media element's download has + been suspended, the user agent must queue a task, to set the networkState to NETWORK_IDLE and fire a simple event named + suspend at the element. If and when downloading of the + resource resumes, the user agent must queue a task to set the networkState to NETWORK_LOADING. Between the queuing of these tasks, + the load is suspended (so progress events don't fire, + as described above).

    +

    The preload attribute provides a hint + regarding how much buffering the author thinks is advisable, even in the absence of the autoplay attribute.

    -
    4.7.14.10 Media resources with multiple media tracks
    +

    When a user agent decides to completely stall a download, e.g. if it is waiting until the + user starts playback before downloading any further content, the user agent must queue a + task to set the element's delaying-the-load-event flag to false. This stops + delaying the load event.

    -

    A media resource can have multiple embedded audio and video tracks. For example, - in addition to the primary video and audio tracks, a media resource could have - foreign-language dubbed dialogues, director's commentaries, audio descriptions, alternative - angles, or sign-language overlays.

    +

    The user agent may use whatever means necessary to fetch the resource (within the constraints + put forward by this and other specifications); for example, reconnecting to the server in the + face of network errors, using HTTP range retrieval requests, or switching to a streaming + protocol. The user agent must consider a resource erroneous only if it has given up trying to + fetch it.

    -
    media . audioTracks
    +

    This specification does not currently say whether or how to check the MIME + types of the media resources, or whether or how to perform file type sniffing using the actual + file data. Implementors differ in their intentions on this matter and it is therefore unclear + what the right solution is. In the absence of any requirement here, the HTTP specification's + strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media + type of the underlying data." ... "If and only if the media type is not given by a Content-Type + field, the recipient MAY attempt to guess the media type via inspection of its content + and/or the name extension(s) of the URI used to identify the resource.").

    -

    Returns an AudioTrackList object representing the audio tracks available in the - media resource.

    +

    The networking task source tasks to process + the data as it is being fetched must each immediately queue a task to run the first + appropriate steps from the following list. (A new task is used for this so that the work + described below occurs relative to the media element event task source rather than + the networking task source.)

    -
    media . videoTracks
    +
    If the media data cannot be fetched at all, due to network errors, causing the + user agent to give up trying to fetch the resource
    If the media data can be fetched but is found by inspection to be in an + unsupported format, or can otherwise not be rendered at all
    -

    Returns a VideoTrackList object representing the video tracks available in the - media resource.

    +

    DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal + network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported + container format, or using unsupported codecs for all the data, must cause the user agent to + execute the following steps:

    -
    +

    1. The user agent should cancel the fetching process.

    2. Abort this subalgorithm, returning to the resource selection algorithm.

      - +
    -

    The audioTracks attribute of a - media element must return a live AudioTrackList object - representing the audio tracks available in the media element's media - resource. The same object must be returned each time.

    +
    If the media resource is found to have an audio + track
    -

    The videoTracks attribute of a - media element must return a live VideoTrackList object - representing the video tracks available in the media element's media - resource. The same object must be returned each time.

    +

    1. Create an AudioTrack object to represent the audio track.

    2. Update the media element's audioTracks attribute's AudioTrackList + object with the new AudioTrack object.

    3. Let enable be unknown.

    4. -

      There are only ever one AudioTrackList object and one - VideoTrackList object per media element, even if another media - resource is loaded into the element: the objects are reused. (The AudioTrack - and VideoTrack objects are not, though.)

      +

      If either the media resource or the address of the current + media resource indicate a particular set of audio tracks to enable, or if the user + agent has information that would facilitate the selection of specific audio tracks to + improve the user's experience, then: if this audio track is one of the ones to enable, then + set enable to true, otherwise, set enable + to false.

      - +

      This could be triggered by Media Fragments URI fragment + identifier syntax, but it could also be triggered e.g. by the user agent selecting a 5.1 + surround sound audio track over a stereo audio track. [MEDIAFRAG]

      -
      +

    5. If enable is still unknown, then, if the media + element does not yet have an enabled + audio track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then enable this audio track, + otherwise, do not enable this audio track.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, + and that uses the TrackEvent interface, with the track attribute initialised to the new + AudioTrack object, at this AudioTrackList object.

    -

    In this example, a script defines a function that takes a URL to a video and a reference to an - element where the video is to be placed. That function then tries to load the video, and, once it - is loaded, checks to see if there is a sign-language track available. If there is, it also - displays that track. Both tracks are just placed in the given container; it's assumed that styles - have been applied to make this work in a pretty way!

    +
    If the media resource is found to have a video + track
    - 
    <script>
- function loadVideo(url, container) {
-   var controller = new MediaController();
-   var video = document.createElement('video');
-   video.src = url;
-   video.autoplay = true;
-   video.controls = true;
-   video.controller = controller;
-   container.appendChild(video);
-   video.onloadedmetadata = function (event) {
-     for (var i = 0; i < video.videoTracks.length; i += 1) {
-       if (video.videoTracks[i].kind == 'sign') {
-         var sign = document.createElement('video');
-         sign.src = url + '#track=' + video.videoTracks[i].id; 
-         sign.autoplay = true;
-         sign.controller = controller;
-         container.appendChild(sign);
-         return;
-       }
-     }
-   };
- }
-</script>
    +

    1. Create a VideoTrack object to represent the video track.

    2. Update the media element's videoTracks attribute's VideoTrackList + object with the new VideoTrack object.

    3. Let enable be unknown.

    4. - +

      If either the media resource or the address of the current + media resource indicate a particular set of video tracks to enable, or if the user + agent has information that would facilitate the selection of specific video tracks to + improve the user's experience, then: if this video track is the first such video track, then + set enable to true, otherwise, set enable + to false.

      +

      This could again be triggered by Media Fragments URI + fragment identifier syntax.

      -
      4.7.14.10.1 AudioTrackList and VideoTrackList objects
      +

    5. If enable is still unknown, then, if the media + element does not yet have a selected + video track, then set enable to true, otherwise, set enable to false.

    6. If enable is true, then select this track and unselect any + previously selected video tracks, otherwise, do not select this video track. If other tracks + are unselected, then a change event will be fired.

    7. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, + and that uses the TrackEvent interface, with the track attribute initialised to the new + VideoTrack object, at this VideoTrackList object.

    -

    The AudioTrackList and VideoTrackList interfaces are used by - attributes defined in the previous section.

    +
    Once enough of the media data has been fetched to + determine the duration of the media resource, its dimensions, and other + metadata
    - 
    interface AudioTrackList : EventTarget {
-  readonly attribute unsigned long length;
-  getter AudioTrack (unsigned long index);
-  AudioTrack? getTrackById(DOMString id);
+      
    This indicates that the resource is usable. The user agent must follow these substeps:
    
 
-           attribute EventHandler onchange;
-           attribute EventHandler onaddtrack;
-           attribute EventHandler onremovetrack;
-};
+      
    1. 
 
-interface AudioTrack {
-  readonly attribute DOMString id;
-  readonly attribute DOMString kind;
-  readonly attribute DOMString label;
-  readonly attribute DOMString language;
-           attribute boolean enabled;
-};
+        
      Establish the media timeline for the purposes of the current playback
+        position, the earliest possible position, and the initial playback
+        position, based on the media data.
      
 
-interface VideoTrackList : EventTarget {
-  readonly attribute unsigned long length;
-  getter VideoTrack (unsigned long index);
-  VideoTrack? getTrackById(DOMString id);
-  readonly attribute long selectedIndex;
+       
    2. 
 
-           attribute EventHandler onchange;
-           attribute EventHandler onaddtrack;
-           attribute EventHandler onremovetrack;
-};
+        
      Update the timeline offset to the date and time that corresponds to the zero
+        time in the media timeline established in the previous step, if any. If no
+        explicit time and date is given by the media resource, the timeline
+        offset must be set to Not-a-Number (NaN).
      
 
-interface VideoTrack {
-  readonly attribute DOMString id;
-  readonly attribute DOMString kind;
-  readonly attribute DOMString label;
-  readonly attribute DOMString language;
-           attribute boolean selected;
-};
    +

  • Set the current playback position and the official playback + position to the earliest possible position.

  • -
    media . audioTracks . length
    media . videoTracks . length
    +

    Update the duration attribute with the time of + the last frame of the resource, if known, on the media timeline established + above. If it is not known (e.g. a stream that is in principle infinite), update the duration attribute to the value positive Infinity.

    -

    Returns the number of tracks in the list.

    +

    The user agent will queue a task + to fire a simple event named durationchange at the element at this point.

    -
    audioTrack = media . audioTracks[index]
    videoTrack = media . videoTracks[index]
    +
  • -

    Returns the specified AudioTrack or VideoTrack object.

    +

    For video elements, set the videoWidth and videoHeight attributes, and queue a task + to fire a simple event named resize at + the media element.

    -
    audioTrack = media . audioTracks . getTrackById( id )
    videoTrack = media . videoTracks . getTrackById( id )
    +

    Further resize events will be fired + if the dimensions subsequently change.

    -

    Returns the AudioTrack or VideoTrack object with the given identifier, or null if no track has that identifier.

    +
  • -
    audioTrack . id
    videoTrack . id
    +

    Set the readyState attribute to HAVE_METADATA.

    -

    Returns the ID of the given track. This is the ID that can be used with a fragment identifier - if the format supports the Media Fragments URI syntax, and that can be used with - the getTrackById() method. [MEDIAFRAG]

    +

    A loadedmetadata DOM event + will be fired as part of setting the readyState attribute to a new value.

    -
    audioTrack . kind
    videoTrack . kind
    + -

    Returns the category the given track falls into. The possible track categories are given below.

    +

  • Let jumped be false.

  • If the media element's default playback start position is + greater than zero, then seek to that time, and let jumped be true.

  • Let the media element's default playback + start position be zero.

  • -
    audioTrack . label
    videoTrack . label
    +

    If either the media resource or the address of the current + media resource indicate a particular start time, then set the initial playback + position to that time and, if jumped is still false, seek to that time and let jumped be + true.

    -

    Returns the label of the given track, if known, or the empty string otherwise.

    +

    For example, with media formats that support the Media Fragments + URI fragment identifier syntax, the fragment identifier can be used to indicate a + start position. [MEDIAFRAG]

    -
    audioTrack . language
    videoTrack . language
    +

  • If there is no enabled audio track, then + enable an audio track. This will cause a change event to be fired.

  • If there is no selected video track, + then select a video track. This will cause a change event to be fired.

  • If the media element has a current media controller, then: + if jumped is true and the initial playback position, + relative to the current media controller's timeline, is greater than the + current media controller's media controller position, then + seek the media controller to the media element's initial + playback position, relative to the current media controller's timeline; + otherwise, seek the media element to the + media controller position, relative to the media element's + timeline. -

    Returns the language of the given track, if known, or the empty string otherwise.

    +

    Once the readyState attribute reaches HAVE_CURRENT_DATA, after + the loadeddata event has been fired, set the + element's delaying-the-load-event flag to false. This stops delaying the load event.

    -
    audioTrack . enabled [ = value ]
    +

    A user agent that is attempting to reduce network usage while still fetching + the metadata for each media resource would also stop buffering at this point, + following the rules described previously, which involve the + networkState attribute switching to the NETWORK_IDLE value and a suspend event firing.

    -

    Returns true if the given track is active, and false otherwise.

    +

    The user agent is required to determine the duration of the + media resource and go through this step before playing.

    -

    Can be set, to change whether the track is enabled or not. If multiple audio tracks are - enabled simultaneously, they are mixed.

    +
    Once the entire media resource has been fetched + (but potentially before any of it has been decoded)
    -
    media . videoTracks . selectedIndex
    +

    Fire a simple event named progress + at the media element.

    -

    Returns the index of the currently selected track, if any, or −1 otherwise.

    +

    Set the networkState to NETWORK_IDLE and fire a simple event named + suspend at the media element.

    -
    videoTrack . selected [ = value ]
    +

    If the user agent ever discards any media data and then needs to resume the + network activity to obtain it again, then it must queue a task to set the networkState to NETWORK_LOADING.

    -

    Returns true if the given track is active, and false otherwise.

    +

    If the user agent can keep the media resource loaded, then the + algorithm will continue to its final step below, which aborts the algorithm.

    -

    Can be set, to change whether the track is selected or not. Either zero or one video track is - selected; selecting a new track while a previous one is selected will unselect the previous - one.

    +
    If the connection is interrupted after some media data has been received, + causing the user agent to give up trying to fetch the resource
    -
    • +

    Fatal network errors that occur after the user agent has established whether the current media resource is usable (i.e. once the media element's + readyState attribute is no longer HAVE_NOTHING) must cause the user agent to execute the + following steps:

    - +

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_NETWORK.

    3. Fire a simple event named error at + the media element.

    4. Set the element's networkState attribute + to the NETWORK_IDLE value.

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection + algorithm.

    -

    An AudioTrackList object represents a dynamic list of zero or more audio tracks, - of which zero or more can be enabled at a time. Each audio track is represented by an - AudioTrack object.

    +
    If the media data is corrupted
    -

    A VideoTrackList object represents a dynamic list of zero or more video tracks, of - which zero or one can be selected at a time. Each video track is represented by a - VideoTrack object.

    +

    Fatal errors in decoding the media data that occur after the user agent has + established whether the current media resource is usable must cause the + user agent to execute the following steps:

    -

    Tracks in AudioTrackList and VideoTrackList objects must be - consistently ordered. If the media resource is in a format that defines an order, - then that order must be used; otherwise, the order must be the relative order in which the tracks - are declared in the media resource. The order used is called the natural order - of the list.

    +

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_DECODE.

    3. Fire a simple event named error at + the media element.

    4. -

      Each track in one of these objects thus has an index; the first has the index - 0, and each subsequent track is numbered one higher than the previous one. If a media - resource dynamically adds or removes audio or video tracks, then the indices of the tracks - will change dynamically. If the media resource changes entirely, then all the - previous tracks will be removed and replaced with new tracks.

      +

      If the media element's readyState + attribute has a value equal to HAVE_NOTHING, set + the element's networkState attribute to the + NETWORK_EMPTY value, set the element's + show poster flag to true, and fire a simple event named emptied at the element.

      -

      The AudioTrackList.length and VideoTrackList.length attributes must return - the number of tracks represented by their objects at the time of getting.

      +

      Otherwise, set the element's networkState + attribute to the NETWORK_IDLE value.

      -

      The supported property indices of AudioTrackList and - VideoTrackList objects at any instant are the numbers from zero to the number of - tracks represented by the respective object minus one, if any tracks are represented. If an - AudioTrackList or VideoTrackList object represents no tracks, it has no - supported property indices.

      +

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection + algorithm.

    -

    To determine the value of an indexed property for a given index index in an AudioTrackList or VideoTrackList object list, the user agent must return the AudioTrack or - VideoTrack object that represents the indexth track in list.

    +
    If the media data fetching process is aborted by the user
    -

    The AudioTrackList.getTrackById(id) and VideoTrackList.getTrackById(id) methods must return the first AudioTrack or - VideoTrack object (respectively) in the AudioTrackList or - VideoTrackList object (respectively) whose identifier is equal to the value of the - id argument (in the natural order of the list, as defined above). When no - tracks match the given argument, the methods must return null.

    +

    The fetching process is aborted by the user, e.g. because the user + pressed a "stop" button, the user agent must execute the following steps. These steps are not + followed if the load() method itself is invoked while + these steps are running, as the steps above handle that particular kind of abort.

    -

    The AudioTrack and VideoTrack objects represent specific tracks of a - media resource. Each track can have an identifier, category, label, and language. - These aspects of a track are permanent for the lifetime of the track; even if a track is removed - from a media resource's AudioTrackList or VideoTrackList - objects, those aspects do not change.

    +

    1. The user agent should cancel the fetching process.

    2. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_ABORTED.

    3. Fire a simple event named abort at + the media element.

    4. -

      In addition, AudioTrack objects can each be enabled or disabled; this is the audio - track's enabled state. When an AudioTrack is created, its enabled state - must be set to false (disabled). The resource fetch - algorithm can override this.

      +

      If the media element's readyState + attribute has a value equal to HAVE_NOTHING, set + the element's networkState attribute to the + NETWORK_EMPTY value, set the element's + show poster flag to true, and fire a simple event named emptied at the element.

      -

      Similarly, a single VideoTrack object per VideoTrackList object can - be selected, this is the video track's selection state. When a VideoTrack is - created, its selection state must be set to false (not selected). The resource fetch algorithm can override this.

      +

      Otherwise, set the element's networkState + attribute to the NETWORK_IDLE value.

      -

      The AudioTrack.id and VideoTrack.id attributes must return the identifier - of the track, if it has one, or the empty string otherwise. If the media resource is - in a format that supports the Media Fragments URI fragment identifier syntax, the - identifier returned for a particular track must be the same identifier that would enable the track - if used as the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

      +

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

    6. Abort the overall resource selection + algorithm.

    -

    For example, in Ogg files, this would be the Name header field of the track. [OGGSKELETONHEADERS]

    +
    If the media data can be fetched but has non-fatal + errors or uses, in part, codecs that are unsupported, preventing the user agent from rendering + the content completely correctly but not preventing playback altogether
    -

    The AudioTrack.kind and VideoTrack.kind attributes must return the category - of the track, if it has one, or the empty string otherwise.

    +

    The server returning data that is partially usable but cannot be optimally rendered must + cause the user agent to render just the bits it can handle, and ignore the rest.

    -

    The category of a track is the string given in the first column of the table below that is the - most appropriate for the track based on the definitions in the table's second and third columns, - as determined by the metadata included in the track in the media resource. The cell - in the third column of a row says what the category given in the cell in the first column of that - row applies to; a category is only appropriate for an audio track if it applies to audio tracks, - and a category is only appropriate for video tracks if it applies to video tracks. Categories must - only be returned for AudioTrack objects if they are appropriate for audio, and must - only be returned for VideoTrack objects if they are appropriate for video.

    + -

    For Ogg files, the Role header field of the track gives the relevant metadata. For DASH media - resources, the Role element conveys the information. For WebM, only the - FlagDefault element currently maps to a value. [OGGSKELETONHEADERS] [DASH] [WEBMCG]

    +
    If the media resource is + found to declare a media-resource-specific text track that the user agent + supports
    - +

    If the media data is CORS-same-origin, run the steps to + expose a media-resource-specific text track with the relevant data.

    - - - - - - - -
    Return values for AudioTrack.kind and VideoTrack.kind
    Category - Definition - Applies to...Examples -
    "alternative" - A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video). - Audio and video. - Ogg: "audio/alternate" or "video/alternate"; DASH: "alternate" without "main" and "commentary" roles, and, for audio, without the "dub" role (other roles ignored). +

    Cross-origin videos do not expose their subtitles, since that would allow + attacks such as hostile sites reading subtitles from confidential videos on a user's + intranet.

    -
    "captions" - A version of the main video track with captions burnt in. (For legacy content; new content would use text tracks.) - Video only. - DASH: "caption" and "main" roles together (other roles ignored). + -
    "descriptions" - An audio description of a video track. - Audio only. - Ogg: "audio/audiodesc". +

    When the networking task source has queued the + last task as part of fetching the + media resource (i.e. once the download has completed), if the fetching process + completes without errors, including decoding the media data, and if all of the data is available + to the user agent without network access, then, the user agent must move on to the next step. + This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the + resource is longer than the user agent's ability to cache data.

    -
    "main" - The primary audio or video track. - Audio and video. - Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set; DASH: "main" role without "caption", "subtitle", and "dub" roles (other roles ignored). +

    While the user agent might still need network access to obtain parts of the media + resource, the user agent must remain on this step.

    -
    "main-desc" - The primary audio track, mixed with audio descriptions. - Audio only. - AC3 audio in MPEG-2 TS: bsmod=2 and full_svc=1. +

    For example, if the user agent has discarded the first half of a video, the + user agent will remain at this step even once the playback has + ended, because there is always the chance the user will seek back to the start. In fact, + in this situation, once playback has ended, the user agent + will end up firing a suspend event, as described + earlier.

    -
    "sign" - A sign-language interpretation of an audio track. - Video only. - Ogg: "video/sign". +

  • If the user agent ever reaches this step (which can only happen if the entire resource + gets loaded and kept available): abort the overall resource selection algorithm. -

    • "subtitles" - A version of the main video track with subtitles burnt in. (For legacy content; new content would use text tracks.) - Video only. - DASH: "subtitle" and "main" roles together (other roles ignored). +

    When a media element is to forget the media element's media-resource-specific + tracks, the user agent must remove from the media element's list of text + tracks all the media-resource-specific + text tracks, then empty the media element's audioTracks attribute's AudioTrackList object, + then empty the media element's videoTracks + attribute's VideoTrackList object. No events (in particular, no removetrack events) are fired as part of this; the error and emptied + events, fired by the algorithms that invoke this one, can be used instead.

    -
    "translation" - A translated version of the main audio track. - Audio only. - Ogg: "audio/dub". DASH: "dub" and "main" roles together (other roles ignored). + -
    "commentary" - Commentary on the primary audio or video track, e.g. a director's commentary. - Audio and video. - DASH: "commentary" role without "main" role (other roles ignored). +
    -
    "" (empty string) - No explicit kind, or the kind given by the track's metadata is not recognised by the user agent. - Audio and video. - Any other track type, track role, or combination of track roles not described above. +

    The preload attribute is an enumerated + attribute. The following table lists the keywords and states for the attribute — the + keywords in the left column map to the states in the cell in the second column on the same row as + the keyword. The attribute can be changed even once the media resource is being + buffered or played; the descriptions in the table below are to be interpreted with that in + mind.

    +
    Keyword + State + Brief description +
    none + None + Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic. + This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play"). +
    metadata + Metadata + Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, track list, duration, etc), and maybe even the first few frames, is reasonable. If the user agent precisely fetches no more than the metadata, then the media element will end up with its readyState attribute set to HAVE_METADATA; typically though, some frames will be obtained as well and it will probably be HAVE_CURRENT_DATA or HAVE_FUTURE_DATA. + When the media resource is playing, hints to the user agent that bandwidth is to be considered scarce, e.g. suggesting throttling the download so that the media data is obtained at the slowest possible rate that still maintains consistent playback. +
    auto + Automatic + Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource.
    +

    The empty string is also a valid keyword, and maps to the Automatic state. The attribute's missing value default is user-agent defined, though the Metadata state is suggested as a compromise + between reducing server load and providing an optimal user experience.

    + +

    Authors might switch the attribute from "none" or "metadata" to "auto" dynamically once the user begins playback. For + example, on a page with many videos this might be used to indicate that the many videos are not to + be downloaded unless requested, but that once one is requested it is to be downloaded + aggressively.

    + -

    The AudioTrack.label and VideoTrack.label attributes must return the label - of the track, if it has one, or the empty string otherwise.

    +

    The preload attribute is intended to provide a hint to + the user agent about what the author thinks will lead to the best user experience. The attribute + may be ignored altogether, for example based on explicit user preferences or based on the + available connectivity.

    -

    The AudioTrack.language and VideoTrack.language attributes must return the - BCP 47 language tag of the language of the track, if it has one, or the empty string otherwise. If - the user agent is not able to express that language as a BCP 47 language tag (for example because - the language information in the media resource's format is a free-form string without - a defined interpretation), then the method must return the empty string, as if the track had no - language.

    +

    The preload IDL attribute must + reflect the content attribute of the same name, limited to only known + values.

    -

    The AudioTrack.enabled attribute, on - getting, must return true if the track is currently enabled, and false otherwise. On setting, it - must enable the track if the new value is true, and disable it otherwise. (If the track is no - longer in an AudioTrackList object, then the track being enabled or disabled has no - effect beyond changing the value of the attribute on the AudioTrack object.)

    + -

    Whenever an audio track in an AudioTrackList that was - disabled is enabled, and whenever one that was enabled is disabled, the user agent must - queue a task to fire a simple event named change at the AudioTrackList object.

    +

    The autoplay attribute can override the + preload attribute (since if the media plays, it naturally + has to buffer first, regardless of the hint given by the preload attribute). Including both is not an error, however.

    -

    The VideoTrackList.selectedIndex attribute - must return the index of the currently selected track, if any. If the VideoTrackList - object does not currently represent any tracks, or if none of the tracks are selected, it must - instead return −1.

    +
    -

    The VideoTrack.selected attribute, on - getting, must return true if the track is currently selected, and false otherwise. On setting, it - must select the track if the new value is true, and unselect it otherwise. If the track is in a - VideoTrackList, then all the other VideoTrack objects in that list must - be unselected. (If the track is no longer in a VideoTrackList object, then the track - being selected or unselected has no effect beyond changing the value of the attribute on the - VideoTrack object.)

    -

    Whenever a track in a VideoTrackList that was previously - not selected is selected, the user agent must queue a task to fire a simple - event named change at the - VideoTrackList object. This task must be queued before the task that fires - the resize event, if any.

    -
    +
    media . buffered
    -

    The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, - by all objects implementing the AudioTrackList and VideoTrackList - interfaces:

    +

    Returns a TimeRanges object that represents the ranges of the media + resource that the user agent has buffered.

    -
    Event handler Event handler event type -
    onchange change -
    onaddtrack addtrack -
    onremovetrack removetrack -
    +
    - +

    The buffered attribute must return a new + static normalised TimeRanges object that represents the ranges of the + media resource, if any, that the user agent has buffered, at the time the attribute + is evaluated. Users agents must accurately determine the ranges available, even for media streams + where this can only be determined by tedious inspection.

    + +

    Typically this will be a single range anchored at the zero point, but if, e.g. the + user agent uses HTTP range requests in response to seeking, then there could be multiple + ranges.

    +

    User agents may discard previously buffered data.

    -
    4.7.14.10.2 Selecting specific audio and video tracks declaratively
    +

    Thus, a time position included within a range of the objects return by the buffered attribute at one time can end up being not included in + the range(s) of objects returned by the same attribute at later times.

    -

    The audioTracks and videoTracks attributes allow scripts to select which track - should play, but it is also possible to select specific tracks declaratively, by specifying - particular tracks in the fragment identifier of the URL of the media - resource. The format of the fragment identifier depends on the MIME type of - the media resource. [RFC2046] [URL]

    + -
    -

    In this example, a video that uses a format that supports the Media Fragments URI - fragment identifier syntax is embedded in such a way that the alternative angles labeled - "Alternative" are enabled instead of the default video track. [MEDIAFRAG]

    - 
    <video src="myvideo#track=Alternative"></video>
    +
    4.8.14.6 Offsets into the media resource
    -
    +
    media . duration
    +

    Returns the length of the media resource, in seconds, assuming that the start of + the media resource is at time zero.

    -
    4.7.14.11 Synchronising multiple media elements
    +

    Returns NaN if the duration isn't available.

    -
    4.7.14.11.1 Introduction
    +

    Returns Infinity for unbounded streams.

    -

    Each media element can have a MediaController. A - MediaController is an object that coordinates the playback of multiple media elements, for instance so that a sign-language interpreter - track can be overlaid on a video track, with the two being kept in sync.

    +
    media . currentTime [ = value ]
    -

    By default, a media element has no MediaController. An implicit - MediaController can be assigned using the mediagroup content attribute. An explicit - MediaController can be assigned directly using the controller IDL attribute.

    +

    Returns the official playback position, in seconds.

    -

    Media elements with a MediaController are said - to be slaved to their controller. The MediaController modifies the playback - rate and the playback volume of each of the media elements - slaved to it, and ensures that when any of its slaved media - elements unexpectedly stall, the others are stopped at the same time.

    +

    Can be set, to seek to the given time.

    -

    When a media element is slaved to a MediaController, its playback - rate is fixed to that of the other tracks in the same MediaController, and any - looping is disabled.

    +

    Will throw an InvalidStateError exception if there is no selected media + resource or if there is a current media controller.

    +
    + +

    A media resource has a media timeline that maps times (in seconds) to + positions in the media resource. The origin of a timeline is its earliest defined + position. The duration of a timeline is its last defined position.

    -
    4.7.14.11.2 Media controllers
    +

    Establishing the media + timeline: If the media resource somehow specifies an explicit timeline whose + origin is not negative (i.e. gives each frame a specific time offset and gives the first frame a + zero or positive offset), then the media timeline should be that timeline. (Whether + the media resource can specify a timeline or not depends on the media resource's format.) If the media resource specifies an + explicit start time and date, then that time and date should be considered the zero point + in the media timeline; the timeline offset will be the time and date, + exposed using the getStartDate() method.

    - 
    enum MediaControllerPlaybackState { "waiting", "playing", "ended" };
-[Constructor]
-interface MediaController : EventTarget {
-  readonly attribute unsigned short readyState; // uses HTMLMediaElement.readyState's values
+  
    If the media resource has a discontinuous timeline, the user agent must extend the
+  timeline used at the start of the resource across the entire resource, so that the media
+  timeline of the media resource increases linearly starting from the
+  earliest possible position (as defined below), even if the underlying media
+  data has out-of-order or even overlapping time codes.
    
 
-  readonly attribute TimeRanges buffered;
-  readonly attribute TimeRanges seekable;
-  readonly attribute unrestricted double duration;
-           attribute double currentTime;
+  
    For example, if two clips have been concatenated into one video file, but the
+  video format exposes the original times for the two clips, the video data might expose a timeline
+  that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those
+  times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.
    
 
-  readonly attribute boolean paused;
-  readonly attribute MediaControllerPlaybackState playbackState;
-  readonly attribute TimeRanges played;
-  void pause();
-  void unpause();
-  void play(); // calls play() on all media elements as well
+  
    In the rare case of a media resource that does not have an explicit timeline, the
+  zero time on the media timeline should correspond to the first frame of the
+  media resource. In the even rarer case of a media resource with no
+  explicit timings of any kind, not even frame durations, the user agent must itself determine the
+  time for each frame in a user-agent-defined manner.
+  (This is a fingerprinting vector.)
+  
    
 
-           attribute double defaultPlaybackRate;
-           attribute double playbackRate;
+  
    An example of a file format with no explicit timeline but with explicit frame
+  durations is the Animated GIF format. An example of a file format with no explicit timings at all
+  is the JPEG-push format (multipart/x-mixed-replace with JPEG frames, often
+  used as the format for MJPEG streams).
    
 
-           attribute double volume;
-           attribute boolean muted;
+  
    If, in the case of a resource with no timing information, the user agent will nonetheless be
+  able to seek to an earlier point than the first frame originally provided by the server, then the
+  zero time should correspond to the earliest seekable time of the media resource;
+  otherwise, it should correspond to the first frame received from the server (the point in the
+  media resource at which the user agent began receiving the stream).
    
 
-           attribute EventHandler onemptied;
-           attribute EventHandler onloadedmetadata;
-           attribute EventHandler onloadeddata;
-           attribute EventHandler oncanplay;
-           attribute EventHandler oncanplaythrough;
-           attribute EventHandler onplaying;
-           attribute EventHandler onended;
-           attribute EventHandler onwaiting;
+  
    At the time of writing, there is no known format that lacks explicit frame time
+  offsets yet still supports seeking to a frame before the first frame sent by the server.
    
 
-           attribute EventHandler ondurationchange;
-           attribute EventHandler ontimeupdate;
-           attribute EventHandler onplay;
-           attribute EventHandler onpause;
-           attribute EventHandler onratechange;
-           attribute EventHandler onvolumechange;
-};
    +
    -
    controller = new MediaController()
    +

    Consider a stream from a TV broadcaster, which begins streaming on a sunny Friday afternoon in + October, and always sends connecting user agents the media data on the same media timeline, with + its zero time set to the start of this stream. Months later, user agents connecting to this + stream will find that the first frame they receive has a time with millions of seconds. The getStartDate() method would always return the date that the + broadcast started; this would allow controllers to display real times in their scrubber (e.g. + "2:30pm") rather than a time relative to when the broadcast began ("8 months, 4 hours, 12 + minutes, and 23 seconds").

    -

    Returns a new MediaController object.

    +

    Consider a stream that carries a video with several concatenated fragments, broadcast by a + server that does not allow user agents to request specific times but instead just streams the + video data in a predetermined order, with the first frame delivered always being identified as + the frame with time zero. If a user agent connects to this stream and receives fragments defined + as covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 + UTC to 2010-02-12 14:35:00 UTC, it would expose this with a media timeline starting + at 0s and extending to 3,600s (one hour). Assuming the streaming server disconnected at the end + of the second clip, the duration attribute would then + return 3,600. The getStartDate() method would return a + Date object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a + different user agent connected five minutes later, it would (presumably) receive + fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 + 14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a media timeline + starting at 0s and extending to 3,300s (fifty five minutes). In this case, the getStartDate() method would return a Date object + with a time corresponding to 2010-03-20 23:20:00 UTC.

    -
    media . controller [ = controller ]
    +

    In both of these examples, the seekable attribute + would give the ranges that the controller would want to actually display in its UI; typically, if + the servers don't support seeking to arbitrary times, this would be the range of time from the + moment the user agent connected to the stream up to the latest frame that the user agent has + obtained; however, if the user agent starts discarding earlier information, the actual range + might be shorter.

    -

    Returns the current MediaController for the media element, if any; - returns null otherwise.

    +
    -

    Can be set, to set an explicit MediaController. Doing so removes the mediagroup attribute, if any.

    +

    In any case, the user agent must ensure that the earliest possible position (as + defined below) using the established media timeline, is greater than or equal to + zero.

    -
    controller . readyState
    +

    The media timeline also has an associated clock. Which clock is used is user-agent + defined, and may be media resource-dependent, but it should approximate the user's + wall clock.

    -

    Returns the state that the MediaController was in the last time it fired events - as a result of reporting the controller state. - The values of this attribute are the same as for the readyState attribute of media - elements.

    +

    All the media elements that share current + media controller use the same clock for their media timeline.

    -
    controller . buffered
    +

    Media elements have a current playback position, + which must initially (i.e. in the absence of media data) be zero seconds. The + current playback position is a time on the media timeline.

    -

    Returns a TimeRanges object that represents the intersection of the time ranges - for which the user agent has all relevant media data for all the slaved media elements.

    +

    Media elements also have an official playback + position, which must initially be set to zero seconds. The official playback + position is an approximation of the current playback position that is kept + stable while scripts are running.

    -
    controller . seekable
    +

    Media elements also have a default playback start + position, which must initially be set to zero seconds. This time is used to allow the + element to be seeked even before the media is loaded.

    -

    Returns a TimeRanges object that represents the intersection of the time ranges - into which the user agent can seek for all the slaved media - elements.

    +

    Each media element has a show poster flag. When a media + element is created, this flag must be set to true. This flag is used to control when the + user agent is to show a poster frame for a video element instead of showing the video + contents.

    -
    controller . duration
    +

    The currentTime attribute must, on + getting, return the media element's default playback start position, + unless that is zero, in which case it must return the element's official playback + position. The returned value must be expressed in seconds. On setting, if the media + element has a current media controller, then the user agent must throw an + InvalidStateError exception; otherwise, if the media element's readyState is HAVE_NOTHING, then it must set the media + element's default playback start position to the new value; otherwise, it must + set the official playback position to the new value and then seek to the new value. The new value must be interpreted as being in + seconds.

    -

    Returns the difference between the earliest playable moment and the latest playable moment - (not considering whether the data in question is actually buffered or directly seekable, but not - including time in the future for infinite streams). Will return zero if there is no media.

    +

    Media elements have an initial playback position, + which must initially (i.e. in the absence of media data) be zero seconds. The + initial playback position is updated when a media resource is loaded. + The initial playback position is a time on the media timeline.

    -
    controller . currentTime [ = value ]
    +

    If the media resource is a streaming resource, then the user agent might be unable + to obtain certain parts of the resource after it has expired from its buffer. Similarly, some + media resources might have a media timeline that + doesn't start at zero. The earliest possible position is the earliest position in the + stream or resource that the user agent can ever obtain again. It is also a time on the media + timeline.

    -

    Returns the current playback position, in seconds, as a position between zero - time and the current duration.

    +

    The earliest possible position is not explicitly exposed in the API; + it corresponds to the start time of the first range in the seekable attribute's TimeRanges object, if any, or + the current playback position otherwise.

    -

    Can be set, to seek to the given time.

    +

    When the earliest possible position changes, then: if the current playback + position is before the earliest possible position, the user agent must seek to the earliest possible position; otherwise, if + the user agent has not fired a timeupdate event at the + element in the past 15 to 250ms and is not still running event handlers for such an event, then + the user agent must queue a task to fire a simple event named timeupdate at the element.

    -
    controller . paused
    +

    Because of the above requirement and the requirement in the resource fetch algorithm that kicks in when the metadata of the clip becomes known, the current + playback position can never be less than the earliest possible position.

    -

    Returns true if playback is paused; false otherwise. When this attribute is true, any - media element slaved to this controller will be stopped.

    + + -
    controller . playbackState
    +

    If at any time the user agent learns that an audio or video track has ended and all media + data relating to that track corresponds to parts of the media timeline that + are before the earliest possible position, the user agent may queue a + task to first remove the track from the audioTracks + attribute's AudioTrackList object or the videoTracks attribute's VideoTrackList object as + appropriate and then fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that + uses the TrackEvent interface, with the track attribute initialised to the AudioTrack or + VideoTrack object representing the track, at the media element's + aforementioned AudioTrackList or VideoTrackList object.

    -

    Returns the state that the MediaController was in the last time it fired events - as a result of reporting the controller state. - The value of this attribute is either "playing", indicating that the media is actively - playing, "ended", indicating that the media is - not playing because playback has reached the end of all the slaved media elements, - or "waiting", indicating that the media is not - playing for some other reason (e.g. the MediaController is paused).

    +

    The duration attribute must return the time + of the end of the media resource, in seconds, on the media timeline. If + no media data is available, then the attributes must return the Not-a-Number (NaN) + value. If the media resource is not known to be bounded (e.g. streaming radio, or a + live event with no announced end time), then the attribute must return the positive Infinity + value.

    -
    controller . pause()
    +

    The user agent must determine the duration of the media resource before playing + any part of the media data and before setting readyState to a value equal to or greater than HAVE_METADATA, even if doing so requires fetching multiple + parts of the resource.

    + +

    When the length of the media resource changes to a known value + (e.g. from being unknown to known, or from a previously established length to a new length) the + user agent must queue a task to fire a simple event named durationchange at the media element. (The + event is not fired when the duration is reset as part of loading a new media resource.) If the + duration is changed such that the current playback position ends up being greater + than the time of the end of the media resource, then the user agent must also seek to the time of the end of the media resource.

    + +

    If an "infinite" stream ends for some reason, then the duration would change + from positive Infinity to the time of the last frame or sample in the stream, and the durationchange event would be fired. Similarly, if the + user agent initially estimated the media resource's duration instead of determining + it precisely, and later revises the estimate based on new information, then the duration would + change and the durationchange event would be + fired.

    -

    Sets the paused attribute to true.

    +

    Some video files also have an explicit date and time corresponding to the zero time in the + media timeline, known as the timeline offset. Initially, the + timeline offset must be set to Not-a-Number (NaN).

    -
    controller . unpause()
    +

    The getStartDate() method must return a new Date object representing the current + timeline offset.

    -

    Sets the paused attribute to false.

    + -
    controller . play()
    +
    -

    Sets the paused attribute to false and - invokes the play() method of each slaved media element.

    +

    The loop attribute is a boolean + attribute that, if specified, indicates that the media element is to seek back + to the start of the media resource upon reaching the end.

    -
    controller . played
    +

    The loop attribute has no effect while the element has a + current media controller.

    -

    Returns a TimeRanges object that represents the union of the time ranges in all - the slaved media elements that have been played.

    + -
    controller . defaultPlaybackRate [ = value ]
    +

    The loop IDL attribute must reflect + the content attribute of the same name.

    -

    Returns the default rate of playback.

    + -

    Can be set, to change the default rate of playback.

    -

    This default rate has no direct effect on playback, but if the user switches to a - fast-forward mode, when they return to the normal playback mode, it is expected that rate of - playback (playbackRate) will be returned - to this default rate.

    -
    controller . playbackRate [ = value ]
    +
    4.8.14.7 Ready states
    -

    Returns the current rate of playback.

    +
    media . readyState
    -

    Can be set, to change the rate of playback.

    +

    Returns a value that expresses the current state of the element with respect to rendering the + current playback position, from the codes in the list below.

    -
    controller . volume [ = value ]
    +
    -

    Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where - 0.0 is the quietest and 1.0 the loudest.

    + -

    Can be set, to change the volume multiplier.

    +

    Media elements have a ready state, which describes to + what degree they are ready to be rendered at the current playback position. The + possible values are as follows; the ready state of a media element at any particular time is the + greatest value describing the state of the element:

    -

    Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

    + -
    controller . muted [ = value ]
    +
    HAVE_NOTHING (numeric value 0)

    No information regarding the media resource is available. No data for the + current playback position is available. Media + elements whose networkState attribute are set + to NETWORK_EMPTY are always in the HAVE_NOTHING state.

    HAVE_METADATA (numeric value 1)

    Enough of the resource has been obtained that the duration of the resource is available. + In the case of a video element, the dimensions of the video are also available. The + API will no longer throw an exception when seeking. No media data is available for + the immediate current playback position.

    HAVE_CURRENT_DATA (numeric value 2)

    Data for the immediate current playback position is available, but either not + enough data is available that the user agent could successfully advance the current + playback position in the direction of playback at all without immediately + reverting to the HAVE_METADATA state, or there is no + more data to obtain in the direction of playback. For example, in video this + corresponds to the user agent having data from the current frame, but not the next frame, when + the current playback position is at the end of the current frame; and to when playback has ended.

    HAVE_FUTURE_DATA (numeric value 3)

    Data for the immediate current playback position is available, as well as + enough data for the user agent to advance the current playback position in the + direction of playback at least a little without immediately reverting to the HAVE_METADATA state, and the text tracks are + ready. For example, in video this corresponds to the user agent having data for at least + the current frame and the next frame when the current playback position is at the + instant in time between the two frames, or to the user agent having the video data for the + current frame and audio data to keep playing at least a little when the current playback + position is in the middle of a frame. The user agent cannot be in this state if playback has ended, as the current playback position + can never advance in this case.

    HAVE_ENOUGH_DATA (numeric value 4)
    -

    Returns true if all audio is muted (regardless of other attributes either on the controller - or on any media elements slaved to this controller), and - false otherwise.

    +

    All the conditions described for the HAVE_FUTURE_DATA state are met, and, in addition, + either of the following conditions is also true:

    -

    Can be set, to change whether the audio is muted or not.

    +
    • The user agent estimates that data is being fetched at a rate where the current + playback position, if it were to advance at the effective playback rate, + would not overtake the available data before playback reaches the end of the media + resource.
    • The user agent has entered a state where waiting longer will not result in further data + being obtained, and therefore nothing would be gained by delaying playback any further. (For + example, the buffer might be full.)
    - +

    In practice, the difference between HAVE_METADATA and HAVE_CURRENT_DATA is negligible. Really the only time + the difference is relevant is when painting a video element onto a + canvas, where it distinguishes the case where something will be drawn (HAVE_CURRENT_DATA or greater) from the case where + nothing is drawn (HAVE_METADATA or less). Similarly, + the difference between HAVE_CURRENT_DATA (only + the current frame) and HAVE_FUTURE_DATA (at least + this frame and the next) can be negligible (in the extreme, only one frame). The only time that + distinction really matters is when a page provides an interface for "frame-by-frame" + navigation.

    -

    A media element can have a current media controller, which is a - MediaController object. When a media element is created without a mediagroup attribute, it does not have a current media - controller. (If it is created with such an attribute, then that attribute - initializes the current media controller, as defined below.)

    + -

    The slaved media elements of a MediaController are the media elements whose current media controller is that - MediaController. All the slaved media elements of a - MediaController must use the same clock for their definition of their media - timeline's unit time. When the user agent is required to act on each slaved media element in turn, they must be processed in the order that they - were last associated with the MediaController.

    +

    When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the user agent must follow the steps + given below:

    -
    +
    1. -

      The controller attribute on a media - element, on getting, must return the element's current media controller, if - any, or null otherwise. On setting, the user agent must run the following steps:

      +

      Apply the first applicable set of substeps from the following list:

      -

      1. Let m be the media element in question.

      2. Let old controller be m's current media - controller, if it currently has one, and null otherwise.

      3. Let new controller be null.

      4. Let m have no current media controller, if it currently - has one.

      5. Remove the element's mediagroup content - attribute, if any.

      6. If the new value is null, then jump to the update controllers step below.

      7. Let m's current media controller be the new - value.

      8. Let new controller be m's current media - controller.

      9. Bring the media element up to speed with its new media controller.

      10. Update controllers: If old controller and new - controller are the same (whether both null or both the same controller) then abort these - steps.

      11. If old controller is not null and still has one or more slaved - media elements, then report the controller state for old - controller.

      12. If new controller is not null, then report the controller - state for new controller.

      -
      +
      If the previous ready state was HAVE_NOTHING, + and the new ready state is HAVE_METADATA
      -

      The MediaController() constructor, when - invoked, must return a newly created MediaController object.

      +

      Queue a task to fire a simple event named loadedmetadata at the element.

      -
      +

      Before this task is run, as part of the event loop mechanism, the + rendering will have been updated to resize the video element if appropriate.

      -

      The readyState attribute must - return the value to which it was most recently set. When the MediaController object - is created, the attribute must be set to the value 0 (HAVE_NOTHING). The value is updated by the report the - controller state algorithm below.

      +
      If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater
      -

      The seekable attribute must return - a new static normalised TimeRanges object that represents the - intersection of the ranges of the media resources of the - slaved media elements that the user agent is able to seek to, at the time the - attribute is evaluated.

      +

      If this is the first time this occurs for this media + element since the load() algorithm was last + invoked, the user agent must queue a task to fire a simple event + named loadeddata at the element.

      -

      The buffered attribute must return - a new static normalised TimeRanges object that represents the - intersection of the ranges of the media resources of the - slaved media elements that the user agent has buffered, at the time the attribute is - evaluated. Users agents must accurately determine the ranges available, even for media streams - where this can only be determined by tedious inspection.

      +

      If the new ready state is HAVE_FUTURE_DATA + or HAVE_ENOUGH_DATA, then the relevant steps + below must then be run also.

      -

      The duration attribute must return - the media controller duration.

      +
      If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready state is + HAVE_CURRENT_DATA or less
      -

      Every 15 to 250ms, or whenever the MediaController's media controller - duration changes, whichever happens least often, the user agent must queue a - task to fire a simple event named durationchange at the - MediaController. If the MediaController's media controller - duration decreases such that the media controller position is greater than the - media controller duration, the user agent must immediately seek the media - controller to media controller duration.

      +

      If the media element was potentially + playing before its readyState attribute + changed to a value lower than HAVE_FUTURE_DATA, and the element has not + ended playback, and playback has not stopped due to errors, + paused for user interaction, or paused for in-band content, the user + agent must queue a task to fire a simple event named timeupdate at the element, and queue a task + to fire a simple event named waiting at + the element.

      -

      The currentTime attribute must - return the media controller position on getting, and on setting must seek the - media controller to the new value.

      +
      If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state + is HAVE_FUTURE_DATA
      -

      Every 15 to 250ms, or whenever the MediaController's media controller - position changes, whichever happens least often, the user agent must queue a - task to fire a simple event named timeupdate at the - MediaController.

      +

      The user agent must queue a task to fire a simple event named + canplay at the element.

      -
      +

      If the element's paused attribute is false, the user + agent must queue a task to fire a simple event named playing at the element.

      -

      When a MediaController is created it is a playing media controller. It - can be changed into a paused media controller and back either via the user agent's user - interface (when the element is exposing a user - interface to the user) or by script using the APIs defined in this section (see below).

      +
      If the new ready state is HAVE_ENOUGH_DATA
      -

      The paused attribute must return - true if the MediaController object is a paused media controller, and - false otherwise.

      +

      If the previous ready state was HAVE_CURRENT_DATA or less, the user agent must + queue a task to fire a simple event named canplay at the element, and, if the element's paused attribute is false, queue a task to + fire a simple event named playing + at the element.

      -

      When the pause() method is invoked, - if the MediaController is a playing media controller then the user agent - must change the MediaController into a paused media controller, - queue a task to fire a simple event named pause at the MediaController, and then - report the controller state of the MediaController.

      +

      If the autoplaying flag is true, and the paused attribute is true, and the media element + has an autoplay attribute specified, and the + media element's Document's active sandboxing flag set + does not have the sandboxed automatic features browsing context flag set, then + the user agent may also run the following substeps:

      -

      When the unpause() method is - invoked, if the MediaController is a paused media controller, the user - agent must change the MediaController into a playing media controller, - queue a task to fire a simple event named play at the MediaController, and then - report the controller state of the MediaController.

      +
      1. Set the paused attribute to false.
      2. If the element's show poster flag is true, set it to false and run the + time marches on steps.
      3. Queue a task to fire a simple event named play at the element.
      4. Queue a task to fire a simple event named playing at the element.
      -

      When the play() method is invoked, the - user agent must invoke the play() method of each slaved media element in turn, and then invoke the unpause method of the MediaController.

      +

      User agents do not need to support autoplay, and it is suggested that user + agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the + video to play, so as to allow the user to override the behavior if so desired.

      -

      The playbackState attribute - must return the value to which it was most recently set. When the MediaController - object is created, the attribute must be set to the value "waiting". The value is updated by the report the - controller state algorithm below.

      +

      In any case, the user agent must finally queue a task to fire a simple + event named canplaythrough at the element.

      -

      The played attribute must return a - new static normalised TimeRanges object that represents the union of the - ranges of points on the media timelines of the media resources of the slaved media elements that the - user agent has so far reached through the usual monotonic increase of their current playback positions during normal playback, at the time the - attribute is evaluated.

      +
      -
      +

    2. If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    -

    A MediaController has a media controller default playback rate and a - media controller playback rate, which must both be set to 1.0 when the - MediaController object is created.

    + -

    The defaultPlaybackRate - attribute, on getting, must return the MediaController's media controller - default playback rate, and on setting, must set the MediaController's - media controller default playback rate to the new value, then queue a - task to fire a simple event named ratechange at the - MediaController.

    +

    It is possible for the ready state of a media element to jump between these states + discontinuously. For example, the state of a media element can jump straight from HAVE_METADATA to HAVE_ENOUGH_DATA without passing through the HAVE_CURRENT_DATA and HAVE_FUTURE_DATA states.

    -

    The playbackRate attribute, on - getting, must return the MediaController's media controller playback - rate, and on setting, must set the MediaController's media controller - playback rate to the new value, then queue a task to fire a simple - event named ratechange at the - MediaController.

    + -
    +

    The readyState IDL attribute must, on + getting, return the value described above that describes the current ready state of the + media element.

    -

    A MediaController has a media controller volume multiplier, which must - be set to 1.0 when the MediaController object is created, and a media controller - mute override, much must initially be false.

    + -

    The volume attribute, on getting, - must return the MediaController's media controller volume multiplier, - and on setting, if the new value is in the range 0.0 to 1.0 inclusive, must set the - MediaController's media controller volume multiplier to the new value - and queue a task to fire a simple event named volumechange at the - MediaController. If the new value is outside the range 0.0 to 1.0 inclusive, then, on - setting, an IndexSizeError exception must be thrown instead.

    +

    The autoplay attribute is a boolean + attribute. When present, the user agent (as described in the algorithm + described herein) will automatically begin playback of the media resource as + soon as it can do so without stopping.

    -

    The muted attribute, on getting, must - return the MediaController's media controller mute override, and on - setting, must set the MediaController's media controller mute override - to the new value and queue a task to fire a simple event named volumechange at the - MediaController.

    +

    Authors are urged to use the autoplay + attribute rather than using script to trigger automatic playback, as this allows the user to + override the automatic playback when it is not desired, e.g. when using a screen reader. Authors + are also encouraged to consider not using the automatic playback behavior at all, and instead to + let the user agent wait for the user to start playback explicitly.

    -
    + -

    The media resources of all the slaved media - elements of a MediaController have a defined temporal relationship which - provides relative offsets between the zero time of each such media resource: for - media resources with a timeline offset, their - relative offsets are the difference between their timeline offset; the zero times of - all the media resources without a timeline offset - are not offset from each other (i.e. the origins of their timelines are cotemporal); and finally, - the zero time of the media resource with the earliest timeline offset - (if any) is not offset from the zero times of the media - resources without a timeline offset (i.e. the origins of media resources without a timeline offset are further cotemporal - with the earliest defined point on the timeline of the media resource with the - earliest timeline offset).

    +

    The autoplay IDL attribute must + reflect the content attribute of the same name.

    -

    The media resource end position of a media resource in a media - element is defined as follows: if the media resource has a finite and known - duration, the media resource end position is the duration of the media - resource's timeline (the last defined position on that timeline); otherwise, the - media resource's duration is infinite or unknown, and the media resource end - position is the time of the last frame of media data currently available for - that media resource.

    + -

    Each MediaController also has its own defined timeline. On this timeline, all the - media resources of all the slaved media elements - of the MediaController are temporally aligned according to their defined offsets. The - media controller duration of that MediaController is the time from the - earliest earliest possible position, relative to this MediaController - timeline, of any of the media resources of the slaved - media elements of the MediaController, to the time of the latest media - resource end position of the media resources of the - slaved media elements of the MediaController, again relative to this - MediaController timeline.

    -

    Each MediaController has a media controller position. This is the time - on the MediaController's timeline at which the user agent is trying to play the - slaved media elements. When a MediaController is created, its - media controller position is initially zero.

    -

    When the user agent is to bring a media element up to speed with its new media controller, it must seek that media element to the - MediaController's media controller position relative to the media - element's timeline.

    +
    4.8.14.8 Playing the media resource
    -

    When the user agent is to seek the media controller to a particular new playback position, it must follow these steps:

    +
    media . paused
    -

    1. If the new playback position is less than zero, then set it to - zero.

    2. If the new playback position is greater than the media - controller duration, then set it to the media controller duration.

    3. Set the media controller position to the new playback - position.

    4. Seek each slaved - media element to the new playback position relative to the media - element timeline.

    +

    Returns true if playback is paused; false otherwise.

    -

    A MediaController is a restrained media controller if the - MediaController is a playing media controller, but either at least one - of its slaved media elements whose autoplaying flag is true still has - its paused attribute set to true, or, all of its - slaved media elements have their paused - attribute set to true.

    +
    media . ended
    -

    A MediaController is a blocked media controller if the - MediaController is a paused media controller, or if any of its - slaved media elements are blocked media - elements, or if any of its slaved media elements whose autoplaying - flag is true still have their paused attribute set to - true, or if all of its slaved media elements have their paused attribute set to true.

    +

    Returns true if playback has reached the end of the media resource.

    -

    A media element is blocked on its media controller if the - MediaController is a blocked media controller, or if its media - controller position is either before the media resource's earliest - possible position relative to the MediaController's timeline or after the end - of the media resource relative to the MediaController's timeline.

    +
    media . defaultPlaybackRate [ = value ]
    -

    When a MediaController is not a blocked media - controller and it has at least one slaved media - element whose Document is a fully active Document, - the MediaController's media controller position must increase - monotonically at media controller playback rate units of time on the - MediaController's timeline per unit time of the clock used by its slaved media - elements.

    +

    Returns the default rate of playback, for when the user is not fast-forwarding or reversing + through the media resource.

    -

    When the zero point on the timeline of a MediaController moves relative to the - timelines of the slaved media elements by a time difference ΔT, the MediaController's media controller - position must be decremented by ΔT.

    +

    Can be set, to change the default rate of playback.

    -

    In some situations, e.g. when playing back a live stream without buffering - anything, the media controller position would increase monotonically as described - above at the same rate as the ΔT described in the previous paragraph - decreases it, with the end result that for all intents and purposes, the media controller - position would appear to remain constant (probably with the value 0).

    +

    The default rate has no direct effect on playback, but if the user switches to a fast-forward + mode, when they return to the normal playback mode, it is expected that the rate of playback + will be returned to the default rate of playback.

    -
    +

    When the element has a current media controller, the defaultPlaybackRate attribute is ignored and the + current media controller's defaultPlaybackRate is used instead.

    -

    A MediaController has a most recently reported readiness state, which - is a number from 0 to 4 derived from the numbers used for the media element readyState attribute, and a most recently reported - playback state, which is either playing, waiting, or ended.

    +
    media . playbackRate [ = value ]
    -

    When a MediaController is created, its most recently reported readiness - state must be set to 0, and its most recently reported playback state must be - set to waiting.

    +

    Returns the current rate playback, where 1.0 is normal speed.

    -

    When a user agent is required to report the controller state for a - MediaController, the user agent must run the following steps:

    +

    Can be set, to change the rate of playback.

    -
    1. +

      When the element has a current media controller, the playbackRate attribute is ignored and the current + media controller's playbackRate is + used instead.

      -

      If the MediaController has no slaved media elements, let new readiness state be 0.

      +
      media . played
      -

      Otherwise, let it have the lowest value of the readyState IDL attributes of all of its slaved media - elements.

      +

      Returns a TimeRanges object that represents the ranges of the media + resource that the user agent has played.

      -
    2. +
      media . play()
      -

      If the MediaController's most recently reported readiness state is - less than the new readiness state, then run these substeps:

      +

      Sets the paused attribute to false, loading the + media resource and beginning playback if necessary. If the playback had ended, will + restart it from the start.

      -

      1. Let next state be the MediaController's most - recently reported readiness state.

      2. Loop: Increment next state by one.

      3. +
        media . pause()
        -

        Queue a task to run the following steps:

        +

        Sets the paused attribute to true, loading the + media resource if necessary.

        -

        1. Set the MediaController's readyState attribute to the value next state.

        2. Fire a simple event at the MediaController object, whose - name is the event name corresponding to the value of next state given in - the table below.

        +
    -

  • If next state is less than new readiness state, - then return to the step labeled loop. + -

    Otherwise, if the MediaController's most recently reported readiness - state is greater than new readiness state then queue a - task to fire a simple event at the MediaController object, - whose name is the event name corresponding to the value of new readiness - state given in the table below.

    +

    The paused attribute represents whether the + media element is paused or not. The attribute must initially be true.

    -
    Value of new readiness state - Event name +

    A media element is a blocked media element if its readyState attribute is in the HAVE_NOTHING state, the HAVE_METADATA state, or the HAVE_CURRENT_DATA state, or if the element has + paused for user interaction or paused for in-band content.

    -
    0 - emptied +

    A media element is said to be potentially playing when its paused attribute is false, the element has not ended + playback, playback has not stopped due to errors, the element either has no + current media controller or has a current media controller but is not + blocked on its media controller, and the element is not a blocked media + element.

    -
    1 - loadedmetadata +

    A waiting DOM event can be fired as a result of an element that is + potentially playing stopping playback due to its readyState attribute changing to a value lower than HAVE_FUTURE_DATA.

    -
    2 - loadeddata +

    A media element is said to have ended playback when:

    -
    3 - canplay +
    4 - canplaythrough +
  • -
    • +

    Either: -

  • Let the MediaController's most recently reported readiness state - be new readiness state.

  • + -

    If the MediaController's most recently reported playback state is - not equal to new playback state then queue a task to run the - following steps:

    +

    Or: -

    1. Set the MediaController's playbackState attribute to the value given in - the second column of the row of the following table whose first column contains the new playback state.

    2. Fire a simple event at the MediaController object, whose name - is the value given in the third column of the row of the following table whose first column - contains the new playback state.

    + -
    + -

    The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, - by all objects implementing the MediaController interface:

    +

    The ended attribute must return true if, the + last time the event loop reached step 1, the media element had + ended playback and the direction of playback was forwards, and false + otherwise.

    -
    Event handler Event handler event type -
    onemptied emptied -
    onloadedmetadata loadedmetadata -
    onloadeddata loadeddata -
    oncanplay canplay -
    oncanplaythrough canplaythrough -
    onplaying playing -
    onended ended -
    onwaiting waiting -
    ondurationchange durationchange -
    ontimeupdate timeupdate -
    onplay play -
    onpause pause -
    onratechange ratechange -
    onvolumechange volumechange -
    +

    A media element is said to have stopped due to errors when the + element's readyState attribute is HAVE_METADATA or greater, and the user agent encounters a non-fatal error during the processing of the + media data, and due to that error, is not able to play the content at the + current playback position.

    -
    +

    A media element is said to have paused for user interaction when its + paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a point + in the media resource where the user has to make a selection for the resource to + continue. If the media element has a current media controller when this + happens, then the user agent must report the controller state for the media + element's current media controller. If the media element has a + current media controller when the user makes a selection, allowing playback to + resume, the user agent must similarly report the controller state for the media + element's current media controller.

    -

    The task source for the tasks listed in this - section is the DOM manipulation task source.

    +

    It is possible for a media element to have both ended playback and + paused for user interaction at the same time.

    - +

    When a media element that is potentially playing stops playing + because it has paused for user interaction, the user agent must queue a + task to fire a simple event named timeupdate at the element.

    +

    A media element is said to have paused for in-band content when its + paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has suspended + playback of the media resource in order to play content that is temporally anchored + to the media resource and has a non-zero length, or to play content that is + temporally anchored to a segment of the media resource but has a length longer than + that segment. If the media element has a current media controller when + this happens, then the user agent must report the controller state for the + media element's current media controller. If the media + element has a current media controller when the user agent unsuspends + playback, the user agent must similarly report the controller state for the + media element's current media controller.

    -
    4.7.14.11.3 Assigning a media controller declaratively
    +

    One example of when a media element would be paused for + in-band content is when the user agent is playing audio descriptions from an external WebVTT file, and + the synthesized speech generated for a cue is longer than the time between the text track + cue start time and the text track cue end time.

    -

    The mediagroup content attribute on media elements can be used to link multiple media elements together by implicitly creating a MediaController. The - value is text; media elements with the same value are - automatically linked by the user agent.

    +
    - +

    When the current playback position reaches the end of the + media resource when the direction of playback is forwards, then the user + agent must follow these steps:

    -

    When a media element is created with a mediagroup attribute, and when a media element's - mediagroup attribute is set, changed, or removed, the - user agent must run the following steps:

    +

    1. If the media element has a loop + attribute specified and does not have a current media controller, then seek to the earliest possible position of the + media resource and abort these steps.

    2. As defined above, the ended IDL attribute starts + returning true once the event loop returns to step 1.

    3. Queue a task to fire a simple event named timeupdate at the media element.

    4. Queue a task that, if the media element does not have a + current media controller, and the media element has still ended + playback, and the direction of playback is still forwards, and paused is false, changes paused to true and fires a + simple event named pause at the media + element.

    5. Queue a task to fire a simple event named ended at the media element.

    6. If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    -

    1. Let m be the media element in question.

    2. Let old controller be m's current media - controller, if it currently has one, and null otherwise.

    3. Let new controller be null.

    4. Let m have no current media controller, if it currently - has one.

    5. If m's mediagroup attribute - is being removed, then jump to the update controllers step below.

    6. +

      When the current playback position reaches the earliest possible + position of the media resource when the direction of playback is + backwards, then the user agent must only queue a task to fire a simple + event named timeupdate at the element.

      -

      If there is another media element whose Document is the same as - m's Document (even if one or both of these elements are not - actually in the Document), and which - also has a mediagroup attribute, and whose mediagroup attribute has the same value as the new value of - m's mediagroup attribute, then - let controller be that media element's current media - controller.

      +

      The word "reaches" here does not imply that the current playback + position needs to have changed during normal playback; it could be via seeking, for instance.

      -

      Otherwise, let controller be a newly created - MediaController.

      +
      -

    7. Let m's current media controller be controller.

    8. Let new controller be m's current media - controller.

    9. Bring the media element up to speed with its new media - controller.

    10. Update controllers: If old - controller and new controller are the - same (whether both null or both the same controller) then abort - these steps.

    11. If old controller is not null and still has one or more slaved - media elements, then report the controller state for old - controller.

    12. If new controller is not null, then report the controller - state for new controller.

    +

    The defaultPlaybackRate attribute + gives the desired speed at which the media resource is to play, as a multiple of its + intrinsic speed. The attribute is mutable: on getting it must return the last value it was set to, + or 1.0 if it hasn't yet been set; on setting the attribute must be set to the new value.

    -

    The mediaGroup IDL attribute on media elements must reflect the mediagroup content attribute.

    +

    The defaultPlaybackRate is used + by the user agent when it exposes a user + interface to the user.

    - +

    The playbackRate attribute gives the + effective playback rate (assuming there is no current media controller + overriding it), which is the speed at which the media resource plays, as a multiple + of its intrinsic speed. If it is not equal to the defaultPlaybackRate, then the implication is that the + user is using a feature such as fast forward or slow motion playback. The attribute is mutable: on + getting it must return the last value it was set to, or 1.0 if it hasn't yet been set; on setting + the attribute must be set to the new value, and the playback will change speed (if the element is + potentially playing and there is no current media controller).

    -
    +

    When the defaultPlaybackRate + or playbackRate attributes change value (either by + being set by script or by being changed directly by the user agent, e.g. in response to user + control) the user agent must queue a task to fire a simple event named + ratechange at the media element.

    -

    Multiple media elements referencing the same media - resource will share a single network request. This can be used to efficiently play two - (video) tracks from the same media resource in two different places on the screen. - Used with the mediagroup attribute, these elements can - also be kept synchronised.

    +

    The defaultPlaybackRate and + playbackRate attributes have no effect when the + media element has a current media controller; the namesake attributes on + the MediaController object are used instead in that situation.

    -

    In this example, a sign-languge interpreter track from a movie file is overlaid on the primary - video track of that same video file using two video elements, some CSS, and an - implicit MediaController:

    +
    - 
    <article>
- <style scoped>
-  div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
-  video { position; absolute; bottom: 0; right: 0; }
-  video:first-child { width: 100%; height: 100%; }
-  video:last-child { width: 30%; }
- </style>
- <div>
-  <video src="movie.vid#track=Video&amp;track=English" autoplay controls mediagroup=movie></video>
-  <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
- </div>
-</article>
    +

    The played attribute must return a new static + normalised TimeRanges object that represents the ranges of points on the + media timeline of the media resource reached through the usual monotonic + increase of the current playback position during normal playback, if any, at the time + the attribute is evaluated.

    -
    +
    +

    When the play() method on a media + element is invoked, the user agent must run the following steps.

    +

    1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's + resource selection algorithm.

    2. +

      If the playback has ended and the direction of + playback is forwards, and the media element does not have a current + media controller, seek to the earliest possible + position of the media resource.

      +

      This will cause the user agent to queue a + task to fire a simple event named timeupdate at the media element.

      + +

    3. If the media element has a current media controller, then + bring the media element up to speed with its new media controller.

      -
      4.7.14.12 Timed text tracks
      +
    4. -
      4.7.14.12.1 Text track model
      +

      If the media element's paused attribute is + true, run the following substeps:

      -

      A media element can have a group of associated text - tracks, known as the media element's list of text tracks. The text tracks are sorted as follows:

      +

      1. Change the value of paused to false.

      2. If the show poster flag is true, set the element's show poster + flag to false and run the time marches on steps.

      3. Queue a task to fire a simple event named play at the element.

      4. -
        1. The text tracks corresponding to track element - children of the media element, in tree order.
        2. Any text tracks added using the addTextTrack() method, in the order they were added, oldest - first.
        3. Any media-resource-specific text - tracks (text tracks corresponding to data in the - media resource), in the order defined by the media resource's format - specification.
        +

        If the media element's readyState + attribute has the value HAVE_NOTHING, HAVE_METADATA, or HAVE_CURRENT_DATA, queue a task to + fire a simple event named waiting at the + element.

        -

        A text track consists of:

        +

        Otherwise, the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA: queue a task to + fire a simple event named playing at the + element.

        -
        The kind of text track +
      -
      +

    5. Set the media element's autoplaying flag to false.

    6. If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    -

    This decides how the track is handled by the user agent. The kind is represented by a string. - The possible strings are:

    +
    -
    • subtitles -
    • captions -
    • descriptions -
    • chapters -
    • metadata -
    +

    When the pause() method is invoked, and when + the user agent is required to pause the media element, the user agent must run the + following steps:

    -

    The kind of track can change dynamically, in the case of - a text track corresponding to a track element.

    +

    1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's + resource selection algorithm.

    2. Run the internal pause steps for the media element.

    -
    A label +

    The internal pause steps for a media element are as follows:

    -
    +

    1. Set the media element's autoplaying flag to false.

    2. If the media element's paused attribute + is false, run the following steps:

      -

      This is a human-readable string intended to identify the track for the user.

      +

      1. Change the value of paused to true.

      2. Queue a task to fire a simple + event named timeupdate at the + element.

      3. Queue a task to fire a simple + event named pause + at the element.

      4. Set the official playback position to the current playback + position.

      -

      The label of a track can change dynamically, in the - case of a text track corresponding to a track element.

      +

    3. If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    -

    When a text track label is the empty string, the user agent should automatically - generate an appropriate label from the text track's other properties (e.g. the kind of text - track and the text track's language) for use in its user interface. This automatically-generated - label is not exposed in the API.

    +
    -
    An in-band metadata track dispatch type +

    The effective playback rate is not necessarily the element's playbackRate. When a media element has a + current media controller, its effective playback rate is the + MediaController's media controller playback rate. Otherwise, the + effective playback rate is just the element's playbackRate. Thus, the current media + controller overrides the media element.

    -
    +

    If the effective playback rate is positive or zero, then the direction of + playback is forwards. Otherwise, it is backwards.

    -

    This is a string extracted from the media resource specifically for in-band - metadata tracks to enable such tracks to be dispatched to different scripts in the document.

    +

    When a media element is potentially playing and + its Document is a fully active Document, its current + playback position must increase monotonically at effective playback rate units + of media time per unit time of the media timeline's clock. (This specification always + refers to this as an increase, but that increase could actually be a decrease if + the effective playback rate is negative.)

    -

    For example, a traditional TV station broadcast streamed on the Web and - augmented with Web-specific interactive features could include text tracks with metadata for ad - targeting, trivia game data during game shows, player states during sports games, recipe - information during food programs, and so forth. As each program starts and ends, new tracks - might be added or removed from the stream, and as each one is added, the user agent could bind - them to dedicated script modules using the value of this attribute.

    +

    The effective playback rate can be 0.0, in which case the + current playback position doesn't move, despite playback not being paused (paused doesn't become true, and the pause event doesn't fire).

    -

    Other than for in-band metadata text tracks, the in-band metadata track dispatch type is the empty string. How this - value is populated for different media formats is described in steps to expose a - media-resource-specific text track.

    +

    This specification doesn't define how the user agent achieves the appropriate + playback rate — depending on the protocol and media available, it is plausible that the user + agent could negotiate with the server to have the server provide the media data at the appropriate + rate, so that (except for the period between when the rate is changed and when the server updates + the stream's playback rate) the client doesn't actually have to drop or interpolate any + frames.

    -
    A language +

    Any time the user agent provides a stable state, + the official playback position must be set to the current playback + position.

    -
    +

    While the direction of playback is backwards, any corresponding audio must be + muted. While the effective playback rate is + so low or so high that the user agent cannot play audio usefully, the corresponding audio must + also be muted. If the effective playback + rate is not 1.0, the user agent may apply pitch adjustments to the audio as necessary to + render it faithfully.

    -

    This is a string (a BCP 47 language tag) representing the language of the text track's cues. - [BCP47]

    +

    Media elements that are potentially playing + while not in a Document must not play any video, but should play any + audio component. Media elements must not stop playing just because all references to them have + been removed; only once a media element is in a state where no further audio could ever be played + by that element may the element be garbage collected.

    -

    The language of a text track can change dynamically, - in the case of a text track corresponding to a track element.

    +

    It is possible for an element to which no explicit references exist to play audio, + even if such an element is not still actively playing: for instance, it could have a current + media controller that still has references and can still be unpaused, or it could be + unpaused but stalled waiting for content to buffer.

    -
    A readiness state +
    -
    +

    Each media element has a list of newly introduced cues, which must be + initially empty. Whenever a text track cue is added to the list of cues of a text track that is in the list of text + tracks for a media element, that cue must + be added to the media element's list of newly introduced cues. Whenever + a text track is added to the list of text tracks for a media + element, all of the cues in that text + track's list of cues must be added to the + media element's list of newly introduced cues. When a media + element's list of newly introduced cues has new cues added while the + media element's show poster flag is not set, then the user agent must + run the time marches on steps.

    -

    One of the following:

    +

    When a text track cue is removed from the list of cues of a text track that is in the list of text + tracks for a media element, and whenever a text track is removed + from the list of text tracks of a media element, if the media + element's show poster flag is not set, then the user agent must run the + time marches on steps.

    -
    Not loaded +

    When the current playback position of a media element changes (e.g. + due to playback or seeking), the user agent must run the time marches on steps. If the + current playback position changes while the steps are running, then the user agent + must wait for the steps to complete, and then must immediately rerun the steps. (These steps are + thus run as often as possible or needed — if one iteration takes a long time, this can cause + certain cues to be skipped over as the user agent rushes ahead + to "catch up".)

    -
    +

    The time marches on steps are as follows:

    -

    Indicates that the text track's cues have not been obtained.

    +

    1. Let current cues be a list of cues, initialised to contain all the cues of all + the hidden or showing text tracks of the media + element (not the disabled ones) whose start times are less than or equal to the current + playback position and whose end times are + greater than the current playback position.

    2. Let other cues be a list of cues, + initialised to contain all the cues of hidden and showing text tracks of the media element that are not present in current cues.

    3. Let last time be the current playback position at the + time this algorithm was last run for this media element, if this is not the first + time it has run.

    4. If the current playback position has, since the last time this algorithm was + run, only changed through its usual monotonic increase during normal playback, then let missed cues be the list of cues in other cues whose start times are + greater than or equal to last time and whose end times are less than or equal to the current playback position. + Otherwise, let missed cues be an empty list.

    5. Remove all the cues in missed cues + that are also in the media element's list of newly introduced cues, and + then empty the element's list of newly introduced cues.

    6. If the time was reached through the usual monotonic increase of the current playback + position during normal playback, and if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and + is not still running event handlers for such an event, then the user agent must queue a + task to fire a simple event named timeupdate at the element. (In the other cases, such as + explicit seeks, relevant events get fired as part of the overall process of changing the + current playback position.)

      -
      Loading +

      The event thus is not to be fired faster than about 66Hz or slower than 4Hz + (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to + vary the frequency of the event based on the system load and the average cost of processing the + event each time, so that the UI updates are not any more frequent than the user agent can + comfortably handle while decoding the video.

    7. If all of the cues in current cues + have their text track cue active flag set, none of the cues in other cues have their text track cue active + flag set, and missed cues is empty, then abort these steps.

    8. -
      +

      If the time was reached through the usual monotonic increase of the current playback + position during normal playback, and there are cues + in other cues that have their text track cue pause-on-exit flag + set and that either have their text track cue active flag set or are also in missed cues, then immediately pause the + media element.

      -

      Indicates that the text track is loading and there have been no fatal errors encountered so - far. Further cues might still be added to the track by the parser.

      +

      In the other cases, such as explicit seeks, playback is not paused by going past + the end time of a cue, even if that cue has its text track cue pause-on-exit flag set.

      -
      Loaded +
    9. -
      +

      Let events be a list of tasks, + initially empty. Each task in this list will be associated + with a text track, a text track cue, and a time, which are used to + sort the list before the tasks are queued.

      -

      Indicates that the text track has been loaded with no fatal errors.

      +

      Let affected tracks be a list of text + tracks, initially empty.

      -
      Failed to load +

      When the steps below say to prepare an event named event for a + text track cue target with a time time, the + user agent must run these substeps:

      -
      +

      1. Let track be the text track with which the text + track cue target is associated.

      2. Create a task to fire a simple event + named event at target.

      3. Add the newly created task to events, associated with the time time, the text + track track, and the text track cue target.

      4. Add track to affected tracks.

      -

      Indicates that the text track was enabled, but when the user agent attempted to obtain it, - this failed in some way (e.g. URL could not be resolved, network error, unknown text track format). Some or all of the cues are - likely missing and will not be obtained.

      +

    10. For each text track cue in missed + cues, prepare an event named enter for the + TextTrackCue object with the text track cue start time.

    11. For each text track cue in other + cues that either has its text track cue active flag set or is in missed cues, prepare an event named exit for the TextTrackCue object with the later of the + text track cue end time and the text track cue start time.

    12. For each text track cue in current + cues that does not have its text track cue active flag set, prepare an + event named enter for the TextTrackCue + object with the text track cue start time.

    13. -
    +

    Sort the tasks in events in ascending + time order (tasks with earlier times first).

    -

    The readiness state of a text - track changes dynamically as the track is obtained.

    +

    Further sort tasks in events that have + the same time by the relative text track cue order of the text track cues associated with these tasks.

    -
    A mode +

    Finally, sort tasks in events that have + the same time and same text track cue order by placing tasks that fire enter events before + those that fire exit events.

    -
    +

  • Queue each task in + events, in list order.

  • Sort affected tracks in the same order as the text tracks appear in the media element's list of text + tracks, and remove duplicates.

    -

    One of the following:

    +

  • For each text track in affected tracks, in the list + order, queue a task to fire a simple event named cuechange at the TextTrack object, and, if the + text track has a corresponding track element, to then fire a + simple event named cuechange at the + track element as well.

  • Set the text track cue active flag of all the cues in the current cues, and unset the text track cue + active flag of all the cues in the other + cues.

  • Run the rules for updating the text track rendering of each of the text tracks in affected tracks that are showing. For example, for text tracks + based on WebVTT, the rules for updating the display of WebVTT text tracks. [WEBVTT] -

    Disabled +

    For the purposes of the algorithm above, a text track cue is considered to be part + of a text track only if it is listed in the text track list of cues, not + merely if it is associated with the text track.

    -
    +

    If the media element's Document stops being a + fully active document, then the playback will stop + until the document is active again.

    -

    Indicates that the text track is not active. Other than for the purposes of exposing the - track in the DOM, the user agent is ignoring the text track. No cues are active, no events are - fired, and the user agent will not attempt to obtain the track's cues.

    +

    When a media element is removed + from a Document, the user agent must run the following steps:

    -
    Hidden +

    1. Asynchronously await a stable state, allowing the task that removed the media element from the + Document to continue. The synchronous section consists of all the + remaining steps of this algorithm. (Steps in the synchronous section are marked with + ⌛.)

    2. ⌛ If the media element is in a Document, + abort these steps.

    3. ⌛ Run the internal pause steps for the media element.

      -
      +
    -

    Indicates that the text track is active, but that the user agent is not actively displaying - the cues. If no attempt has yet been made to obtain the track's cues, the user agent will - perform such an attempt momentarily. The user agent is maintaining a list of which cues are - active, and events are being fired accordingly.

    + -
    Showing -
    -

    Indicates that the text track is active. If no attempt has yet been made to obtain the - track's cues, the user agent will perform such an attempt momentarily. The user agent is - maintaining a list of which cues are active, and events are being fired accordingly. In - addition, for text tracks whose kind is subtitles or captions, the cues are being overlaid on the video - as appropriate; for text tracks whose kind is descriptions, the user agent is making the - cues available to the user in a non-visual fashion; and for text tracks whose kind is chapters, the user agent is making available to - the user a mechanism by which the user can navigate to any point in the media - resource by selecting a cue.

    +
    4.8.14.9 Seeking
    -
    +
    media . seeking
    -
    A list of zero or more cues +

    Returns true if the user agent is currently seeking.

    -
    +
    media . seekable
    -

    A list of text track cues, along with rules for - updating the text track rendering. For example, for WebVTT, the rules - for updating the display of WebVTT text tracks. [WEBVTT]

    +

    Returns a TimeRanges object that represents the ranges of the media + resource to which it is possible for the user agent to seek.

    -

    The list of cues of a text track can change - dynamically, either because the text track has not yet been loaded or is still loading, - or due to DOM manipulation.

    +
    media . fastSeek( time )
    -
    +

    Seeks to near the given time as fast as possible, trading precision for + speed. (To seek to a precise time, use the currentTime attribute.)

    -

    Each text track has a corresponding TextTrack object.

    +

    This does nothing if the media resource has not been loaded.

    -
    + -

    Each media element has a list of pending text tracks, which must - initially be empty, a blocked-on-parser flag, which must initially be false, and a - did-perform-automatic-track-selection flag, which must also initially be false.

    + -

    When the user agent is required to populate the list of pending text tracks of a - media element, the user agent must add to the element's list of pending text - tracks each text track in the element's list of text tracks whose - text track mode is not disabled and whose - text track readiness state is loading.

    +

    The seeking attribute must initially have the + value false.

    -

    Whenever a track element's parent node changes, the user agent must remove the - corresponding text track from any list of pending text tracks that it is - in.

    +

    The fastSeek() method must seek to the time given by the method's argument, with the + approximate-for-speed flag set.

    -

    Whenever a text track's text track readiness state changes to either - loaded or failed to - load, the user agent must remove it from any list of pending text tracks that - it is in.

    +

    When the user agent is required to seek to a particular new playback position in the media resource, optionally with the + approximate-for-speed flag set, it means that the user agent must run the following steps. + This algorithm interacts closely with the event loop mechanism; in particular, it has + a synchronous section (which is triggered as part of the event loop + algorithm). Steps in that section are marked with ⌛.

    -

    When a media element is created by an HTML parser or XML - parser, the user agent must set the element's blocked-on-parser flag to true. - When a media element is popped off the stack of open elements of an - HTML parser or XML parser, the user agent must honor user - preferences for automatic text track selection, populate the list of pending text - tracks, and set the element's blocked-on-parser flag to false.

    +

    1. Set the media element's show poster flag to false.

    2. If the media element's readyState + is HAVE_NOTHING, abort these steps.

    3. If the element's seeking IDL attribute is true, + then another instance of this algorithm is already running. Abort that other instance of the + algorithm without waiting for the step that it is running to complete.

    4. Set the seeking IDL attribute to true.

    5. If the seek was in response to a DOM method call or setting of an IDL attribute, then + continue the script. The remainder of these steps must be run asynchronously. With the exception + of the steps marked with ⌛, they could be aborted at any time by another instance of this + algorithm being invoked.

    6. If the new playback position is later than the end of the media + resource, then let it be the end of the media resource instead.

    7. If the new playback position is less than the earliest possible + position, let it be that position instead.

    8. If the (possibly now changed) new playback position is not in one of + the ranges given in the seekable attribute, then let it + be the position in one of the ranges given in the seekable attribute that is the nearest to the new + playback position. If two positions both satisfy that constraint (i.e. the new playback position is exactly in the middle between two ranges in the seekable attribute) then use the position that is closest to + the current playback position. If there are no ranges given in the seekable attribute then set the seeking IDL attribute to false and abort these steps.

    9. -

      The text tracks of a media element are ready when both the element's list of pending text - tracks is empty and the element's blocked-on-parser flag is false.

      +

      If the approximate-for-speed flag is set, adjust the new playback + position to a value that will allow for playback to resume promptly. If new + playback position before this step is before current playback position, then + the adjusted new playback position must also be before the current + playback position. Similarly, if the new playback position before + this step is after current playback position, then the adjusted new + playback position must also be after the current playback position.

      -

      Each media element has a pending text track change notification flag, - which must initially be unset.

      +

      For example, the user agent could snap to the nearest key frame, so that it + doesn't have to spend time decoding then discarding intermediate frames before resuming + playback.

      -

      Whenever a text track that is in a media element's list of text - tracks has its text track mode change value, the user agent must run the - following steps for the media element:

      +

    10. Queue a task to fire a simple event named seeking at the element.

    11. -

      1. If the media element's pending text track change notification - flag is set, abort these steps.

      2. Set the media element's pending text track change notification - flag.

      3. +

        Set the current playback position to the given new playback + position.

        -

        Queue a task that runs the following substeps:

        +

        If the media element was potentially playing + immediately before it started seeking, but seeking caused its readyState attribute to change to a value lower than HAVE_FUTURE_DATA, then a waiting will be + fired at the element.

        + -

        1. Unset the media element's pending text track change notification - flag.

        2. Fire a simple event named change at - the media element's textTracks - attribute's TextTrackList object.

        +

        This step sets the current playback position, and thus can + immediately trigger other conditions, such as the rules regarding when playback "reaches the end of the media resource" (part of the logic that + handles looping), even before the user agent is actually able to render the media data for that + position (as determined in the next step).

        -

      4. If the media element's show poster flag is not set, run the - time marches on steps.

      +

      The currentTime attribute does not + get updated asynchronously, as it returns the official playback position, not the + current playback position.

      -

      The task source for the tasks listed in this - section is the DOM manipulation task source.

      +

    12. Wait until the user agent has established whether or not the media data for + the new playback position is available, and, if it is, until it has decoded + enough data to play back that position.

      + +

    13. Await a stable state. The synchronous section consists of all + the remaining steps of this algorithm. (Steps in the synchronous section are marked + with ⌛.)

    14. ⌛ Set the seeking IDL attribute to + false.

    15. ⌛ Run the time marches on steps.

    16. ⌛ Queue a task to fire a simple event + named timeupdate at the element.

    17. ⌛ Queue a task to fire a simple event named seeked at the element.

    -

    A text track cue is the unit of time-sensitive data in a text track, - corresponding for instance for subtitles and captions to the text that appears at a particular - time and disappears at another time.

    +

    The seekable attribute must return a new + static normalised TimeRanges object that represents the ranges of the + media resource, if any, that the user agent is able to seek to, at the time the + attribute is evaluated.

    -

    Each text track cue consists of:

    +

    If the user agent can seek to anywhere in the media resource, e.g. + because it is a simple movie file and the user agent and the server support HTTP Range requests, + then the attribute would return an object with one range, whose start is the time of the first + frame (the earliest possible position, typically zero), and whose end is the same as + the time of the first frame plus the duration attribute's + value (which would equal the time of the last frame, and might be positive Infinity).

    -
    An identifier -
    -

    An arbitrary string.

    -
    A start time -
    -

    The time, in seconds and fractions of a second, that describes the beginning of the range of - the media data to which the cue applies.

    -
    An end time -
    -

    The time, in seconds and fractions of a second, that describes the end of the range of the - media data to which the cue applies.

    -
    A pause-on-exit flag -
    -

    A boolean indicating whether playback of the media resource is to pause when the - end of the range to which the cue applies is reached.

    -
    Some additional format-specific data
    -

    Additional fields, as needed for the format. For example, WebVTT has a text track cue - writing direction and so forth. [WEBVTT]

    -
    The data of the cue -
    -

    The raw data of the cue, and rules for rendering the cue in isolation.

    -

    The precise nature of this data is defined by the format. For example, WebVTT uses text.

    -
    +

    The range might be continuously changing, e.g. if the user agent is buffering a + sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for + instance.

    -

    The text track cue start time and text track cue end - time can be negative. (The current playback position can never be negative, - though, so cues entirely before time zero cannot be active.)

    +

    Media resources might be internally scripted or + interactive. Thus, a media element could play in a non-linear fashion. If this + happens, the user agent must act as if the algorithm for seeking was used whenever the current playback position + changes in a discontinuous fashion (so that the relevant events fire). If the media + element has a current media controller, then the user agent must seek + the media controller appropriately instead.

    -

    Each text track cue has a corresponding TextTrackCue object (or more - specifically, an object that inherits from TextTrackCue — for example, WebVTT - cues use the VTTCue interface). A text track cue's in-memory - representation can be dynamically changed through this TextTrackCue API. [WEBVTT]

    + -

    A text track cue is associated with rules for updating the text track - rendering, as defined by the specification for the specific kind of text track - cue. These rules are used specifically when the object representing the cue is added to a - TextTrack object using the addCue() - method.

    -

    In addition, each text track cue has two pieces of dynamic information:

    +
    4.8.14.10 Media resources with multiple media tracks
    -
    The active flag -
    +

    A media resource can have multiple embedded audio and video tracks. For example, + in addition to the primary video and audio tracks, a media resource could have + foreign-language dubbed dialogues, director's commentaries, audio descriptions, alternative + angles, or sign-language overlays.

    -

    This flag must be initially unset. The flag is used to ensure events are fired appropriately - when the cue becomes active or inactive, and to make sure the right cues are rendered.

    +
    media . audioTracks
    -

    The user agent must synchronously unset this flag whenever the text track cue is - removed from its text track's text track list of cues; whenever the - text track itself is removed from its media element's list of - text tracks or has its text track mode changed to disabled; and whenever the media element's readyState is changed back to HAVE_NOTHING. When the flag is unset in this way for one - or more cues in text tracks that were showing prior to the relevant incident, the user agent must, after having unset - the flag for all the affected cues, apply the rules for updating the text track - rendering of those text tracks. For example, for text tracks based on WebVTT, the rules for updating - the display of WebVTT text tracks. [WEBVTT]

    The display state -
    +

    Returns an AudioTrackList object representing the audio tracks available in the + media resource.

    -

    This is used as part of the rendering model, to keep cues in a consistent position. It must - initially be empty. Whenever the text track cue active flag is unset, the user - agent must empty the text track cue display state.

    +
    media . videoTracks
    -
    +

    Returns a VideoTrackList object representing the video tracks available in the + media resource.

    -

    The text track cues of a media element's text tracks are ordered relative to each other in the text track - cue order, which is determined as follows: first group the cues by their text track, with the groups being sorted in the same order - as their text tracks appear in the media element's - list of text tracks; then, within each group, cues must be sorted by their start - time, earliest first; then, any cues with the same - start time must be sorted by their end time, latest first; and finally, any cues with identical end times must - be sorted in the order they were last added to their respective text track list of - cues, oldest first (so e.g. for cues from a WebVTT file, that would initially - be the order in which the cues were listed in the file). [WEBVTT]

    +
    + -
    4.7.14.12.2 Sourcing in-band text tracks
    +

    The audioTracks attribute of a + media element must return a live AudioTrackList object + representing the audio tracks available in the media element's media + resource. The same object must be returned each time.

    -

    A media-resource-specific text track is a text track that corresponds - to data found in the media resource.

    +

    The videoTracks attribute of a + media element must return a live VideoTrackList object + representing the video tracks available in the media element's media + resource. The same object must be returned each time.

    +

    There are only ever one AudioTrackList object and one + VideoTrackList object per media element, even if another media + resource is loaded into the element: the objects are reused. (The AudioTrack + and VideoTrack objects are not, though.)

    -

    Rules for processing and rendering such data are defined by the relevant specifications, e.g. - the specification of the video format if the media resource is a video.

    +
    -

    When a media resource contains data that the user agent recognises and supports as - being equivalent to a text track, the user agent runs the steps to expose a - media-resource-specific text track with the relevant data, as follows.

    +

    In this example, a script defines a function that takes a URL to a video and a reference to an + element where the video is to be placed. That function then tries to load the video, and, once it + is loaded, checks to see if there is a sign-language track available. If there is, it also + displays that track. Both tracks are just placed in the given container; it's assumed that styles + have been applied to make this work in a pretty way!

    - + 
    <script>
+ function loadVideo(url, container) {
+   var controller = new MediaController();
+   var video = document.createElement('video');
+   video.src = url;
+   video.autoplay = true;
+   video.controls = true;
+   video.controller = controller;
+   container.appendChild(video);
+   video.onloadedmetadata = function (event) {
+     for (var i = 0; i < video.videoTracks.length; i += 1) {
+       if (video.videoTracks[i].kind == 'sign') {
+         var sign = document.createElement('video');
+         sign.src = url + '#track=' + video.videoTracks[i].id; 
+         sign.autoplay = true;
+         sign.controller = controller;
+         container.appendChild(sign);
+         return;
+       }
+     }
+   };
+ }
+</script>
    -

    1. Associate the relevant data with a new text track and its corresponding new - TextTrack object. The text track is a media-resource-specific - text track.

    2. Set the new text track's kind, label, and language - based on the semantics of the relevant data, as defined by the relevant specification. If there - is no label in that data, then the label must be set to the - empty string.

    3. Associate the text track list of cues with the rules for updating the - text track rendering appropriate for the format in question.

      +
    -
  • -

    If the new text track's kind is metadata, then set the text track in-band - metadata track dispatch type as follows, based on the type of the media - resource:

    +
    4.8.14.10.1 AudioTrackList and VideoTrackList objects
    -
    If the media resource is an Ogg file
    The text track in-band metadata track dispatch type must be set to the value - of the Name header field. [OGGSKELETONHEADERS]
    If the media resource is a WebM file
    The text track in-band metadata track dispatch type must be set to the value - of the CodecID element. [WEBMCG]
    If the media resource is an MPEG-2 file
    Let stream type be the value of the "stream_type" field describing the - text track's type in the file's program map section, interpreted as an 8-bit unsigned integer. - Let length be the value of the "ES_info_length" field for the track in the - same part of the program map section, interpreted as an integer as defined by the MPEG-2 - specification. Let descriptor bytes be the length bytes - following the "ES_info_length" field. The text track in-band metadata track dispatch - type must be set to the concatenation of the stream type byte and - the zero or more descriptor bytes bytes, expressed in hexadecimal using - uppercase ASCII hex digits. [MPEG2] +

    The AudioTrackList and VideoTrackList interfaces are used by + attributes defined in the previous section.

    -
    If the media resource is an MPEG-4 file
    Let the - first stsd box of the - first stbl box of the - first minf box of the - first mdia box of the - text track's trak box in the - first moov box - of the file be the stsd box, if any. + 
    interface AudioTrackList : EventTarget {
+  readonly attribute unsigned long length;
+  getter AudioTrack (unsigned long index);
+  AudioTrack? getTrackById(DOMString id);
 
-     If the file has no stsd box, or if the stsd box has neither a mett box nor a metx box, then the text track
-     in-band metadata track dispatch type must be set to the empty string.
+           attribute EventHandler onchange;
+           attribute EventHandler onaddtrack;
+           attribute EventHandler onremovetrack;
+};
 
-     Otherwise, if the stsd box has a mett box then the text
-     track in-band metadata track dispatch type must be set to the concatenation of the
-     string "mett", a U+0020 SPACE character, and the value of the first mime_format field of the first mett box of the stsd
-     box, or the empty string if that field is absent in that box.
+interface AudioTrack {
+  readonly attribute DOMString id;
+  readonly attribute DOMString kind;
+  readonly attribute DOMString label;
+  readonly attribute DOMString language;
+           attribute boolean enabled;
+};
 
-     Otherwise, if the stsd box has no mett box but has a metx box then the text track in-band metadata track dispatch type
-     must be set to the concatenation of the string "metx", a U+0020 SPACE
-     character, and the value of the first namespace field of the first metx box of the stsd box, or the empty string if that field is absent in
-     that box.
+interface VideoTrackList : EventTarget {
+  readonly attribute unsigned long length;
+  getter VideoTrack (unsigned long index);
+  VideoTrack? getTrackById(DOMString id);
+  readonly attribute long selectedIndex;
 
-     [MPEG4]
+           attribute EventHandler onchange;
+           attribute EventHandler onaddtrack;
+           attribute EventHandler onremovetrack;
+};
 
-
    +interface VideoTrack { + readonly attribute DOMString id; + readonly attribute DOMString kind; + readonly attribute DOMString label; + readonly attribute DOMString language; + attribute boolean selected; +}; -

  • Populate the new text track's list of - cues with the cues parsed so far, following the guidelines for exposing - cues, and begin updating it dynamically as necessary.

  • Set the new text track's readiness - state to loaded.

  • Set the new text track's mode to the - mode consistent with the user's preferences and the requirements of the relevant specification - for the data.

    +
    media . audioTracks . length
    media . videoTracks . length
    -

    For instance, if there are no other active subtitles, and this is a forced - subtitle track (a subtitle track giving subtitles in the audio track's primary language, but - only for audio that is actually in another language), then those subtitles might be activated - here.

    +

    Returns the number of tracks in the list.

    -

  • Add the new text track to the media element's list of text - tracks.

  • Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses - the TrackEvent interface, with the track - attribute initialised to the text track's TextTrack object, at the - media element's textTracks attribute's - TextTrackList object. +

    audioTrack = media . audioTracks[index]
    videoTrack = media . videoTracks[index]
    - +

    Returns the specified AudioTrack or VideoTrack object.

    - +
    audioTrack = media . audioTracks . getTrackById( id )
    videoTrack = media . videoTracks . getTrackById( id )
    - +

    Returns the AudioTrack or VideoTrack object with the given identifier, or null if no track has that identifier.

    +
    audioTrack . id
    videoTrack . id
    +

    Returns the ID of the given track. This is the ID that can be used with a fragment identifier + if the format supports the Media Fragments URI syntax, and that can be used with + the getTrackById() method. [MEDIAFRAG]

    - +
    audioTrack . kind
    videoTrack . kind
    -
    4.7.14.12.3 Sourcing out-of-band text tracks
    +

    Returns the category the given track falls into. The possible track categories are given below.

    -

    When a track element is created, it must be associated with a new text - track (with its value set as defined below) and its corresponding new - TextTrack object.

    +
    audioTrack . label
    videoTrack . label
    -

    The text track kind is determined from the state of the element's kind attribute according to the following table; for a state given - in a cell of the first column, the kind is the string given - in the second column:

    +

    Returns the label of the given track, if known, or the empty string otherwise.

    -
    State - String -
    Subtitles - subtitles -
    Captions - captions -
    Descriptions - descriptions -
    Chapters - chapters -
    Metadata - metadata -
    +
    audioTrack . language
    videoTrack . language
    -

    The text track label is the element's track label.

    +

    Returns the language of the given track, if known, or the empty string otherwise.

    -

    The text track language is the element's track language, if any, or - the empty string otherwise.

    +
    audioTrack . enabled [ = value ]
    -

    As the kind, label, - and srclang attributes are set, changed, or removed, the - text track must update accordingly, as per the definitions above.

    +

    Returns true if the given track is active, and false otherwise.

    -

    Changes to the track URL are handled in the algorithm below.

    +

    Can be set, to change whether the track is enabled or not. If multiple audio tracks are + enabled simultaneously, they are mixed.

    -

    The text track readiness state is initially not loaded, and the text track mode is initially disabled.

    +
    media . videoTracks . selectedIndex
    -

    The text track list of cues is initially empty. It is dynamically modified when - the referenced file is parsed. Associated with the list are the rules for updating the text - track rendering appropriate for the format in question; for WebVTT, this is - the rules for updating the display of WebVTT text tracks. [WEBVTT]

    +

    Returns the index of the currently selected track, if any, or −1 otherwise.

    -

    When a track element's parent element changes and the new parent is a media - element, then the user agent must add the track element's corresponding - text track to the media element's list of text tracks, and - then queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses - the TrackEvent interface, with the track - attribute initialised to the text track's TextTrack object, at the - media element's textTracks attribute's - TextTrackList object.

    +
    videoTrack . selected [ = value ]
    -

    When a track element's parent element changes and the old parent was a media - element, then the user agent must remove the track element's corresponding - text track from the media element's list of text tracks, - and then queue a task to fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that - uses the TrackEvent interface, with the track attribute initialised to the text track's - TextTrack object, at the media element's textTracks attribute's TextTrackList object.

    - +

    Returns true if the given track is active, and false otherwise.

    -
    +

    Can be set, to change whether the track is selected or not. Either zero or one video track is + selected; selecting a new track while a previous one is selected will unselect the previous + one.

    -

    When a text track corresponding to a track element is added to a - media element's list of text tracks, the user agent must queue a - task to run the following steps for the media element:

    +
    • -

    1. If the element's blocked-on-parser flag is true, abort these steps.

    2. If the element's did-perform-automatic-track-selection flag is true, abort - these steps.

    3. Honor user preferences for automatic text track selection for this - element.

    + -

    When the user agent is required to honor user preferences for automatic text track - selection for a media element, the user agent must run the following steps:

    +

    An AudioTrackList object represents a dynamic list of zero or more audio tracks, + of which zero or more can be enabled at a time. Each audio track is represented by an + AudioTrack object.

    -

    1. Perform automatic text track selection for subtitles and captions.

    2. Perform automatic text track selection for descriptions.

    3. Perform automatic text track selection for chapters.

    4. If there are any text tracks in the media - element's list of text tracks whose text track kind is metadata that correspond to track - elements with a default attribute set whose text - track mode is set to disabled, then set the - text track mode of all such tracks to hidden

    5. Set the element's did-perform-automatic-track-selection flag to - true.

    +

    A VideoTrackList object represents a dynamic list of zero or more video tracks, of + which zero or one can be selected at a time. Each video track is represented by a + VideoTrack object.

    -

    When the steps above say to perform automatic text track selection for one or more - text track kinds, it means to run the following steps:

    +

    Tracks in AudioTrackList and VideoTrackList objects must be + consistently ordered. If the media resource is in a format that defines an order, + then that order must be used; otherwise, the order must be the relative order in which the tracks + are declared in the media resource. The order used is called the natural order + of the list.

    -

    1. Let candidates be a list consisting of the text tracks in the media element's list of text tracks - whose text track kind is one of the kinds that were passed to the algorithm, if any, - in the order given in the list of text tracks.

    2. If candidates is empty, then abort these steps.

    3. If any of the text tracks in candidates have a text track mode set to showing, abort these steps.

    4. +

      Each track in one of these objects thus has an index; the first has the index + 0, and each subsequent track is numbered one higher than the previous one. If a media + resource dynamically adds or removes audio or video tracks, then the indices of the tracks + will change dynamically. If the media resource changes entirely, then all the + previous tracks will be removed and replaced with new tracks.

      -

      If the user has expressed an interest in having a track from candidates - enabled based on its text track kind, text track language, and - text track label, then set its text track mode to showing.

      +

      The AudioTrackList.length and VideoTrackList.length attributes must return + the number of tracks represented by their objects at the time of getting.

      -

      For example, the user could have set a browser preference to the effect of "I - want French captions whenever possible", or "If there is a subtitle track with 'Commentary' in - the title, enable it", or "If there are audio description tracks available, enable one, ideally - in Swiss German, but failing that in Standard Swiss German or Standard German".

      +

      The supported property indices of AudioTrackList and + VideoTrackList objects at any instant are the numbers from zero to the number of + tracks represented by the respective object minus one, if any tracks are represented. If an + AudioTrackList or VideoTrackList object represents no tracks, it has no + supported property indices.

      -

      Otherwise, if there are any text tracks in candidates that correspond to track elements with a default attribute set whose text track mode is - set to disabled, then set the text track - mode of the first such track to showing.

      +

      To determine the value of an indexed property for a given index index in an AudioTrackList or VideoTrackList object list, the user agent must return the AudioTrack or + VideoTrack object that represents the indexth track in list.

      -
    +

    The AudioTrackList.getTrackById(id) and VideoTrackList.getTrackById(id) methods must return the first AudioTrack or + VideoTrack object (respectively) in the AudioTrackList or + VideoTrackList object (respectively) whose identifier is equal to the value of the + id argument (in the natural order of the list, as defined above). When no + tracks match the given argument, the methods must return null.

    -

    When a text track corresponding to a track element experiences any of - the following circumstances, the user agent must start the track processing - model for that text track and its track element: +

    The AudioTrack and VideoTrack objects represent specific tracks of a + media resource. Each track can have an identifier, category, label, and language. + These aspects of a track are permanent for the lifetime of the track; even if a track is removed + from a media resource's AudioTrackList or VideoTrackList + objects, those aspects do not change.

    - +

    In addition, AudioTrack objects can each be enabled or disabled; this is the audio + track's enabled state. When an AudioTrack is created, its enabled state + must be set to false (disabled). The resource fetch + algorithm can override this.

    -

    When a user agent is to start the track processing model for a - text track and its track element, it must run the following algorithm. - This algorithm interacts closely with the event loop mechanism; in particular, it has - a synchronous section (which is triggered as part of the event loop - algorithm). The steps in that section are marked with ⌛.

    +

    Similarly, a single VideoTrack object per VideoTrackList object can + be selected, this is the video track's selection state. When a VideoTrack is + created, its selection state must be set to false (not selected). The resource fetch algorithm can override this.

    -

    1. If another occurrence of this algorithm is already running for this text - track and its track element, abort these steps, letting that other algorithm - take care of this element.

    2. If the text track's text track mode is not set to one of hidden or showing, abort - these steps.

    3. If the text track's track element does not have a media - element as a parent, abort these steps.

    4. Run the remainder of these steps asynchronously, allowing whatever caused these steps to - run to continue.

    5. Top: Await a stable state. The synchronous section - consists of the following steps. (The steps in the synchronous section are marked - with ⌛.)

    6. ⌛ Set the text track readiness state to loading.

    7. ⌛ Let URL be the track URL of the - track element.

    8. ⌛ If the track element's parent is a media element then - let CORS mode be the state of the parent media element's crossorigin content attribute. Otherwise, let CORS mode be No CORS.

    9. End the synchronous section, continuing the remaining steps - asynchronously.

    10. +

      The AudioTrack.id and VideoTrack.id attributes must return the identifier + of the track, if it has one, or the empty string otherwise. If the media resource is + in a format that supports the Media Fragments URI fragment identifier syntax, the + identifier returned for a particular track must be the same identifier that would enable the track + if used as the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

      -

      If URL is not the empty string, perform a potentially CORS-enabled - fetch of URL, with the mode being CORS mode, the origin being the origin of the - track element's Document, and the default origin behaviour set - to fail.

      +

      For example, in Ogg files, this would be the Name header field of the track. [OGGSKELETONHEADERS]

      -

      The resource obtained in this fashion, if any, contains the text track data. If any data is - obtained, it is by definition CORS-same-origin (cross-origin resources that are not - suitably CORS-enabled do not get this far).

      +

      The AudioTrack.kind and VideoTrack.kind attributes must return the category + of the track, if it has one, or the empty string otherwise.

      -

      The tasks queued by the - fetching algorithm on the networking task source to - process the data as it is being fetched must determine the type of the resource. If the - type of the resource is not a supported text track format, the load will fail, as - described below. Otherwise, the resource's data must be passed to the appropriate parser (e.g. - the WebVTT parser) as it is received, with the text track list of cues being used for - that parser's output. [WEBVTT]

      +

      The category of a track is the string given in the first column of the table below that is the + most appropriate for the track based on the definitions in the table's second and third columns, + as determined by the metadata included in the track in the media resource. The cell + in the third column of a row says what the category given in the cell in the first column of that + row applies to; a category is only appropriate for an audio track if it applies to audio tracks, + and a category is only appropriate for video tracks if it applies to video tracks. Categories must + only be returned for AudioTrack objects if they are appropriate for audio, and must + only be returned for VideoTrack objects if they are appropriate for video.

      -

      The appropriate parser will synchronously (during these networking task - source tasks) and incrementally (as each such task is - run with whatever data has been received from the network) update the text track list of - cues.

      +

      For Ogg files, the Role header field of the track gives the relevant metadata. For DASH media + resources, the Role element conveys the information. For WebM, only the + FlagDefault element currently maps to a value. [OGGSKELETONHEADERS] [DASH] [WEBMCG]

      -

      This specification does not currently say whether or how to check the MIME - types of text tracks, or whether or how to perform file type sniffing using the actual file - data. Implementors differ in their intentions on this matter and it is therefore unclear what - the right solution is. In the absence of any requirement here, the HTTP specification's strict - requirement to follow the Content-Type header prevails ("Content-Type specifies the media type - of the underlying data." ... "If and only if the media type is not given by a Content-Type - field, the recipient MAY attempt to guess the media type via inspection of its content - and/or the name extension(s) of the URI used to identify the resource.").

      + -

      If the fetching algorithm fails for any reason (network error, - the server returns an error code, a cross-origin check fails, etc), or if URL is the empty string, then queue a task to first change the - text track readiness state to failed to - load and then fire a simple event named error at the track element. This task must use the DOM manipulation task source.

      +
      Return values for AudioTrack.kind and VideoTrack.kind
      Category + Definition + Applies to...Examples +
      "alternative" + A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video). + Audio and video. + Ogg: "audio/alternate" or "video/alternate"; DASH: "alternate" without "main" and "commentary" roles, and, for audio, without the "dub" role (other roles ignored). + +
      "captions" + A version of the main video track with captions burnt in. (For legacy content; new content would use text tracks.) + Video only. + DASH: "caption" and "main" roles together (other roles ignored). -

      If the fetching algorithm does not fail, but the - type of the resource is not a supported text track format, or the file was not successfully - processed (e.g. the format in question is an XML format and the file contained a well-formedness - error that the XML specification requires be detected and reported to the application), then the - task that is queued by the - networking task source in which the aforementioned problem is found must change the - text track readiness state to failed to - load and fire a simple event named error - at the track element.

      +
      "descriptions" + An audio description of a video track. + Audio only. + Ogg: "audio/audiodesc". -

      If the fetching algorithm does not fail, and the file was - successfully processed, then the final task that is queued by the networking task source, after it has - finished parsing the data, must change the text track readiness state to loaded, and fire a simple event named load at the track element.

      +
      "main" + The primary audio or video track. + Audio and video. + Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set; DASH: "main" role without "caption", "subtitle", and "dub" roles (other roles ignored). -

      If, while the fetching algorithm is active, either:

      +
      "main-desc" + The primary audio track, mixed with audio descriptions. + Audio only. + AC3 audio in MPEG-2 TS: bsmod=2 and full_svc=1. - +
      "sign" + A sign-language interpretation of an audio track. + Video only. + Ogg: "video/sign". -

      ...then the user agent must abort the fetching algorithm, - discarding any pending tasks generated by that algorithm (and - in particular, not adding any cues to the text track list of cues after the moment - the URL changed), and then queue a task that first changes the text track - readiness state to failed to load and - then fires a simple event named error at the track element. This task must use the DOM manipulation task source.

      +
      "subtitles" + A version of the main video track with subtitles burnt in. (For legacy content; new content would use text tracks.) + Video only. + DASH: "subtitle" and "main" roles together (other roles ignored). -

    11. Wait until the text track readiness state is no longer set to loading.

    12. Wait until the track URL is no longer equal to URL, at - the same time as the text track mode is set to hidden or showing.

    13. Jump to the step labeled top. +

      14. "translation" + A translated version of the main audio track. + Audio only. + Ogg: "audio/dub". DASH: "dub" and "main" roles together (other roles ignored). -

      Whenever a track element has its src attribute - set, changed, or removed, the user agent must synchronously empty the element's text - track's text track list of cues. (This also causes the algorithm above to stop - adding cues from the resource being obtained using the previously given URL, if any.)

      +
      "commentary" + Commentary on the primary audio or video track, e.g. a director's commentary. + Audio and video. + DASH: "commentary" role without "main" role (other roles ignored). - +
      "" (empty string) + No explicit kind, or the kind given by the track's metadata is not recognised by the user agent. + Audio and video. + Any other track type, track role, or combination of track roles not described above. +
      -
      4.7.14.12.4 Guidelines for exposing cues in various formats as text track cues
      - -

      How a specific format's text track cues are to be interpreted for the purposes of processing by - an HTML user agent is defined by that format. In the absence of such a specification, this section - provides some constraints within which implementations can attempt to consistently expose such - formats.

      +

      The AudioTrack.label and VideoTrack.label attributes must return the label + of the track, if it has one, or the empty string otherwise.

      -

      To support the text track model of HTML, each unit of timed data is converted to a - text track cue. Where the mapping of the format's features to the aspects of a - text track cue as defined in this specification are not defined, implementations must - ensure that the mapping is consistent with the definitions of the aspects of a text track - cue as defined above, as well as with the following constraints:

      +

      The AudioTrack.language and VideoTrack.language attributes must return the + BCP 47 language tag of the language of the track, if it has one, or the empty string otherwise. If + the user agent is not able to express that language as a BCP 47 language tag (for example because + the language information in the media resource's format is a free-form string without + a defined interpretation), then the method must return the empty string, as if the track had no + language.

      -
      The text track cue identifier -
      -

      Should be set to the empty string if the format has no obvious analogue to a per-cue - identifier.

      -
      The text track cue pause-on-exit flag -
      -

      Should be set to false.

      -
      +

      The AudioTrack.enabled attribute, on + getting, must return true if the track is currently enabled, and false otherwise. On setting, it + must enable the track if the new value is true, and disable it otherwise. (If the track is no + longer in an AudioTrackList object, then the track being enabled or disabled has no + effect beyond changing the value of the attribute on the AudioTrack object.)

      - +

      Whenever an audio track in an AudioTrackList that was + disabled is enabled, and whenever one that was enabled is disabled, the user agent must + queue a task to fire a simple event named change at the AudioTrackList object.

      +

      The VideoTrackList.selectedIndex attribute + must return the index of the currently selected track, if any. If the VideoTrackList + object does not currently represent any tracks, or if none of the tracks are selected, it must + instead return −1.

      -
      4.7.14.12.5 Text track API
      +

      The VideoTrack.selected attribute, on + getting, must return true if the track is currently selected, and false otherwise. On setting, it + must select the track if the new value is true, and unselect it otherwise. If the track is in a + VideoTrackList, then all the other VideoTrack objects in that list must + be unselected. (If the track is no longer in a VideoTrackList object, then the track + being selected or unselected has no effect beyond changing the value of the attribute on the + VideoTrack object.)

      - 
      interface TextTrackList : EventTarget {
-  readonly attribute unsigned long length;
-  getter TextTrack (unsigned long index);
-  TextTrack? getTrackById(DOMString id);
+  
      Whenever a track in a VideoTrackList that was previously
+  not selected is selected, the user agent must queue a task to fire a simple
+  event named change at the
+  VideoTrackList object. This task must be queued before the task that fires
+  the resize event, if any.
      
 
-           attribute EventHandler onchange;
-           attribute EventHandler onaddtrack;
-           attribute EventHandler onremovetrack;
-};
      +
      -
      media . textTracks . length
      -

      Returns the number of text tracks associated with the media element (e.g. from track elements). This is the number of text tracks in the media element's list of text tracks.

      -
      media . textTracks[ n ]
      -

      Returns the TextTrack object representing the nth text track in the media element's list of text tracks.

      -
      textTrack = media . textTracks . getTrackById( id )
      +

      The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, + by all objects implementing the AudioTrackList and VideoTrackList + interfaces:

      -

      Returns the TextTrack object with the given identifier, or null if no track has that identifier.

      +
      Event handler Event handler event type +
      onchange change +
      onaddtrack addtrack +
      onremovetrack removetrack +
      -
      + -

      A TextTrackList object represents a dynamically updating list of text tracks in a given order.

      -

      The textTracks attribute of media elements must return a TextTrackList object - representing the TextTrack objects of the text tracks - in the media element's list of text tracks, in the same order as in the - list of text tracks. The same object must be returned each time the attribute is - accessed. [WEBIDL]

      +
      4.8.14.10.2 Selecting specific audio and video tracks declaratively
      -

      The length attribute of a - TextTrackList object must return the number of text - tracks in the list represented by the TextTrackList object.

      +

      The audioTracks and videoTracks attributes allow scripts to select which track + should play, but it is also possible to select specific tracks declaratively, by specifying + particular tracks in the fragment identifier of the URL of the media + resource. The format of the fragment identifier depends on the MIME type of + the media resource. [RFC2046] [URL]

      -

      The supported property indices of a TextTrackList object at any - instant are the numbers from zero to the number of text tracks in - the list represented by the TextTrackList object minus one, if any. If there are no - text tracks in the list, there are no supported property - indices.

      +
      -

      To determine the value of an indexed property of a TextTrackList - object for a given index index, the user agent must return the indexth text track in the list represented by the - TextTrackList object.

      +

      In this example, a video that uses a format that supports the Media Fragments URI + fragment identifier syntax is embedded in such a way that the alternative angles labeled + "Alternative" are enabled instead of the default video track. [MEDIAFRAG]

      -

      The getTrackById(id) method must return the first TextTrack in the - TextTrackList object whose id IDL attribute - would return a value equal to the value of the id argument. When no tracks - match the given argument, the method must return null.

      + 
      <video src="myvideo#track=Alternative"></video>
      - +
      -
      - 
      enum TextTrackMode { "disabled",  "hidden",  "showing" };
-enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };
-interface TextTrack : EventTarget {
-  readonly attribute TextTrackKind kind;
-  readonly attribute DOMString label;
-  readonly attribute DOMString language;
+  
      4.8.14.11 Synchronising multiple media elements
      
 
-  readonly attribute DOMString id;
-  readonly attribute DOMString inBandMetadataTrackDispatchType;
+  
      4.8.14.11.1 Introduction
      
 
-           attribute TextTrackMode mode;
+  
      Each media element can have a MediaController. A
+  MediaController is an object that coordinates the playback of multiple media elements, for instance so that a sign-language interpreter
+  track can be overlaid on a video track, with the two being kept in sync.
      
 
-  readonly attribute TextTrackCueList? cues;
-  readonly attribute TextTrackCueList? activeCues;
+  
      By default, a media element has no MediaController. An implicit
+  MediaController can be assigned using the mediagroup content attribute. An explicit
+  MediaController can be assigned directly using the controller IDL attribute.
      
 
-  void addCue(TextTrackCue cue);
-  void removeCue(TextTrackCue cue);
+  
      Media elements with a MediaController are said
+  to be slaved to their controller. The MediaController modifies the playback
+  rate and the playback volume of each of the media elements
+  slaved to it, and ensures that when any of its slaved media
+  elements unexpectedly stall, the others are stopped at the same time.
      
 
-           attribute EventHandler oncuechange;
-};
      +

      When a media element is slaved to a MediaController, its playback + rate is fixed to that of the other tracks in the same MediaController, and any + looping is disabled.

      -
      textTrack = media . addTextTrack( kind [, label [, language ] ] )
      -

      Creates and returns a new TextTrack object, which is also added to the - media element's list of text tracks.

      -
      textTrack . kind
      -

      Returns the text track kind string.

      +
      4.8.14.11.2 Media controllers
      -
      textTrack . label
      + 
      enum MediaControllerPlaybackState { "waiting", "playing", "ended" };
+[Constructor]
+interface MediaController : EventTarget {
+  readonly attribute unsigned short readyState; // uses HTMLMediaElement.readyState's values
 
-    
      Returns the text track label, if there is one, or the empty string otherwise
-    (indicating that a custom label probably needs to be generated from the other attributes of the
-    object if the object is exposed to the user).
      
+  readonly attribute TimeRanges buffered;
+  readonly attribute TimeRanges seekable;
+  readonly attribute unrestricted double duration;
+           attribute double currentTime;
 
-   
      textTrack . language
      
-    
      Returns the text track language string.
      
-   
      textTrack . id
      
+  readonly attribute boolean paused;
+  readonly attribute MediaControllerPlaybackState playbackState;
+  readonly attribute TimeRanges played;
+  void pause();
+  void unpause();
+  void play(); // calls play() on all media elements as well
 
-    
      Returns the ID of the given track.
      
+           attribute double defaultPlaybackRate;
+           attribute double playbackRate;
 
-    
      For in-band tracks, this is the ID that can be used with a fragment identifier if the format
-    supports the Media Fragments URI syntax, and that can be used with the getTrackById() method. [MEDIAFRAG]
      
+           attribute double volume;
+           attribute boolean muted;
 
-    
      For TextTrack objects corresponding to track elements, this is the
-    ID of the track element.
      
+           attribute EventHandler onemptied;
+           attribute EventHandler onloadedmetadata;
+           attribute EventHandler onloadeddata;
+           attribute EventHandler oncanplay;
+           attribute EventHandler oncanplaythrough;
+           attribute EventHandler onplaying;
+           attribute EventHandler onended;
+           attribute EventHandler onwaiting;
 
-   
      textTrack . inBandMetadataTrackDispatchType
      
+           attribute EventHandler ondurationchange;
+           attribute EventHandler ontimeupdate;
+           attribute EventHandler onplay;
+           attribute EventHandler onpause;
+           attribute EventHandler onratechange;
+           attribute EventHandler onvolumechange;
+};
      -

      Returns the text track in-band metadata track dispatch type string.

      +
      controller = new MediaController()
      -
      textTrack . mode [ = value ]
      +

      Returns a new MediaController object.

      -

      Returns the text track mode, represented by a string from the following - list:

      +
      media . controller [ = controller ]
      -
      "disabled"
      -

      The text track disabled mode.

      -
      "hidden"
      -

      The text track hidden mode.

      -
      "showing"
      -

      The text track showing mode.

      -
      +

      Returns the current MediaController for the media element, if any; + returns null otherwise.

      -

      Can be set, to change the mode.

      +

      Can be set, to set an explicit MediaController. Doing so removes the mediagroup attribute, if any.

      -
      textTrack . cues
      -

      Returns the text track list of cues, as a TextTrackCueList object.

      -
      textTrack . activeCues
      +
      controller . readyState
      -

      Returns the text track cues from the text track - list of cues that are currently active (i.e. that start before the current playback - position and end after it), as a TextTrackCueList object.

      +

      Returns the state that the MediaController was in the last time it fired events + as a result of reporting the controller state. + The values of this attribute are the same as for the readyState attribute of media + elements.

      -
      textTrack . addCue( cue )
      -

      Adds the given cue to textTrack's text track list of cues.

      -
      textTrack . removeCue( cue )
      -

      Removes the given cue from textTrack's text track list of cues.

      -
      +
      controller . buffered
      - +

      Returns a TimeRanges object that represents the intersection of the time ranges + for which the user agent has all relevant media data for all the slaved media elements.

      -

      The addTextTrack(kind, label, language) method of media elements, when invoked, must run the following steps:

      +
      controller . seekable
      -
      1. +

        Returns a TimeRanges object that represents the intersection of the time ranges + into which the user agent can seek for all the slaved media + elements.

        -

        Create a new TextTrack object.

        +
        controller . duration
        -
      2. +

        Returns the difference between the earliest playable moment and the latest playable moment + (not considering whether the data in question is actually buffered or directly seekable, but not + including time in the future for infinite streams). Will return zero if there is no media.

        -

        Create a new text track corresponding to the new object, and set its text - track kind to kind, its text track label to label, its text track language to language, its - text track readiness state to the text track loaded state, its - text track mode to the text track hidden mode, and its text - track list of cues to an empty list.

        +
        controller . currentTime [ = value ]
        -

        Initially, the text track list of cues is not associated with any rules - for updating the text track rendering. When a text track cue is added to it, - the text track list of cues has its rules permanently set accordingly.

        +

        Returns the current playback position, in seconds, as a position between zero + time and the current duration.

        -
      3. +

        Can be set, to seek to the given time.

        -

        Add the new text track to the media element's list of text - tracks.

        +
        controller . paused
        -
      4. +

        Returns true if playback is paused; false otherwise. When this attribute is true, any + media element slaved to this controller will be stopped.

        -

        Queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and - that uses the TrackEvent interface, with the track attribute initialised to the new text - track's TextTrack object, at the media element's textTracks attribute's TextTrackList - object.

        +
        controller . playbackState
        -
      5. +

        Returns the state that the MediaController was in the last time it fired events + as a result of reporting the controller state. + The value of this attribute is either "playing", indicating that the media is actively + playing, "ended", indicating that the media is + not playing because playback has reached the end of all the slaved media elements, + or "waiting", indicating that the media is not + playing for some other reason (e.g. the MediaController is paused).

        -

        Return the new TextTrack object.

        +
        controller . pause()
        -
      +

      Sets the paused attribute to true.

      -
      +
      controller . unpause()
      -

      The kind attribute must return the - text track kind of the text track that the TextTrack object - represents.

      +

      Sets the paused attribute to false.

      -

      The label attribute must return the - text track label of the text track that the TextTrack - object represents.

      +
      controller . play()
      -

      The language attribute must return the - text track language of the text track that the TextTrack - object represents.

      +

      Sets the paused attribute to false and + invokes the play() method of each slaved media element.

      -

      The id attribute returns the track's - identifier, if it has one, or the empty string otherwise. For tracks that correspond to - track elements, the track's identifier is the value of the element's id attribute, if any. For in-band tracks, the track's identifier is - specified by the media resource. If the media resource is in a format - that supports the Media Fragments URI fragment identifier syntax, the identifier - returned for a particular track must be the same identifier that would enable the track if used as - the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

      +
      controller . played
      -

      The inBandMetadataTrackDispatchType - attribute must return the text track in-band metadata track dispatch type of the - text track that the TextTrack object represents.

      +

      Returns a TimeRanges object that represents the union of the time ranges in all + the slaved media elements that have been played.

      -

      The mode attribute, on getting, must return - the string corresponding to the text track mode of the text track that - the TextTrack object represents, as defined by the following list:

      +
      controller . defaultPlaybackRate [ = value ]
      -
      "disabled"
      The text track disabled mode.
      "hidden"
      The text track hidden mode.
      "showing"
      The text track showing mode.
      +

      Returns the default rate of playback.

      -

      On setting, if the new value isn't equal to what the attribute would currently return, the new - value must be processed as follows:

      +

      Can be set, to change the default rate of playback.

      -
      If the new value is "disabled"
      +

      This default rate has no direct effect on playback, but if the user switches to a + fast-forward mode, when they return to the normal playback mode, it is expected that rate of + playback (playbackRate) will be returned + to this default rate.

      -

      Set the text track mode of the text track that the - TextTrack object represents to the text track disabled mode.

      +
      controller . playbackRate [ = value ]
      -
      If the new value is "hidden"
      +

      Returns the current rate of playback.

      -

      Set the text track mode of the text track that the - TextTrack object represents to the text track hidden mode.

      +

      Can be set, to change the rate of playback.

      -
      If the new value is "showing"
      +
      controller . volume [ = value ]
      -

      Set the text track mode of the text track that the - TextTrack object represents to the text track showing mode.

      +

      Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where + 0.0 is the quietest and 1.0 the loudest.

      -
      +

      Can be set, to change the volume multiplier.

      -

      If the text track mode of the text track that the - TextTrack object represents is not the text track disabled mode, then - the cues attribute must return a - live TextTrackCueList object that represents the subset of the - text track list of cues of the text track that the - TextTrack object represents whose end - times occur at or after the earliest possible position when the script - started, in text track cue order. Otherwise, it must return null. When an - object is returned, the same object must be returned each time.

      +

      Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

      -

      The earliest possible position when the script started is whatever the - earliest possible position was the last time the event loop reached step - 1.

      +
      controller . muted [ = value ]
      -

      If the text track mode of the text track that the - TextTrack object represents is not the text track disabled mode, then - the activeCues attribute must return a - live TextTrackCueList object that represents the subset of the - text track list of cues of the text track that the - TextTrack object represents whose active flag was set when the script - started, in text track cue order. Otherwise, it must return null. When an - object is returned, the same object must be returned each time.

      +

      Returns true if all audio is muted (regardless of other attributes either on the controller + or on any media elements slaved to this controller), and + false otherwise.

      -

      A text track cue's active flag was set when the script started if its - text track cue active flag was set the last time the event loop reached - step 1.

      +

      Can be set, to change whether the audio is muted or not.

      -
      +
      -

      The addCue(cue) method - of TextTrack objects, when invoked, must run the following steps:

      + -

      1. If the text track list of cues does not yet have any associated rules - for updating the text track rendering, then associate the text track list of - cues with the rules for updating the text track rendering appropriate to cue.

        +

        A media element can have a current media controller, which is a + MediaController object. When a media element is created without a mediagroup attribute, it does not have a current media + controller. (If it is created with such an attribute, then that attribute + initializes the current media controller, as defined below.)

        -

      2. If text track list of cues' associated rules for updating the text - track rendering are not the same rules for updating the text track rendering - as appropriate for cue, then throw an InvalidStateError - exception and abort these steps.

        +

        The slaved media elements of a MediaController are the media elements whose current media controller is that + MediaController. All the slaved media elements of a + MediaController must use the same clock for their definition of their media + timeline's unit time. When the user agent is required to act on each slaved media element in turn, they must be processed in the order that they + were last associated with the MediaController.

        -

      3. If the given cue is in a text track list of cues, then - remove cue from that text track list of cues.

      4. Add cue to the method's TextTrack object's text - track's text track list of cues.

      +
      -

      The removeCue(cue) - method of TextTrack objects, when invoked, must run the following steps:

      +

      The controller attribute on a media + element, on getting, must return the element's current media controller, if + any, or null otherwise. On setting, the user agent must run the following steps:

      -

      1. If the given cue is not currently listed in the method's - TextTrack object's text track's text track list of cues, - then throw a NotFoundError exception and abort these steps.

      2. Remove cue from the method's TextTrack object's - text track's text track list of cues.

      +

      1. Let m be the media element in question.

      2. Let old controller be m's current media + controller, if it currently has one, and null otherwise.

      3. Let new controller be null.

      4. Let m have no current media controller, if it currently + has one.

      5. Remove the element's mediagroup content + attribute, if any.

      6. If the new value is null, then jump to the update controllers step below.

      7. Let m's current media controller be the new + value.

      8. Let new controller be m's current media + controller.

      9. Bring the media element up to speed with its new media controller.

      10. Update controllers: If old controller and new + controller are the same (whether both null or both the same controller) then abort these + steps.

      11. If old controller is not null and still has one or more slaved + media elements, then report the controller state for old + controller.

      12. If new controller is not null, then report the controller + state for new controller.

      - +
      -
      +

      The MediaController() constructor, when + invoked, must return a newly created MediaController object.

      -

      In this example, an audio element is used to play a specific sound-effect from a - sound file containing many sound effects. A cue is used to pause the audio, so that it ends - exactly at the end of the clip, even if the browser is busy running some script. If the page had - relied on script to pause the audio, then the start of the next clip might be heard if the - browser was not able to run the script at the exact time specified.

      +
      - 
      var sfx = new Audio('sfx.wav');
-var sounds = sfx.addTextTrack('metadata');
+  
      The readyState attribute must
+  return the value to which it was most recently set. When the MediaController object
+  is created, the attribute must be set to the value 0 (HAVE_NOTHING). The value is updated by the report the
+  controller state algorithm below.
      
 
-// add sounds we care about
-function addFX(start, end, name) {
-  var cue = new VTTCue(start, end, '');
-  cue.id = name;
-  cue.pauseOnExit = true;
-  sounds.addCue(cue);
-}
-addFX(12.783, 13.612, 'dog bark');
-addFX(13.612, 15.091, 'kitten mew'))
+  
      The seekable attribute must return
+  a new static normalised TimeRanges object that represents the
+  intersection of the ranges of the media resources of the
+  slaved media elements that the user agent is able to seek to, at the time the
+  attribute is evaluated.
      
 
-function playSound(id) {
-  sfx.currentTime = sounds.getCueById(id).startTime;
-  sfx.play();
-}
+  
      The buffered attribute must return
+  a new static normalised TimeRanges object that represents the
+  intersection of the ranges of the media resources of the
+  slaved media elements that the user agent has buffered, at the time the attribute is
+  evaluated. Users agents must accurately determine the ranges available, even for media streams
+  where this can only be determined by tedious inspection.
      
+
+  
      The duration attribute must return
+  the media controller duration.
      
+
+  
      Every 15 to 250ms, or whenever the MediaController's media controller
+  duration changes, whichever happens least often, the user agent must queue a
+  task to fire a simple event named durationchange at the
+  MediaController. If the MediaController's media controller
+  duration decreases such that the media controller position is greater than the
+  media controller duration, the user agent must immediately seek the media
+  controller to media controller duration.
      
 
-// play a bark as soon as we can
-sfx.oncanplaythrough = function () {
-  playSound('dog bark');
-}
-// meow when the user tries to leave
-window.onbeforeunload = function () {
-  playSound('kitten mew');
-  return 'Are you sure you want to leave this awesome page?';
-}
      +

      The currentTime attribute must + return the media controller position on getting, and on setting must seek the + media controller to the new value.

      -
      +

      Every 15 to 250ms, or whenever the MediaController's media controller + position changes, whichever happens least often, the user agent must queue a + task to fire a simple event named timeupdate at the + MediaController.

      - 
      interface TextTrackCueList {
-  readonly attribute unsigned long length;
-  getter TextTrackCue (unsigned long index);
-  TextTrackCue? getCueById(DOMString id);
-};
      +

      When a MediaController is created it is a playing media controller. It + can be changed into a paused media controller and back either via the user agent's user + interface (when the element is exposing a user + interface to the user) or by script using the APIs defined in this section (see below).

      -
      cuelist . length
      -

      Returns the number of cues in the list.

      -
      cuelist[index]
      -

      Returns the text track cue with index index in the list. The cues are sorted in text track cue order.

      -
      cuelist . getCueById( id )
      -

      Returns the first text track cue (in text track cue order) with text track cue identifier id.

      -

      Returns null if none of the cues have the given identifier or if the argument is the empty string.

      -
      +

      The paused attribute must return + true if the MediaController object is a paused media controller, and + false otherwise.

      - +

      When the pause() method is invoked, + if the MediaController is a playing media controller then the user agent + must change the MediaController into a paused media controller, + queue a task to fire a simple event named pause at the MediaController, and then + report the controller state of the MediaController.

      -

      A TextTrackCueList object represents a dynamically updating list of text track cues in a given order.

      +

      When the unpause() method is + invoked, if the MediaController is a paused media controller, the user + agent must change the MediaController into a playing media controller, + queue a task to fire a simple event named play at the MediaController, and then + report the controller state of the MediaController.

      -

      The length attribute must return - the number of cues in the list represented by the - TextTrackCueList object.

      +

      When the play() method is invoked, the + user agent must invoke the play() method of each slaved media element in turn, and then invoke the unpause method of the MediaController.

      -

      The supported property indices of a TextTrackCueList object at any - instant are the numbers from zero to the number of cues in the - list represented by the TextTrackCueList object minus one, if any. If there are no - cues in the list, there are no supported property - indices.

      +

      The playbackState attribute + must return the value to which it was most recently set. When the MediaController + object is created, the attribute must be set to the value "waiting". The value is updated by the report the + controller state algorithm below.

      -

      To determine the value of an indexed property for a given index index, the user agent must return the indexth text track - cue in the list represented by the TextTrackCueList object.

      +

      The played attribute must return a + new static normalised TimeRanges object that represents the union of the + ranges of points on the media timelines of the media resources of the slaved media elements that the + user agent has so far reached through the usual monotonic increase of their current playback positions during normal playback, at the time the + attribute is evaluated.

      -

      The getCueById(id) method, when called with an argument other than the empty string, - must return the first text track cue in the list represented by the - TextTrackCueList object whose text track cue identifier is id, if any, or null otherwise. If the argument is the empty string, then the method - must return null.

      +
      - +

      A MediaController has a media controller default playback rate and a + media controller playback rate, which must both be set to 1.0 when the + MediaController object is created.

      -
      +

      The defaultPlaybackRate + attribute, on getting, must return the MediaController's media controller + default playback rate, and on setting, must set the MediaController's + media controller default playback rate to the new value, then queue a + task to fire a simple event named ratechange at the + MediaController.

      - 
      interface TextTrackCue : EventTarget {
-  readonly attribute TextTrack? track;
+  
      The playbackRate attribute, on
+  getting, must return the MediaController's media controller playback
+  rate, and on setting, must set the MediaController's media controller
+  playback rate to the new value, then queue a task to fire a simple
+  event named ratechange at the
+  MediaController.
      
 
-           attribute DOMString id;
-           attribute double startTime;
-           attribute double endTime;
-           attribute boolean pauseOnExit;
+  
      
 
-           attribute EventHandler onenter;
-           attribute EventHandler onexit;
-};
      +

      A MediaController has a media controller volume multiplier, which must + be set to 1.0 when the MediaController object is created, and a media controller + mute override, much must initially be false.

      -
      cue . track
      -

      Returns the TextTrack object to which this - text track cue belongs, if any, or null - otherwise.

      -
      cue . id [ = value ]
      -

      Returns the text track cue identifier.

      -

      Can be set.

      -
      cue . startTime [ = value ]
      -

      Returns the text track cue start time, in seconds.

      -

      Can be set.

      -
      cue . endTime [ = value ]
      -

      Returns the text track cue end time, in seconds.

      -

      Can be set.

      -
      cue . pauseOnExit [ = value ]
      -

      Returns true if the text track cue pause-on-exit flag is set, false otherwise.

      -

      Can be set.

      -
      +

      The volume attribute, on getting, + must return the MediaController's media controller volume multiplier, + and on setting, if the new value is in the range 0.0 to 1.0 inclusive, must set the + MediaController's media controller volume multiplier to the new value + and queue a task to fire a simple event named volumechange at the + MediaController. If the new value is outside the range 0.0 to 1.0 inclusive, then, on + setting, an IndexSizeError exception must be thrown instead.

      - +

      The muted attribute, on getting, must + return the MediaController's media controller mute override, and on + setting, must set the MediaController's media controller mute override + to the new value and queue a task to fire a simple event named volumechange at the + MediaController.

      -

      The track attribute, on getting, must - return the TextTrack object of the text track in whose list of cues the text track cue that the - TextTrackCue object represents finds itself, if any; or null otherwise.

      +
      -

      The id attribute, on getting, must return - the text track cue identifier of the text track cue that the - TextTrackCue object represents. On setting, the text track cue - identifier must be set to the new value.

      +

      The media resources of all the slaved media + elements of a MediaController have a defined temporal relationship which + provides relative offsets between the zero time of each such media resource: for + media resources with a timeline offset, their + relative offsets are the difference between their timeline offset; the zero times of + all the media resources without a timeline offset + are not offset from each other (i.e. the origins of their timelines are cotemporal); and finally, + the zero time of the media resource with the earliest timeline offset + (if any) is not offset from the zero times of the media + resources without a timeline offset (i.e. the origins of media resources without a timeline offset are further cotemporal + with the earliest defined point on the timeline of the media resource with the + earliest timeline offset).

      -

      The startTime attribute, on - getting, must return the text track cue start time of the text track cue - that the TextTrackCue object represents, in seconds. On setting, the text track - cue start time must be set to the new value, interpreted in seconds; then, if the - TextTrackCue object's text track cue is in a text track's - list of cues, and that text track is in - a media element's list of text tracks, and the media - element's show poster flag is not set, then run the time marches on steps for that media element.

      +

      The media resource end position of a media resource in a media + element is defined as follows: if the media resource has a finite and known + duration, the media resource end position is the duration of the media + resource's timeline (the last defined position on that timeline); otherwise, the + media resource's duration is infinite or unknown, and the media resource end + position is the time of the last frame of media data currently available for + that media resource.

      -

      The endTime attribute, on getting, - must return the text track cue end time of the text track cue that the - TextTrackCue object represents, in seconds. On setting, the text track cue end - time must be set to the new value, interpreted in seconds; then, if the - TextTrackCue object's text track cue is in a text track's - list of cues, and that text track is in - a media element's list of text tracks, and the media - element's show poster flag is not set, then run the time marches on steps for that media element.

      +

      Each MediaController also has its own defined timeline. On this timeline, all the + media resources of all the slaved media elements + of the MediaController are temporally aligned according to their defined offsets. The + media controller duration of that MediaController is the time from the + earliest earliest possible position, relative to this MediaController + timeline, of any of the media resources of the slaved + media elements of the MediaController, to the time of the latest media + resource end position of the media resources of the + slaved media elements of the MediaController, again relative to this + MediaController timeline.

      -

      The pauseOnExit attribute, on - getting, must return true if the text track cue pause-on-exit flag of the text - track cue that the TextTrackCue object represents is set; or false otherwise. - On setting, the text track cue pause-on-exit flag must be set if the new value is - true, and must be unset otherwise.

      +

      Each MediaController has a media controller position. This is the time + on the MediaController's timeline at which the user agent is trying to play the + slaved media elements. When a MediaController is created, its + media controller position is initially zero.

      - +

      When the user agent is to bring a media element up to speed with its new media controller, it must seek that media element to the + MediaController's media controller position relative to the media + element's timeline.

      +

      When the user agent is to seek the media controller to a particular new playback position, it must follow these steps:

      -
      4.7.14.12.6 Text tracks describing chapters
      +

      1. If the new playback position is less than zero, then set it to + zero.

      2. If the new playback position is greater than the media + controller duration, then set it to the media controller duration.

      3. Set the media controller position to the new playback + position.

      4. Seek each slaved + media element to the new playback position relative to the media + element timeline.

      -

      Chapters are segments of a media resource with a given title. Chapters can be - nested, in the same way that sections in a document outline can have subsections.

      +

      A MediaController is a restrained media controller if the + MediaController is a playing media controller, but either at least one + of its slaved media elements whose autoplaying flag is true still has + its paused attribute set to true, or, all of its + slaved media elements have their paused + attribute set to true.

      -

      Each text track cue in a text track being used for describing - chapters has three key features: the text track cue start time, giving the start time - of the chapter, the text track cue end time, giving the end time of the chapter, and - the text track cue data giving the chapter title.

      +

      A MediaController is a blocked media controller if the + MediaController is a paused media controller, or if any of its + slaved media elements are blocked media + elements, or if any of its slaved media elements whose autoplaying + flag is true still have their paused attribute set to + true, or if all of its slaved media elements have their paused attribute set to true.

      - +

      A media element is blocked on its media controller if the + MediaController is a blocked media controller, or if its media + controller position is either before the media resource's earliest + possible position relative to the MediaController's timeline or after the end + of the media resource relative to the MediaController's timeline.

      -

      The rules for constructing the chapter tree from a text track are as follows. They - produce a potentially nested list of chapters, each of which have a start time, end time, title, - and a list of nested chapters. This algorithm discards cues that do not correctly nest within each - other, or that are out of order.

      +

      When a MediaController is not a blocked media + controller and it has at least one slaved media + element whose Document is a fully active Document, + the MediaController's media controller position must increase + monotonically at media controller playback rate units of time on the + MediaController's timeline per unit time of the clock used by its slaved media + elements.

      -

      1. Let list be a copy of the list - of cues of the text track being processed.

      2. Remove from list any text track cue whose text - track cue end time is before its text track cue start time.

      3. Let output be an empty list of chapters, where a chapter is a record - consisting of a start time, an end time, a title, and a (potentially empty) list of nested - chapters. For the purpose of this algorithm, each chapter also has a parent chapter.

      4. Let current chapter be a stand-in chapter whose start time is negative - infinity, whose end time is positive infinity, and whose list of nested chapters is output. (This is just used to make the algorithm easier to describe.)

      5. Loop: If list is empty, jump to the step labeled - end.

      6. Let current cue be the first cue in list, and then - remove it from list.

      7. If current cue's text track cue start time is less than - the start time of current chapter, then return to the step labeled - loop.

        +

        When the zero point on the timeline of a MediaController moves relative to the + timelines of the slaved media elements by a time difference ΔT, the MediaController's media controller + position must be decremented by ΔT.

        -

      8. While current cue's text track cue start time is greater - than or equal to current chapter's end time, let current - chapter be current chapter's parent chapter.

      9. If current cue's text track cue end time is greater than - the end time of current chapter, then return to the step labeled - loop.

        +

        In some situations, e.g. when playing back a live stream without buffering + anything, the media controller position would increase monotonically as described + above at the same rate as the ΔT described in the previous paragraph + decreases it, with the end result that for all intents and purposes, the media controller + position would appear to remain constant (probably with the value 0).

        -
      10. +
        -

        Create a new chapter new chapter, whose start time is current cue's text track cue start time, whose end time is current cue's text track cue end time, whose title is current cue's text track cue data interpreted according to its - rules for rendering the cue in isolation, and whose list of nested chapters is - empty.

        +

        A MediaController has a most recently reported readiness state, which + is a number from 0 to 4 derived from the numbers used for the media element readyState attribute, and a most recently reported + playback state, which is either playing, waiting, or ended.

        -

        For WebVTT, the rules for rendering the cue in isolation are the - rules for interpreting WebVTT cue text. [WEBVTT]

        +

        When a MediaController is created, its most recently reported readiness + state must be set to 0, and its most recently reported playback state must be + set to waiting.

        -

      11. Append new chapter to current chapter's list of - nested chapters, and let current chapter be new chapter's - parent.

      12. Let current chapter be new chapter.

      13. Return to the step labeled loop.

      14. End: Return output.

      +

      When a user agent is required to report the controller state for a + MediaController, the user agent must run the following steps:

      - +
      1. -
        +

        If the MediaController has no slaved media elements, let new readiness state be 0.

        -

        The following snippet of a WebVTT file shows how nested chapters can be marked - up. The file describes three 50-minute chapters, "Astrophysics", "Computational Physics", and - "General Relativity". The first has three subchapters, the second has four, and the third has - two. [WEBVTT]

        +

        Otherwise, let it have the lowest value of the readyState IDL attributes of all of its slaved media + elements.

        - 
        WEBVTT
+   
      2. 
 
-00:00:00.000 --> 00:50:00.000
-Astrophysics
+    
        If the MediaController's most recently reported readiness state is
+    less than the new readiness state, then run these substeps:
        
 
-00:00:00.000 --> 00:10:00.000
-Introduction to Astrophysics
+    
        1. Let next state be the MediaController's most
+     recently reported readiness state.
        2. Loop: Increment next state by one.
        3. 
 
-00:10:00.000 --> 00:45:00.000
-The Solar System
+      
          Queue a task to run the following steps:
          
 
-00:00:00.000 --> 00:10:00.000
-Coursework Description
+      
          1. Set the MediaController's readyState attribute to the value next state.
          2. Fire a simple event at the MediaController object, whose
+       name is the event name corresponding to the value of next state given in
+       the table below.
          
 
-00:50:00.000 --> 01:40:00.000
-Computational Physics
+     
        4. If next state is less than new readiness state,
+     then return to the step labeled loop.
        
 
-00:50:00.000 --> 00:55:00.000
-Introduction to Programming
+    
        Otherwise, if the MediaController's most recently reported readiness
+    state is greater than new readiness state then queue a
+    task to fire a simple event at the MediaController object,
+    whose name is the event name corresponding to the value of new readiness
+    state given in the table below.
        
 
-00:55:00.000 --> 01:30:00.000
-Data Structures
+    
        Value of new readiness state
+       Event name
 
-01:30:00.000 --> 01:35:00.000
-Answers to Last Exam
+     
         0
+        emptied
 
-01:35:00.000 --> 01:40:00.000
-Coursework Description
+      
         1
+        loadedmetadata
 
-01:40:00.000 --> 02:30:00.000
-General Relativity
+      
         2
+        loadeddata
 
-01:40:00.000 --> 02:00:00.000
-Tensor Algebra
+      
         3
+        canplay
 
-02:00:00.000 --> 02:30:00.000
-The General Relativistic Field Equations
+      
         4
+        canplaythrough
 
-  
+    
        
 
+   
      3. Let the MediaController's most recently reported readiness state
+   be new readiness state.
      4. 
 
-  
+    
        Initialise new playback state by setting it to the state given for the
+    first matching condition from the following list:
        
 
-  
        4.7.14.12.7 Event handlers for objects of the text track APIs
        
+    
        If the MediaController has no slaved media elements
        Let new playback state be waiting.
        If all of the MediaController's slaved media elements have
+     ended playback and the media controller playback rate is positive or
+     zero
        Let new playback state be ended.
        If the MediaController is a blocked media controller
        Let new playback state be waiting.
        Otherwise
        Let new playback state be playing.
        
 
-  
        The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL
-  attributes, by all objects implementing the TextTrackList interface:
        
+   
      5. If the MediaController's most recently reported playback state
+   is not equal to new playback state and the new playback
+   state is ended, then queue a task that, if the
+   MediaController object is a playing media controller, and all of the
+   MediaController's slaved media elements have still ended
+   playback, and the media controller playback rate is still positive or zero,
+   changes the MediaController object to a paused media controller and
+   then fires a simple event named pause at the MediaController
+   object.
      6. 
 
-  
        Event handler Event handler event type
-   
        onchange  change
-    
        onaddtrack  addtrack
-    
        onremovetrack  removetrack
-  
        
+    
        If the MediaController's most recently reported playback state is
+    not equal to new playback state then queue a task to run the
+    following steps:
        
 
-  
        The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL
-  attributes, by all objects implementing the TextTrack interface:
        
+    
        1. Set the MediaController's playbackState attribute to the value given in
+     the second column of the row of the following table whose first column contains the new playback state.
        2. Fire a simple event at the MediaController object, whose name
+     is the value given in the third column of the row of the following table whose first column
+     contains the new playback state.
        
 
-  
        Event handler Event handler event type
-   
        oncuechange  cuechange
-  
        
+    
        New playback state
+       New value for playbackState
+       Event name
+     
        playing
+       "playing"
+       playing
+      
        waiting
+       "waiting"
+       waiting
+      
        ended
+       "ended"
+       ended
+    
        
 
-  
        The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL
-  attributes, by all objects implementing the TextTrackCue interface:
        
+   
      7. Let the MediaController's most recently reported playback state
+   be new playback state.
      -
      Event handler Event handler event type -
      onenter enter -
      onexit exit -
      +
      - +

      The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, + by all objects implementing the MediaController interface:

      +
      Event handler Event handler event type +
      onemptied emptied +
      onloadedmetadata loadedmetadata +
      onloadeddata loadeddata +
      oncanplay canplay +
      oncanplaythrough canplaythrough +
      onplaying playing +
      onended ended +
      onwaiting waiting +
      ondurationchange durationchange +
      ontimeupdate timeupdate +
      onplay play +
      onpause pause +
      onratechange ratechange +
      onvolumechange volumechange +
      +
      -
      4.7.14.12.8 Best practices for metadata text tracks
      +

      The task source for the tasks listed in this + section is the DOM manipulation task source.

      -

      This section is non-normative.

      + -

      Text tracks can be used for storing data relating to the media data, for interactive or - augmented views.

      -

      For example, a page showing a sports broadcast could include information about the current - score. Suppose a robotics competition was being streamed live. The image could be overlayed with - the scores, as follows:

      +
      4.8.14.11.3 Assigning a media controller declaratively
      -

      +

      The mediagroup content attribute on media elements can be used to link multiple media elements together by implicitly creating a MediaController. The + value is text; media elements with the same value are + automatically linked by the user agent.

      -

      In order to make the score display render correctly whenever the user seeks to an arbitrary - point in the video, the metadata text track cues need to be as long as is appropriate for the - score. For example, in the frame above, there would be maybe one cue that lasts the length of the - match that gives the match number, one cue that lasts until the blue alliance's score changes, and - one cue that lasts until the red alliance's score changes. If the video is just a stream of the - live event, the time in the bottom right would presumably be automatically derived from the - current video time, rather than based on a cue. However, if the video was just the highlights, - then that might be given in cues also.

      + -

      The following shows what fragments of this could look like in a WebVTT file:

      +

      When a media element is created with a mediagroup attribute, and when a media element's + mediagroup attribute is set, changed, or removed, the + user agent must run the following steps:

      - 
      WEBVTT
+  
      1. Let m be the media element in question.
      2. Let old controller be m's current media
+   controller, if it currently has one, and null otherwise.
      3. Let new controller be null.
      4. Let m have no current media controller, if it currently
+   has one.
      5. If m's mediagroup attribute
+   is being removed, then jump to the update controllers step below.
      6. 
 
-...
+    
        If there is another media element whose Document is the same as
+    m's Document (even if one or both of these elements are not
+    actually in the Document), and which
+    also has a mediagroup attribute, and whose mediagroup attribute has the same value as the new value of
+    m's mediagroup attribute, then
+    let controller be that media element's current media
+    controller.
        
 
-05:10:00.000 --> 05:12:15.000
-matchtype:qual
-matchnumber:37
+    
        Otherwise, let controller be a newly created
+    MediaController.
        
 
-...
+   
      7. Let m's current media controller be controller.
      8. Let new controller be m's current media
+   controller.
      9. Bring the media element up to speed with its new media
+   controller.
      10. Update controllers: If old
+   controller and new controller are the
+   same (whether both null or both the same controller) then abort
+   these steps.
      11. If old controller is not null and still has one or more slaved
+   media elements, then report the controller state for old
+   controller.
      12. If new controller is not null, then report the controller
+   state for new controller.
      
 
-05:11:02.251 --> 05:11:17.198
-red:78
+  
      The mediaGroup IDL attribute on media elements must reflect the mediagroup content attribute.
      
 
-05:11:03.672 --> 05:11:54.198
-blue:66
+  
 
-05:11:17.198 --> 05:11:25.912
-red:80
+  
      
 
-05:11:25.912 --> 05:11:26.522
-red:83
+   
      Multiple media elements referencing the same media
+   resource will share a single network request. This can be used to efficiently play two
+   (video) tracks from the same media resource in two different places on the screen.
+   Used with the mediagroup attribute, these elements can
+   also be kept synchronised.
      
 
-05:11:26.522 --> 05:11:26.982
-red:86
+   
      In this example, a sign-languge interpreter track from a movie file is overlaid on the primary
+   video track of that same video file using two video elements, some CSS, and an
+   implicit MediaController:
      
 
-05:11:26.982 --> 05:11:27.499
-red:89
+   
      <article>
+ <style scoped>
+  div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
+  video { position; absolute; bottom: 0; right: 0; }
+  video:first-child { width: 100%; height: 100%; }
+  video:last-child { width: 30%; }
+ </style>
+ <div>
+  <video src="movie.vid#track=Video&amp;track=English" autoplay controls mediagroup=movie></video>
+  <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
+ </div>
+</article>
      
 
-...
      + -

      The key here is to notice that the information is given in cues that span the length of time to - which the relevant event applies. If, instead, the scores were given as zero-length (or very - brief, nearly zero-length) cues when the score changes, for example saying "red+2" at - 05:11:17.198, "red+3" at 05:11:25.912, etc, problems arise: primarily, seeking is much harder to - implement, as the script has to walk the entire list of cues to make sure that no notifications - have been missed; but also, if the cues are short it's possible the script will never see that - they are active unless it listens to them specifically.

      -

      When using cues in this manner, authors are encouraged to use the cuechange event to update the current annotations. (In - particular, using the timeupdate event would be less - appropriate as it would require doing work even when the cues haven't changed, and, more - importantly, would introduce a higher latency between when the metatata cues become active and - when the display is updated, since timeupdate events - are rate-limited.)

      -
      4.7.14.13 User interface
      -

      The controls attribute is a boolean - attribute. If present, it indicates that the author has not provided a scripted controller - and would like the user agent to provide its own set of controls.

      +
      4.8.14.12 Timed text tracks
      - +
      4.8.14.12.1 Text track model
      -

      If the attribute is present, or if scripting is - disabled for the media element, then the user agent should expose a user - interface to the user. This user interface should include features to begin playback, pause - playback, seek to an arbitrary position in the content (if the content supports arbitrary - seeking), change the volume, change the display of closed captions or embedded sign-language - tracks, select different audio tracks or turn on audio descriptions, and show the media content in - manners more suitable to the user (e.g. full-screen video or in an independent resizable window). - Other controls may also be made available.

      +

      A media element can have a group of associated text + tracks, known as the media element's list of text tracks. The text tracks are sorted as follows:

      -

      If the media element has a current media controller, then the user - agent should expose audio tracks from all the slaved media elements (although - avoiding duplicates if the same media resource is being used several times). If a - media resource's audio track exposed in this way has no known name, and it is the - only audio track for a particular media element, the user agent should use the - element's title attribute, if any, as the name (or as part of the - name) of that track.

      +
      1. The text tracks corresponding to track element + children of the media element, in tree order.
      2. Any text tracks added using the addTextTrack() method, in the order they were added, oldest + first.
      3. Any media-resource-specific text + tracks (text tracks corresponding to data in the + media resource), in the order defined by the media resource's format + specification.
      -

      Even when the attribute is absent, however, user agents may provide controls to affect playback - of the media resource (e.g. play, pause, seeking, and volume controls), but such features should - not interfere with the page's normal rendering. For example, such features could be exposed in the - media element's context menu. The user agent may implement this simply by exposing a user interface to the user as - described above (as if the controls attribute was - present).

      +

      A text track consists of:

      -

      If the user agent exposes a user interface to - the user by displaying controls over the media element, then the user agent - should suppress any user interaction events while the user agent is interacting with this - interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at - elements on the page.)

      +
      The kind of text track -

      Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for - seeking, for changing the rate of playback, for fast-forwarding or rewinding, for listing, - enabling, and disabling text tracks, and for muting or changing the volume of the audio), user - interface features exposed by the user agent must be implemented in terms of the DOM API described - above, so that, e.g., all the same events fire.

      +
      -

      When a media element has a current media controller, the user agent's - user interface for pausing and unpausing playback, for seeking, for changing the rate of playback, - for fast-forwarding or rewinding, and for muting or changing the volume of audio of the entire - group must be implemented in terms of the MediaController API exposed on that - current media controller. When a media element has a current media - controller, and all the slaved media elements of that - MediaController are paused, the user agent should also unpause all the slaved - media elements when the user invokes a user agent interface control for beginning - playback.

      +

      This decides how the track is handled by the user agent. The kind is represented by a string. + The possible strings are:

      -

      The "play" function in the user agent's interface must set the playbackRate attribute to the value of the defaultPlaybackRate attribute before invoking the play() - method. When a media element has a current media controller, the - attributes and method with those names on that MediaController object must be used. - Otherwise, the attributes and method with those names on the media element itself - must be used.

      +
      • subtitles +
      • captions +
      • descriptions +
      • chapters +
      • metadata +
      -

      Features such as fast-forward or rewind must be implemented by only changing the playbackRate attribute (and not the defaultPlaybackRate - attribute). Again, when a media element has a current media controller, - the attributes with those names on that MediaController object must be used; - otherwise, the attributes with those names on the media element itself must be used.

      +

      The kind of track can change dynamically, in the case of + a text track corresponding to a track element.

      -

      When a media element has a current media controller, seeking must be - implemented in terms of the currentTime - attribute on that MediaController object. Otherwise, the user agent must directly - seek to the requested position in the media - element's media timeline. For media resources where seeking to an arbitrary - position would be slow, user agents are encouraged to use the approximate-for-speed flag - when seeking in response to the user manipulating an approximate position interface such as a seek - bar.

      +
      A label -

      When a media element has a current media controller, user agents may - additionally provide the user with controls that directly manipulate an individual media - element without affecting the MediaController, but such features are - considered relatively advanced and unlikely to be useful to most users.

      +
      -

      The activation behavior of a media element that is exposing a user interface to the user must be - to run the following steps:

      +

      This is a human-readable string intended to identify the track for the user.

      -

      1. If the media element has a current media controller, and that - current media controller is a restrained media controller, then invoke - the play() method of the - MediaController.

      2. Otherwise, if the media element has a current media controller, - and that current media controller is a paused media controller, then - invoke the unpause() method of the - MediaController.

      3. Otherwise, if the media element has a current media controller, - then that current media controller is a playing media controller; - invoke the pause() method of the - MediaController.

      4. Otherwise, the media element has no current media controller; if - the media element's paused attribute is true, - then invoke the play() method on the media - element.

      5. Otherwise, the media element has no current media controller, - and the media element's paused attribute is - false; invoke the pause() method on the media - element.

      +

      The label of a track can change dynamically, in the + case of a text track corresponding to a track element.

      -

      For the purposes of listing chapters in the media resource, only text tracks in the media element's list of text tracks - that are showing and whose text track kind is - chapters should be used. Such tracks must be - interpreted according to the rules for constructing the chapter tree from a text - track. When seeking in response to a user maniplating a chapter selection interface, user - agents should not use the approximate-for-speed flag.

      +

      When a text track label is the empty string, the user agent should automatically + generate an appropriate label from the text track's other properties (e.g. the kind of text + track and the text track's language) for use in its user interface. This automatically-generated + label is not exposed in the API.

      -

      The controls IDL attribute must - reflect the content attribute of the same name.

      +
      An in-band metadata track dispatch type -
      +
      - +

      This is a string extracted from the media resource specifically for in-band + metadata tracks to enable such tracks to be dispatched to different scripts in the document.

      -
      media . volume [ = value ]
      +

      For example, a traditional TV station broadcast streamed on the Web and + augmented with Web-specific interactive features could include text tracks with metadata for ad + targeting, trivia game data during game shows, player states during sports games, recipe + information during food programs, and so forth. As each program starts and ends, new tracks + might be added or removed from the stream, and as each one is added, the user agent could bind + them to dedicated script modules using the value of this attribute.

      -

      Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the - quietest and 1.0 the loudest.

      +

      Other than for in-band metadata text tracks, the in-band metadata track dispatch type is the empty string. How this + value is populated for different media formats is described in steps to expose a + media-resource-specific text track.

      -

      Can be set, to change the volume.

      +
      A language -

      Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

      +
      -
      media . muted [ = value ]
      +

      This is a string (a BCP 47 language tag) representing the language of the text track's cues. + [BCP47]

      -

      Returns true if audio is muted, overriding the volume - attribute, and false if the volume attribute is being - honored.

      +

      The language of a text track can change dynamically, + in the case of a text track corresponding to a track element.

      -

      Can be set, to change whether the audio is muted or not.

      +
      A readiness state -
      +
      - +

      One of the following:

      -

      A media element has a playback volume, which is a fraction in the range 0.0 (silent) to 1.0 (loudest). - Initially, the volume should be 1.0, but user agents may remember the last set value across - sessions, on a per-site basis or otherwise, so the volume may start at other values.

      +
      Not loaded -

      The volume IDL attribute must return the - playback volume of any audio portions of the - media element. On setting, if the new value is in the range 0.0 to 1.0 inclusive, the - media element's playback volume must be - set to the new value. If the new value is outside the range 0.0 to 1.0 inclusive, then, on - setting, an IndexSizeError exception must be thrown instead.

      +
      -

      A media element can also be muted. If - anything is muting the element, then it is muted. (For example, when the direction of - playback is backwards, the element is muted.)

      +

      Indicates that the text track's cues have not been obtained.

      -

      The muted IDL attribute must return the value - to which it was last set. When a media element is created, if the element has a muted content attribute specified, then the muted IDL attribute should be set to true; otherwise, the user - agents may set the value to the user's preferred value (e.g. remembering the last set value across - sessions, on a per-site basis or otherwise). While the muted - IDL attribute is set to true, the media element must be muted.

      +
      Loading -

      Whenever either of the values that would be returned by the volume and muted IDL - attributes change, the user agent must queue a task to fire a simple - event named volumechange at the media - element.

      +
      -

      An element's effective media volume is determined as follows:

      +

      Indicates that the text track is loading and there have been no fatal errors encountered so + far. Further cues might still be added to the track by the parser.

      -

      1. If the user has indicated that the user agent is to override the volume of the element, - then the element's effective media volume is the volume desired by the user. Abort - these steps.

      2. If the element's audio output is muted, the - element's effective media volume is zero. Abort these steps.

      3. If the element has a current media controller and that - MediaController object's media controller mute override is true, the - element's effective media volume is zero. Abort these steps.

      4. Let volume be the playback - volume of the audio portions of the media element, in range 0.0 (silent) to - 1.0 (loudest).

      5. If the element has a current media controller, multiply volume by that MediaController object's media controller - volume multiplier. (The media controller volume multiplier is in the range - 0.0 to 1.0, so this can only reduce the value.)

      6. The element's effective media volume is volume, - interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest - setting, values in between increasing in loudness. The range need not be linear. The loudest - setting may be lower than the system's loudest possible setting; for example the user could have - set a maximum volume.

      +
      Loaded - +
      -

      The muted content attribute on media elements is a boolean attribute that controls the - default state of the audio output of the media resource, potentially overriding user - preferences.

      +

      Indicates that the text track has been loaded with no fatal errors.

      - +
      Failed to load -

      The defaultMuted IDL attribute must - reflect the muted content attribute.

      +
      - +

      Indicates that the text track was enabled, but when the user agent attempted to obtain it, + this failed in some way (e.g. URL could not be resolved, network error, unknown text track format). Some or all of the cues are + likely missing and will not be obtained.

      -

      This attribute has no dynamic effect (it only controls the default state of the - element).

      +
      -
      +

      The readiness state of a text + track changes dynamically as the track is obtained.

      -

      This video (an advertisement) autoplays, but to avoid annoying users, it does so without - sound, and allows the user to turn the sound on.

      +
      A mode - 
      <video src="adverts.cgi?kind=video" controls autoplay loop muted></video>
      +
      - +

      One of the following:

      +
      Disabled +
      +

      Indicates that the text track is not active. Other than for the purposes of exposing the + track in the DOM, the user agent is ignoring the text track. No cues are active, no events are + fired, and the user agent will not attempt to obtain the track's cues.

      -
      4.7.14.14 Time ranges
      +
      Hidden -

      Objects implementing the TimeRanges interface - represent a list of ranges (periods) of time.

      +
      - 
      interface TimeRanges {
-  readonly attribute unsigned long length;
-  double start(unsigned long index);
-  double end(unsigned long index);
-};
      +

      Indicates that the text track is active, but that the user agent is not actively displaying + the cues. If no attempt has yet been made to obtain the track's cues, the user agent will + perform such an attempt momentarily. The user agent is maintaining a list of which cues are + active, and events are being fired accordingly.

      -
      media . length
      +
      Showing -

      Returns the number of ranges in the object.

      +
      -
      time = media . start(index)
      +

      Indicates that the text track is active. If no attempt has yet been made to obtain the + track's cues, the user agent will perform such an attempt momentarily. The user agent is + maintaining a list of which cues are active, and events are being fired accordingly. In + addition, for text tracks whose kind is subtitles or captions, the cues are being overlaid on the video + as appropriate; for text tracks whose kind is descriptions, the user agent is making the + cues available to the user in a non-visual fashion; and for text tracks whose kind is chapters, the user agent is making available to + the user a mechanism by which the user can navigate to any point in the media + resource by selecting a cue.

      -

      Returns the time for the start of the range with the given index.

      +
      -

      Throws an IndexSizeError exception if the index is out of range.

      +
      A list of zero or more cues -
      time = media . end(index)
      +
      -

      Returns the time for the end of the range with the given index.

      +

      A list of text track cues, along with rules for + updating the text track rendering. For example, for WebVTT, the rules for updating + the display of WebVTT text tracks. [WEBVTT]

      -

      Throws an IndexSizeError exception if the index is out of range.

      +

      The list of cues of a text track can change + dynamically, either because the text track has not yet been loaded or is still loading, + or due to DOM manipulation.

      - +

      Each text track has a corresponding TextTrack object.

      -

      The length IDL attribute must return the - number of ranges represented by the object.

      +
      -

      The start(index) - method must return the position of the start of the indexth range represented - by the object, in seconds measured from the start of the timeline that the object covers.

      +

      Each media element has a list of pending text tracks, which must + initially be empty, a blocked-on-parser flag, which must initially be false, and a + did-perform-automatic-track-selection flag, which must also initially be false.

      -

      The end(index) method - must return the position of the end of the indexth range represented by the - object, in seconds measured from the start of the timeline that the object covers.

      +

      When the user agent is required to populate the list of pending text tracks of a + media element, the user agent must add to the element's list of pending text + tracks each text track in the element's list of text tracks whose + text track mode is not disabled and whose + text track readiness state is loading.

      -

      These methods must throw IndexSizeError exceptions if called with an index argument greater than or equal to the number of ranges represented by the - object.

      +

      Whenever a track element's parent node changes, the user agent must remove the + corresponding text track from any list of pending text tracks that it is + in.

      -

      When a TimeRanges object is said to be a normalised TimeRanges - object, the ranges it represents must obey the following criteria:

      +

      Whenever a text track's text track readiness state changes to either + loaded or failed to + load, the user agent must remove it from any list of pending text tracks that + it is in.

      -
      • The start of a range must be greater than the end of all earlier ranges.
      • The start of a range must be less than the end of that same range.
      +

      When a media element is created by an HTML parser or XML + parser, the user agent must set the element's blocked-on-parser flag to true. + When a media element is popped off the stack of open elements of an + HTML parser or XML parser, the user agent must honor user + preferences for automatic text track selection, populate the list of pending text + tracks, and set the element's blocked-on-parser flag to false.

      -

      In other words, the ranges in such an object are ordered, don't overlap, aren't empty, and - don't touch (adjacent ranges are folded into one bigger range).

      +

      The text tracks of a media element are ready when both the element's list of pending text + tracks is empty and the element's blocked-on-parser flag is false.

      -

      Ranges in a TimeRanges object must be inclusive.

      +

      Each media element has a pending text track change notification flag, + which must initially be unset.

      -

      Thus, the end of a range would be equal to the start of a following adjacent - (touching but not overlapping) range. Similarly, a range covering a whole timeline anchored at - zero would have a start equal to zero and an end equal to the duration of the timeline.

      +

      Whenever a text track that is in a media element's list of text + tracks has its text track mode change value, the user agent must run the + following steps for the media element:

      -

      The timelines used by the objects returned by the buffered, seekable and - played IDL attributes of media - elements must be that element's media timeline.

      +

      1. If the media element's pending text track change notification + flag is set, abort these steps.

      2. Set the media element's pending text track change notification + flag.

      3. - +

        Queue a task that runs the following substeps:

        +

        1. Unset the media element's pending text track change notification + flag.

        2. Fire a simple event named change at + the media element's textTracks + attribute's TextTrackList object.

        -
        4.7.14.15 The TrackEvent interface
        +

      4. If the media element's show poster flag is not set, run the + time marches on steps.

      - 
      [Constructor(DOMString type, optional TrackEventInit eventInitDict)]
-interface TrackEvent : Event {
-  readonly attribute (VideoTrack or AudioTrack or TextTrack) track;
-};
+  
      The task source for the tasks listed in this
+  section is the DOM manipulation task source.
      
 
-dictionary TrackEventInit : EventInit {
-  (VideoTrack or AudioTrack or TextTrack) track;
-};
      +
      -
      event . track
      +

      A text track cue is the unit of time-sensitive data in a text track, + corresponding for instance for subtitles and captions to the text that appears at a particular + time and disappears at another time.

      -

      Returns the track object (TextTrack, AudioTrack, or - VideoTrack) to which the event relates.

      +

      Each text track cue consists of:

      +
      An identifier +
      +

      An arbitrary string.

      +
      A start time +
      +

      The time, in seconds and fractions of a second, that describes the beginning of the range of + the media data to which the cue applies.

      +
      An end time +
      +

      The time, in seconds and fractions of a second, that describes the end of the range of the + media data to which the cue applies.

      +
      A pause-on-exit flag +
      +

      A boolean indicating whether playback of the media resource is to pause when the + end of the range to which the cue applies is reached.

      +
      Some additional format-specific data
      +

      Additional fields, as needed for the format. For example, WebVTT has a text track cue + writing direction and so forth. [WEBVTT]

      +
      The data of the cue +
      +

      The raw data of the cue, and rules for rendering the cue in isolation.

      +

      The precise nature of this data is defined by the format. For example, WebVTT uses text.

      - +

      The text track cue start time and text track cue end + time can be negative. (The current playback position can never be negative, + though, so cues entirely before time zero cannot be active.)

      -

      The track attribute must return the value - it was initialised to. When the object is created, this attribute must be initialised to null. It - represents the context information for the event.

      +

      Each text track cue has a corresponding TextTrackCue object (or more + specifically, an object that inherits from TextTrackCue — for example, WebVTT + cues use the VTTCue interface). A text track cue's in-memory + representation can be dynamically changed through this TextTrackCue API. [WEBVTT]

      - +

      A text track cue is associated with rules for updating the text track + rendering, as defined by the specification for the specific kind of text track + cue. These rules are used specifically when the object representing the cue is added to a + TextTrack object using the addCue() + method.

      +

      In addition, each text track cue has two pieces of dynamic information:

      +
      The active flag +
      -
      4.7.14.16 Event summary
      +

      This flag must be initially unset. The flag is used to ensure events are fired appropriately + when the cue becomes active or inactive, and to make sure the right cues are rendered.

      -

      This section is non-normative.

      +

      The user agent must synchronously unset this flag whenever the text track cue is + removed from its text track's text track list of cues; whenever the + text track itself is removed from its media element's list of + text tracks or has its text track mode changed to disabled; and whenever the media element's readyState is changed back to HAVE_NOTHING. When the flag is unset in this way for one + or more cues in text tracks that were showing prior to the relevant incident, the user agent must, after having unset + the flag for all the affected cues, apply the rules for updating the text track + rendering of those text tracks. For example, for text tracks based on WebVTT, the rules for updating the display + of WebVTT text tracks. [WEBVTT]

      The display state +
      -

      The following events fire on media elements as part of the - processing model described above:

      +

      This is used as part of the rendering model, to keep cues in a consistent position. It must + initially be empty. Whenever the text track cue active flag is unset, the user + agent must empty the text track cue display state.

      -
      Event name - Interface - Fired when... - Preconditions + -
      loadstart +

      The text track cues of a media element's + text tracks are ordered relative to each other in the text + track cue order, which is determined as follows: first group the cues by their text track, with the groups being sorted in the same order + as their text tracks appear in the media element's + list of text tracks; then, within each group, cues must be sorted by their start + time, earliest first; then, any cues with the same + start time must be sorted by their end time, latest first; and finally, any cues with identical end + times must be sorted in the order they were last added to their respective text track + list of cues, oldest first (so e.g. for cues from a WebVTT file, that would initially be + the order in which the cues were listed in the file). [WEBVTT]

      -       		Event - The user agent begins looking for media data, as part of the resource selection algorithm. +
      4.8.14.12.2 Sourcing in-band text tracks
      -       		networkState equals NETWORK_LOADING +

      A media-resource-specific text track is a text track that corresponds + to data found in the media resource.

      -
      progress - Event + - The user agent is fetching media data. +

      Rules for processing and rendering such data are defined by the relevant specifications, e.g. + the specification of the video format if the media resource is a video.

      -       		networkState equals NETWORK_LOADING +

      When a media resource contains data that the user agent recognises and supports as + being equivalent to a text track, the user agent runs the steps to expose a + media-resource-specific text track with the relevant data, as follows.

      -
      suspend + - Event +

      1. Associate the relevant data with a new text track and its corresponding new + TextTrack object. The text track is a media-resource-specific + text track.

      2. Set the new text track's kind, label, and language + based on the semantics of the relevant data, as defined by the relevant specification. If there + is no label in that data, then the label must be set to the + empty string.

      3. Associate the text track list of cues with the rules for updating the + text track rendering appropriate for the format in question.

        -
      		The user agent is intentionally not currently fetching media data. +
    14. -
      		15. networkState equals NETWORK_IDLE +

      If the new text track's kind is metadata, then set the text track in-band + metadata track dispatch type as follows, based on the type of the media + resource:

      -
      abort +
      If the media resource is an Ogg file
      The text track in-band metadata track dispatch type must be set to the value + of the Name header field. [OGGSKELETONHEADERS]
      If the media resource is a WebM file
      The text track in-band metadata track dispatch type must be set to the value + of the CodecID element. [WEBMCG]
      If the media resource is an MPEG-2 file
      Let stream type be the value of the "stream_type" field describing the + text track's type in the file's program map section, interpreted as an 8-bit unsigned integer. + Let length be the value of the "ES_info_length" field for the track in the + same part of the program map section, interpreted as an integer as defined by the MPEG-2 + specification. Let descriptor bytes be the length bytes + following the "ES_info_length" field. The text track in-band metadata track dispatch + type must be set to the concatenation of the stream type byte and + the zero or more descriptor bytes bytes, expressed in hexadecimal using + uppercase ASCII hex digits. [MPEG2] -
      		Event +
      If the media resource is an MPEG-4 file
      Let the + first stsd box of the + first stbl box of the + first minf box of the + first mdia box of the + text track's trak box in the + first moov box + of the file be the stsd box, if any. -
      		The user agent stops fetching the media data before it is completely - downloaded, but not due to an error. + If the file has no stsd box, or if the stsd box has neither a mett box nor a metx box, then the text track + in-band metadata track dispatch type must be set to the empty string. - error is an object with the code MEDIA_ERR_ABORTED. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. + Otherwise, if the stsd box has a mett box then the text + track in-band metadata track dispatch type must be set to the concatenation of the + string "mett", a U+0020 SPACE character, and the value of the first mime_format field of the first mett box of the stsd + box, or the empty string if that field is absent in that box. -
      error + Otherwise, if the stsd box has no mett box but has a metx box then the text track in-band metadata track dispatch type + must be set to the concatenation of the string "metx", a U+0020 SPACE + character, and the value of the first namespace field of the first metx box of the stsd box, or the empty string if that field is absent in + that box. - Event + [MPEG4] + + + +

    15. Populate the new text track's list of + cues with the cues parsed so far, following the guidelines for exposing + cues, and begin updating it dynamically as necessary.

    16. Set the new text track's readiness + state to loaded.

    17. Set the new text track's mode to the + mode consistent with the user's preferences and the requirements of the relevant specification + for the data.

      -
      		18. An error occurs while fetching the media data. +

      For instance, if there are no other active subtitles, and this is a forced + subtitle track (a subtitle track giving subtitles in the audio track's primary language, but + only for audio that is actually in another language), then those subtitles might be activated + here.

      -       		error is an object with the code MEDIA_ERR_NETWORK or higher. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. +

    18. Add the new text track to the media element's list of text + tracks.

    19. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses + the TrackEvent interface, with the track + attribute initialised to the text track's TextTrack object, at the + media element's textTracks attribute's + TextTrackList object. -

      20. emptied + - Event + - A media element whose networkState - was previously not in the NETWORK_EMPTY state has - just switched to that state (either because of a fatal error during load that's about to be - reported, or because the load() method was invoked while - the resource selection algorithm was already - running). + - networkState is NETWORK_EMPTY; all the IDL attributes are in their - initial states. -
      stalled - Event + - The user agent is trying to fetch media data, but data is unexpectedly not - forthcoming. +
      4.8.14.12.3 Sourcing out-of-band text tracks
      -       		networkState is NETWORK_LOADING. +

      When a track element is created, it must be associated with a new text + track (with its value set as defined below) and its corresponding new + TextTrack object.

      -
      loadedmetadata +

      The text track kind is determined from the state of the element's kind attribute according to the following table; for a state given + in a cell of the first column, the kind is the string given + in the second column:

      -       		Event +
      State + String +
      Subtitles + subtitles +
      Captions + captions +
      Descriptions + descriptions +
      Chapters + chapters +
      Metadata + metadata +
      -       		The user agent has just determined the duration and dimensions of the media - resource and the text tracks are ready. +

      The text track label is the element's track label.

      -       		readyState is newly equal to HAVE_METADATA or greater for the first time. +

      The text track language is the element's track language, if any, or + the empty string otherwise.

      -
      loadeddata +

      As the kind, label, + and srclang attributes are set, changed, or removed, the + text track must update accordingly, as per the definitions above.

      -       		Event +

      Changes to the track URL are handled in the algorithm below.

      -       		The user agent can render the media data at the current playback - position for the first time. +

      The text track readiness state is initially not loaded, and the text track mode is initially disabled.

      -       		readyState newly increased to HAVE_CURRENT_DATA or greater for the first time. +

      The text track list of cues is initially empty. It is dynamically modified when + the referenced file is parsed. Associated with the list are the rules for updating the text + track rendering appropriate for the format in question; for WebVTT, this is the rules + for updating the display of WebVTT text tracks. [WEBVTT]

      -
      canplay +

      When a track element's parent element changes and the new parent is a media + element, then the user agent must add the track element's corresponding + text track to the media element's list of text tracks, and + then queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses + the TrackEvent interface, with the track + attribute initialised to the text track's TextTrack object, at the + media element's textTracks attribute's + TextTrackList object.

      -       		Event +

      When a track element's parent element changes and the old parent was a media + element, then the user agent must remove the track element's corresponding + text track from the media element's list of text tracks, + and then queue a task to fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that + uses the TrackEvent interface, with the track attribute initialised to the text track's + TextTrack object, at the media element's textTracks attribute's TextTrackList object.

      + -       		The user agent can resume playback of the media data, but estimates that if - playback were to be started now, the media resource could not be rendered at the - current playback rate up to its end without having to stop for further buffering of content. +
      -       		readyState newly increased to HAVE_FUTURE_DATA or greater. +

      When a text track corresponding to a track element is added to a + media element's list of text tracks, the user agent must queue a + task to run the following steps for the media element:

      -
      canplaythrough +

      1. If the element's blocked-on-parser flag is true, abort these steps.

      2. If the element's did-perform-automatic-track-selection flag is true, abort + these steps.

      3. Honor user preferences for automatic text track selection for this + element.

      -       		Event +

      When the user agent is required to honor user preferences for automatic text track + selection for a media element, the user agent must run the following steps:

      -       		The user agent estimates that if playback were to be started now, the media - resource could be rendered at the current playback rate all the way to its end without - having to stop for further buffering. +

      1. Perform automatic text track selection for subtitles and captions.

      2. Perform automatic text track selection for descriptions.

      3. Perform automatic text track selection for chapters.

      4. If there are any text tracks in the media + element's list of text tracks whose text track kind is metadata that correspond to track + elements with a default attribute set whose text + track mode is set to disabled, then set the + text track mode of all such tracks to hidden

      5. Set the element's did-perform-automatic-track-selection flag to + true.

      -       		readyState is newly equal to HAVE_ENOUGH_DATA. +

      When the steps above say to perform automatic text track selection for one or more + text track kinds, it means to run the following steps:

      -
      playing +

      1. Let candidates be a list consisting of the text tracks in the media element's list of text tracks + whose text track kind is one of the kinds that were passed to the algorithm, if any, + in the order given in the list of text tracks.

      2. If candidates is empty, then abort these steps.

      3. If any of the text tracks in candidates have a text track mode set to showing, abort these steps.

      4. -
      		Event +

      If the user has expressed an interest in having a track from candidates + enabled based on its text track kind, text track language, and + text track label, then set its text track mode to showing.

      -       		Playback is ready to start after having been paused or delayed due to lack of media - data. +

      For example, the user could have set a browser preference to the effect of "I + want French captions whenever possible", or "If there is a subtitle track with 'Commentary' in + the title, enable it", or "If there are audio description tracks available, enable one, ideally + in Swiss German, but failing that in Standard Swiss German or Standard German".

      -       		readyState is newly equal to or greater than - HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA. Even if this event fires, the - element might still not be potentially playing, e.g. if the element is - blocked on its media controller (e.g. because the current media - controller is paused, or another slaved media - element is stalled somehow, or because the media resource has no data - corresponding to the media controller position), or the element is paused - for user interaction or paused for in-band content. +

      Otherwise, if there are any text tracks in candidates that correspond to track elements with a default attribute set whose text track mode is + set to disabled, then set the text track + mode of the first such track to showing.

      -
      waiting + - Event +

      When a text track corresponding to a track element experiences any of + the following circumstances, the user agent must start the track processing + model for that text track and its track element: -

      		Playback has stopped because the next frame is not available, but the user agent expects - that frame to become available in due course. + - readyState is equal to or less than HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position - is not contained in any of the ranges in buffered. It - is possible for playback to stop for other reasons without paused being false, but those reasons do not fire this event - (and when those situations resolve, a separate playing - event is not fired either): e.g. the element is newly blocked on its media - controller, or playback ended, or playback - stopped due to errors, or the element has paused for user interaction - or paused for in-band content. +

      When a user agent is to start the track processing model for a + text track and its track element, it must run the following algorithm. + This algorithm interacts closely with the event loop mechanism; in particular, it has + a synchronous section (which is triggered as part of the event loop + algorithm). The steps in that section are marked with ⌛.

      -
      seeking +

      1. If another occurrence of this algorithm is already running for this text + track and its track element, abort these steps, letting that other algorithm + take care of this element.

      2. If the text track's text track mode is not set to one of hidden or showing, abort + these steps.

      3. If the text track's track element does not have a media + element as a parent, abort these steps.

      4. Run the remainder of these steps asynchronously, allowing whatever caused these steps to + run to continue.

      5. Top: Await a stable state. The synchronous section + consists of the following steps. (The steps in the synchronous section are marked + with ⌛.)

      6. ⌛ Set the text track readiness state to loading.

      7. ⌛ Let URL be the track URL of the + track element.

      8. ⌛ If the track element's parent is a media element then + let CORS mode be the state of the parent media element's crossorigin content attribute. Otherwise, let CORS mode be No CORS.

      9. End the synchronous section, continuing the remaining steps + asynchronously.

      10. -
      		Event +

      If URL is not the empty string, perform a potentially CORS-enabled + fetch of URL, with the mode being CORS mode, the origin being the origin of the + track element's Document, and the default origin behaviour set + to fail.

      -       		The seeking IDL attribute changed to true, and the user agent has started seeking to a new position. +

      The resource obtained in this fashion, if any, contains the text track data. If any data is + obtained, it is by definition CORS-same-origin (cross-origin resources that are not + suitably CORS-enabled do not get this far).

      -       		+

      The tasks queued by the + fetching algorithm on the networking task source to + process the data as it is being fetched must determine the type of the resource. If the + type of the resource is not a supported text track format, the load will fail, as + described below. Otherwise, the resource's data must be passed to the appropriate parser (e.g. + the WebVTT parser) as it is received, with the text track list of cues being used for + that parser's output. [WEBVTT]

      -
      seeked +

      The appropriate parser will synchronously (during these networking task + source tasks) and incrementally (as each such task is + run with whatever data has been received from the network) update the text track list of + cues.

      -       		Event +

      This specification does not currently say whether or how to check the MIME + types of text tracks, or whether or how to perform file type sniffing using the actual file + data. Implementors differ in their intentions on this matter and it is therefore unclear what + the right solution is. In the absence of any requirement here, the HTTP specification's strict + requirement to follow the Content-Type header prevails ("Content-Type specifies the media type + of the underlying data." ... "If and only if the media type is not given by a Content-Type + field, the recipient MAY attempt to guess the media type via inspection of its content + and/or the name extension(s) of the URI used to identify the resource.").

      -       		The seeking IDL attribute changed to false after the current playback position was changed. +

      If the fetching algorithm fails for any reason (network error, + the server returns an error code, a cross-origin check fails, etc), or if URL is the empty string, then queue a task to first change the + text track readiness state to failed to + load and then fire a simple event named error at the track element. This task must use the DOM manipulation task source.

      -       		+

      If the fetching algorithm does not fail, but the + type of the resource is not a supported text track format, or the file was not successfully + processed (e.g. the format in question is an XML format and the file contained a well-formedness + error that the XML specification requires be detected and reported to the application), then the + task that is queued by the + networking task source in which the aforementioned problem is found must change the + text track readiness state to failed to + load and fire a simple event named error + at the track element.

      -
      ended +

      If the fetching algorithm does not fail, and the file was + successfully processed, then the final task that is queued by the networking task source, after it has + finished parsing the data, must change the text track readiness state to loaded, and fire a simple event named load at the track element.

      -       		Event +

      If, while the fetching algorithm is active, either:

      -       		Playback has stopped because the end of the media resource was reached. + - currentTime equals the end of the media - resource; ended is true. +

      ...then the user agent must abort the fetching algorithm, + discarding any pending tasks generated by that algorithm (and + in particular, not adding any cues to the text track list of cues after the moment + the URL changed), and then queue a task that first changes the text track + readiness state to failed to load and + then fires a simple event named error at the track element. This task must use the DOM manipulation task source.

      -
      durationchange +

    20. Wait until the text track readiness state is no longer set to loading.

    21. Wait until the track URL is no longer equal to URL, at + the same time as the text track mode is set to hidden or showing.

    22. Jump to the step labeled top. -

      		23. Event +

      Whenever a track element has its src attribute + set, changed, or removed, the user agent must synchronously empty the element's text + track's text track list of cues. (This also causes the algorithm above to stop + adding cues from the resource being obtained using the previously given URL, if any.)

      -       		The duration attribute has just been updated. + - -
      timeupdate + - Event +
      4.8.14.12.4 Guidelines for exposing cues in various formats as text track cues
      -       		The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. +

      How a specific format's text track cues are to be interpreted for the purposes of processing by + an HTML user agent is defined by that format. In the absence of such a specification, this section + provides some constraints within which implementations can attempt to consistently expose such + formats.

      -       		+

      To support the text track model of HTML, each unit of timed data is converted to a + text track cue. Where the mapping of the format's features to the aspects of a + text track cue as defined in this specification are not defined, implementations must + ensure that the mapping is consistent with the definitions of the aspects of a text track + cue as defined above, as well as with the following constraints:

      -
      play +
      The text track cue identifier +
      +

      Should be set to the empty string if the format has no obvious analogue to a per-cue + identifier.

      +
      The text track cue pause-on-exit flag +
      +

      Should be set to false.

      +
      -       		Event + - The element is no longer paused. Fired after the play() - method has returned, or when the autoplay attribute - has caused playback to begin. - paused is newly false. +
      4.8.14.12.5 Text track API
      -
      pause + 
      interface TextTrackList : EventTarget {
+  readonly attribute unsigned long length;
+  getter TextTrack (unsigned long index);
+  TextTrack? getTrackById(DOMString id);
 
-
      		Event + attribute EventHandler onchange; + attribute EventHandler onaddtrack; + attribute EventHandler onremovetrack; +}; - The element has been paused. Fired after the pause() - method has returned. +
      media . textTracks . length
      +

      Returns the number of text tracks associated with the media element (e.g. from track elements). This is the number of text tracks in the media element's list of text tracks.

      +
      media . textTracks[ n ]
      +

      Returns the TextTrack object representing the nth text track in the media element's list of text tracks.

      +
      textTrack = media . textTracks . getTrackById( id )
      -
      		paused is newly true. +

      Returns the TextTrack object with the given identifier, or null if no track has that identifier.

      -
      ratechange + - Event + - Either the defaultPlaybackRate or the - playbackRate attribute has just been updated. +

      A TextTrackList object represents a dynamically updating list of text tracks in a given order.

      -       		+

      The textTracks attribute of media elements must return a TextTrackList object + representing the TextTrack objects of the text tracks + in the media element's list of text tracks, in the same order as in the + list of text tracks. The same object must be returned each time the attribute is + accessed. [WEBIDL]

      -
      resize +

      The length attribute of a + TextTrackList object must return the number of text + tracks in the list represented by the TextTrackList object.

      -       		Event +

      The supported property indices of a TextTrackList object at any + instant are the numbers from zero to the number of text tracks in + the list represented by the TextTrackList object minus one, if any. If there are no + text tracks in the list, there are no supported property + indices.

      -       		One or both of the videoWidth and videoHeight attributes have just been updated. +

      To determine the value of an indexed property of a TextTrackList + object for a given index index, the user agent must return the indexth text track in the list represented by the + TextTrackList object.

      -       		Media element is a video element; readyState is not HAVE_NOTHING +

      The getTrackById(id) method must return the first TextTrack in the + TextTrackList object whose id IDL attribute + would return a value equal to the value of the id argument. When no tracks + match the given argument, the method must return null.

      -
      volumechange + - Event +
      -       		Either the volume attribute or the muted attribute has changed. Fired after the relevant - attribute's setter has returned. + 
      enum TextTrackMode { "disabled",  "hidden",  "showing" };
+enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };
+interface TextTrack : EventTarget {
+  readonly attribute TextTrackKind kind;
+  readonly attribute DOMString label;
+  readonly attribute DOMString language;
 
-
      		+ readonly attribute DOMString id; + readonly attribute DOMString inBandMetadataTrackDispatchType; -
      + attribute TextTrackMode mode; -

      The following events fire on MediaController objects:

      + readonly attribute TextTrackCueList? cues; + readonly attribute TextTrackCueList? activeCues; -
      Event name + void addCue(TextTrackCue cue); + void removeCue(TextTrackCue cue); - Interface + attribute EventHandler oncuechange; +}; - Fired when... +
      textTrack = media . addTextTrack( kind [, label [, language ] ] )
      -
      emptied +

      Creates and returns a new TextTrack object, which is also added to the + media element's list of text tracks.

      -       		Event +
      textTrack . kind
      -
      		All the slaved media elements newly have readyState set to HAVE_NOTHING or greater, or there are no longer any - slaved media elements. +

      Returns the text track kind string.

      -
      loadedmetadata +
      textTrack . label
      -
      		Event +

      Returns the text track label, if there is one, or the empty string otherwise + (indicating that a custom label probably needs to be generated from the other attributes of the + object if the object is exposed to the user).

      -       		All the slaved media elements newly have readyState set to HAVE_METADATA or greater. +
      textTrack . language
      +

      Returns the text track language string.

      +
      textTrack . id
      -
      loadeddata +

      Returns the ID of the given track.

      -       		Event +

      For in-band tracks, this is the ID that can be used with a fragment identifier if the format + supports the Media Fragments URI syntax, and that can be used with the getTrackById() method. [MEDIAFRAG]

      -       		All the slaved media elements newly have readyState set to HAVE_CURRENT_DATA or greater. +

      For TextTrack objects corresponding to track elements, this is the + ID of the track element.

      -
      canplay +
      textTrack . inBandMetadataTrackDispatchType
      -
      		Event +

      Returns the text track in-band metadata track dispatch type string.

      -       		All the slaved media elements newly have readyState set to HAVE_FUTURE_DATA or greater. +
      textTrack . mode [ = value ]
      -
      canplaythrough +

      Returns the text track mode, represented by a string from the following + list:

      -       		Event +
      "disabled"
      +

      The text track disabled mode.

      +
      "hidden"
      +

      The text track hidden mode.

      +
      "showing"
      +

      The text track showing mode.

      +
      -       		All the slaved media elements newly have readyState set to HAVE_ENOUGH_DATA or greater. +

      Can be set, to change the mode.

      -
      playing +
      textTrack . cues
      +

      Returns the text track list of cues, as a TextTrackCueList object.

      +
      textTrack . activeCues
      -
      		Event +

      Returns the text track cues from the text track + list of cues that are currently active (i.e. that start before the current playback + position and end after it), as a TextTrackCueList object.

      -       		The MediaController is no longer a blocked media controller. +
      textTrack . addCue( cue )
      +

      Adds the given cue to textTrack's text track list of cues.

      +
      textTrack . removeCue( cue )
      +

      Removes the given cue from textTrack's text track list of cues.

      + -
      waiting + - Event +

      The addTextTrack(kind, label, language) method of media elements, when invoked, must run the following steps:

      -       		The MediaController is now a blocked media controller. +
      1. -
      ended +

      Create a new TextTrack object.

      -       		Event +
    23. -
      		24. All the slaved media elements have newly ended playback; the - MediaController has reached the end of all the slaved media elements. +

      Create a new text track corresponding to the new object, and set its text + track kind to kind, its text track label to label, its text track language to language, its + text track readiness state to the text track loaded state, its + text track mode to the text track hidden mode, and its text + track list of cues to an empty list.

      -
      durationchange +

      Initially, the text track list of cues is not associated with any rules + for updating the text track rendering. When a text track cue is added to it, + the text track list of cues has its rules permanently set accordingly.

      -       		Event +
    24. -
      		25. The duration attribute has just been - updated. +

      Add the new text track to the media element's list of text + tracks.

      -
      timeupdate +
    25. -
      		26. Event +

      Queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and + that uses the TrackEvent interface, with the track attribute initialised to the new text + track's TextTrack object, at the media element's textTracks attribute's TextTrackList + object.

      -       		The media controller position changed. +
    26. -
      27. play +

      Return the new TextTrack object.

      -       		Event + - The paused attribute is newly false. +
      -
      pause +

      The kind attribute must return the + text track kind of the text track that the TextTrack object + represents.

      -       		Event +

      The label attribute must return the + text track label of the text track that the TextTrack + object represents.

      -       		The paused attribute is newly true. +

      The language attribute must return the + text track language of the text track that the TextTrack + object represents.

      -
      ratechange +

      The id attribute returns the track's + identifier, if it has one, or the empty string otherwise. For tracks that correspond to + track elements, the track's identifier is the value of the element's id attribute, if any. For in-band tracks, the track's identifier is + specified by the media resource. If the media resource is in a format + that supports the Media Fragments URI fragment identifier syntax, the identifier + returned for a particular track must be the same identifier that would enable the track if used as + the name of a track in the track dimension of such a fragment identifier. [MEDIAFRAG]

      -       		Event +

      The inBandMetadataTrackDispatchType + attribute must return the text track in-band metadata track dispatch type of the + text track that the TextTrack object represents.

      -       		Either the defaultPlaybackRate - attribute or the playbackRate attribute - has just been updated. +

      The mode attribute, on getting, must return + the string corresponding to the text track mode of the text track that + the TextTrack object represents, as defined by the following list:

      -
      volumechange +
      "disabled"
      The text track disabled mode.
      "hidden"
      The text track hidden mode.
      "showing"
      The text track showing mode.
      -       		Event +

      On setting, if the new value isn't equal to what the attribute would currently return, the new + value must be processed as follows:

      -       		Either the volume attribute or the muted attribute has just been updated. +
      If the new value is "disabled"
      -
      +

      Set the text track mode of the text track that the + TextTrack object represents to the text track disabled mode.

      +
      If the new value is "hidden"
      -

      The following events fire on AudioTrackList, VideoTrackList, and - TextTrackList objects:

      +

      Set the text track mode of the text track that the + TextTrack object represents to the text track hidden mode.

      -
      Event name +
      If the new value is "showing"
      -
      		Interface +

      Set the text track mode of the text track that the + TextTrack object represents to the text track showing mode.

      -       		Fired when... + -
      change +

      If the text track mode of the text track that the + TextTrack object represents is not the text track disabled mode, then + the cues attribute must return a + live TextTrackCueList object that represents the subset of the + text track list of cues of the text track that the + TextTrack object represents whose end + times occur at or after the earliest possible position when the script + started, in text track cue order. Otherwise, it must return null. When an + object is returned, the same object must be returned each time.

      -       		Event +

      The earliest possible position when the script started is whatever the + earliest possible position was the last time the event loop reached step + 1.

      -       		One or more tracks in the track list have been enabled or disabled. +

      If the text track mode of the text track that the + TextTrack object represents is not the text track disabled mode, then + the activeCues attribute must return a + live TextTrackCueList object that represents the subset of the + text track list of cues of the text track that the + TextTrack object represents whose active flag was set when the script + started, in text track cue order. Otherwise, it must return null. When an + object is returned, the same object must be returned each time.

      -
      addtrack +

      A text track cue's active flag was set when the script started if its + text track cue active flag was set the last time the event loop reached + step 1.

      -       		TrackEvent +
      -       		A track has been added to the track list. +

      The addCue(cue) method + of TextTrack objects, when invoked, must run the following steps:

      -
      removetrack +

      1. If the text track list of cues does not yet have any associated rules + for updating the text track rendering, then associate the text track list of + cues with the rules for updating the text track rendering appropriate to cue.

        -
      		TrackEvent +

    27. If text track list of cues' associated rules for updating the text + track rendering are not the same rules for updating the text track rendering + as appropriate for cue, then throw an InvalidStateError + exception and abort these steps.

      -
      		28. A track has been removed from the track list. +

    28. If the given cue is in a text track list of cues, then + remove cue from that text track list of cues.

    29. Add cue to the method's TextTrack object's text + track's text track list of cues. -

      30. +

      The removeCue(cue) + method of TextTrack objects, when invoked, must run the following steps:

      +

      1. If the given cue is not currently listed in the method's + TextTrack object's text track's text track list of cues, + then throw a NotFoundError exception and abort these steps.

      2. Remove cue from the method's TextTrack object's + text track's text track list of cues.

      + -

      The following event fires on TextTrack objects and track elements:

      +
      -
      Event name +

      In this example, an audio element is used to play a specific sound-effect from a + sound file containing many sound effects. A cue is used to pause the audio, so that it ends + exactly at the end of the clip, even if the browser is busy running some script. If the page had + relied on script to pause the audio, then the start of the next clip might be heard if the + browser was not able to run the script at the exact time specified.

      -       		Interface + 
      var sfx = new Audio('sfx.wav');
+var sounds = sfx.addTextTrack('metadata');
 
-
      		Fired when... +// add sounds we care about +function addFX(start, end, name) { + var cue = new VTTCue(start, end, ''); + cue.id = name; + cue.pauseOnExit = true; + sounds.addCue(cue); +} +addFX(12.783, 13.612, 'dog bark'); +addFX(13.612, 15.091, 'kitten mew')) -
      cuechange +function playSound(id) { + sfx.currentTime = sounds.getCueById(id).startTime; + sfx.play(); +} - Event +// play a bark as soon as we can +sfx.oncanplaythrough = function () { + playSound('dog bark'); +} +// meow when the user tries to leave +window.onbeforeunload = function () { + playSound('kitten mew'); + return 'Are you sure you want to leave this awesome page?'; +} - One or more cues in the track have become active or stopped being active. + -
      +
      + 
      interface TextTrackCueList {
+  readonly attribute unsigned long length;
+  getter TextTrackCue (unsigned long index);
+  TextTrackCue? getCueById(DOMString id);
+};
      -

      The following events fire on TextTrackCue objects:

      +
      cuelist . length
      +

      Returns the number of cues in the list.

      +
      cuelist[index]
      +

      Returns the text track cue with index index in the list. The cues are sorted in text track cue order.

      +
      cuelist . getCueById( id )
      +

      Returns the first text track cue (in text track cue order) with text track cue identifier id.

      +

      Returns null if none of the cues have the given identifier or if the argument is the empty string.

      +
      -
      Event name + - Interface +

      A TextTrackCueList object represents a dynamically updating list of text track cues in a given order.

      -       		Fired when... +

      The length attribute must return + the number of cues in the list represented by the + TextTrackCueList object.

      -
      enter +

      The supported property indices of a TextTrackCueList object at any + instant are the numbers from zero to the number of cues in the + list represented by the TextTrackCueList object minus one, if any. If there are no + cues in the list, there are no supported property + indices.

      -       		Event +

      To determine the value of an indexed property for a given index index, the user agent must return the indexth text track + cue in the list represented by the TextTrackCueList object.

      -       		The cue has become active. +

      The getCueById(id) method, when called with an argument other than the empty string, + must return the first text track cue in the list represented by the + TextTrackCueList object whose text track cue identifier is id, if any, or null otherwise. If the argument is the empty string, then the method + must return null.

      -
      exit + - Event +
      -       		The cue has stopped being active. + 
      interface TextTrackCue : EventTarget {
+  readonly attribute TextTrack? track;
 
-
      + attribute DOMString id; + attribute double startTime; + attribute double endTime; + attribute boolean pauseOnExit; + attribute EventHandler onenter; + attribute EventHandler onexit; +}; +
      cue . track
      +

      Returns the TextTrack object to which this + text track cue belongs, if any, or null + otherwise.

      +
      cue . id [ = value ]
      +

      Returns the text track cue identifier.

      +

      Can be set.

      +
      cue . startTime [ = value ]
      +

      Returns the text track cue start time, in seconds.

      +

      Can be set.

      +
      cue . endTime [ = value ]
      +

      Returns the text track cue end time, in seconds.

      +

      Can be set.

      +
      cue . pauseOnExit [ = value ]
      +

      Returns true if the text track cue pause-on-exit flag is set, false otherwise.

      +

      Can be set.

      +
      -
      4.7.14.17 Security and privacy considerations
      +

      The track attribute, on getting, must + return the TextTrack object of the text track in whose list of cues the text track cue that the + TextTrackCue object represents finds itself, if any; or null otherwise.

      -

      The main security and privacy implications of the video and audio - elements come from the ability to embed media cross-origin. There are two directions that threats - can flow: from hostile content to a victim page, and from a hostile page to victim content.

      +

      The id attribute, on getting, must return + the text track cue identifier of the text track cue that the + TextTrackCue object represents. On setting, the text track cue + identifier must be set to the new value.

      -
      +

      The startTime attribute, on + getting, must return the text track cue start time of the text track cue + that the TextTrackCue object represents, in seconds. On setting, the text track + cue start time must be set to the new value, interpreted in seconds; then, if the + TextTrackCue object's text track cue is in a text track's + list of cues, and that text track is in + a media element's list of text tracks, and the media + element's show poster flag is not set, then run the time marches on steps for that media element.

      -

      If a victim page embeds hostile content, the threat is that the content might contain scripted - code that attempts to interact with the Document that embeds the content. To avoid - this, user agents must ensure that there is no access from the content to the embedding page. In - the case of media content that uses DOM concepts, the embedded content must be treated as if it - was in its own unrelated top-level browsing context.

      +

      The endTime attribute, on getting, + must return the text track cue end time of the text track cue that the + TextTrackCue object represents, in seconds. On setting, the text track cue end + time must be set to the new value, interpreted in seconds; then, if the + TextTrackCue object's text track cue is in a text track's + list of cues, and that text track is in + a media element's list of text tracks, and the media + element's show poster flag is not set, then run the time marches on steps for that media element.

      -

      For instance, if an SVG animation was embedded in a video element, - the user agent would not give it access to the DOM of the outer page. From the perspective of - scripts in the SVG resource, the SVG file would appear to be in a lone top-level browsing context - with no parent.

      +

      The pauseOnExit attribute, on + getting, must return true if the text track cue pause-on-exit flag of the text + track cue that the TextTrackCue object represents is set; or false otherwise. + On setting, the text track cue pause-on-exit flag must be set if the new value is + true, and must be unset otherwise.

      -
      + -

      If a hostile page embeds victim content, the threat is that the embedding page could obtain - information from the content that it would not otherwise have access to. The API does expose some - information: the existence of the media, its type, its duration, its size, and the performance - characteristics of its host. Such information is already potentially problematic, but in practice - the same information can more or less be obtained using the img element, and so it - has been deemed acceptable.

      -

      However, significantly more sensitive information could be obtained if the user agent further - exposes metadata within the content such as subtitles or chapter titles. Such information is - therefore only exposed if the video resource passes a CORS resource sharing check. - The crossorigin attribute allows authors to control - how this check is performed. [FETCH]

      +
      4.8.14.12.6 Text tracks describing chapters
      -

      Without this restriction, an attacker could trick a user running within a - corporate network into visiting a site that attempts to load a video from a previously leaked - location on the corporation's intranet. If such a video included confidential plans for a new - product, then being able to read the subtitles would present a serious confidentiality breach.

      +

      Chapters are segments of a media resource with a given title. Chapters can be + nested, in the same way that sections in a document outline can have subsections.

      + +

      Each text track cue in a text track being used for describing + chapters has three key features: the text track cue start time, giving the start time + of the chapter, the text track cue end time, giving the end time of the chapter, and + the text track cue data giving the chapter title.

      +

      The rules for constructing the chapter tree from a text track are as follows. They + produce a potentially nested list of chapters, each of which have a start time, end time, title, + and a list of nested chapters. This algorithm discards cues that do not correctly nest within each + other, or that are out of order.

      +

      1. Let list be a copy of the list + of cues of the text track being processed.

      2. Remove from list any text track cue whose text + track cue end time is before its text track cue start time.

      3. Let output be an empty list of chapters, where a chapter is a record + consisting of a start time, an end time, a title, and a (potentially empty) list of nested + chapters. For the purpose of this algorithm, each chapter also has a parent chapter.

      4. Let current chapter be a stand-in chapter whose start time is negative + infinity, whose end time is positive infinity, and whose list of nested chapters is output. (This is just used to make the algorithm easier to describe.)

      5. Loop: If list is empty, jump to the step labeled + end.

      6. Let current cue be the first cue in list, and then + remove it from list.

      7. If current cue's text track cue start time is less than + the start time of current chapter, then return to the step labeled + loop.

        -
        4.7.14.18 Best practices for authors using media elements
        +

      8. While current cue's text track cue start time is greater + than or equal to current chapter's end time, let current + chapter be current chapter's parent chapter.

      9. If current cue's text track cue end time is greater than + the end time of current chapter, then return to the step labeled + loop.

        -

        This section is non-normative.

        +
      10. -

        Playing audio and video resources on small devices such as set-top boxes or mobile phones is - often constrained by limited hardware resources in the device. For example, a device might only - support three simultaneous videos. For this reason, it is a good practice to release resources - held by media elements when they are done playing, either by - being very careful about removing all references to the element and allowing it to be garbage - collected, or, even better, by removing the element's src - attribute and any source element descendants, and invoking the element's load() method.

        +

        Create a new chapter new chapter, whose start time is current cue's text track cue start time, whose end time is current cue's text track cue end time, whose title is current cue's text track cue data interpreted according to its + rules for rendering the cue in isolation, and whose list of nested chapters is + empty.

        -

        Similarly, when the playback rate is not exactly 1.0, hardware, software, or format limitations - can cause video frames to be dropped and audio to be choppy or muted.

        +

        For WebVTT, the rules for rendering the cue in isolation are the + rules for interpreting WebVTT cue text. [WEBVTT]

        +

      11. Append new chapter to current chapter's list of + nested chapters, and let current chapter be new chapter's + parent.

      12. Let current chapter be new chapter.

      13. Return to the step labeled loop.

      14. End: Return output.

      -
      4.7.14.19 Best practices for implementors of media elements
      +
      -

      This section is non-normative.

      +

      The following snippet of a WebVTT file shows how nested chapters can be marked + up. The file describes three 50-minute chapters, "Astrophysics", "Computational Physics", and + "General Relativity". The first has three subchapters, the second has four, and the third has + two. [WEBVTT]

      -

      How accurately various aspects of the media element API are implemented is - considered a quality-of-implementation issue.

      + 
      WEBVTT
 
-  
      For example, when implementing the buffered attribute,
-  how precise an implementation reports the ranges that have been buffered depends on how carefully
-  the user agent inspects the data. Since the API reports ranges as times, but the data is obtained
-  in byte streams, a user agent receiving a variable-bit-rate stream might only be able to determine
-  precise times by actually decoding all of the data. User agents aren't required to do this,
-  however; they can instead return estimates (e.g. based on the average bit rate seen so far) which
-  get revised as more information becomes available.
      
+00:00:00.000 --> 00:50:00.000
+Astrophysics
 
-  
      As a general rule, user agents are urged to be conservative rather than optimistic. For
-  example, it would be bad to report that everything had been buffered when it had not.
      
+00:00:00.000 --> 00:10:00.000
+Introduction to Astrophysics
 
-  
      Another quality-of-implementation issue would be playing a video backwards when the codec is
-  designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and
-  the intervening frames only have deltas from the previous frame). User agents could do a poor job,
-  e.g. only showing key frames; however, better implementations would do more work and thus do a
-  better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and
-  then playing the frames backwards.
      
+00:10:00.000 --> 00:45:00.000
+The Solar System
 
-  
      Similarly, while implementations are allowed to drop buffered data at any time (there is no
-  requirement that a user agent keep all the media data obtained for the lifetime of the media
-  element), it is again a quality of implementation issue: user agents with sufficient resources to
-  keep all the data around are encouraged to do so, as this allows for a better user experience. For
-  example, if the user is watching a live stream, a user agent could allow the user only to view the
-  live video; however, a better user agent would buffer everything and allow the user to seek
-  through the earlier material, pause it, play it forwards and backwards, etc.
      
+00:00:00.000 --> 00:10:00.000
+Coursework Description
 
-  
      When multiple tracks are synchronised with a MediaController, it is possible for
-  scripts to add and remove media elements from the MediaController's list of
-  slaved media elements, even while these tracks are playing. How smoothly the media
-  plays back in such situations is another quality-of-implementation issue.
      
+00:50:00.000 --> 01:40:00.000
+Computational Physics
 
-  
      
+00:50:00.000 --> 00:55:00.000
+Introduction to Programming
 
-  
      When a media element that is paused is removed from a document and not reinserted before the next time the event
-  loop reaches step 1, implementations that are resource constrained are encouraged to take
-  that opportunity to release all hardware resources (like video planes, networking resources, and
-  data buffers) used by the media element. (User agents still have to keep track of the
-  playback position and so forth, though, in case playback is later restarted.)
      
+00:55:00.000 --> 01:30:00.000
+Data Structures
 
-  
+01:30:00.000 --> 01:35:00.000
+Answers to Last Exam
 
+01:35:00.000 --> 01:40:00.000
+Coursework Description
 
+01:40:00.000 --> 02:30:00.000
+General Relativity
 
-  
      4.7.15 The map element
      
+01:40:00.000 --> 02:00:00.000
+Tensor Algebra
 
-  
      Categories:
      Flow content.
      Phrasing content.
      Palpable content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      name — Name of image map to reference from the usemap attribute
      DOM interface:
      
-
      interface HTMLMapElement : HTMLElement {
-           attribute DOMString name;
-  readonly attribute HTMLCollection areas;
-  readonly attribute HTMLCollection images;
-};
      
-   
      
+02:00:00.000 --> 02:30:00.000
+The General Relativistic Field Equations
      -

      The map element, in conjunction with an img element and any - area element descendants, defines an image map. The element - represents its children.

      +
      -

      The name attribute gives the map a name so that - it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another map element in the same - document. If the id attribute is also specified, both attributes must - have the same value.

      + -
      map . areas
      +
      4.8.14.12.7 Event handlers for objects of the text track APIs
      -

      Returns an HTMLCollection of the area elements in the - map.

      +

      The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL + attributes, by all objects implementing the TextTrackList interface:

      -
      map . images
      +
      Event handler Event handler event type +
      onchange change +
      onaddtrack addtrack +
      onremovetrack removetrack +
      -

      Returns an HTMLCollection of the img and object - elements that use the map.

      +

      The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL + attributes, by all objects implementing the TextTrack interface:

      -
      +
      Event handler Event handler event type +
      oncuechange cuechange +
      + +

      The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL + attributes, by all objects implementing the TextTrackCue interface:

      + +
      Event handler Event handler event type +
      onenter enter +
      onexit exit +
      -

      The areas attribute must return an - HTMLCollection rooted at the map element, whose filter matches only - area elements.

      -

      The images attribute must return an - HTMLCollection rooted at the Document node, whose filter matches only - img and object elements that are associated with this map - element according to the image map processing model.

      -

      The IDL attribute name must reflect - the content attribute of the same name.

      +
      4.8.14.12.8 Best practices for metadata text tracks
      - +

      This section is non-normative.

      +

      Text tracks can be used for storing data relating to the media data, for interactive or + augmented views.

      -
      +

      For example, a page showing a sports broadcast could include information about the current + score. Suppose a robotics competition was being streamed live. The image could be overlayed with + the scores, as follows:

      -

      Image maps can be defined in conjunction with other content on the page, to ease maintenance. - This example is of a page with an image map at the top of the page and a corresponding set of - text links at the bottom.

      +

      - 

      <!DOCTYPE HTML>
-<TITLE>Babies™: Toys</TITLE>
-<HEADER>
- <H1>Toys</H1>
- <IMG SRC="/images/menu.gif"
-      ALT="Babies™ navigation menu. Select a department to go to its page."
-      USEMAP="#NAV">
-</HEADER>
- ...
-<FOOTER>
- <MAP NAME="NAV">
-  <P>
-   <A HREF="/clothes/">Clothes</A>
-   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
-   <A HREF="/toys/">Toys</A>
-   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
-   <A HREF="/food/">Food</A>
-   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
-   <A HREF="/books/">Books</A>
-   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
- </MAP>
-</FOOTER>
      +

      In order to make the score display render correctly whenever the user seeks to an arbitrary + point in the video, the metadata text track cues need to be as long as is appropriate for the + score. For example, in the frame above, there would be maybe one cue that lasts the length of the + match that gives the match number, one cue that lasts until the blue alliance's score changes, and + one cue that lasts until the red alliance's score changes. If the video is just a stream of the + live event, the time in the bottom right would presumably be automatically derived from the + current video time, rather than based on a cue. However, if the video was just the highlights, + then that might be given in cues also.

      -
      +

      The following shows what fragments of this could look like in a WebVTT file:

      + 
      WEBVTT
 
+...
 
-  
      4.7.16 The area element
      
+05:10:00.000 --> 05:12:15.000
+matchtype:qual
+matchnumber:37
 
-  
      Categories:
      Flow content.
      Phrasing content.
      Contexts in which this element can be used:
      Where phrasing content is expected, but only if there is a map element ancestor or a template element ancestor.
      Content model:
      Empty.
      Tag omission in text/html:
      No end tag.
      Content attributes:
      Global attributes
      alt — Replacement text for use when images are not available
      coords — Coordinates for the shape to be created in an image map
      shape — The kind of shape to be created in an image map
      href — Address of the hyperlink
      target — Browsing context for hyperlink navigation
      download — Whether to download the resource instead of navigating to it, and its file name if so
      ping — URLs to ping
      rel — Relationship between the document containing the hyperlink and the destination resource
      hreflang — Language of the linked resource
      type — Hint for the type of the referenced resource
      DOM interface:
      
-
      interface HTMLAreaElement : HTMLElement {
-           attribute DOMString alt;
-           attribute DOMString coords;
-           attribute DOMString shape;
-           attribute DOMString target;
-           attribute DOMString download;
-  [PutForwards=value] attribute DOMSettableTokenList ping;
-           attribute DOMString rel;
-  readonly attribute DOMTokenList relList;
-           attribute DOMString hreflang;
-           attribute DOMString type;
+...
 
-  // also has obsolete members
-};
-HTMLAreaElement implements URLUtils;
      
-   
      
+05:11:02.251 --> 05:11:17.198
+red:78
 
-  
      The area element represents either a hyperlink with some text and a
-  corresponding area on an image map, or a dead area on an image map.
      
+05:11:03.672 --> 05:11:54.198
+blue:66
 
-  
      An area element with a parent node must have a map element ancestor
-  or a template element ancestor.
      
+05:11:17.198 --> 05:11:25.912
+red:80
 
-  
      If the area element has an href
-  attribute, then the area element represents a hyperlink. In this case,
-  the alt attribute must be present. It specifies the
-  text of the hyperlink. Its value must be text that, when presented with the texts specified for
-  the other hyperlinks of the image map, and with the alternative text of the image,
-  but without the image itself, provides the user with the same kind of choice as the hyperlink
-  would when used without its text but with its shape applied to the image. The alt attribute may be left blank if there is another area
-  element in the same image map that points to the same resource and has a non-blank
-  alt attribute.
      
+05:11:25.912 --> 05:11:26.522
+red:83
 
-  
      If the area element has no href
-  attribute, then the area represented by the element cannot be selected, and the alt attribute must be omitted.
      
+05:11:26.522 --> 05:11:26.982
+red:86
 
-  
      In both cases, the shape and coords attributes specify the area.
      
+05:11:26.982 --> 05:11:27.499
+red:89
 
-  
      The shape attribute is an enumerated
-  attribute. The following table lists the keywords defined for this attribute. The states
-  given in the first cell of the rows with keywords give the states to which those keywords map.
-  Some of the keywords are non-conforming, as noted in the last
-  column.
      
+...
      -
      State - Keywords - Notes -
      Circle state - circle - -
      circ - Non-conforming -
      Default state - default - -
      Polygon state - poly - -
      polygon - Non-conforming -
      Rectangle state - rect - -
      rectangle - Non-conforming -
      +

      The key here is to notice that the information is given in cues that span the length of time to + which the relevant event applies. If, instead, the scores were given as zero-length (or very + brief, nearly zero-length) cues when the score changes, for example saying "red+2" at + 05:11:17.198, "red+3" at 05:11:25.912, etc, problems arise: primarily, seeking is much harder to + implement, as the script has to walk the entire list of cues to make sure that no notifications + have been missed; but also, if the cues are short it's possible the script will never see that + they are active unless it listens to them specifically.

      -

      The attribute may be omitted. The missing value default is the rectangle state.

      +

      When using cues in this manner, authors are encouraged to use the cuechange event to update the current annotations. (In + particular, using the timeupdate event would be less + appropriate as it would require doing work even when the cues haven't changed, and, more + importantly, would introduce a higher latency between when the metatata cues become active and + when the display is updated, since timeupdate events + are rate-limited.)

      -

      The coords attribute must, if specified, - contain a valid list of integers. This attribute gives the coordinates for the shape - described by the shape attribute. The - processing for this attribute is described as part of the image map processing - model.

      + + +
      4.8.14.13 User interface
      + +

      The controls attribute is a boolean + attribute. If present, it indicates that the author has not provided a scripted controller + and would like the user agent to provide its own set of controls.

      -

      In the circle state, area elements must - have a coords attribute present, with three integers, the - last of which must be non-negative. The first integer must be the distance in CSS pixels from the - left edge of the image to the center of the circle, the second integer must be the distance in CSS - pixels from the top edge of the image to the center of the circle, and the third integer must be - the radius of the circle, again in CSS pixels.

      +

      If the attribute is present, or if scripting is + disabled for the media element, then the user agent should expose a user + interface to the user. This user interface should include features to begin playback, pause + playback, seek to an arbitrary position in the content (if the content supports arbitrary + seeking), change the volume, change the display of closed captions or embedded sign-language + tracks, select different audio tracks or turn on audio descriptions, and show the media content in + manners more suitable to the user (e.g. full-screen video or in an independent resizable window). + Other controls may also be made available.

      -

      In the default state state, area - elements must not have a coords attribute. (The area is the - whole image.)

      +

      If the media element has a current media controller, then the user + agent should expose audio tracks from all the slaved media elements (although + avoiding duplicates if the same media resource is being used several times). If a + media resource's audio track exposed in this way has no known name, and it is the + only audio track for a particular media element, the user agent should use the + element's title attribute, if any, as the name (or as part of the + name) of that track.

      -

      In the polygon state, area elements must - have a coords attribute with at least six integers, and the - number of integers must be even. Each pair of integers must represent a coordinate given as the - distances from the left and the top of the image in CSS pixels respectively, and all the - coordinates together must represent the points of the polygon, in order.

      +

      Even when the attribute is absent, however, user agents may provide controls to affect playback + of the media resource (e.g. play, pause, seeking, and volume controls), but such features should + not interfere with the page's normal rendering. For example, such features could be exposed in the + media element's context menu. The user agent may implement this simply by exposing a user interface to the user as + described above (as if the controls attribute was + present).

      -

      In the rectangle state, area elements must - have a coords attribute with exactly four integers, the - first of which must be less than the third, and the second of which must be less than the fourth. - The four points must represent, respectively, the distance from the left edge of the image to the - left side of the rectangle, the distance from the top edge to the top side, the distance from the - left edge to the right side, and the distance from the top edge to the bottom side, all in CSS - pixels.

      +

      If the user agent exposes a user interface to + the user by displaying controls over the media element, then the user agent + should suppress any user interaction events while the user agent is interacting with this + interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at + elements on the page.)

      - +

      Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for + seeking, for changing the rate of playback, for fast-forwarding or rewinding, for listing, + enabling, and disabling text tracks, and for muting or changing the volume of the audio), user + interface features exposed by the user agent must be implemented in terms of the DOM API described + above, so that, e.g., all the same events fire.

      -

      When user agents allow users to follow hyperlinks or - download hyperlinks created using the - area element, as described in the next section, the href, target, download, and ping - attributes decide how the link is followed. The rel, hreflang, and type - attributes may be used to indicate to the user the likely nature of the target resource before the - user follows the link.

      +

      When a media element has a current media controller, the user agent's + user interface for pausing and unpausing playback, for seeking, for changing the rate of playback, + for fast-forwarding or rewinding, and for muting or changing the volume of audio of the entire + group must be implemented in terms of the MediaController API exposed on that + current media controller. When a media element has a current media + controller, and all the slaved media elements of that + MediaController are paused, the user agent should also unpause all the slaved + media elements when the user invokes a user agent interface control for beginning + playback.

      - +

      The "play" function in the user agent's interface must set the playbackRate attribute to the value of the defaultPlaybackRate attribute before invoking the play() + method. When a media element has a current media controller, the + attributes and method with those names on that MediaController object must be used. + Otherwise, the attributes and method with those names on the media element itself + must be used.

      -

      The target, download, ping, - rel, hreflang, and type - attributes must be omitted if the href attribute is not - present.

      +

      Features such as fast-forward or rewind must be implemented by only changing the playbackRate attribute (and not the defaultPlaybackRate + attribute). Again, when a media element has a current media controller, + the attributes with those names on that MediaController object must be used; + otherwise, the attributes with those names on the media element itself must be used.

      -

      If the itemprop attribute is specified on an - area element, then the href attribute must - also be specified.

      +

      When a media element has a current media controller, seeking must be + implemented in terms of the currentTime + attribute on that MediaController object. Otherwise, the user agent must directly + seek to the requested position in the media + element's media timeline. For media resources where seeking to an arbitrary + position would be slow, user agents are encouraged to use the approximate-for-speed flag + when seeking in response to the user manipulating an approximate position interface such as a seek + bar.

      - +

      When a media element has a current media controller, user agents may + additionally provide the user with controls that directly manipulate an individual media + element without affecting the MediaController, but such features are + considered relatively advanced and unlikely to be useful to most users.

      -

      The activation behavior of area elements is to run the following - steps:

      +

      The activation behavior of a media element that is exposing a user interface to the user must be + to run the following steps:

      -

      1. If the area element's Document is not fully active, - then abort these steps.

      2. +

        1. If the media element has a current media controller, and that + current media controller is a restrained media controller, then invoke + the play() method of the + MediaController.

        2. Otherwise, if the media element has a current media controller, + and that current media controller is a paused media controller, then + invoke the unpause() method of the + MediaController.

        3. Otherwise, if the media element has a current media controller, + then that current media controller is a playing media controller; + invoke the pause() method of the + MediaController.

        4. Otherwise, the media element has no current media controller; if + the media element's paused attribute is true, + then invoke the play() method on the media + element.

        5. Otherwise, the media element has no current media controller, + and the media element's paused attribute is + false; invoke the pause() method on the media + element.

        -

        If the area element has a download - attribute and the algorithm is not allowed to show a popup, or the element's target attribute is present and applying the rules - for choosing a browsing context given a browsing context name, using the value of the - target attribute as the browsing context name, would - result in there not being a chosen browsing context, then run these substeps:

        +

        For the purposes of listing chapters in the media resource, only text tracks in the media element's list of text tracks + that are showing and whose text track kind is + chapters should be used. Such tracks must be + interpreted according to the rules for constructing the chapter tree from a text + track. When seeking in response to a user maniplating a chapter selection interface, user + agents should not use the approximate-for-speed flag.

        -

        1. If there is an entry settings object, throw an - InvalidAccessError exception.

        2. Abort these steps without following the hyperlink.

        +

        The controls IDL attribute must + reflect the content attribute of the same name.

        -

      3. Otherwise, the user agent must follow the - hyperlink or download the hyperlink created - by the area element, if any, and as determined by the download attribute and any expressed user - preference.

      +
      -

      The IDL attributes alt, coords, target, download, ping, rel, - hreflang, and type, each must reflect the respective - content attributes of the same name.

      + -

      The IDL attribute shape must - reflect the shape content attribute.

      +
      media . volume [ = value ]
      -

      The IDL attribute relList must - reflect the rel content attribute.

      +

      Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the + quietest and 1.0 the loudest.

      -
      +

      Can be set, to change the volume.

      -

      The area element also supports the URLUtils interface. [URL]

      +

      Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

      -

      When the element is created, and whenever the element's href content attribute is set, changed, or removed, the user - agent must invoke the element's URLUtils interface's set the input algorithm with the value of the href content attribute, if any, or the empty string otherwise, - as the given value.

      +
      media . muted [ = value ]
      -

      The element's URLUtils interface's get the - base algorithm must simply return the element's base URL.

      +

      Returns true if audio is muted, overriding the volume + attribute, and false if the volume attribute is being + honored.

      -

      The element's URLUtils interface's query - encoding is the document's character encoding.

      +

      Can be set, to change whether the audio is muted or not.

      -

      When the element's URLUtils interface invokes its update steps with a string value, the user - agent must set the element's href content attribute to - the string value.

      +
      +

      A media element has a playback volume, which is a fraction in the range 0.0 (silent) to 1.0 (loudest). + Initially, the volume should be 1.0, but user agents may remember the last set value across + sessions, on a per-site basis or otherwise, so the volume may start at other values.

      + +

      The volume IDL attribute must return the + playback volume of any audio portions of the + media element. On setting, if the new value is in the range 0.0 to 1.0 inclusive, the + media element's playback volume must be + set to the new value. If the new value is outside the range 0.0 to 1.0 inclusive, then, on + setting, an IndexSizeError exception must be thrown instead.

      +

      A media element can also be muted. If + anything is muting the element, then it is muted. (For example, when the direction of + playback is backwards, the element is muted.)

      -

      4.7.17 Image maps

      +

      The muted IDL attribute must return the value + to which it was last set. When a media element is created, if the element has a muted content attribute specified, then the muted IDL attribute should be set to true; otherwise, the user + agents may set the value to the user's preferred value (e.g. remembering the last set value across + sessions, on a per-site basis or otherwise). While the muted + IDL attribute is set to true, the media element must be muted.

      - +

      Whenever either of the values that would be returned by the volume and muted IDL + attributes change, the user agent must queue a task to fire a simple + event named volumechange at the media + element.

      - +

      An element's effective media volume is determined as follows:

      -
      4.7.17.1 Authoring
      +

      1. If the user has indicated that the user agent is to override the volume of the element, + then the element's effective media volume is the volume desired by the user. Abort + these steps.

      2. If the element's audio output is muted, the + element's effective media volume is zero. Abort these steps.

      3. If the element has a current media controller and that + MediaController object's media controller mute override is true, the + element's effective media volume is zero. Abort these steps.

      4. Let volume be the playback + volume of the audio portions of the media element, in range 0.0 (silent) to + 1.0 (loudest).

      5. If the element has a current media controller, multiply volume by that MediaController object's media controller + volume multiplier. (The media controller volume multiplier is in the range + 0.0 to 1.0, so this can only reduce the value.)

      6. The element's effective media volume is volume, + interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest + setting, values in between increasing in loudness. The range need not be linear. The loudest + setting may be lower than the system's loudest possible setting; for example the user could have + set a maximum volume.

      -

      An image map allows geometric areas on an image to be associated with hyperlinks.

      +

      The muted content attribute on media elements is a boolean attribute that controls the + default state of the audio output of the media resource, potentially overriding user + preferences.

      -

      An image, in the form of an img element or an object element - representing an image, may be associated with an image map (in the form of a map - element) by specifying a usemap attribute on - the img or object element. The usemap attribute, if specified, must be a valid - hash-name reference to a map element.

      + -
      +

      The defaultMuted IDL attribute must + reflect the muted content attribute.

      -

      Consider an image that looks as follows:

      + -

      A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

      +

      This attribute has no dynamic effect (it only controls the default state of the + element).

      -

      If we wanted just the coloured areas to be clickable, we could do it as follows:

      +
      - 
      <p>
- Please select a shape:
- <img src="shapes.png" usemap="#shapes"
-      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
- <map name="shapes">
-  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
-  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
-  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
-  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
-  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
-        href="yellow.html" alt="Yellow star.">
- </map>
-</p>
      +

      This video (an advertisement) autoplays, but to avoid annoying users, it does so without + sound, and allows the user to turn the sound on.

      + + 
      <video src="adverts.cgi?kind=video" controls autoplay loop muted></video>
      - -
      4.7.17.2 Processing model
      -

      If an img element or an object element representing an image has a - usemap attribute specified, user agents must process it - as follows:

      -

      1. First, rules for parsing a hash-name reference to a map element - must be followed. This will return either an element (the map) or - null.

      2. If that returned null, then abort these steps. The image is not associated with an image - map after all.

      3. Otherwise, the user agent must collect all the area elements that are - descendants of the map. Let those be the areas.

      +
      4.8.14.14 Time ranges
      -

      Having obtained the list of area elements that form the image map (the areas), interactive user agents must process the list in one of two ways.

      +

      Objects implementing the TimeRanges interface + represent a list of ranges (periods) of time.

      -

      If the user agent intends to show the text that the img element represents, then - it must use the following steps.

      + 
      interface TimeRanges {
+  readonly attribute unsigned long length;
+  double start(unsigned long index);
+  double end(unsigned long index);
+};
      -

      In user agents that do not support images, or that have images disabled, - object elements cannot represent images, and thus this section never applies (the - fallback content is shown instead). The following steps therefore only apply to - img elements.

      +
      media . length
      -

      1. Remove all the area elements in areas that have no href attribute.

      2. Remove all the area elements in areas that have no alt attribute, or whose alt - attribute's value is the empty string, if there is another area element in - areas with the same value in the href attribute and with a non-empty alt attribute.

      3. Each remaining area element in areas represents a - hyperlink. Those hyperlinks should all be made available to the user in a manner - associated with the text of the img.

        +

        Returns the number of ranges in the object.

        -

        In this context, user agents may represent area and img elements - with no specified alt attributes, or whose alt - attributes are the empty string or some other non-visible text, in a user-agent-defined fashion - intended to indicate the lack of suitable author-provided text.

      +
      time = media . start(index)
      -

      If the user agent intends to show the image and allow interaction with the image to select - hyperlinks, then the image must be associated with a set of layered shapes, taken from the - area elements in areas, in reverse tree order (so the last - specified area element in the map is the bottom-most shape, and - the first element in the map, in tree order, is the top-most shape).

      +

      Returns the time for the start of the range with the given index.

      -

      Each area element in areas must be processed as follows to - obtain a shape to layer onto the image:

      +

      Throws an IndexSizeError exception if the index is out of range.

      -

      1. Find the state that the element's shape attribute - represents.

      2. Use the rules for parsing a list of integers to parse the element's coords attribute, if it is present, and let the result be the - coords list. If the attribute is absent, let the coords - list be the empty list.

      3. +
        time = media . end(index)
        -

        If the number of items in the coords list is less than the minimum number - given for the area element's current state, as per the following table, then the - shape is empty; abort these steps.

        +

        Returns the time for the end of the range with the given index.

        -
        State - Minimum number of items -
        Circle state - 3 -
        Default state - 0 -
        Polygon state - 6 -
        Rectangle state - 4 -
        +

        Throws an IndexSizeError exception if the index is out of range.

        -
      4. +
      -

      Check for excess items in the coords list as per the entry in the - following list corresponding to the shape attribute's - state:

      + -
      Circle state
      Drop any items in the list beyond the third.
      Default state
      Drop all items in the list.
      Polygon state
      Drop the last item if there's an odd number of items.
      Rectangle state
      Drop any items in the list beyond the fourth.
      +

      The length IDL attribute must return the + number of ranges represented by the object.

      -

    30. If the shape attribute represents the rectangle state, and the first number in the list is - numerically less than the third number in the list, then swap those two numbers around.

    31. If the shape attribute represents the rectangle state, and the second number in the list is - numerically less than the fourth number in the list, then swap those two numbers around.

    32. If the shape attribute represents the circle state, and the third number in the list is less than - or equal to zero, then the shape is empty; abort these steps.

    33. Now, the shape represented by the element is the one described for the entry in the list - below corresponding to the state of the shape attribute:

      +

      The start(index) + method must return the position of the start of the indexth range represented + by the object, in seconds measured from the start of the timeline that the object covers.

      -
      Circle state
      +

      The end(index) method + must return the position of the end of the indexth range represented by the + object, in seconds measured from the start of the timeline that the object covers.

      -

      Let x be the first number in coords, y be the second number, and r be the third number.

      +

      These methods must throw IndexSizeError exceptions if called with an index argument greater than or equal to the number of ranges represented by the + object.

      -

      The shape is a circle whose center is x CSS pixels from the left edge - of the image and y CSS pixels from the top edge of the image, and whose - radius is r pixels.

      +

      When a TimeRanges object is said to be a normalised TimeRanges + object, the ranges it represents must obey the following criteria:

      -
      Default state
      +
      • The start of a range must be greater than the end of all earlier ranges.
      • The start of a range must be less than the end of that same range.
      -

      The shape is a rectangle that exactly covers the entire image.

      +

      In other words, the ranges in such an object are ordered, don't overlap, aren't empty, and + don't touch (adjacent ranges are folded into one bigger range).

      -
      Polygon state
      +

      Ranges in a TimeRanges object must be inclusive.

      -

      Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0).

      +

      Thus, the end of a range would be equal to the start of a following adjacent + (touching but not overlapping) range. Similarly, a range covering a whole timeline anchored at + zero would have a start equal to zero and an end equal to the duration of the timeline.

      -

      Let the coordinates be (xi, yi), - interpreted in CSS pixels measured from the top left of the image, for all integer values of - i from 0 to (N/2)-1, where N is the number of items in coords.

      +

      The timelines used by the objects returned by the buffered, seekable and + played IDL attributes of media + elements must be that element's media timeline.

      -

      The shape is a polygon whose vertices are given by the coordinates, and - whose interior is established using the even-odd rule. [GRAPHICS]

      + - -
      Rectangle state
      +
      4.8.14.15 The TrackEvent interface
      -

      Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number.

      + 
      [Constructor(DOMString type, optional TrackEventInit eventInitDict)]
+interface TrackEvent : Event {
+  readonly attribute (VideoTrack or AudioTrack or TextTrack) track;
+};
 
-      
      The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose
-      bottom right corner is given by the coordinate (x2,
-      y2), those coordinates being interpreted as CSS pixels
-      from the top left corner of the image.
      
+dictionary TrackEventInit : EventInit {
+  (VideoTrack or AudioTrack or TextTrack) track;
+};
      -
      +
      event . track
      -

      For historical reasons, the coordinates must be interpreted relative to the - displayed image after any stretching caused by the CSS 'width' and 'height' properties - (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the - aforementioned CSS properties).

      +

      Returns the track object (TextTrack, AudioTrack, or + VideoTrack) to which the event relates.

      -

      Browser zoom features and transforms applied using CSS or SVG do not affect the - coordinates.

      +
      -
    + -

    Pointing device interaction with an image associated with a set of layered shapes per the above - algorithm must result in the relevant user interaction events being first fired to the top-most - shape covering the point that the pointing device indicated, if any, or to the image element - itself, if there is no shape covering that point. User agents may also allow individual - area elements representing hyperlinks to be selected - and activated (e.g. using a keyboard).

    +

    The track attribute must return the value + it was initialised to. When the object is created, this attribute must be initialised to null. It + represents the context information for the event.

    -

    Because a map element (and its area elements) can be - associated with multiple img and object elements, it is possible for an - area element to correspond to multiple focusable areas - of the document.

    + -

    Image maps are live; if the DOM is mutated, then the user agent must act as if it - had rerun the algorithms for image maps.

    - +
    4.8.14.16 Event summary
    +

    This section is non-normative.

    -

    4.7.18 MathML

    +

    The following events fire on media elements as part of the + processing model described above:

    -

    The math element from the MathML namespace - falls into the embedded content, phrasing content, and flow - content categories for the purposes of the content models in this specification.

    +
    Event name + Interface + Fired when... + Preconditions -

    This specification refers to several specific MathML elements, in particular: - annotation-xml, - merror, - mi, - mn, - mo, - ms, and - mtext. -

    +
    loadstart -

    When the MathML annotation-xml element contains - elements from the HTML namespace, such elements must all be flow - content. [MATHML]

    +     		Event -

    When the MathML token elements (mi, mo, mn, ms, - and mtext) are descendants of HTML elements, they may contain - phrasing content elements from the HTML namespace. [MATHML]

    - +     		The user agent begins looking for media data, as part of the resource selection algorithm. - + networkState equals NETWORK_LOADING - +
    progress -

    User agents must handle text other than inter-element whitespace found in MathML - elements whose content models do not allow straight text by pretending for the purposes of MathML - content models, layout, and rendering that that text is actually wrapped in an mtext element in the MathML namespace. (Such text is not, - however, conforming.)

    +     		Event -

    User agents must act as if any MathML element whose contents does not match the element's - content model was replaced, for the purposes of MathML layout and rendering, by an merror element in the MathML namespace containing some - appropriate error message.

    +     		The user agent is fetching media data. -

    To enable authors to use MathML tools that only accept MathML in its XML form, interactive HTML - user agents are encouraged to provide a way to export any MathML fragment as an XML - namespace-well-formed XML fragment.

    +     		networkState equals NETWORK_LOADING - +
    suspend -

    The semantics of MathML elements are defined by the MathML specification and other - applicable specifications. [MATHML]

    +     		Event -
    +
    		The user agent is intentionally not currently fetching media data. -

    Here is an example of the use of MathML in an HTML document:

    +     		networkState equals NETWORK_IDLE - 
    <!DOCTYPE html>
-<html>
- <head>
-  <title>The quadratic formula</title>
- </head>
- <body>
-  <h1>The quadratic formula</h1>
-  <p>
-   <math>
-    <mi>x</mi>
-    <mo>=</mo>
-    <mfrac>
-     <mrow>
-      <mo form="prefix">−</mo> <mi>b</mi>
-      <mo>±</mo>
-      <msqrt>
-       <msup> <mi>b</mi> <mn>2</mn> </msup>
-       <mo>−</mo>
-       <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
-      </msqrt>
-     </mrow>
-     <mrow>
-      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
-     </mrow>
-    </mfrac>
-   </math>
-  </p>
- </body>
-</html>
    +
    abort + + Event - + The user agent stops fetching the media data before it is completely + downloaded, but not due to an error. + error is an object with the code MEDIA_ERR_ABORTED. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. +
    error -

    4.7.19 SVG

    +     		Event -

    The svg element from the SVG namespace falls into the - embedded content, phrasing content, and flow content - categories for the purposes of the content models in this specification.

    +     		An error occurs while fetching the media data. - + error is an object with the code MEDIA_ERR_NETWORK or higher. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. -

    To enable authors to use SVG tools that only accept SVG in its XML form, interactive HTML user - agents are encouraged to provide a way to export any SVG fragment as an XML namespace-well-formed - XML fragment.

    +
    emptied - + Event -

    When the SVG foreignObject element contains elements from the HTML - namespace, such elements must all be flow content. [SVG]

    +     		A media element whose networkState + was previously not in the NETWORK_EMPTY state has + just switched to that state (either because of a fatal error during load that's about to be + reported, or because the load() method was invoked while + the resource selection algorithm was already + running). -

    The content model for title elements in the SVG namespace - inside HTML documents is phrasing content. (This further constrains the - requirements given in the SVG specification.)

    +     		networkState is NETWORK_EMPTY; all the IDL attributes are in their + initial states. -

    The semantics of SVG elements are defined by the SVG specification and other applicable - specifications. [SVG]

    +
    stalled + Event + The user agent is trying to fetch media data, but data is unexpectedly not + forthcoming. -

    4.7.20 Dimension attributes

    +     		networkState is NETWORK_LOADING. -

    Author requirements: The width and height attributes on img, iframe, - embed, object, video, and, when their type attribute is in the Image Button state, input elements may be - specified to give the dimensions of the visual content of the element (the width and height - respectively, relative to the nominal direction of the output medium), in CSS pixels. The - attributes, if specified, must have values that are valid non-negative integers.

    +
    loadedmetadata -

    The specified dimensions given may differ from the dimensions specified in the resource itself, - since the resource may have a resolution that differs from the CSS pixel resolution. (On screens, - CSS pixels have a resolution of 96ppi, but in general the CSS pixel resolution depends on the - reading distance.) If both attributes are specified, then one of the following statements must be - true:

    +     		Event -
    • specified width - 0.5 ≤ - specified height * target ratio ≤ - specified width + 0.5
    • specified height - 0.5 ≤ - specified width / target ratio ≤ - specified height + 0.5
    • specified height = specified width = 0
    +     		The user agent has just determined the duration and dimensions of the media + resource and the text tracks are ready. -

    The target ratio is the ratio of the intrinsic width to the intrinsic - height in the resource. The specified width and specified - height are the values of the width and height attributes respectively.

    +     		readyState is newly equal to HAVE_METADATA or greater for the first time. -

    The two attributes must be omitted if the resource in question does not have both an intrinsic - width and an intrinsic height.

    +
    loadeddata -

    If the two attributes are both zero, it indicates that the element is not intended for the user - (e.g. it might be a part of a service to count page views).

    +     		Event -

    The dimension attributes are not intended to be used to stretch the image.

    +     		The user agent can render the media data at the current playback + position for the first time. - + readyState newly increased to HAVE_CURRENT_DATA or greater for the first time. -

    User agent requirements: User agents are expected to use these attributes as hints for the rendering.

    +
    canplay -

    The width and height IDL attributes on the iframe, - embed, object, and video elements must reflect - the respective content attributes of the same name.

    +     		Event -

    For iframe, embed, and object the IDL - attributes are DOMString; for video the IDL attributes are unsigned long.

    +     		The user agent can resume playback of the media data, but estimates that if + playback were to be started now, the media resource could not be rendered at the + current playback rate up to its end without having to stop for further buffering of content. -

    The corresponding IDL attributes for img and - input elements are defined in those respective elements' - sections, as they are slightly more specific to those elements' other behaviors.

    +     		readyState newly increased to HAVE_FUTURE_DATA or greater. - +
    canplaythrough + Event + The user agent estimates that if playback were to be started now, the media + resource could be rendered at the current playback rate all the way to its end without + having to stop for further buffering. - + readyState is newly equal to HAVE_ENOUGH_DATA. -

    4.8.1 Introduction

    +
    playing -

    Links are a conceptual construct, created by a, area, and - link elements, that represent a connection between - two resources, one of which is the current Document. There are two kinds of links in - HTML:

    +     		Event -
    Links to external resources

    These are links to resources that are to be used to augment the current document, - generally automatically processed by the user agent.

    Hyperlinks

    These are links to other resources that are generally exposed to the user by the user - agent so that the user can cause the user agent to navigate to those resources, e.g. - to visit them in a browser or download them.

    +     		Playback is ready to start after having been paused or delayed due to lack of media + data. -

    For link elements with an href attribute and a - rel attribute, links must be created for the keywords of the - rel attribute, as defined for those keywords in the link types section.

    +     		readyState is newly equal to or greater than + HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA. Even if this event fires, the + element might still not be potentially playing, e.g. if the element is + blocked on its media controller (e.g. because the current media + controller is paused, or another slaved media + element is stalled somehow, or because the media resource has no data + corresponding to the media controller position), or the element is paused + for user interaction or paused for in-band content. -

    Similarly, for a and area elements with an href attribute and a rel attribute, links must be created for the keywords of the - rel attribute as defined for those keywords in the link types section. Unlike link elements, however, - a and area element with an href - attribute that either do not have a rel attribute, or - whose rel attribute has no keywords that are defined as - specifying hyperlinks, must also create a hyperlink. - This implied hyperlink has no special meaning (it has no link type) - beyond linking the element's document to the resource given by the element's href attribute.

    +
    waiting -

    A hyperlink can have one or more hyperlink - annotations that modify the processing semantics of that hyperlink.

    +     		Event + Playback has stopped because the next frame is not available, but the user agent expects + that frame to become available in due course. - + readyState is equal to or less than HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position + is not contained in any of the ranges in buffered. It + is possible for playback to stop for other reasons without paused being false, but those reasons do not fire this event + (and when those situations resolve, a separate playing + event is not fired either): e.g. the element is newly blocked on its media + controller, or playback ended, or playback + stopped due to errors, or the element has paused for user interaction + or paused for in-band content. -

    The href attribute on a and - area elements must have a value that is a valid URL potentially surrounded by - spaces.

    +
    seeking -

    The href attribute on a and - area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

    +     		Event -

    The target attribute, if present, must be - a valid browsing context name or keyword. It gives the name of the browsing - context that will be used. User agents use this name when - following hyperlinks.

    +     		The seeking IDL attribute changed to true, and the user agent has started seeking to a new position. -

    When an a or area element's activation behavior is - invoked, the user agent may allow the user to indicate a preference regarding whether the - hyperlink is to be used for navigation or whether the resource it - specifies is to be downloaded.

    +     		-

    In the absence of a user preference, the default should be navigation if the element has no - download attribute, and should be to download the - specified resource if it does.

    +
    seeked -

    Whether determined by the user's preferences or via the presence or absence of the attribute, - if the decision is to use the hyperlink for navigation then the user - agent must follow the hyperlink, and if the decision is - to use the hyperlink to download a resource, the user agent must download the hyperlink. These terms are defined in subsequent sections - below.

    +     		Event -

    The download attribute, if present, - indicates that the author intends the hyperlink to be used for downloading a resource. The - attribute may have a value; the value, if any, specifies the default file name that the author - recommends for use in labeling the resource in a local file system. There are no restrictions on - allowed values, but authors are cautioned that most file systems have limitations with regard to - what punctuation is supported in file names, and user agents are likely to adjust file names - accordingly.

    +     		The seeking IDL attribute changed to false after the current playback position was changed. + -

    The ping attribute, if present, - gives the URLs of the resources that are interested in being notified if the user follows the - hyperlink. The value must be a set of space-separated tokens, each of which must be a - valid non-empty URL. The value is used by the user agent for - hyperlink auditing.

    +
    ended -

    The rel attribute on a and - area elements controls what kinds of links the elements create. The attribute's value - must be a set of space-separated tokens. The allowed keywords - and their meanings are defined below.

    +     		Event -

    The rel attribute has no default value. If the - attribute is omitted or if none of the values in the attribute are recognised by the user agent, - then the document has no particular relationship with the destination resource other than there - being a hyperlink between the two.

    +     		Playback has stopped because the end of the media resource was reached. -

    The hreflang attribute on - a and area elements that create hyperlinks, if present, gives the language of the linked resource. It is - purely advisory. The value must be a valid BCP 47 language tag. [BCP47] - User agents must not consider this attribute authoritative — upon - fetching the resource, user agents must use only language information associated with the resource - to determine its language, not metadata included in the link to the resource.

    +     		currentTime equals the end of the media + resource; ended is true. -

    The type attribute, if present, gives the - MIME type of the linked resource. It is purely advisory. The value must be a - valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the - resource, user agents must not use metadata included in the link to the resource to determine its - type.

    +
    durationchange + Event - + The duration attribute has just been updated. - + -

    When a user follows a hyperlink created by an element - subject, the user agent must run the following steps:

    +
    timeupdate -

    1. Let replace be false.

    2. Let source be the browsing context that contains the - Document object with which subject in question is - associated.

    3. +
    		Event -

    If the user indicated a specific browsing context when following the hyperlink, - or if the user agent is configured to follow hyperlinks by navigating a particular browsing - context, then let target be that browsing context.

    +     		The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. -

    Otherwise, if subject is an a or area element - that has a target attribute, then let target be the browsing context that is chosen by applying the - rules for choosing a browsing context given a browsing context name, using the value of - the target attribute as the browsing context name. If - these rules result in the creation of a new browsing context, set replace to true.

    +     		-

    Otherwise, if the hyperlink is a sidebar - hyperlink, the user agent implements a feature that can be considered a secondary - browsing context, and the user agent intends to use this feature in this instance, let - target be such a secondary browsing context.

    +
    play -

    Otherwise, if target is an a or area element - with no target attribute, but the - Document contains a base element with a target attribute, then let target be the - browsing context that is chosen by applying the rules for choosing a browsing - context given a browsing context name, using the value of the target attribute of the first such base element as - the browsing context name. If these rules result in the creation of a new browsing - context, set replace to true.

    +     		Event -

    Otherwise, let target be the browsing context that subject itself is in.

    +     		The element is no longer paused. Fired after the play() + method has returned, or when the autoplay attribute + has caused playback to begin. -

  • Resolve the URL given by the href attribute of that element, relative to that - element.

  • +
    		• paused is newly false. -

    If that is successful, let URL be the resulting absolute - URL.

    +
    pause -

    Otherwise, if resolving the URL failed, the - user agent may report the error to the user in a user-agent-specific manner, may queue a - task to navigate the target - browsing context to an error page to report the error, or may ignore the error and - do nothing. In any case, the user agent must then abort these steps.

    +     		Event -

  • In the case of server-side image maps, append the hyperlink - suffix to URL.

  • +
    		• The element has been paused. Fired after the pause() + method has returned. -

    Queue a task to navigate the target browsing context to URL. If replace is true, the navigation must be performed with replacement - enabled. The source browsing context must be source.

    +     		paused is newly true. - +
    ratechange -

    The task source for the tasks mentioned above is the DOM manipulation task - source.

    +     		Event - + Either the defaultPlaybackRate or the + playbackRate attribute has just been updated. + + +
    resize + Event + One or both of the videoWidth and videoHeight attributes have just been updated. -

    4.8.4 Downloading resources

    +     		Media element is a video element; readyState is not HAVE_NOTHING -

    In some cases, resources are intended for later use rather than immediate viewing. To indicate - that a resource is intended to be downloaded for use later, rather than immediately used, the - download attribute can be specified on the - a or area element that creates the hyperlink to that - resource.

    +
    volumechange -

    The attribute can furthermore be given a value, to specify the file name that user agents are - to use when storing the resource in a file system. This value can be overridden by the Content-Disposition HTTP header's filename parameters. [RFC6266]

    +     		Event -

    In cross-origin situations, the download attribute - has to be combined with the Content-Disposition HTTP - header, specifically with the attachment disposition type, to avoid the user - being warned of possibly nefarious activity. (This is to protect users from being made to download - sensitive personal or confidential information without their full understanding.)

    +     		Either the volume attribute or the muted attribute has changed. Fired after the relevant + attribute's setter has returned. - + -
    +
    -

    When a user downloads a hyperlink created by an - element, the user agent must run the following steps:

    +

    The following events fire on MediaController objects:

    -

    1. Resolve the URL given by the href attribute of that element, relative to that - element.

    2. If resolving the URL fails, the user agent - may report the error to the user in a user-agent-specific manner, may - navigate to an error page to report the error, or may - ignore the error and do nothing. In either case, the user agent must abort these steps.

      +
      Event name -

    3. Otherwise, let URL be the resulting absolute - URL.

    4. In the case of server-side image maps, append the hyperlink - suffix to URL.

    5. Return to whatever algorithm invoked these steps and continue - these steps asynchronously.

    6. Fetch URL and handle the resulting resource - as a download. +

      		7. Interface -

      When a user agent is to handle a resource obtained from a fetch algorithm as - a download, it should provide the user with a way to save the resource for later use, if a - resource is successfully obtained; or otherwise should report any problems downloading the file to - the user.

      +       		Fired when... -

      If the user agent needs a file name for a resource being handled as a download, it - should select one using the following algorithm.

      +
      emptied -

      This algorithm is intended to mitigate security dangers involved in downloading - files from untrusted sites, and user agents are strongly urged to follow it.

      +       		Event -

      1. Let filename be the void value.

      2. If the resource has a Content-Disposition - header, that header specifies the attachment disposition type, and the - header includes file name information, then let filename have the value - specified by the header, and jump to the step labeled sanitize below. [RFC6266]

      3. Let interface origin be the origin of the - Document in which the download or - navigate action resulting in the download was initiated, if any.

      4. Let resource origin be the origin of the URL of the - resource being downloaded, unless that URL's scheme - component is data, in which case let resource origin be - the same as the interface origin, if any.

      5. If there is no interface origin, then let trusted - operation be true. Otherwise, let trusted operation be true if resource origin is the same origin as interface - origin, and false otherwise.

      6. If trusted operation is true and the resource has a Content-Disposition header and that header includes file - name information, then let filename have the value specified by the header, - and jump to the step labeled sanitize below. [RFC6266]

      7. If the download was not initiated from a hyperlink created by an - a or area element, or if the element of the hyperlink from - which it was initiated did not have a download - attribute when the download was initiated, or if there was such an attribute but its value when - the download was initiated was the empty string, then jump to the step labeled no proposed - file name.

      8. Let proposed filename have the value of the download attribute of the element of the - hyperlink that initiated the download at the time the download was - initiated.

      9. If trusted operation is true, let filename have - the value of proposed filename, and jump to the step labeled sanitize - below.

      10. If the resource has a Content-Disposition - header and that header specifies the attachment disposition type, let filename have the value of proposed filename, and jump to the - step labeled sanitize below. [RFC6266]

      11. No proposed file name: If trusted operation is true, or if the - user indicated a preference for having the resource in question downloaded, let filename have a value derived from the URL of the resource in a - user-agent-defined manner, and jump to the step labeled sanitize below.

      12. +
      		All the slaved media elements newly have readyState set to HAVE_NOTHING or greater, or there are no longer any + slaved media elements. -

      Act in a user-agent-defined manner to safeguard the user from a potentially hostile - cross-origin download. If the download is not to be aborted, then let filename be set to the user's preferred file name or to a file name selected by - the user agent, and jump to the step labeled sanitize below.

      +
      loadedmetadata -
      +
      		Event -

      If the algorithm reaches this step, then a download was begun from a different origin than - the resource being downloaded, and the origin did not mark the file as suitable for - downloading, and the download was not initiated by the user. This could be because a download attribute was used to trigger the download, or - because the resource in question is not of a type that the user agent supports.

      +       		All the slaved media elements newly have readyState set to HAVE_METADATA or greater. -

      This could be dangerous, because, for instance, a hostile server could be trying to get a - user to unknowingly download private information and then re-upload it to the hostile server, - by tricking the user into thinking the data is from the hostile server.

      +
      loadeddata -

      Thus, it is in the user's interests that the user be somehow notified that the resource in - question comes from quite a different source, and to prevent confusion, any suggested file name - from the potentially hostile interface origin should be ignored.

      +       		Event - + All the slaved media elements newly have readyState set to HAVE_CURRENT_DATA or greater. -

    7. Sanitize: Optionally, allow the user to influence filename. For - example, a user agent could prompt the user for a file name, potentially providing the value of - filename as determined above as a default value.

    8. +
      9. canplay -

      Adjust filename to be suitable for the local file system.

      +       		Event -

      For example, this could involve removing characters that are not legal in - file names, or trimming leading and trailing whitespace.

      +       		All the slaved media elements newly have readyState set to HAVE_FUTURE_DATA or greater. -

    9. If the platform conventions do not in any way use extensions to determine the types of file on the file system, - then return filename as the file name and abort these steps.

    10. Let claimed type be the type given by the resource's Content-Type metadata, if any is known. Let named - type be the type given by filename's extension, if any is known. For the purposes of this step, a - type is a mapping of a MIME type to an extension.

    11. If named type is consistent with the user's preferences (e.g. because - the value of filename was determined by prompting the user), then return filename as the file name and abort these steps.

    12. If claimed type and named type are the same type - (i.e. the type given by the resource's Content-Type metadata is - consistent with the type given by filename's extension), then return filename as the file - name and abort these steps.

    13. +
      14. canplaythrough -

      If the claimed type is known, then alter filename to - add an extension corresponding to claimed - type.

      +       		Event -

      Otherwise, if named type is known to be potentially dangerous (e.g. it - will be treated by the platform conventions as a native executable, shell script, HTML - application, or executable-macro-capable document) then optionally alter filename to add a known-safe extension - (e.g. ".txt").

      +       		All the slaved media elements newly have readyState set to HAVE_ENOUGH_DATA or greater. -

      This last step would make it impossible to download executables, which might not - be desirable. As always, implementors are forced to balance security and usability in this - matter.

      +
      playing -

    14. Return filename as the file name. +

      		15. Event -

      For the purposes of this algorithm, a file extension - consists of any part of the file name that platform conventions dictate will be used for - identifying the type of the file. For example, many operating systems use the part of the file - name following the last dot (".") in the file name to determine the type of - the file, and from that the manner in which the file is to be opened or executed.

      +       		The MediaController is no longer a blocked media controller. -

      User agents should ignore any directory or path information provided by the resource itself, - its URL, and any download attribute, in - deciding where to store the resulting file in the user's file system.

      +
      waiting - + Event + The MediaController is now a blocked media controller. +
      ended + Event - + All the slaved media elements have newly ended playback; the + MediaController has reached the end of all the slaved media elements. - +
      durationchange -

      If a hyperlink created by an a or area element has a - ping attribute, and the user follows the hyperlink, and - the value of the element's href attribute can be resolved, relative to the element, without failure, then the user - agent must take the ping attribute's value, split that string on spaces, resolve each resulting token relative to the element, and then each resulting absolute URL ping URL should - be fetched from the origin of the - Document containing the hyperlink (as described below). (Tokens that fail to resolve are ignored.) This may be done in parallel - with the primary request, and is independent of the result of that request.

      +       		Event -

      User agents should allow the user to adjust this behavior, for example in conjunction with a - setting that disables the sending of HTTP Referer (sic) - headers. Based on the user's preferences, UAs may either ignore the ping attribute altogether, or selectively ignore URLs in the - list (e.g. ignoring any third-party URLs).

      +       		The duration attribute has just been + updated. -

      For each ping URL that is an HTTP URL, the request must be performed using - the POST method, with an entity body with the MIME type text/ping - consisting of the four-character string "PING". All relevant cookie and - HTTP authentication headers must be included in the request. Which other headers are required - depends on the URLs involved, as follows. For the purposes of these requirements, target URL is the resulting absolute URL obtained from resolving the value of the element's href attribute.

      +
      timeupdate -
      If both the address of the Document - object containing the hyperlink being audited and ping URL have the - same origin
      The request must include a Ping-From HTTP header with, - as its value, the address of the document containing - the hyperlink, and a Ping-To HTTP header with, as its value, - the target URL. The request must not include a Referer (sic) HTTP header.
      Otherwise, if the origins are different, but the document containing the hyperlink being - audited was not retrieved over an encrypted connection
      The request must include a Referer (sic) HTTP header with, - as its value, the address of the document containing - the hyperlink, a Ping-From HTTP header with the same value, - and a Ping-To HTTP header with, as its value, target URL.
      Otherwise, the origins are different and the document containing the hyperlink being audited - was retrieved over an encrypted connection
      The request must include a Ping-To HTTP header with, as - its value, target URL. The request must neither include a Referer (sic) HTTP header nor include a Ping-From HTTP header.
      +       		Event -

      To save bandwidth, implementors might also wish to consider omitting optional - headers such as Accept from these requests.

      +       		The media controller position changed. -

      User agents must, unless otherwise specified by the user, honor the HTTP headers (including, in - particular, redirects and HTTP cookie headers), but must ignore any entity bodies returned in the - responses. User agents may close the connection prematurely once they start receiving an entity - body. [COOKIES]

      +
      play -

      When the ping attribute is present, user agents - should clearly indicate to the user that following the hyperlink will also cause secondary - requests to be sent in the background, possibly including listing the actual target URLs.

      +       		Event -

      For example, a visual user agent could include the hostnames of the target ping - URLs along with the hyperlink's actual URL in a status bar or tooltip.

      +       		The paused attribute is newly false. - +
      pause -
      +
      		Event -

      The ping attribute is redundant with pre-existing - technologies like HTTP redirects and JavaScript in allowing Web pages to track which off-site - links are most popular or allowing advertisers to track click-through rates.

      +       		The paused attribute is newly true. -

      However, the ping attribute provides these advantages - to the user over those alternatives:

      +
      ratechange -
      • It allows the user to see the final target URL unobscured.
      • It allows the UA to inform the user about the out-of-band notifications.
      • It allows the user to disable the notifications without losing the underlying link - functionality.
      • It allows the UA to optimise the use of available network bandwidth so that the target page - loads faster.
      +       		Event -

      Thus, while it is possible to track users without this feature, authors are encouraged to use - the ping attribute so that the user agent can make the - user experience more transparent.

      +       		Either the defaultPlaybackRate + attribute or the playbackRate attribute + has just been updated. - +
      volumechange - + Event + Either the volume attribute or the muted attribute has just been updated. +
      -

      4.8.5 Link types

      -

      The following table summarizes the link types that are defined by this specification. This - table is non-normative; the actual definitions for the link types are given in the next few - sections.

      +

      The following events fire on AudioTrackList, VideoTrackList, and + TextTrackList objects:

      -

      In this section, the term referenced document refers to the resource identified by the - element representing the link, and the term current document refers to the resource within - which the element representing the link finds itself.

      +
      Event name - + Interface -

      To determine which link types apply to a link, a, or - area element, the element's rel attribute must be split on spaces. The resulting tokens are the link types - that apply to that element.

      +       		Fired when... - +
      change -

      Except where otherwise specified, a keyword must not be specified more than once per rel attribute.

      +       		Event -

      Link types are always ASCII case-insensitive, and must be - compared as such.

      +       		One or more tracks in the track list have been enabled or disabled. + +
      addtrack + + TrackEvent + + A track has been added to the track list. + +
      removetrack -

      Thus, rel="next" is the same as rel="NEXT".

      +       		TrackEvent -
      Link typeEffect on...Brief description
      linka and area
      alternateHyperlinkHyperlinkGives alternate representations of the current document.
      authorHyperlinkHyperlinkGives a link to the author of the current document or article.
      bookmarknot allowedHyperlinkGives the permalink for the nearest ancestor section.
      externalnot allowedAnnotationIndicates that the referenced document is not part of the same site as the current document.
      helpHyperlinkHyperlinkProvides a link to context-sensitive help.
      iconExternal Resourcenot allowedImports an icon to represent the current document.
      licenseHyperlinkHyperlinkIndicates that the main content of the current document is covered by the copyright license described by the referenced document.
      nextHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the next document in the series is the referenced document.
      nofollownot allowedAnnotationIndicates that the current document's original author or publisher does not endorse the referenced document.
      noreferrernot allowedAnnotationRequires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.
      pingbackExternal Resourcenot allowedGives the address of the pingback server that handles pingbacks to the current document.
      prefetchExternal ResourceExternal ResourceSpecifies that the target resource should be preemptively cached.
      prevHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
      searchHyperlinkHyperlinkGives a link to a resource that can be used to search through the current document and its related pages.
      sidebarHyperlinkHyperlinkSpecifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).
      stylesheetExternal Resourcenot allowedImports a stylesheet.
      tagnot allowedHyperlinkGives a tag (identified by the given address) that applies to the current document.
      +       		A track has been removed from the track list. - +
      -

      Some of the types described below list synonyms for these values. These are to be handled as specified by user agents, but must not be used - in documents.

      - - +

      The following event fires on TextTrack objects and track elements:

      +
      Event name -
      4.8.5.1 Link type "alternate"
      +       		Interface -

      The alternate keyword may be used with link, - a, and area elements.

      +       		Fired when... -

      The meaning of this keyword depends on the values of the other attributes.

      +
      cuechange -
      If the element is a link element and the rel - attribute also contains the keyword stylesheet
      +
      		Event -

      The alternate keyword modifies the meaning of the stylesheet keyword in the way described for that keyword. The - alternate keyword does not create a link of its own.

      +       		One or more cues in the track have become active or stopped being active. -
      If the alternate keyword is used with the type attribute set to the value application/rss+xml or the value application/atom+xml
      +
      -

      The keyword creates a hyperlink referencing a syndication feed (though not - necessarily syndicating exactly the same content as the current page).

      - +

      The following events fire on TextTrackCue objects:

      -

      The first link, a, or area element in the document (in - tree order) with the alternate keyword used with the type attribute set to the value application/rss+xml or the value application/atom+xml must - be treated as the default syndication feed for the purposes of feed autodiscovery.

      +
      Event name -
      -

      The following link element gives the syndication - feed for the current page:

      - 
      <link rel="alternate" type="application/atom+xml" href="data.xml">
      -

      The following extract offers various different syndication - feeds:

      - 
      <p>You can access the planets database using Atom feeds:</p>
-<ul>
- <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
- <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
- <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
-</ul>
      -
      +       		Interface - + Fired when... -
      Otherwise
      +
      enter -

      The keyword creates a hyperlink referencing an alternate representation of the - current document.

      +       		Event -

      The nature of the referenced document is given by the hreflang, and type attributes.

      +       		The cue has become active. -

      If the alternate keyword is used with the hreflang attribute, and that attribute's value differs - from the root element's language, it indicates that the referenced - document is a translation.

      +
      exit -

      If the alternate keyword is used with the type attribute, it indicates that the referenced document is - a reformulation of the current document in the specified format.

      +       		Event -

      The hreflang and type attributes can be combined when specified with the alternate keyword.

      +       		The cue has stopped being active. -
      +
      -

      For example, the following link is a French translation that uses the PDF format:

      - 
      <link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
      - + -

      This relationship is transitive — that is, if a document links to two other documents - with the link type "alternate", then, in addition to implying - that those documents are alternative representations of the first document, it is also implying - that those two documents are alternative representations of each other.

      +
      4.8.14.17 Security and privacy considerations
      - +

      The main security and privacy implications of the video and audio + elements come from the ability to embed media cross-origin. There are two directions that threats + can flow: from hostile content to a victim page, and from a hostile page to victim content.

      +
      +

      If a victim page embeds hostile content, the threat is that the content might contain scripted + code that attempts to interact with the Document that embeds the content. To avoid + this, user agents must ensure that there is no access from the content to the embedding page. In + the case of media content that uses DOM concepts, the embedded content must be treated as if it + was in its own unrelated top-level browsing context.

      - +

      For instance, if an SVG animation was embedded in a video element, + the user agent would not give it access to the DOM of the outer page. From the perspective of + scripts in the SVG resource, the SVG file would appear to be in a lone top-level browsing context + with no parent.

      -

      The author keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +
      -

      For a and area elements, the author - keyword indicates that the referenced document provides further information about the author of - the nearest article element ancestor of the element defining the hyperlink, if there - is one, or of the page as a whole, otherwise.

      +

      If a hostile page embeds victim content, the threat is that the embedding page could obtain + information from the content that it would not otherwise have access to. The API does expose some + information: the existence of the media, its type, its duration, its size, and the performance + characteristics of its host. Such information is already potentially problematic, but in practice + the same information can more or less be obtained using the img element, and so it + has been deemed acceptable.

      -

      For link elements, the author keyword indicates - that the referenced document provides further information about the author for the page as a - whole.

      +

      However, significantly more sensitive information could be obtained if the user agent further + exposes metadata within the content such as subtitles or chapter titles. Such information is + therefore only exposed if the video resource passes a CORS resource sharing check. + The crossorigin attribute allows authors to control + how this check is performed. [FETCH]

      -

      The "referenced document" can be, and often is, a mailto: URL giving the e-mail address of the author. [MAILTO]

      +

      Without this restriction, an attacker could trick a user running within a + corporate network into visiting a site that attempts to load a video from a previously leaked + location on the corporation's intranet. If such a video included confidential plans for a new + product, then being able to read the subtitles would present a serious confidentiality breach.

      -

      Synonyms: For historical reasons, user agents must also treat - link, a, and area elements that have a rev attribute with the value "made" as having the author keyword specified as a link relationship.

      - +
      4.8.14.18 Best practices for authors using media elements
      - +

      This section is non-normative.

      -

      The bookmark keyword may be used with a and - area elements. This keyword creates a hyperlink.

      +

      Playing audio and video resources on small devices such as set-top boxes or mobile phones is + often constrained by limited hardware resources in the device. For example, a device might only + support three simultaneous videos. For this reason, it is a good practice to release resources + held by media elements when they are done playing, either by + being very careful about removing all references to the element and allowing it to be garbage + collected, or, even better, by removing the element's src + attribute and any source element descendants, and invoking the element's load() method.

      -

      The bookmark keyword gives a permalink for the nearest - ancestor article element of the linking element in question, or of the section the linking element is most closely associated with, if - there are no ancestor article elements.

      +

      Similarly, when the playback rate is not exactly 1.0, hardware, software, or format limitations + can cause video frames to be dropped and audio to be choppy or muted.

      -
      -

      The following snippet has three permalinks. A user agent could determine which permalink - applies to which part of the spec by looking at where the permalinks are given.

      + - 
       ...
- <body>
-  <h1>Example of permalinks</h1>
-  <div id="a">
-   <h2>First example</h2>
-   <p><a href="a.html" rel="bookmark">This permalink applies to
-   only the content from the first H2 to the second H2</a>. The DIV isn't
-   exactly that section, but it roughly corresponds to it.</p>
-  </div>
-  <h2>Second example</h2>
-  <article id="b">
-   <p><a href="b.html" rel="bookmark">This permalink applies to
-   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
-   <article id="c">
-    <p><a href="c.html" rel="bookmark">This permalink applies to
-    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
-   </article>
-  </article>
- </body>
- ...
      +
      4.8.14.19 Best practices for implementors of media elements
      -
      +

      This section is non-normative.

      +

      How accurately various aspects of the media element API are implemented is + considered a quality-of-implementation issue.

      - - +

      For example, when implementing the buffered attribute, + how precise an implementation reports the ranges that have been buffered depends on how carefully + the user agent inspects the data. Since the API reports ranges as times, but the data is obtained + in byte streams, a user agent receiving a variable-bit-rate stream might only be able to determine + precise times by actually decoding all of the data. User agents aren't required to do this, + however; they can instead return estimates (e.g. based on the average bit rate seen so far) which + get revised as more information becomes available.

      -

      The external keyword may be used with a and - area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the - implied hyperlink, if no other keywords create one).

      +

      As a general rule, user agents are urged to be conservative rather than optimistic. For + example, it would be bad to report that everything had been buffered when it had not.

      -

      The external keyword indicates that the link is leading to a - document that is not part of the site that the current document forms a part of.

      +

      Another quality-of-implementation issue would be playing a video backwards when the codec is + designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and + the intervening frames only have deltas from the previous frame). User agents could do a poor job, + e.g. only showing key frames; however, better implementations would do more work and thus do a + better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and + then playing the frames backwards.

      +

      Similarly, while implementations are allowed to drop buffered data at any time (there is no + requirement that a user agent keep all the media data obtained for the lifetime of the media + element), it is again a quality of implementation issue: user agents with sufficient resources to + keep all the data around are encouraged to do so, as this allows for a better user experience. For + example, if the user is watching a live stream, a user agent could allow the user only to view the + live video; however, a better user agent would buffer everything and allow the user to seek + through the earlier material, pause it, play it forwards and backwards, etc.

      - +

      When multiple tracks are synchronised with a MediaController, it is possible for + scripts to add and remove media elements from the MediaController's list of + slaved media elements, even while these tracks are playing. How smoothly the media + plays back in such situations is another quality-of-implementation issue.

      -

      The help keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +
      -

      For a and area elements, the help - keyword indicates that the referenced document provides further help information for the parent of - the element defining the hyperlink, and its children.

      +

      When a media element that is paused is removed from a document and not reinserted before the next time the event + loop reaches step 1, implementations that are resource constrained are encouraged to take + that opportunity to release all hardware resources (like video planes, networking resources, and + data buffers) used by the media element. (User agents still have to keep track of the + playback position and so forth, though, in case playback is later restarted.)

      -
      + -

      In the following example, the form control has associated context-sensitive help. The user - agent could use this information, for example, displaying the referenced document if the user - presses the "Help" or "F1" key.

      - 
       <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>
      -
      +

      4.8.15 The map element

      -

      For link elements, the help keyword indicates that - the referenced document provides help for the page as a whole.

      +
      Categories:
      Flow content.
      Phrasing content.
      Palpable content.
      Contexts in which this element can be used:
      Where phrasing content is expected.
      Content model:
      Transparent.
      Tag omission in text/html:
      Neither tag is omissible.
      Content attributes:
      Global attributes
      name — Name of image map to reference from the usemap attribute
      DOM interface:
      +
      interface HTMLMapElement : HTMLElement {
+           attribute DOMString name;
+  readonly attribute HTMLCollection areas;
+  readonly attribute HTMLCollection images;
+};
      +
      -

      For a and area elements, on some browsers, the help keyword causes the link to use a different cursor.

      +

      The map element, in conjunction with an img element and any + area element descendants, defines an image map. The element + represents its children.

      +

      The name attribute gives the map a name so that + it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another map element in the same + document. If the id attribute is also specified, both attributes must + have the same value.

      -
      4.8.5.6 Link type "icon"
      -

      The icon keyword may be used with link elements. - This keyword creates an external resource link.

      +
      map . areas
      - +

      Returns an HTMLCollection of the area elements in the + map.

      -

      The specified resource is an icon representing the page or site, and should be used by the user - agent when representing the page in the user interface.

      +
      map . images
      - +

      Returns an HTMLCollection of the img and object + elements that use the map.

      -

      Icons could be auditory icons, visual icons, or other kinds of icons. If - multiple icons are provided, the user agent must select the most appropriate icon according to the - type, media, and sizes attributes. If there are multiple equally appropriate icons, - user agents must use the last one declared in tree order at the time that the user - agent collected the list of icons. If the user agent tries to use an icon but that icon is - determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an - unsupported format), then the user agent must try the next-most-appropriate icon as determined by - the attributes.

      +
      -

      User agents are not required to update icons when the list of icons changes, but - are encouraged to do so.

      +

      The areas attribute must return an + HTMLCollection rooted at the map element, whose filter matches only + area elements.

      -

      There is no default type for resources given by the icon keyword. - However, for the purposes of determining the type of the - resource, user agents must expect the resource to be an image.

      +

      The images attribute must return an + HTMLCollection rooted at the Document node, whose filter matches only + img and object elements that are associated with this map + element according to the image map processing model.

      + +

      The IDL attribute name must reflect + the content attribute of the same name.

      -

      The sizes attribute gives the sizes of icons - for visual media. Its value, if present, is merely advisory. User agents may use the value to - decide which icon(s) to use if multiple icons are available.

      -

      If specified, the attribute must have a value that is an unordered set of unique - space-separated tokens which are ASCII case-insensitive. Each value must be - either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT - ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN - CAPITAL LETTER X character.

      +
      -

      The keywords represent icon sizes in raw pixels (as opposed to CSS pixels).

      +

      Image maps can be defined in conjunction with other content on the page, to ease maintenance. + This example is of a page with an image map at the top of the page and a corresponding set of + text links at the bottom.

      -

      An icon that is 50 CSS pixels wide intended for displays with a device pixel - density of two device pixels per CSS pixel (2x, 192dpi) would have a width of 100 raw pixels. This - feature does not support indicating that a different resource is to be used for small - high-resolution icons vs large low-resolution icons (e.g. 50×50 2x vs 100×100 1x).

      + 
      <!DOCTYPE HTML>
+<TITLE>Babies™: Toys</TITLE>
+<HEADER>
+ <H1>Toys</H1>
+ <IMG SRC="/images/menu.gif"
+      ALT="Babies™ navigation menu. Select a department to go to its page."
+      USEMAP="#NAV">
+</HEADER>
+ ...
+<FOOTER>
+ <MAP NAME="NAV">
+  <P>
+   <A HREF="/clothes/">Clothes</A>
+   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
+   <A HREF="/toys/">Toys</A>
+   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
+   <A HREF="/food/">Food</A>
+   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
+   <A HREF="/books/">Books</A>
+   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
+ </MAP>
+</FOOTER>
      - +
      -

      To parse and process the attribute's value, the user agent must first split the attribute's value on spaces, and must then parse each resulting - keyword to determine what it represents.

      - -

      The any keyword represents that the - resource contains a scalable icon, e.g. as provided by an SVG image.

      +

      4.8.16 The area element

      - +
      Categories:
      Flow content.
      Phrasing content.
      Contexts in which this element can be used:
      Where phrasing content is expected, but only if there is a map element ancestor or a template element ancestor.
      Content model:
      Empty.
      Tag omission in text/html:
      No end tag.
      Content attributes:
      Global attributes
      alt — Replacement text for use when images are not available
      coords — Coordinates for the shape to be created in an image map
      shape — The kind of shape to be created in an image map
      href — Address of the hyperlink
      target — Browsing context for hyperlink navigation
      download — Whether to download the resource instead of navigating to it, and its file name if so
      ping — URLs to ping
      rel — Relationship between the document containing the hyperlink and the destination resource
      hreflang — Language of the linked resource
      type — Hint for the type of the referenced resource
      DOM interface:
      +
      interface HTMLAreaElement : HTMLElement {
+           attribute DOMString alt;
+           attribute DOMString coords;
+           attribute DOMString shape;
+           attribute DOMString target;
+           attribute DOMString download;
+  [PutForwards=value] attribute DOMSettableTokenList ping;
+           attribute DOMString rel;
+  readonly attribute DOMTokenList relList;
+           attribute DOMString hreflang;
+           attribute DOMString type;
 
-  
      Other keywords must be further parsed as follows to determine what they represent:
      
+  // also has obsolete members
+};
+HTMLAreaElement implements URLUtils;
      +
      -

      • If the keyword doesn't contain exactly one U+0078 LATIN SMALL LETTER X or U+0058 LATIN - CAPITAL LETTER X character, then this keyword doesn't represent anything. Abort these steps for - that keyword.

      • Let width string be the string before the "x" or - "X".

      • Let height string be the string after the "x" or - "X".

      • If either width string or height string start with - a U+0030 DIGIT ZERO (0) character or contain any characters other than ASCII digits, - then this keyword doesn't represent anything. Abort these steps for that keyword.

      • Apply the rules for parsing non-negative integers to width - string to obtain width.

      • Apply the rules for parsing non-negative integers to height - string to obtain height.

      • The keyword represents that the resource contains a bitmap icon with a width of width device pixels and a height of height device - pixels.

      +

      The area element represents either a hyperlink with some text and a + corresponding area on an image map, or a dead area on an image map.

      - +

      An area element with a parent node must have a map element ancestor + or a template element ancestor.

      -

      The keywords specified on the sizes attribute must not - represent icon sizes that are not actually available in the linked resource.

      +

      If the area element has an href + attribute, then the area element represents a hyperlink. In this case, + the alt attribute must be present. It specifies the + text of the hyperlink. Its value must be text that, when presented with the texts specified for + the other hyperlinks of the image map, and with the alternative text of the image, + but without the image itself, provides the user with the same kind of choice as the hyperlink + would when used without its text but with its shape applied to the image. The alt attribute may be left blank if there is another area + element in the same image map that points to the same resource and has a non-blank + alt attribute.

      - +

      If the area element has no href + attribute, then the area represented by the element cannot be selected, and the alt attribute must be omitted.

      -

      In the absence of a link with the icon keyword, for - Documents obtained over HTTP or HTTPS, user agents may instead attempt to - fetch and use an icon with the absolute URL obtained by - resolving the URL "/favicon.ico" against the document's - address, as if the page had declared that icon using the icon - keyword.

      +

      In both cases, the shape and coords attributes specify the area.

      - +

      The shape attribute is an enumerated + attribute. The following table lists the keywords defined for this attribute. The states + given in the first cell of the rows with keywords give the states to which those keywords map. + Some of the keywords are non-conforming, as noted in the last + column.

      -
      +
      State + Keywords + Notes +
      Circle state + circle + +
      circ + Non-conforming +
      Default state + default + +
      Polygon state + poly + +
      polygon + Non-conforming +
      Rectangle state + rect + +
      rectangle + Non-conforming +
      -

      The following snippet shows the top part of an application with several icons.

      +

      The attribute may be omitted. The missing value default is the rectangle state.

      - 
      <!DOCTYPE HTML>
-<html>
- <head>
-  <title>lsForums — Inbox</title>
-  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
-  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
-  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
-  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
-  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
-  <link rel=stylesheet href=lsforums.css>
-  <script src=lsforums.js></script>
-  <meta name=application-name content="lsForums">
- </head>
- <body>
-  ...
      +

      The coords attribute must, if specified, + contain a valid list of integers. This attribute gives the coordinates for the shape + described by the shape attribute. The + processing for this attribute is described as part of the image map processing + model.

      -
      + -

      For historical reasons, the icon keyword may be preceded by the - keyword "shortcut". If the "shortcut" keyword is - present, the rel attribute's entire value must be an - ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and - no other space characters).

      +

      In the circle state, area elements must + have a coords attribute present, with three integers, the + last of which must be non-negative. The first integer must be the distance in CSS pixels from the + left edge of the image to the center of the circle, the second integer must be the distance in CSS + pixels from the top edge of the image to the center of the circle, and the third integer must be + the radius of the circle, again in CSS pixels.

      +

      In the default state state, area + elements must not have a coords attribute. (The area is the + whole image.)

      - +

      In the polygon state, area elements must + have a coords attribute with at least six integers, and the + number of integers must be even. Each pair of integers must represent a coordinate given as the + distances from the left and the top of the image in CSS pixels respectively, and all the + coordinates together must represent the points of the polygon, in order.

      -

      The license keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +

      In the rectangle state, area elements must + have a coords attribute with exactly four integers, the + first of which must be less than the third, and the second of which must be less than the fourth. + The four points must represent, respectively, the distance from the left edge of the image to the + left side of the rectangle, the distance from the top edge to the top side, the distance from the + left edge to the right side, and the distance from the top edge to the bottom side, all in CSS + pixels.

      -

      The license keyword indicates that the referenced document - provides the copyright license terms under which the main content of the current document is - provided.

      + -

      This specification does not specify how to distinguish between the main content of a document - and content that is not deemed to be part of that main content. The distinction should be made - clear to the user.

      +

      When user agents allow users to follow hyperlinks or + download hyperlinks created using the + area element, as described in the next section, the href, target, download, and ping + attributes decide how the link is followed. The rel, hreflang, and type + attributes may be used to indicate to the user the likely nature of the target resource before the + user follows the link.

      -
      + -

      Consider a photo sharing site. A page on that site might describe and show a photograph, and - the page might be marked up as follows:

      +

      The target, download, ping, + rel, hreflang, and type + attributes must be omitted if the href attribute is not + present.

      - 
      <!DOCTYPE HTML>
-<html>
- <head>
-  <title>Exampl Pictures: Kissat</title>
-  <link rel="stylesheet" href="/style/default">
- </head>
- <body>
-  <h1>Kissat</h1>
-  <nav>
-   <a href="../">Return to photo index</a>
-  </nav>
-  <figure>
-   <img src="/pix/39627052_fd8dcd98b5.jpg">
-   <figcaption>Kissat</figcaption>
-  </figure>
-  <p>One of them has six toes!</p>
-  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
-  <footer>
-   <a href="/">Home</a> | <a href="../">Photo index</a>
-   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
-  </footer>
- </body>
-</html>
      +

      If the itemprop attribute is specified on an + area element, then the href attribute must + also be specified.

      -

      In this case the license applies to just the photo (the main - content of the document), not the whole document. In particular not the design of the page - itself, which is covered by the copyright given at the bottom of the document. This could be made - clearer in the styling (e.g. making the license link prominently positioned near the photograph, - while having the page copyright in light small text at the foot of the page.

      + -
      +

      The activation behavior of area elements is to run the following + steps:

      + +

      1. If the area element's Document is not fully active, + then abort these steps.

      2. + +

        If the area element has a download + attribute and the algorithm is not allowed to show a popup, or the element's target attribute is present and applying the rules + for choosing a browsing context given a browsing context name, using the value of the + target attribute as the browsing context name, would + result in there not being a chosen browsing context, then run these substeps:

        - +

        1. If there is an entry settings object, throw an + InvalidAccessError exception.

        2. Abort these steps without following the hyperlink.

        -

        Synonyms: For historical reasons, user agents must also treat the keyword - "copyright" like the license keyword.

        +

      3. Otherwise, the user agent must follow the + hyperlink or download the hyperlink created + by the area element, if any, and as determined by the download attribute and any expressed user + preference.

      - +

      The IDL attributes alt, coords, target, download, ping, rel, + hreflang, and type, each must reflect the respective + content attributes of the same name.

      +

      The IDL attribute shape must + reflect the shape content attribute.

      - +

      The IDL attribute relList must + reflect the rel content attribute.

      -

      The nofollow keyword may be used with a and - area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the - implied hyperlink, if no other keywords create one).

      +
      -

      The nofollow keyword indicates that the link is not endorsed - by the original author or publisher of the page, or that the link to the referenced document was - included primarily because of a commercial relationship between people affiliated with the two - pages.

      +

      The area element also supports the URLUtils interface. [URL]

      +

      When the element is created, and whenever the element's href content attribute is set, changed, or removed, the user + agent must invoke the element's URLUtils interface's set the input algorithm with the value of the href content attribute, if any, or the empty string otherwise, + as the given value.

      - +

      The element's URLUtils interface's get the + base algorithm must simply return the element's base URL.

      -

      The noreferrer keyword may be used with a and - area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the - implied hyperlink, if no other keywords create one).

      +

      The element's URLUtils interface's query + encoding is the document's character encoding.

      -

      It indicates that no referrer information is to be leaked when following the link.

      +

      When the element's URLUtils interface invokes its update steps with a string value, the user + agent must set the element's href content attribute to + the string value.

      -

      If a user agent follows a link defined by an a or area element that - has the noreferrer keyword, the user agent must not include a - Referer (sic) HTTP header (or equivalent for other protocols) in the - request.

      -

      This keyword also causes the opener - attribute to remain null if the hyperlink creates a new browsing context.

      + +

      4.8.17 Image maps

      +
      4.8.17.1 Authoring
      - + -

      The pingback keyword may be used with link - elements. This keyword creates an external resource - link.

      +

      An image map allows geometric areas on an image to be associated with hyperlinks.

      -

      For the semantics of the pingback keyword, see the Pingback - 1.0 specification. [PINGBACK]

      +

      An image, in the form of an img element or an object element + representing an image, may be associated with an image map (in the form of a map + element) by specifying a usemap attribute on + the img or object element. The usemap attribute, if specified, must be a valid + hash-name reference to a map element.

      +
      - +

      Consider an image that looks as follows:

      -

      The prefetch keyword may be used with link, - a, and area elements. This keyword creates an external resource link.

      +

      A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

      -

      The prefetch keyword indicates that preemptively fetching and - caching the specified resource is likely to be beneficial, as it is highly likely that the user - will require this resource.

      +

      If we wanted just the coloured areas to be clickable, we could do it as follows:

      -

      There is no default type for resources given by the prefetch - keyword.

      + 
      <p>
+ Please select a shape:
+ <img src="shapes.png" usemap="#shapes"
+      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
+ <map name="shapes">
+  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
+  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
+  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
+  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
+  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
+        href="yellow.html" alt="Yellow star.">
+ </map>
+</p>
      +
      - + -

      The search keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +
      4.8.17.2 Processing model
      -

      The search keyword indicates that the referenced document - provides an interface specifically for searching the document and its related resources.

      +

      If an img element or an object element representing an image has a + usemap attribute specified, user agents must process it + as follows:

      -

      OpenSearch description documents can be used with link elements and - the search link type to enable user agents to autodiscover search - interfaces. [OPENSEARCH]

      +

      1. First, rules for parsing a hash-name reference to a map element + must be followed. This will return either an element (the map) or + null.

      2. If that returned null, then abort these steps. The image is not associated with an image + map after all.

      3. Otherwise, the user agent must collect all the area elements that are + descendants of the map. Let those be the areas.

      +

      Having obtained the list of area elements that form the image map (the areas), interactive user agents must process the list in one of two ways.

      - +

      If the user agent intends to show the text that the img element represents, then + it must use the following steps.

      -

      The sidebar keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

      +

      In user agents that do not support images, or that have images disabled, + object elements cannot represent images, and thus this section never applies (the + fallback content is shown instead). The following steps therefore only apply to + img elements.

      -

      The sidebar keyword indicates that the referenced document, if - retrieved, is intended to be shown in a secondary browsing context (if possible), - instead of in the current browsing context.

      +

      1. Remove all the area elements in areas that have no href attribute.

      2. Remove all the area elements in areas that have no alt attribute, or whose alt + attribute's value is the empty string, if there is another area element in + areas with the same value in the href attribute and with a non-empty alt attribute.

      3. Each remaining area element in areas represents a + hyperlink. Those hyperlinks should all be made available to the user in a manner + associated with the text of the img.

        -

        A hyperlink with the sidebar keyword specified is - a sidebar hyperlink.

        +

        In this context, user agents may represent area and img elements + with no specified alt attributes, or whose alt + attributes are the empty string or some other non-visible text, in a user-agent-defined fashion + intended to indicate the lack of suitable author-provided text.

      + +

      If the user agent intends to show the image and allow interaction with the image to select + hyperlinks, then the image must be associated with a set of layered shapes, taken from the + area elements in areas, in reverse tree order (so the last + specified area element in the map is the bottom-most shape, and + the first element in the map, in tree order, is the top-most shape).

      +

      Each area element in areas must be processed as follows to + obtain a shape to layer onto the image:

      +

      1. Find the state that the element's shape attribute + represents.

      2. Use the rules for parsing a list of integers to parse the element's coords attribute, if it is present, and let the result be the + coords list. If the attribute is absent, let the coords + list be the empty list.

      3. - +

        If the number of items in the coords list is less than the minimum number + given for the area element's current state, as per the following table, then the + shape is empty; abort these steps.

        -

        The stylesheet keyword may be used with link - elements. This keyword creates an external resource - link that contributes to the styling processing model.

        +
        State + Minimum number of items +
        Circle state + 3 +
        Default state + 0 +
        Polygon state + 6 +
        Rectangle state + 4 +
        -

        The specified resource is a resource that describes how to present the document. Exactly how - the resource is to be processed depends on the actual type of the resource.

        +
      4. -

        If the alternate keyword is also specified on the - link element, then the link is an alternative stylesheet; in this case, - the title attribute must be specified on the link - element, with a non-empty value.

        +

        Check for excess items in the coords list as per the entry in the + following list corresponding to the shape attribute's + state:

        -

        The default type for resources given by the stylesheet - keyword is text/css.

        +
        Circle state
        Drop any items in the list beyond the third.
        Default state
        Drop all items in the list.
        Polygon state
        Drop the last item if there's an odd number of items.
        Rectangle state
        Drop any items in the list beyond the fourth.
        - +

      5. If the shape attribute represents the rectangle state, and the first number in the list is + numerically less than the third number in the list, then swap those two numbers around.

      6. If the shape attribute represents the rectangle state, and the second number in the list is + numerically less than the fourth number in the list, then swap those two numbers around.

      7. If the shape attribute represents the circle state, and the third number in the list is less than + or equal to zero, then the shape is empty; abort these steps.

      8. Now, the shape represented by the element is the one described for the entry in the list + below corresponding to the state of the shape attribute:

        -

        The appropriate times to obtain the resource are: +

        Circle state
        - +

        Let x be the first number in coords, y be the second number, and r be the third number.

        -

        Quirk: If the document has been set to quirks mode, has the - same origin as the URL of the external resource, - and the Content-Type metadata of the external resource is not a - supported style sheet type, the user agent must instead assume it to be text/css.

        +

        The shape is a circle whose center is x CSS pixels from the left edge + of the image and y CSS pixels from the top edge of the image, and whose + radius is r pixels.

        -

        Once a resource has been obtained, if its Content-Type metadata is text/css, the user - agent must run these steps:

        +
        Default state
        - - +

        The shape is a rectangle that exactly covers the entire image.

        -

        1. Let element be the link element that created the - external resource link.

        2. If element has an associated CSS style sheet, remove the CSS style sheet in question.

        3. If element no longer creates an external resource link - that contributes to the styling processing model, or if, since the resource in question was obtained, it has become appropriate to obtain it again (meaning this algorithm is about to be - invoked again for a newly obtained resource), then abort these steps.

        4. +
          Polygon state
          -

          Create a CSS style sheet with the following properties:

          +

          Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0).

          -
          type

          text/css

          location
          +

          Let the coordinates be (xi, yi), + interpreted in CSS pixels measured from the top left of the image, for all integer values of + i from 0 to (N/2)-1, where N is the number of items in coords.

          -

          The resulting absolute URL determined during the obtain algorithm.

          +

          The shape is a polygon whose vertices are given by the coordinates, and + whose interior is established using the even-odd rule. [GRAPHICS]

          -

          This is before any redirects get applied.

          + -
          owner node

          element

          media
          +
          Rectangle state
          -

          The media attribute of element.

          +

          Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number.

          -

          This is a reference to the (possibly absent at this time) attribute, rather - than a copy of the attribute's current value. The CSSOM specification defines what happens - when the attribute is dynamically set, changed, or removed.

          +

          The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose + bottom right corner is given by the coordinate (x2, + y2), those coordinates being interpreted as CSS pixels + from the top left corner of the image.

          -
          title
          +
          -

          The title attribute of element.

          +

          For historical reasons, the coordinates must be interpreted relative to the + displayed image after any stretching caused by the CSS 'width' and 'height' properties + (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the + aforementioned CSS properties).

          -

          This is similarly a reference to the attribute, rather than a copy of the - attribute's current value.

          +

          Browser zoom features and transforms applied using CSS or SVG do not affect the + coordinates.

          -
          alternate flag

          Set if the link is an alternative stylesheet; unset otherwise.

          origin-clean flag

          Set if the resource is CORS-same-origin; unset otherwise.

          parent CSS style sheet
          owner CSS rule

          null

          disabled flag

          Left at its default value.

          CSS rules

          Left uninitialized.

        +
      -

      The CSS environment encoding is the result of running the following steps: [CSSSYNTAX]

      +

      Pointing device interaction with an image associated with a set of layered shapes per the above + algorithm must result in the relevant user interaction events being first fired to the top-most + shape covering the point that the pointing device indicated, if any, or to the image element + itself, if there is no shape covering that point. User agents may also allow individual + area elements representing hyperlinks to be selected + and activated (e.g. using a keyboard).

      -

      1. If the element has a charset attribute, get an encoding from that attribute's value. If that - succeeds, return the resulting encoding and abort these steps. [ENCODING]

      2. Otherwise, return the document's character encoding. [DOM]

      +

      Because a map element (and its area elements) can be + associated with multiple img and object elements, it is possible for an + area element to correspond to multiple focusable areas + of the document.

      -
    +

    Image maps are live; if the DOM is mutated, then the user agent must act as if it + had rerun the algorithms for image maps.

    - +

    4.8.18 MathML

    -

    The tag keyword may be used with a and - area elements. This keyword creates a hyperlink.

    +

    The math element from the MathML namespace + falls into the embedded content, phrasing content, and flow + content categories for the purposes of the content models in this specification.

    -

    The tag keyword indicates that the tag that the - referenced document represents applies to the current document.

    +

    This specification refers to several specific MathML elements, in particular: + annotation-xml, + merror, + mi, + mn, + mo, + ms, and + mtext. +

    -

    Since it indicates that the tag applies to the current document, it would - be inappropriate to use this keyword in the markup of a tag cloud, which - lists the popular tags across a set of pages.

    +

    When the MathML annotation-xml element contains + elements from the HTML namespace, such elements must all be flow + content. [MATHML]

    -
    +

    When the MathML token elements (mi, mo, mn, ms, + and mtext) are descendants of HTML elements, they may contain + phrasing content elements from the HTML namespace. [MATHML]

    + -

    This document is about some gems, and so it is tagged with "http://en.wikipedia.org/wiki/Gemstone" to unambiguously categorise it as applying - to the "jewel" kind of gems, and not to, say, the towns in the US, the Ruby package format, or - the Swiss locomotive class:

    + - 
    <!DOCTYPE HTML>
-<html>
- <head>
-  <title>My Precious</title>
- </head>
- <body>
-  <header><h1>My precious</h1> <p>Summer 2012</p></header>
-  <p>Recently I managed to dispose of a red gem that had been
-  bothering me. I now have a much nicer blue sapphire.</p>
-  <p>The red gem had been found in a bauxite stone while I was digging
-  out the office level, but nobody was willing to haul it away. The
-  same red gem stayed there for literally years.</p>
-  <footer>
-   Tags: <a rel=tag href="http://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
-  </footer>
- </body>
-</html>
    + -
    +

    User agents must handle text other than inter-element whitespace found in MathML + elements whose content models do not allow straight text by pretending for the purposes of MathML + content models, layout, and rendering that that text is actually wrapped in an mtext element in the MathML namespace. (Such text is not, + however, conforming.)

    + +

    User agents must act as if any MathML element whose contents does not match the element's + content model was replaced, for the purposes of MathML layout and rendering, by an merror element in the MathML namespace containing some + appropriate error message.

    + +

    To enable authors to use MathML tools that only accept MathML in its XML form, interactive HTML + user agents are encouraged to provide a way to export any MathML fragment as an XML + namespace-well-formed XML fragment.

    + + + +

    The semantics of MathML elements are defined by the MathML specification and other + applicable specifications. [MATHML]

    -

    In this document, there are two articles. The "tag" - link, however, applies to the whole page (and would do so wherever it was placed, including if it - was within the article elements).

    +

    Here is an example of the use of MathML in an HTML document:

    - 
    <!DOCTYPE HTML>
+   
    <!DOCTYPE html>
 <html>
  <head>
-  <title>Gem 4/4</title>
+  <title>The quadratic formula</title>
  </head>
  <body>
-  <article>
-   <h1>801: Steinbock</h1>
-   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
-  </article>
-  <article>
-   <h1>802: Murmeltier</h1>
-   <figure>
-    <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
-         alt="The 802 was red with pantographs and tall vents on the side.">
-    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
-   </figure>
-   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
-  </article>
-  <p class="topic"><a rel=tag href="http://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
+  <h1>The quadratic formula</h1>
+  <p>
+   <math>
+    <mi>x</mi>
+    <mo>=</mo>
+    <mfrac>
+     <mrow>
+      <mo form="prefix">−</mo> <mi>b</mi>
+      <mo>±</mo>
+      <msqrt>
+       <msup> <mi>b</mi> <mn>2</mn> </msup>
+       <mo>−</mo>
+       <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
+      </msqrt>
+     </mrow>
+     <mrow>
+      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
+     </mrow>
+    </mfrac>
+   </math>
+  </p>
  </body>
 </html>
    
 
@@ -27083,135 +27129,84 @@ dictionary TrackEventInit : 4.8.5.16 Sequential link types
-
-  
    Some documents form part of a sequence of documents.
    
-
-  
    A sequence of documents is one where each document can have a previous sibling and a
-  next sibling. A document with no previous sibling is the start of its sequence, a
-  document with no next sibling is the end of its sequence.
    
-
-  
    A document may be part of multiple sequences.
    
-
-
-  
-
-  
    The next keyword may be used with link,
-  a, and area elements. This keyword creates a hyperlink.
    
-
-  
    The next keyword indicates that the document is part of a
-  sequence, and that the link is leading to the document that is the next logical document in the
-  sequence.
    
-
-
-  
-
-  
    The prev keyword may be used with link,
-  a, and area elements. This keyword creates a hyperlink.
    
+  
    4.8.19 SVG
    
 
-  
    The prev keyword indicates that the document is part of a
-  sequence, and that the link is leading to the document that is the previous logical document in
-  the sequence.
    
+  
    The svg element from the SVG namespace falls into the
+  embedded content, phrasing content, and flow content
+  categories for the purposes of the content models in this specification.
    
 
   
 
-  
    Synonyms: For historical reasons, user agents must also treat the keyword
-  "previous" like the prev keyword.
    
+  
    To enable authors to use SVG tools that only accept SVG in its XML form, interactive HTML user
+  agents are encouraged to provide a way to export any SVG fragment as an XML namespace-well-formed
+  XML fragment.
    
 
   
 
+  
    When the SVG foreignObject element contains elements from the HTML
+  namespace, such elements must all be flow content. [SVG]
    
 
-  
-
-  
    Extensions to the predefined set of link types may be
-  registered in the microformats
-  wiki existing-rel-values page. [MFREL]
    
-
-  
    Anyone is free to edit the microformats wiki existing-rel-values page at
-  any time to add a type. Extension types must be specified with the following information:
    
-
-  
    Keyword
    
-
-    
    The actual value being defined. The value should not be confusingly similar to any other
-    defined value (e.g. differing only in case).
    
-
-    
    If the value contains a U+003A COLON character (:), it must also be an absolute
-    URL.
    
-
-   
    Effect on... link
    
-
-    
    One of the following:
    
-
-    
    Not allowed
    The keyword must not be specified on link elements.
    Hyperlink
    The keyword may be specified on a link element; it creates a
-     hyperlink.
    External Resource
    The keyword may be specified on a link element; it creates an external
-     resource link.
    
+  
    The content model for title elements in the SVG namespace
+  inside HTML documents is phrasing content. (This further constrains the
+  requirements given in the SVG specification.)
    
 
-   
    Effect on... a and area
    
+  
    The semantics of SVG elements are defined by the SVG specification and other applicable
+  specifications. [SVG]
    
 
-    
    One of the following:
    
 
-    
    Not allowed
    The keyword must not be specified on a and area elements.
    Hyperlink
    The keyword may be specified on a and area elements; it creates a
-     hyperlink.
    External Resource
    The keyword may be specified on a and area elements; it creates
-     an external resource link.
    Hyperlink Annotation
    The keyword may be specified on a and area elements; it annotates other hyperlinks
-     created by the element.
    
 
-   
    Brief description
    A short non-normative description of what the keyword's meaning is.
    Specification
    A link to a more detailed description of the keyword's semantics and requirements. It
-   could be another page on the Wiki, or a link to an external page.
    Synonyms
    A list of other keyword values that have exactly the same processing requirements. Authors
-   should not use the values defined to be synonyms, they are only intended to allow user agents to
-   support legacy content. Anyone may remove synonyms that are not used in practice; only names that
-   need to be processed as synonyms for compatibility with legacy content are to be registered in
-   this way.
    Status
    
+  
    4.8.20 Dimension attributes
    
 
-    
    One of the following:
    
+  
    Author requirements: The width and height attributes on img, iframe,
+  embed, object, video, and, when their type attribute is in the Image Button state, input elements may be
+  specified to give the dimensions of the visual content of the element (the width and height
+  respectively, relative to the nominal direction of the output medium), in CSS pixels. The
+  attributes, if specified, must have values that are valid non-negative integers.
    
 
-    
    Proposed
    The keyword has not received wide peer review and approval. Someone has proposed it and is,
-     or soon will be, using it.
    Ratified
    The keyword has received wide peer review and approval. It has a specification that
-     unambiguously defines how to handle pages that use the keyword, including when they use it in
-     incorrect ways.
    Discontinued
    The keyword has received wide peer review and it has been found wanting. Existing pages are
-     using this keyword, but new pages should avoid it. The "brief description" and "specification"
-     entries will give details of what authors should use instead, if anything.
    
+  
    The specified dimensions given may differ from the dimensions specified in the resource itself,
+  since the resource may have a resolution that differs from the CSS pixel resolution. (On screens,
+  CSS pixels have a resolution of 96ppi, but in general the CSS pixel resolution depends on the
+  reading distance.) If both attributes are specified, then one of the following statements must be
+  true:
    
 
-    
    If a keyword is found to be redundant with existing values, it should be removed and listed
-    as a synonym for the existing value.
    
+  
    • specified width - 0.5 ≤
+             specified height * target ratio ≤
+             specified width + 0.5
    • specified height - 0.5 ≤
+             specified width / target ratio ≤
+             specified height + 0.5
    • specified height = specified width = 0
    
 
-    
    If a keyword is registered in the "proposed" state for a period of a month or more without
-    being used or specified, then it may be removed from the registry.
    
+  
    The target ratio is the ratio of the intrinsic width to the intrinsic
+  height in the resource. The specified width and specified
+  height are the values of the width and height attributes respectively.
    
 
-    
    If a keyword is added with the "proposed" status and found to be redundant with existing
-    values, it should be removed and listed as a synonym for the existing value. If a keyword is
-    added with the "proposed" status and found to be harmful, then it should be changed to
-    "discontinued" status.
    
+  
    The two attributes must be omitted if the resource in question does not have both an intrinsic
+  width and an intrinsic height.
    
 
-    
    Anyone can change the status at any time, but should only do so in accordance with the
-    definitions above.
    
+  
    If the two attributes are both zero, it indicates that the element is not intended for the user
+  (e.g. it might be a part of a service to count page views).
    
 
-   
    
+  
    The dimension attributes are not intended to be used to stretch the image.
    
 
   
 
-  
    Conformance checkers must use the information given on the microformats wiki
-  existing-rel-values page to establish if a value is allowed or not: values defined in this
-  specification or marked as "proposed" or "ratified" must be accepted when used on the elements for
-  which they apply as described in the "Effect on..." field, whereas values marked as "discontinued"
-  or not listed in either this specification or on the aforementioned page must be rejected as
-  invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid
-  the use of unreliable network connectivity).
    
+  
    User agent requirements: User agents are expected to use these attributes as hints for the rendering.
    
 
-  
    When an author uses a new type not defined by either this specification or the Wiki page,
-  conformance checkers should offer to add the value to the Wiki, with the details described above,
-  with the "proposed" status.
    
+  
    The width and height IDL attributes on the iframe,
+  embed, object, and video elements must reflect
+  the respective content attributes of the same name.
    
 
-  
+  
    For iframe, embed, and object the IDL
+  attributes are DOMString; for video the IDL attributes are unsigned long.
    
 
-  
    Types defined as extensions in the microformats
-  wiki existing-rel-values page with the status "proposed" or "ratified" may be used with the
-  rel attribute on link, a, and area
-  elements in accordance to the "Effect on..." field. [MFREL]
    
+  
    The corresponding IDL attributes for img and
+  input elements are defined in those respective elements'
+  sections, as they are slightly more specific to those elements' other behaviors.
    
 
+  
 
 
 
-  
    4.9 Tabular data
    
+  
    4.9 Tabular data
    
 
 
   
    4.9.1 The table element
    
@@ -39618,7 +39613,7 @@ out of 233 257 824 bytes available</meter></p>
    attribute. The formTarget IDL attribute must reflect the formtarget content attribute. - +

    4.10.19.6.1 Autofocusing a form control: the autofocus attribute
    @@ -68322,7 +68317,7 @@ interface WorkerGlobalScope : EventHandler onoffline; attribute EventHandler ononline; - // also has obsolete members + // also has additional members in a partial interface };

    The self attribute must return the @@ -69002,7 +68997,7 @@ interface SharedWorker : 10.3 APIs available to workers 

    [Exposed=Worker]
-partial interface WorkerGlobalScope {
+partial interface WorkerGlobalScope { // not obsolete
   void importScripts(DOMString... urls);
   readonly attribute WorkerNavigator navigator;
 };
@@ -77296,7 +77291,7 @@ ul[type=square i], li[type=square i] { list-style-type: square; }
    sufficient hooks for this purpose.

    -

    14.3.9 Tables

    +

    14.3.9 Tables

    @namespace url(http://www.w3.org/1999/xhtml);
 
@@ -77357,7 +77352,7 @@ table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
   border-color: black;
 }
    -

    The following rules are also expected to apply, as presentational hints:

    +

    The following rules are also expected to apply, as presentational hints:

    @namespace url(http://www.w3.org/1999/xhtml);
 
@@ -77410,7 +77405,7 @@ table[rules=cols i], table[rules=all i] {
   border-style: hidden;
   border-collapse: collapse;
 }
-table[border] { border-style: outset; } /* only if border is not equivalent to zero */
+table[border] { border-style: outset; } /* only if border is not equivalent to zero */
 table[frame=void i] { border-style: hidden; }
 table[frame=above i] { border-style: outset hidden hidden hidden; }
 table[frame=below i] { border-style: hidden hidden outset hidden; }
@@ -77424,7 +77419,7 @@ table[border] > tr > td, table[border] > tr > th,
 table[border] > thead > tr > td, table[border] > thead > tr > th,
 table[border] > tbody > tr > td, table[border] > tbody > tr > th,
 table[border] > tfoot > tr > td, table[border] > tfoot > tr > th {
-  /* only if border is not equivalent to zero */
+  /* only if border is not equivalent to zero */
   border-width: 1px;
   border-style: inset;
 }
@@ -77484,7 +77479,7 @@ table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr {
 
 
 
-  
    In quirks mode, the following rules are also expected to apply:
    
+  
    In quirks mode, the following rules are also expected to apply:
    
 
   
    @namespace url(http://www.w3.org/1999/xhtml);
 
@@ -77500,136 +77495,136 @@ table {
 
   
    
 
-  
    For the purposes of the CSS table model, the col element is expected to be treated
-  as if it was present as many times as its span attribute specifies.
    
+  
    For the purposes of the CSS table model, the col element is expected to be treated
+  as if it was present as many times as its span attribute specifies.
    
 
-  
    For the purposes of the CSS table model, the colgroup element, if it contains no
-  col element, is expected to be treated as if it had as many such children as its
-  span attribute specifies.
    
+  
    For the purposes of the CSS table model, the colgroup element, if it contains no
+  col element, is expected to be treated as if it had as many such children as its
+  span attribute specifies.
    
 
-  
    For the purposes of the CSS table model, the colspan and
-  rowspan attributes on td and th
-  elements are expected to provide the
+  
    For the purposes of the CSS table model, the colspan and
+  rowspan attributes on td and th
+  elements are expected to provide the
   special knowledge regarding cells spanning rows and columns.
    
 
-  
    In HTML documents, the user agent is expected to force the 'display' property of
-  form elements that are children of table, thead,
-  tbody, tfoot, or tr elements to compute to 'none',
+  
    In HTML documents, the user agent is expected to force the 'display' property of
+  form elements that are children of table, thead,
+  tbody, tfoot, or tr elements to compute to 'none',
   irrespective of CSS rules.
    
 
   
    
 
-  
    The table element's cellspacing
-  attribute maps to the pixel length property 'border-spacing' on the element.
    
+  
    The table element's cellspacing
+  attribute maps to the pixel length property 'border-spacing' on the element.
    
 
-  
    The table element's cellpadding
-  attribute maps to the pixel length
+  
    The table element's cellpadding
+  attribute maps to the pixel length
   properties 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' of any
-  td and th elements that have corresponding cells in the table corresponding to
-  the table element.
    
+  td and th elements that have corresponding cells in the table corresponding to
+  the table element.
    
 
-  
    The table element's hspace attribute maps to the dimension properties 'margin-left' and
-  'margin-right' on the table element.
    
+  
    The table element's hspace attribute maps to the dimension properties 'margin-left' and
+  'margin-right' on the table element.
    
 
-  
    The table element's vspace attribute maps to the dimension properties 'margin-top' and
-  'margin-bottom' on the table element.
    
+  
    The table element's vspace attribute maps to the dimension properties 'margin-top' and
+  'margin-bottom' on the table element.
    
 
-  
    The table element's height attribute
-  maps to the dimension property 'height' on the table element.
    
+  
    The table element's height attribute
+  maps to the dimension property 'height' on the table element.
    
 
-  
    The table element's width attribute
-  maps to the dimension property 'width' on the table element.
    
+  
    The table element's width attribute
+  maps to the dimension property 'width' on the table element.
    
 
-  
    The col element's width attribute maps
-  to the dimension property 'width' on the col element.
    
+  
    The col element's width attribute maps
+  to the dimension property 'width' on the col element.
    
 
-  
    The tr element's height attribute maps
-  to the dimension property 'height' on the tr element.
    
+  
    The tr element's height attribute maps
+  to the dimension property 'height' on the tr element.
    
 
-  
    The td and th elements' height
-  attributes map to the dimension property
+  
    The td and th elements' height
+  attributes map to the dimension property
   'height' on the element.
    
 
-  
    The td and th elements' width
-  attributes map to the dimension property
+  
    The td and th elements' width
+  attributes map to the dimension property
   'width' on the element.
    
 
   
    
 
-  
    The caption element unless specified otherwise below, and the thead,
-  tbody, tfoot, tr, td, and th
-  elements when they have an align attribute whose value is an ASCII
+  
    The caption element unless specified otherwise below, and the thead,
+  tbody, tfoot, tr, td, and th
+  elements when they have an align attribute whose value is an ASCII
   case-insensitive match for either the string "center" or the string
   "middle", are expected to center text within themselves, as if they had
-  their 'text-align' property set to 'center' in a presentational hint, and to align descendants to the center.
    
+  their 'text-align' property set to 'center' in a presentational hint, and to align descendants to the center.
    
 
-  
    The caption, thead, tbody, tfoot,
-  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
+  
    The caption, thead, tbody, tfoot,
+  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
   the string "left", are expected to left-align text within themselves, as if
-  they had their 'text-align' property set to 'left' in a presentational hint, and to align descendants to the left.
    
+  they had their 'text-align' property set to 'left' in a presentational hint, and to align descendants to the left.
    
 
-  
    The caption, thead, tbody, tfoot,
-  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
+  
    The caption, thead, tbody, tfoot,
+  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
   the string "right", are expected to right-align text within themselves, as
-  if they had their 'text-align' property set to 'right' in a presentational hint, and to align descendants to the right.
    
+  if they had their 'text-align' property set to 'right' in a presentational hint, and to align descendants to the right.
    
 
-  
    The caption, thead, tbody, tfoot,
-  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
+  
    The caption, thead, tbody, tfoot,
+  tr, td, and th elements, when they have an align attribute whose value is an ASCII case-insensitive match for
   the string "justify", are expected to full-justify text within themselves,
-  as if they had their 'text-align' property set to 'justify' in a presentational hint, and to align descendants to the left.
    
+  as if they had their 'text-align' property set to 'justify' in a presentational hint, and to align descendants to the left.
    
 
   
    User agents are expected to have a rule in their user agent stylesheet that matches
-  th elements that have a parent node whose computed value for the 'text-align'
+  th elements that have a parent node whose computed value for the 'text-align'
   property is its initial value, whose declaration block consists of just a single declaration that
   sets the 'text-align' property to the value 'center'.
     
 
   
    
 
-  
    When a table, thead, tbody, tfoot,
-  tr, td, or th element has a background attribute set to a non-empty value, the new value is
-  expected to be resolved relative to the element, and if this is
-  successful, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-image' property to the
-  resulting absolute URL.
    
+  
    When a table, thead, tbody, tfoot,
+  tr, td, or th element has a background attribute set to a non-empty value, the new value is
+  expected to be resolved relative to the element, and if this is
+  successful, the user agent is expected to treat the attribute as a presentational hint setting the element's 'background-image' property to the
+  resulting absolute URL.
    
 
-  
    When a table, thead, tbody, tfoot,
-  tr, td, or th element has a bgcolor
-  attribute set, the new value is expected to be parsed using the rules for parsing a legacy
+  
    When a table, thead, tbody, tfoot,
+  tr, td, or th element has a bgcolor
+  attribute set, the new value is expected to be parsed using the rules for parsing a legacy
   colour value, and if that does not return an error, the user agent is expected to treat the
-  attribute as a presentational hint setting the element's
+  attribute as a presentational hint setting the element's
   'background-color' property to the resulting colour.
    
 
-  
    When a table element has a bordercolor
-  attribute, its value is expected to be parsed using the rules for parsing a legacy colour
+  
    When a table element has a bordercolor
+  attribute, its value is expected to be parsed using the rules for parsing a legacy colour
   value, and if that does not return an error, the user agent is expected to treat the
-  attribute as a presentational hint setting the element's
+  attribute as a presentational hint setting the element's
   'border-top-color', 'border-right-color', 'border-bottom-color', and 'border-right-color'
   properties to the resulting colour.
    
 
   
    
 
-  
    The table element's border attribute maps to the pixel length properties
+  
    The table element's border attribute maps to the pixel length properties
   'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' on the
-  element. If the attribute is present but parsing the attribute's value using the rules for
+  element. If the attribute is present but parsing the attribute's value using the rules for
   parsing non-negative integers generates an error, a default value of 1px is expected to be
   used for that property instead.
    
 
   
    Rules marked "only if border is not equivalent to zero"
-  in the CSS block above is expected to only be applied if the border attribute mentioned in the selectors for the rule is not
-  only present but, when parsed using the rules for parsing non-negative integers, is
+  in the CSS block above is expected to only be applied if the border attribute mentioned in the selectors for the rule is not
+  only present but, when parsed using the rules for parsing non-negative integers, is
   also found to have a value other than zero or to generate an error.
    
 
   
    
 
-  
    In quirks mode, a td element or a th element that has a
-  nowrap attribute but also has a width attribute whose value, when parsed using the rules for
+  
    In quirks mode, a td element or a th element that has a
+  nowrap attribute but also has a width attribute whose value, when parsed using the rules for
   parsing dimension values, is found to be a length (not an error or a number classified as a
-  percentage), is expected to have a presentational hint
+  percentage), is expected to have a presentational hint
   setting the element's 'white-space' property to 'normal', overriding the rule in the CSS block
   above that sets it to 'nowrap'.
      
 
   
    
 
-  
    User agents are expected to render sorting interface th elements in such a manner as to indicate that
+  
    User agents are expected to render sorting interface th elements in such a manner as to indicate that
   activating the elements will cause the table to be sorted.
    
 
 
@@ -77816,15 +77811,15 @@ legend {
   element itself, and is expected to be centered in the video element.
    
 
   
    Any subtitles or captions are expected to be overlayed directly on top of their
-  video element, as defined by the relevant rendering rules; for WebVTT,
-  those are the rules for updating the display of WebVTT text tracks. [WEBVTT]
    
+  video element, as defined by the relevant rendering rules; for WebVTT, those are the
+  rules for updating the display of WebVTT text tracks. [WEBVTT]
    
 
   
    When the user agent starts exposing a user
   interface for a video element, the user agent should run the rules for
   updating the text track rendering of each of the text
   tracks in the video element's list of text tracks that are showing and whose text track kind is one of subtitles or captions (e.g., for text
-  tracks based on WebVTT, the rules for updating the display of WebVTT
-  text tracks). [WEBVTT]
    
+  tracks based on WebVTT, the rules for updating the display of WebVTT text
+  tracks). [WEBVTT]
    
 
   
    Resizing video and canvas elements does not interrupt
   video playback or clear the canvas.
    
@@ -83507,7 +83502,7 @@ if (s = prompt('What is your name?')) {
    Mozilla Foundation.
    [RFC1034]
    Domain Names - Concepts and Facilities, P. Mockapetris. IETF, November 1987.
    [RFC1123]
    Requirements for Internet Hosts -- Application and Support, R. Braden. IETF, October 1989.
    [RFC1345]
    (Non-normative) Character Mnemonics and Character Sets, K. Simonsen. IETF.
    [RFC1468]
    (Non-normative) Japanese Character Encoding for Internet Messages, J. Murai, M. Crispin, E. van der Poel. IETF.
    [RFC1554]
    (Non-normative) ISO-2022-JP-2: Multilingual Extension of ISO-2022-JP, M. Ohta, K. Handa. IETF.
    [RFC1557]
    (Non-normative) Korean Character Encoding for Internet Messages, U. Choi, K. Chon, H. Park. IETF.
    [RFC1842]
    (Non-normative) ASCII Printable Characters-Based Chinese Character Encoding for Internet Messages, Y. Wei, Y. Zhang, J. Li, J. Ding, Y. Jiang. IETF.
    [RFC1922]
    (Non-normative) Chinese Character Encoding for Internet Messages, HF. Zhu, DY. Hu, ZG. Wang, TC. Kao, WCH. Chang, M. Crispin. IETF.
    [RFC2046]
    Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types, N. Freed, N.  Borenstein. IETF.
    [RFC2119]
    Key words for use in RFCs to Indicate Requirement Levels, S. Bradner. IETF.
    [RFC2237]
    (Non-normative) Japanese Character Encoding for Internet Messages, K. Tamaru. IETF.
    [RFC2313]
    PKCS #1: RSA Encryption, B. Kaliski. IETF.
    [RFC2318]
    The text/css Media Type, H. Lie, B. Bos, C. Lilley. IETF.
    [RFC2388]
    Returning Values from Forms: multipart/form-data, L. Masinter. IETF.
    [RFC2397]
    The "data" URL scheme, L. Masinter. IETF.
    [RFC2445]
    Internet Calendaring and Scheduling Core Object Specification (iCalendar), F. Dawson, D. Stenerson. IETF.
    [RFC2483]
    URI Resolution Services Necessary for URN Resolution, M. Mealling, R. Daniel. IETF.
    [RFC3676]
    The Text/Plain Format and DelSp Parameters, R. Gellens. IETF.
    [RFC3023]
    XML Media Types, M. Murata, S. St. Laurent, D. Kohn. IETF.
    [RFC3279]
    Algorithms and Identifiers for the Internet X.509 Public Key Infrastructure Certificate and Certificate Revocation List (CRL) Profile, W. Polk, R. Housley, L. Bassham. IETF.
    [RFC3490]
    Internationalizing Domain Names in Applications (IDNA), P. Faltstrom, P. Hoffman, A. Costello. IETF.
    [RFC3864]
    Registration Procedures for Message Header Fields, G. Klyne, M. Nottingham, J. Mogul. IETF.
    [RFC4281]
    The Codecs Parameter for "Bucket" Media Types, R. Gellens, D. Singer, P. Frojdh. IETF.
    [RFC4329]
    (Non-normative) Scripting Media Types, B. Höhrmann. IETF.
    [RFC4395]
    Guidelines and Registration Procedures for New URI Schemes, T. Hansen, T. Hardie, L. Masinter. IETF.
    [RFC4648]
    The Base16, Base32, and Base64 Data Encodings, S. Josefsson. IETF.
    [RFC5280]
    Internet X.509 Public Key Infrastructure Certificate and Certificate Revocation List (CRL) Profile, D. Cooper, S. Santesson, S. Farrell, S. Boeyen, R. Housley, W. Polk. IETF.
    [RFC5322]
    Internet Message Format, P. Resnick. IETF.
    [SMS]
    (Non-normative) URI Scheme for Global System for Mobile Communications (GSM) Short Message Service (SMS), E. Wilde, A. Vaha-Sipila. IETF.
    [RFC6266]
    Use of the Content-Disposition Header Field in the Hypertext Transfer Protocol (HTTP), J. Reschke. IETF.
    [RFC6350]
    vCard Format Specification, S. Perreault. IETF.
    [SCSU]
    (Non-normative) UTR #6: A Standard Compression Scheme For Unicode, M. Wolf, K. Whistler, C. Wicksteed, M. Davis, A. Freytag, M. Scherer. Unicode Consortium.
    [SELECTORS]
    Selectors, E. Etemad, T. Çelik, D. Glazman, I. Hickson, P. Linss, J. Williams. W3C.
    [SRGB]
    IEC 61966-2-1: Multimedia systems and equipment — Colour measurement and management — Part 2-1: Colour management — Default RGB colour space — sRGB. IEC.
    [SVG]
    Scalable Vector Graphics (SVG) Tiny 1.2 Specification, O. Andersson, R. Berjon, E. Dahlström, A. Emmons, J. Ferraiolo, A. Grasso, V. Hardy, S. Hayman, D. Jackson, C. Lilley, C. McCormack, A. Neumann, C. Northway, A. Quint, N. Ramani, D. Schepers, A. Shellshear. W3C.
    [TOR]
    (Non-normative) Tor.
    [TOUCH]
    Touch Events, D. Schepers, S. Moon, M. Brubeck, A. Barstow. W3C.
    [TZDATABASE]
    (Non-normative) Time Zone Database. IANA.
    [UAAG]
    (Non-normative) User Agent Accessibility Guidelines (UAAG) 2.0, J. Allan, K. Ford, J. Richards, J. Spellman. W3C.
    [UCA]
    UTR #10: Unicode Collation Algorithm, M. Davis, K. Whistler. Unicode Consortium.
    [UNICODE]
    The Unicode Standard. Unicode Consortium.
    [UNIVCHARDET]
    (Non-normative) A composite approach to language/encoding detection, S. Li, K. Momoi. Netscape. In Proceedings of the 19th International Unicode Conference.
    [URL]
    URL, A. van Kesteren. WHATWG.
    [URN]
    URN Syntax, R. Moats. IETF.
    [UTF7]
    (Non-normative) UTF-7: A Mail-Safe Transformation Format of Unicode, D. Goldsmith, M. Davis. IETF.
    [UTF8DET]
    (Non-normative) Multilingual form encoding, M. Dürst. W3C.
    [UTR36]
    (Non-normative) UTR #36: Unicode Security Considerations, M. Davis, M. Suignard. Unicode Consortium.
    [WCAG]
    (Non-normative) Web Content Accessibility Guidelines (WCAG) 2.0, B. Caldwell, M. Cooper, L. Reid, G. Vanderheiden. W3C.
    [WEBGL]
    WebGL Specification, D. Jackson. Khronos Group.
    [WEBIDL]
    Web IDL, C. McCormack. W3C.
    Web Linking, M. Nottingham. IETF.
    [WEBMCG]
    WebM Container Guidelines. The WebM Project.
    [WEBVTT]
    WebVTT, I. Hickson. W3C.
    [WHATWGWIKI]
    The WHATWG Wiki. WHATWG.
    [WSP]
    The WebSocket protocol, I. Fette, A. Melnikov. IETF.
    [X121]
    Recommendation X.121 — International Numbering Plan for Public Data Networks, CCITT Blue Book, Fascicle VIII.3, pp. 317-332.
    [X690]
    Recommendation X.690 — Information Technology — ASN.1 Encoding Rules — Specification of Basic Encoding Rules (BER), Canonical Encoding Rules (CER), and Distinguished Encoding Rules (DER). International Telecommunication Union.
    [XFN]
    XFN 1.1 profile, T. Çelik, M. Mullenweg, E. Meyer. GMPG.
    [XHR]
    XMLHttpRequest, A. van Kesteren. WHATWG.
    [XML]
    Extensible Markup Language, T. Bray, J. Paoli, C. Sperberg-McQueen, E. Maler, F. Yergeau. W3C.
    [XMLBASE]
    XML Base, J. Marsh, R. Tobin. W3C.
    [XMLNS]
    Namespaces in XML, T. Bray, D. Hollander, A. Layman, R. Tobin. W3C.
    [XMLSSPI]
    Associating Style Sheets with XML documents, J. Clark, S. Pieters, H. Thompson. W3C.
    [XPATH10]
    XML Path Language (XPath) Version 1.0, J. Clark, S. DeRose. W3C.
    [XSLT10]
    (Non-normative) XSL Transformations (XSLT) Version 1.0, J. Clark. W3C.
 
 
-  
    Acknowledgments
     
+  
    Acknowledgements
     
 
   
    Thanks to Tim Berners-Lee for inventing HTML, without which none of this would exist.
    
 
@@ -84220,10 +84215,10 @@ if (s = prompt('What is your name?')) {
   lists.
 
   
    Special thanks to Richard Williamson for creating the first implementation of
-  canvas in Safari, from which the canvas feature was designed.
    
+  canvas in Safari, from which the canvas feature was designed.
    
 
   
    Special thanks also to the Microsoft employees who first implemented the event-based
-  drag-and-drop mechanism, contenteditable, and other
+  drag-and-drop mechanism, contenteditable, and other
   features first widely deployed by the Windows Internet Explorer browser.
    
 
   
    Special thanks and $10,000 to David Hyatt who came up with a broken implementation
@@ -84243,7 +84238,7 @@ if (s = prompt('What is your name?')) {
   
    Thanks to Igor Zhbanov for generating PDF versions of the specification.
    
 
   
    This specification is written by Ian Hickson (Google, ian@hixie.ch), with contributions from
-  Simon Pieters (Opera, simonp@opera.com) in the img section.
    
+  Simon Pieters (Opera, simonp@opera.com) in the img section.
    
 
   
   
    
@@ -84287,3 +84282,4 @@ if (s = prompt('What is your name?')) {
 
 
 
+
diff --git a/source b/source
index b6d32396101..78e5e0b7289 100644
--- a/source
+++ b/source
@@ -324,7 +324,7 @@
     
    HTML
    
     
    Living Standard — Last Updated [DATE: 01 Jan 1901]
    
    
-   
+   
   
 
-  
    
+  
    
 
-  
    
+  
    
 
-  
    Table of contents
    
+  
    Table of contents
    
   
 
-  
    
-
   
 
-  
    Introduction
    
+  
    Introduction
    
 
   
    
 
@@ -1919,7 +1917,7 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
 
 
 
-  
    Common infrastructure
    
+  
    Common infrastructure
    
 
   
    Terminology
    
 
@@ -3205,13 +3203,12 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
 
    
    
 
-    
    Implementations may support WebVTT as a text track format for subtitles, captions,
-    chapter titles, metadata, etc, for media resources. 
    
+    
    Implementations may support WebVTT as a text track format for subtitles, captions, chapter
+    titles, metadata, etc, for media resources. 
    
 
     
    The following terms, used in this specification, are defined in the WebVTT specification:
    
 
     
      
-     
    • WebVTT interface
      
    • WebVTT file
      
    • WebVTT file using cue text
      
    • WebVTT file using chapter title text
@@ -3220,6 +3217,7 @@ a.setAttribute('href', 'http://example.com/'); // change the content attribute d
      
    • The rules for updating the display of WebVTT text tracks
      
    • The rules for interpreting WebVTT cue text
      
    • The WebVTT text track cue writing direction
+     
    • VTTCue interface
     
    
 
    
    
@@ -8454,7 +8452,7 @@ interface DOMStringMap {
 
 
 
-  
    Semantics, structure, and APIs of HTML documents
    
+  
    Semantics, structure, and APIs of HTML documents
    
 
   
    Documents
    
 
@@ -12850,7 +12848,7 @@ plaintext     = *( %x0000-2029 / %x202F-2065 / %x206A-10FFFF )
 
 
 
-  
    The elements of HTML
    
+  
    The elements of HTML
    
 
   
    The root element
    
 
@@ -21624,5893 +21622,5906 @@ Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(h
 
 
 
+  
 
-  
    Edits
    
+  
    Introduction
    
 
-  
    The ins and del elements represent edits to the document.
    
+  
    Links are a conceptual construct, created by a, area, and
+  link elements, that represent a connection between
+  two resources, one of which is the current Document. There are two kinds of links in
+  HTML:
    
 
+  
    
 
-  
    The ins element
    
+   
    Links to external resources
    
 
-  
    
-   
    Categories:
    
-   
    Flow content.
    
-   
    Phrasing content.
    
-   
    Palpable content.
    
-   
    Contexts in which this element can be used:
    
-   
    Where phrasing content is expected.
    
-   
    Content model:
    
-   
    Transparent.
    
-   
    Content attributes:
    
-   
    Global attributes
    
-   
    cite
    
-   
    datetime
    
-   
    DOM interface:
    
-   
    Uses the HTMLModElement interface.
    
-  
    
+   
    These are links to resources that are to be used to augment the current document,
+   generally automatically processed by the user agent.
    
 
-  
    The ins element represents an addition to the document.
    
+   
    Hyperlinks
    
 
-  
    
+   
    These are links to other resources that are generally exposed to the user by the user
+   agent so that the user can cause the user agent to navigate to those resources, e.g.
+   to visit them in a browser or download them.
    
 
-   
    The following represents the addition of a single paragraph:
    
+  
    
 
-   
    <aside>
- <ins>
-  <p> I like fruit. </p>
- </ins>
-</aside>
    
+  
    For link elements with an href attribute and a
+  rel attribute, links must be created for the keywords of the
+  rel attribute, as defined for those keywords in the link types section.
    
 
-   
    As does the following, because everything in the aside element here counts as
-   phrasing content and therefore there is just one paragraph:
    
+  
    Similarly, for a and area elements with an href attribute and a rel attribute, links must be created for the keywords of the
+  rel attribute as defined for those keywords in the link types section. Unlike link elements, however,
+  a and area element with an href
+  attribute that either do not have a rel attribute, or
+  whose rel attribute has no keywords that are defined as
+  specifying hyperlinks, must also create a hyperlink.
+  This implied hyperlink has no special meaning (it has no link type)
+  beyond linking the element's document to the resource given by the element's href attribute.
    
 
-   
    <aside>
- <ins>
-  Apples are <em>tasty</em>.
- </ins>
- <ins>
-  So are pears.
- </ins>
-</aside>
    
+  
    A hyperlink can have one or more hyperlink
+  annotations that modify the processing semantics of that hyperlink.
    
 
-
    -

    ins elements should not cross implied paragraph - boundaries.

    +

    Links created by a and area elements

    -
    +

    The href attribute on a and + area elements must have a value that is a valid URL potentially surrounded by + spaces.

    -

    The following example represents the addition of two paragraphs, the second of which was - inserted in two parts. The first ins element in this example thus crosses a - paragraph boundary, which is considered poor form.

    +

    The href attribute on a and + area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

    - 
    <aside>
- <!-- don't do this -->
- <ins datetime="2005-03-16 00:00Z">
-  <p> I like fruit. </p>
-  Apples are <em>tasty</em>.
- </ins>
- <ins datetime="2007-12-19 00:00Z">
-  So are pears.
- </ins>
-</aside>
    +

    The target attribute, if present, must be + a valid browsing context name or keyword. It gives the name of the browsing + context that will be used. User agents use this name when + following hyperlinks.

    -

    Here is a better way of marking this up. It uses more elements, but none of the elements cross - implied paragraph boundaries.

    +

    When an a or area element's activation behavior is + invoked, the user agent may allow the user to indicate a preference regarding whether the + hyperlink is to be used for navigation or whether the resource it + specifies is to be downloaded.

    - 
    <aside>
- <ins datetime="2005-03-16 00:00Z">
-  <p> I like fruit. </p>
- </ins>
- <ins datetime="2005-03-16 00:00Z">
-  Apples are <em>tasty</em>.
- </ins>
- <ins datetime="2007-12-19 00:00Z">
-  So are pears.
- </ins>
-</aside>
    +

    In the absence of a user preference, the default should be navigation if the element has no + download attribute, and should be to download the + specified resource if it does.

    - +

    Whether determined by the user's preferences or via the presence or absence of the attribute, + if the decision is to use the hyperlink for navigation then the user + agent must follow the hyperlink, and if the decision is + to use the hyperlink to download a resource, the user agent must download the hyperlink. These terms are defined in subsequent sections + below.

    -
    +

    The download attribute, if present, + indicates that the author intends the hyperlink to be used for downloading a resource. The + attribute may have a value; the value, if any, specifies the default file name that the author + recommends for use in labeling the resource in a local file system. There are no restrictions on + allowed values, but authors are cautioned that most file systems have limitations with regard to + what punctuation is supported in file names, and user agents are likely to adjust file names + accordingly.

    -

    The del element

    +

    The ping attribute, if present, + gives the URLs of the resources that are interested in being notified if the user follows the + hyperlink. The value must be a set of space-separated tokens, each of which must be a + valid non-empty URL. The value is used by the user agent for + hyperlink auditing.

    -
    -
    Categories:
    -
    Flow content.
    -
    Phrasing content.
    -
    Contexts in which this element can be used:
    -
    Where phrasing content is expected.
    -
    Content model:
    -
    Transparent.
    -
    Content attributes:
    -
    Global attributes
    -
    cite
    -
    datetime
    -
    DOM interface:
    -
    Uses the HTMLModElement interface.
    -
    +

    The rel attribute on a and + area elements controls what kinds of links the elements create. The attribute's value + must be a set of space-separated tokens. The allowed keywords + and their meanings are defined below.

    -

    The del element represents a removal from the document.

    +

    The rel attribute has no default value. If the + attribute is omitted or if none of the values in the attribute are recognised by the user agent, + then the document has no particular relationship with the destination resource other than there + being a hyperlink between the two.

    -

    del elements should not cross implied paragraph - boundaries.

    +

    The hreflang attribute on + a and area elements that create hyperlinks, if present, gives the language of the linked resource. It is + purely advisory. The value must be a valid BCP 47 language tag. + User agents must not consider this attribute authoritative — upon + fetching the resource, user agents must use only language information associated with the resource + to determine its language, not metadata included in the link to the resource.

    -
    +

    The type attribute, if present, gives the + MIME type of the linked resource. It is purely advisory. The value must be a + valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the + resource, user agents must not use metadata included in the link to the resource to determine its + type.

    -

    The following shows a "to do" list where items that have been done are crossed-off with the - date and time of their completion.

    - 
    <h1>To Do</h1>
-<ul>
- <li>Empty the dishwasher</li>
- <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
- <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
- <li>Buy a printer</li>
-</ul>
    +
    -
    +

    Following hyperlinks

    +

    When a user follows a hyperlink created by an element + subject, the user agent must run the following steps:

    +
      -

      Attributes common to ins and del elements

      +

    1. Let replace be false.

      2. -

      The cite attribute may be used to specify the - address of a document that explains the change. When that document is long, for instance the - minutes of a meeting, authors are encouraged to include a fragment identifier pointing to the - specific part of that document that discusses the change.

      +

    2. Let source be the browsing context that contains the + Document object with which subject in question is + associated.

      3. -

      If the cite attribute is present, it must be a valid - URL potentially surrounded by spaces that explains the change. To obtain - the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such - citation links, but they are primarily intended for private use (e.g. by server-side scripts - collecting statistics about a site's edits), not for readers.

      +
    3. +

      If the user indicated a specific browsing context when following the hyperlink, + or if the user agent is configured to follow hyperlinks by navigating a particular browsing + context, then let target be that browsing context.

      -

      The datetime attribute may be used to specify - the time and date of the change.

      +

      Otherwise, if subject is an a or area element + that has a target attribute, then let target be the browsing context that is chosen by applying the + rules for choosing a browsing context given a browsing context name, using the value of + the target attribute as the browsing context name. If + these rules result in the creation of a new browsing context, set replace to true.

      -

      If present, the datetime attribute's value must be a - valid date string with optional time.

      +

      Otherwise, if the hyperlink is a sidebar + hyperlink, the user agent implements a feature that can be considered a secondary + browsing context, and the user agent intends to use this feature in this instance, let + target be such a secondary browsing context.

      -
      +

      Otherwise, if target is an a or area element + with no target attribute, but the + Document contains a base element with a target attribute, then let target be the + browsing context that is chosen by applying the rules for choosing a browsing + context given a browsing context name, using the value of the target attribute of the first such base element as + the browsing context name. If these rules result in the creation of a new browsing + context, set replace to true.

      -

      User agents must parse the datetime attribute according - to the parse a date or time string algorithm. If that doesn't return a date or a global date and time, - then the modification has no associated timestamp (the value is non-conforming; it is not a - valid date string with optional time). Otherwise, the modification is marked as - having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated - time-zone offset information to determine which time zone to present the given datetime in.

      +

      Otherwise, let target be the browsing context that subject itself is in.

      -
      +
      4. -

      This value may be shown to the user, but it is primarily intended for - private use.

      +

    4. Resolve the URL given by the href attribute of that element, relative to that + element.

      5. -

      The ins and del elements must implement the - HTMLModElement interface:

      +
    5. - 
      interface HTMLModElement : HTMLElement {
-           attribute DOMString cite;
-           attribute DOMString dateTime;
-};
      +

      If that is successful, let URL be the resulting absolute + URL.

      -
      +

      Otherwise, if resolving the URL failed, the + user agent may report the error to the user in a user-agent-specific manner, may queue a + task to navigate the target + browsing context to an error page to report the error, or may ignore the error and + do nothing. In any case, the user agent must then abort these steps.

      -

      The cite IDL attribute must reflect - the element's cite content attribute. The dateTime IDL attribute must reflect the - element's datetime content attribute.

      +
      6. -
    +

  • In the case of server-side image maps, append the hyperlink + suffix to URL.

    • +
  • +

    Queue a task to navigate the target browsing context to URL. If replace is true, the navigation must be performed with replacement + enabled. The source browsing context must be source.

    -

    Edits and paragraphs

    +
    • - + -

    Since the ins and del elements do not affect paragraphing, it is possible, in some cases where paragraphs are implied (without explicit p elements), for an - ins or del element to span both an entire paragraph or other - non-phrasing content elements and part of another paragraph. For example:

    +

    The task source for the tasks mentioned above is the DOM manipulation task + source.

    - 
    <section>
- <ins>
-  <p>
-   This is a paragraph that was inserted.
-  </p>
-  This is another paragraph whose first sentence was inserted
-  at the same time as the paragraph above.
- </ins>
- This is a second sentence, which was there all along.
-</section>
    + -

    By only wrapping some paragraphs in p elements, one can even get the end of one - paragraph, a whole second paragraph, and the start of a third paragraph to be covered by the same - ins or del element (though this is very confusing, and not considered - good practice):

    - 
    <section>
- This is the first paragraph. <ins>This sentence was
- inserted.
- <p>This second paragraph was inserted.</p>
- This sentence was inserted too.</ins> This is the
- third paragraph in this example.
- <!-- (don't do this) -->
-</section>
    + -

    However, due to the way implied paragraphs are defined, it is - not possible to mark up the end of one paragraph and the start of the very next one using the same - ins or del element. You instead have to use one (or two) p - element(s) and two ins or del elements, as for example:

    +

    Downloading resources

    - 
    <section>
- <p>This is the first paragraph. <del>This sentence was
- deleted.</del></p>
- <p><del>This sentence was deleted too.</del> That
- sentence needed a separate &lt;del&gt; element.</p>
-</section>
    +

    In some cases, resources are intended for later use rather than immediate viewing. To indicate + that a resource is intended to be downloaded for use later, rather than immediately used, the + download attribute can be specified on the + a or area element that creates the hyperlink to that + resource.

    -

    Partly because of the confusion described above, authors are strongly encouraged to always mark - up all paragraphs with the p element, instead of having ins or - del elements that cross implied paragraphs - boundaries.

    +

    The attribute can furthermore be given a value, to specify the file name that user agents are + to use when storing the resource in a file system. This value can be overridden by the Content-Disposition HTTP header's filename parameters.

    +

    In cross-origin situations, the download attribute + has to be combined with the Content-Disposition HTTP + header, specifically with the attachment disposition type, to avoid the user + being warned of possibly nefarious activity. (This is to protect users from being made to download + sensitive personal or confidential information without their full understanding.)

    -

    Edits and lists

    +
    - +
    -

    The content models of the ol and ul elements do not allow - ins and del elements as children. Lists always represent all their - items, including items that would otherwise have been marked as deleted.

    +

    When a user downloads a hyperlink created by an + element, the user agent must run the following steps:

    -

    To indicate that an item is inserted or deleted, an ins or del - element can be wrapped around the contents of the li element. To indicate that an - item has been replaced by another, a single li element can have one or more - del elements followed by one or more ins elements.

    +
      -
      +

    1. Resolve the URL given by the href attribute of that element, relative to that + element.

      2. -

      In the following example, a list that started empty had items added and removed from it over - time. The bits in the example that have been emphasized show the parts that are the "current" - state of the list. The list item numbers don't take into account the edits, though.

      +

    2. If resolving the URL fails, the user agent + may report the error to the user in a user-agent-specific manner, may + navigate to an error page to report the error, or may + ignore the error and do nothing. In either case, the user agent must abort these steps.

      - 
      <h1>Stop-ship bugs</h1>
-<ol>
- <li><ins datetime="2008-02-12T15:20Z">Bug 225:
- Rain detector doesn't work in snow</ins></li>
- <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
- Water buffer overflows in April</ins></del></li>
- <li><ins datetime="2008-02-16T13:50Z">Bug 230:
- Water heater doesn't use renewable fuels</ins></li>
- <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
- Carbon dioxide emissions detected after startup</ins></del></li>
-</ol>
      +

    3. Otherwise, let URL be the resulting absolute + URL.

      4. -
      +

    4. In the case of server-side image maps, append the hyperlink + suffix to URL.

      5. -
      +

    5. Return to whatever algorithm invoked these steps and continue + these steps asynchronously.

      6. -

      In the following example, a list that started with just fruit was replaced by a list with just - colours.

      +

    6. Fetch URL and handle the resulting resource + as a download.

      7. - 
      <h1>List of <del>fruits</del><ins>colours</ins></h1>
-<ul>
- <li><del>Lime</del><ins>Green</ins></li>
- <li><del>Apple</del></li>
- <li>Orange</li>
- <li><del>Pear</del></li>
- <li><ins>Teal</ins></li>
- <li><del>Lemon</del><ins>Yellow</ins></li>
- <li>Olive</li>
- <li><ins>Purple</ins></li>
-</ul>
      +
    -
    +

    When a user agent is to handle a resource obtained from a fetch algorithm as + a download, it should provide the user with a way to save the resource for later use, if a + resource is successfully obtained; or otherwise should report any problems downloading the file to + the user.

    +

    If the user agent needs a file name for a resource being handled as a download, it + should select one using the following algorithm.

    -

    Edits and tables

    +

    This algorithm is intended to mitigate security dangers involved in downloading + files from untrusted sites, and user agents are strongly urged to follow it.

    - +
      -

      The elements that form part of the table model have complicated content model requirements that - do not allow for the ins and del elements, so indicating edits to a - table can be difficult.

      +

    1. Let filename be the void value.

      2. -

      To indicate that an entire row or an entire column has been added or removed, the entire - contents of each cell in that row or column can be wrapped in ins or del - elements (respectively).

      + +

    2. If the resource has a Content-Disposition + header, that header specifies the attachment disposition type, and the + header includes file name information, then let filename have the value + specified by the header, and jump to the step labeled sanitize below.

      3. -
      +

    3. Let interface origin be the origin of the + Document in which the download or + navigate action resulting in the download was initiated, if any.

      4. -

      Here, a table's row has been added:

      +

    4. Let resource origin be the origin of the URL of the + resource being downloaded, unless that URL's scheme + component is data, in which case let resource origin be + the same as the interface origin, if any.

      5. - 
      <table>
- <thead>
-  <tr> <th> Game name           <th> Game publisher   <th> Verdict
- <tbody>
-  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
-  <tr> <td> Portal              <td> Valve            <td> 10/10
-  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
-</table>
      +

    5. If there is no interface origin, then let trusted + operation be true. Otherwise, let trusted operation be true if resource origin is the same origin as interface + origin, and false otherwise.

      6. -

      Here, a column has been removed (the time at which it was removed is given also, as is a link - to the page explaining why):

      + +

    6. If trusted operation is true and the resource has a Content-Disposition header and that header includes file + name information, then let filename have the value specified by the header, + and jump to the step labeled sanitize below.

      7. - 
      <table>
- <thead>
-  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
- <tbody>
-  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
-  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
-  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
-</table>
      +

    7. If the download was not initiated from a hyperlink created by an + a or area element, or if the element of the hyperlink from + which it was initiated did not have a download + attribute when the download was initiated, or if there was such an attribute but its value when + the download was initiated was the empty string, then jump to the step labeled no proposed + file name.

      8. -
      +

    8. Let proposed filename have the value of the download attribute of the element of the + hyperlink that initiated the download at the time the download was + initiated.

      9. -

      Generally speaking, there is no good way to indicate more complicated edits (e.g. that a cell - was removed, moving all subsequent cells up or to the left).

      + + + +

    9. If trusted operation is true, let filename have + the value of proposed filename, and jump to the step labeled sanitize + below.

      10. + +

    10. If the resource has a Content-Disposition + header and that header specifies the attachment disposition type, let filename have the value of proposed filename, and jump to the + step labeled sanitize below.

      11. + +

    11. No proposed file name: If trusted operation is true, or if the + user indicated a preference for having the resource in question downloaded, let filename have a value derived from the URL of the resource in a + user-agent-defined manner, and jump to the step labeled sanitize below.

      12. + +
    12. -

      Embedded content

      +

      Act in a user-agent-defined manner to safeguard the user from a potentially hostile + cross-origin download. If the download is not to be aborted, then let filename be set to the user's preferred file name or to a file name selected by + the user agent, and jump to the step labeled sanitize below.

      - +
      +

      If the algorithm reaches this step, then a download was begun from a different origin than + the resource being downloaded, and the origin did not mark the file as suitable for + downloading, and the download was not initiated by the user. This could be because a download attribute was used to trigger the download, or + because the resource in question is not of a type that the user agent supports.

      -
      Requirements for providing text to act as an alternative for images
      +

      This could be dangerous, because, for instance, a hostile server could be trying to get a + user to unknowingly download private information and then re-upload it to the hostile server, + by tricking the user into thinking the data is from the hostile server.

      +

      Thus, it is in the user's interests that the user be somehow notified that the resource in + question comes from quite a different source, and to prevent confusion, any suggested file name + from the potentially hostile interface origin should be ignored.

      -
      General guidelines
      +
      -

      Except where otherwise specified, the alt attribute must be - specified and its value must not be empty; the value must be an appropriate replacement for the - image. The specific requirements for the alt attribute depend on - what the image is intended to represent, as described in the following sections.

      - -

      The most general rule to consider when writing alternative text is the following: the - intent is that replacing every image with the text of its alt - attribute not change the meaning of the page.

      +
      13. -

      So, in general, alternative text can be written by considering what one would have written had - one not been able to include the image.

      +

    13. Sanitize: Optionally, allow the user to influence filename. For + example, a user agent could prompt the user for a file name, potentially providing the value of + filename as determined above as a default value.

      14. -

      A corollary to this is that the alt attribute's value should - never contain text that could be considered the image's caption, title, or - legend. It is supposed to contain replacement text that could be used by users - instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.

      +
    14. -

      Another corollary is that the alt attribute's value should - not repeat information that is already provided in the prose next to the image.

      +

      Adjust filename to be suitable for the local file system.

      -

      One way to think of alternative text is to think about how you would read the page - containing the image to someone over the phone, without mentioning that there is an image present. - Whatever you say instead of the image is typically a good start for writing the alternative - text.

      +

      For example, this could involve removing characters that are not legal in + file names, or trimming leading and trailing whitespace.

      +
      15. -
      A link or button containing nothing but the image
      +

    15. If the platform conventions do not in any way use extensions to determine the types of file on the file system, + then return filename as the file name and abort these steps.

      16. -

      When an a element that creates a hyperlink, or a button - element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of - the link or button.

      +

    16. Let claimed type be the type given by the resource's Content-Type metadata, if any is known. Let named + type be the type given by filename's extension, if any is known. For the purposes of this step, a + type is a mapping of a MIME type to an extension.

      17. -
      +

    17. If named type is consistent with the user's preferences (e.g. because + the value of filename was determined by prompting the user), then return filename as the file name and abort these steps.

      18. -

      In this example, a user is asked to pick his preferred colour from a list of three. Each colour - is given by an image, but for users who have configured their user agent not to display images, - the colour names are used instead:

      +

    18. If claimed type and named type are the same type + (i.e. the type given by the resource's Content-Type metadata is + consistent with the type given by filename's extension), then return filename as the file + name and abort these steps.

      19. - 
      <h1>Pick your colour</h1>
-<ul>
- <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
- <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
- <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
-</ul>
      +
    19. -
      20. +

      If the claimed type is known, then alter filename to + add an extension corresponding to claimed + type.

      -
      +

      Otherwise, if named type is known to be potentially dangerous (e.g. it + will be treated by the platform conventions as a native executable, shell script, HTML + application, or executable-macro-capable document) then optionally alter filename to add a known-safe extension + (e.g. ".txt").

      -

      In this example, each button has a set of images to indicate the kind of colour output desired - by the user. The first image is used in each case to give the alternative text.

      +

      This last step would make it impossible to download executables, which might not + be desirable. As always, implementors are forced to balance security and usability in this + matter.

      - 
      <button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
-<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
      + -

      Since each image represents one part of the text, it could also be written like this:

      +

    20. Return filename as the file name.

      21. - 
      <button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
-<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>
      +
    -

    However, with other alternative text, this might not work, and putting all the alternative - text into one image in each case might make more sense:

    +

    For the purposes of this algorithm, a file extension + consists of any part of the file name that platform conventions dictate will be used for + identifying the type of the file. For example, many operating systems use the part of the file + name following the last dot (".") in the file name to determine the type of + the file, and from that the manner in which the file is to be opened or executed.

    - 
    <button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
-<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
    +

    User agents should ignore any directory or path information provided by the resource itself, + its URL, and any download attribute, in + deciding where to store the resulting file in the user's file system.

    + -
    A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
    +
    -

    Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a - diagram, a graph, or a simple map showing directions. In such cases, an image can be given using - the img element, but the lesser textual version must still be given, so that users - who are unable to view the image (e.g. because they have a very slow connection, or because they - are using a text-only browser, or because they are listening to the page being read out by a - hands-free automobile voice Web browser, or simply because they are blind) are still able to - understand the message being conveyed.

    +
    Hyperlink auditing
    -

    The text must be given in the alt attribute, and must convey - the same message as the image specified in the src - attribute.

    +

    If a hyperlink created by an a or area element has a + ping attribute, and the user follows the hyperlink, and + the value of the element's href attribute can be resolved, relative to the element, without failure, then the user + agent must take the ping attribute's value, split that string on spaces, resolve each resulting token relative to the element, and then each resulting absolute URL ping URL should + be fetched from the origin of the + Document containing the hyperlink (as described below). (Tokens that fail to resolve are ignored.) This may be done in parallel + with the primary request, and is independent of the result of that request.

    -

    It is important to realise that the alternative text is a replacement for the image, - not a description of the image.

    +

    User agents should allow the user to adjust this behavior, for example in conjunction with a + setting that disables the sending of HTTP Referer (sic) + headers. Based on the user's preferences, UAs may either ignore the ping attribute altogether, or selectively ignore URLs in the + list (e.g. ignoring any third-party URLs).

    -
    +

    For each ping URL that is an HTTP URL, the request must be performed using + the POST method, with an entity body with the MIME type text/ping + consisting of the four-character string "PING". All relevant cookie and + HTTP authentication headers must be included in the request. Which other headers are required + depends on the URLs involved, as follows. For the purposes of these requirements, target URL is the resulting absolute URL obtained from resolving the value of the element's href attribute.

    -

    In the following example we have a flowchart - in image form, with text in the alt attribute rephrasing the - flowchart in prose form:

    +
    - 
    <p>In the common case, the data handled by the tokenization stage
-comes from the network, but it can also come from script.</p>
-<p><img src="images/parsing-model-overview.png" alt="The Network
-passes data to the Input Stream Preprocessor, which passes it to the
-Tokenizer, which passes it to the Tree Construction stage. From there,
-data goes to both the DOM and to Script Execution. Script Execution is
-linked to the DOM, and, using document.write(), passes data to the
-Tokenizer."></p>
    +
    If both the address of the Document + object containing the hyperlink being audited and ping URL have the + same origin
    -
    +
    The request must include a Ping-From HTTP header with, + as its value, the address of the document containing + the hyperlink, and a Ping-To HTTP header with, as its value, + the target URL. The request must not include a Referer (sic) HTTP header.
    -
    +
    Otherwise, if the origins are different, but the document containing the hyperlink being + audited was not retrieved over an encrypted connection
    -

    Here's another example, showing a good solution and a bad solution to the problem of including - an image in a description.

    +
    The request must include a Referer (sic) HTTP header with, + as its value, the address of the document containing + the hyperlink, a Ping-From HTTP header with the same value, + and a Ping-To HTTP header with, as its value, target URL.
    -

    First, here's the good solution. This sample shows how the alternative text should just be - what you would have put in the prose if the image had never existed.

    +
    Otherwise, the origins are different and the document containing the hyperlink being audited + was retrieved over an encrypted connection
    - 
    <!-- This is the correct way to do things. -->
-<p>
- You are standing in an open field west of a house.
- <img src="house.jpeg" alt="The house is white, with a boarded front door.">
- There is a small mailbox here.
-</p>
    +
    The request must include a Ping-To HTTP header with, as + its value, target URL. The request must neither include a Referer (sic) HTTP header nor include a Ping-From HTTP header.
    -

    Second, here's the bad solution. In this incorrect way of doing things, the alternative text - is simply a description of the image, instead of a textual replacement for the image. It's bad - because when the image isn't shown, the text doesn't flow as well as in the first example.

    + - 
    <!-- This is the wrong way to do things. -->
-<p>
- You are standing in an open field west of a house.
- <img src="house.jpeg" alt="A white house, with a boarded front door.">
- There is a small mailbox here.
-</p>
    +

    To save bandwidth, implementors might also wish to consider omitting optional + headers such as Accept from these requests.

    -

    Text such as "Photo of white house with boarded door" would be equally bad alternative text - (though it could be suitable for the title attribute or in the - figcaption element of a figure with this image).

    +

    User agents must, unless otherwise specified by the user, honor the HTTP headers (including, in + particular, redirects and HTTP cookie headers), but must ignore any entity bodies returned in the + responses. User agents may close the connection prematurely once they start receiving an entity + body.

    -
    +

    When the ping attribute is present, user agents + should clearly indicate to the user that following the hyperlink will also cause secondary + requests to be sent in the background, possibly including listing the actual target URLs.

    +

    For example, a visual user agent could include the hostnames of the target ping + URLs along with the hyperlink's actual URL in a status bar or tooltip.

    -
    A short phrase or label with an alternative graphical representation: icons, logos
    + -

    A document can contain information in iconic form. The icon is intended to help users of visual - browsers to recognise features at a glance.

    +
    -

    In some cases, the icon is supplemental to a text label conveying the same meaning. In those - cases, the alt attribute must be present but must be empty.

    +

    The ping attribute is redundant with pre-existing + technologies like HTTP redirects and JavaScript in allowing Web pages to track which off-site + links are most popular or allowing advertisers to track click-through rates.

    -
    +

    However, the ping attribute provides these advantages + to the user over those alternatives:

    -

    Here the icons are next to text that conveys the same meaning, so they have an empty alt attribute:

    +
      - 
      <nav>
- <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
- <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
- Configuration Tools</a></p>
-</nav>
      +
    • It allows the user to see the final target URL unobscured.
      • -
    +
  • It allows the UA to inform the user about the out-of-band notifications.
    • -

    In other cases, the icon has no text next to it describing what it means; the icon is supposed - to be self-explanatory. In those cases, an equivalent textual label must be given in the alt attribute.

    +
  • It allows the user to disable the notifications without losing the underlying link + functionality.
    • -
    +
  • It allows the UA to optimise the use of available network bandwidth so that the target page + loads faster.
    • -

    Here, posts on a news site are labeled with an icon indicating their topic.

    + - 
    <body>
- <article>
-  <header>
-   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
-   <p><img src="movies.png" alt="Movies"></p>
-  </header>
-  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
-  making this its 8th win in the last 12 years.</p>
- </article>
- <article>
-  <header>
-   <h1>Latest TWiT episode is online</h1>
-   <p><img src="podcasts.png" alt="Podcasts"></p>
-  </header>
-  <p>The latest TWiT episode has been posted, in which we hear
-  several tech news stories as well as learning much more about the
-  iPhone. This week, the panelists compare how reflective their
-  iPhones' Apple logos are.</p>
- </article>
-</body>
    +

    Thus, while it is possible to track users without this feature, authors are encouraged to use + the ping attribute so that the user agent can make the + user experience more transparent.

    -

    Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such - as a company, organization, project, band, software package, country, or some such.

    + -

    If the logo is being used to represent the entity, e.g. as a page heading, the alt attribute must contain the name of the entity being represented by - the logo. The alt attribute must not contain text like - the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity - itself.

    -

    If the logo is being used next to the name of the entity that it represents, then the logo is - supplemental, and its alt attribute must instead be empty.

    -

    If the logo is merely used as decorative material (as branding, or, for example, as a side - image in an article that mentions the entity to which the logo belongs), then the entry below on - purely decorative images applies. If the logo is actually being discussed, then it is being used - as a phrase or paragraph (the description of the logo) with an alternative graphical - representation (the logo itself), and the first entry above applies.

    +

    Link types

    -
    +

    The following table summarizes the link types that are defined by this specification. This + table is non-normative; the actual definitions for the link types are given in the next few + sections.

    -

    In the following snippets, all four of the above cases are present. First, we see a logo used - to represent a company:

    +

    In this section, the term referenced document refers to the resource identified by the + element representing the link, and the term current document refers to the resource within + which the element representing the link finds itself.

    - 
    <h1><img src="XYZ.gif" alt="The XYZ company"></h1>
    +
    -

    Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have - any alternative text: +

    To determine which link types apply to a link, a, or + area element, the element's rel attribute must be split on spaces. The resulting tokens are the link types + that apply to that element.

    - 
    <article>
- <h2>News</h2>
- <p>We have recently been looking at buying the <img src="alpha.gif"
- alt=""> ΑΒΓ company, a small Greek company
- specializing in our type of product.</p>
    +
    -

    In this third snippet, we have a logo being used in an aside, as part of the larger article - discussing the acquisition:

    +

    Except where otherwise specified, a keyword must not be specified more than once per rel attribute.

    -
     <aside><p><img src="alpha-large.gif" alt=""></p></aside>
- <p>The ΑΒΓ company has had a good quarter, and our
- pie chart studies of their accounts suggest a much bigger blue slice
- than its green and orange slices, which is always a good sign.</p>
-</article>
    +

    Link types are always ASCII case-insensitive, and must be + compared as such.

    -

    Finally, we have an opinion piece talking about a logo, and the logo is therefore described in - detail in the alternative text.

    +

    Thus, rel="next" is the same as rel="NEXT".

    - 
    <p>Consider for a moment their logo:</p>
+  
+   
+    
+     
+     
+     
+    
+    
+     
+     
+    
+   
+   
 
-<p><img src="/images/logo" alt="It consists of a green circle with a
-green question mark centered inside it."></p>
+    
+     
+     
+     
+     
+    
 
-<p>How unoriginal can you get? I mean, oooooh, a question mark, how
-<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
-sure everyone will rush to adopt those specifications now! They could
-at least have tried for some sort of, I don't know, sequence of
-rounded squares with varying shades of green and bold white outlines,
-at least that would look good on the cover of a blue book.</p>
+    
+     
+     
+     
+     
+    
 
-   
    This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into
-   the surrounding text, as if the image had never been there in the first place.
    
+    
+     
+     
+     
+     
+    
 
-  
+    
 
+    
+    
+     
+     
+     
+     
+    
 
-  
    Text that has been rendered to a graphic for typographical effect
    
+    
+     
+     
+     
+     
+    
 
-  
    Sometimes, an image just consists of text, and the purpose of the image is not to highlight the
-  actual typographic effects used to render the text, but just to convey the text itself.
    
+    
+     
+     
+     
+     
+    
 
-  
    In such cases, the alt attribute must be present but must
-  consist of the same text as written in the image itself.
    
+    
+     
+     
+     
+     
+    
 
-  
    
+    
    
+     
+     
+     
+     
+    
 
-   
    Consider a graphic containing the text "Earth Day", but with the letters all decorated with
-   flowers and plants. If the text is merely being used as a heading, to spice up the page for
-   graphical users, then the correct alternative text is just the same text "Earth Day", and no
-   mention need be made of the decorations:
    
+    
+     
+     
+     
+     
+    
 
-   
    <h1><img src="earthdayheading.png" alt="Earth Day"></h1>
    
+    
+     
+     
+     
+     
+    
 
-  
+    
+     
+     
+     
+     
+    
 
-  
    
+    
    
+     
+     
+     
+     
+    
 
-   
    An illuminated manuscript might use graphics for some of its images. The alternative text in
-   such a situation is just the character that the image represents.
    
+    
+     
+     
+     
+     
+    
 
-   
    <p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
-night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
-away, in a small house, on a hill, under a full moon...
    
+    
+     
+     
+     
+     
+    
 
-  
+    
+     
+     
+     
+     
+    
 
-  
    When an image is used to represent a character that cannot otherwise be represented in Unicode,
-  for example gaiji, itaiji, or new characters such as novel currency symbols, the alternative text
-  should be a more conventional way of writing the same thing, e.g. using the phonetic hiragana or
-  katakana to give the character's pronunciation.
    
+    
+     
+     
+     
+     
+    
 
-  
    
+    
    
+     
+     
+     
+     
+    
 
-   
    In this example from 1997, a new-fangled currency symbol that looks like a curly E with two
-   bars in the middle instead of one is represented using an image. The alternative text gives the
-   character's pronunication.
    
+   
+  
    Link typeEffect on...Brief description
    linka and area
    alternate HyperlinkHyperlinkGives alternate representations of the current document.
    authorHyperlinkHyperlinkGives a link to the author of the current document or article.
    bookmark not allowedHyperlinkGives the permalink for the nearest ancestor section.
    externalnot allowedAnnotationIndicates that the referenced document is not part of the same site as the current document.
    helpHyperlinkHyperlinkProvides a link to context-sensitive help.
    icon External Resourcenot allowedImports an icon to represent the current document.
    license HyperlinkHyperlinkIndicates that the main content of the current document is covered by the copyright license described by the referenced document.
    nextHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the next document in the series is the referenced document.
    nofollow not allowedAnnotationIndicates that the current document's original author or publisher does not endorse the referenced document.
    noreferrernot allowedAnnotationRequires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.
    pingbackExternal Resourcenot allowedGives the address of the pingback server that handles pingbacks to the current document.
    prefetchExternal ResourceExternal ResourceSpecifies that the target resource should be preemptively cached.
    prev HyperlinkHyperlinkIndicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
     
    search HyperlinkHyperlinkGives a link to a resource that can be used to search through the current document and its related pages.
    sidebar HyperlinkHyperlinkSpecifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).
    stylesheet External Resourcenot allowedImports a stylesheet.
    tag not allowedHyperlinkGives a tag (identified by the given address) that applies to the current document.
    
 
-   
    <p>Only <img src="euro.png" alt="euro ">5.99!
    
+  
    
 
-  
    
+  
    Some of the types described below list synonyms for these values. These are to be handled as specified by user agents, but must not be used
+  in documents.
    
 
-  
    An image should not be used if Unicode characters would serve an identical purpose. Only when
-  the text cannot be directly represented using Unicode, e.g. because of decorations or because the
-  character is not in the Unicode character set (as in the case of gaiji), would an image be
-  appropriate.
    
+
    -

    If an author is tempted to use an image because their default system font does not - support a given character, then Web Fonts are a better solution than images.

    + +
    Link type "alternate"
    -
    A graphical representation of some of the surrounding text
    +

    The alternate keyword may be used with link, + a, and area elements.

    -

    In many cases, the image is actually just supplementary, and its presence merely reinforces the - surrounding text. In these cases, the alt attribute must be - present but its value must be the empty string.

    +

    The meaning of this keyword depends on the values of the other attributes.

    -

    In general, an image falls into this category if removing the image doesn't make the page any - less useful, but including the image makes it a lot easier for users of visual browsers to - understand the concept.

    +
    -
    +
    If the element is a link element and the rel + attribute also contains the keyword stylesheet
    -

    A flowchart that repeats the previous paragraph in graphical form:

    +
    - 
    <p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<p><img src="images/parsing-model-overview.png" alt=""></p>
    +

    The alternate keyword modifies the meaning of the stylesheet keyword in the way described for that keyword. The + alternate keyword does not create a link of its own.

    -

    In these cases, it would be wrong to include alternative text that consists of just a caption. - If a caption is to be included, then either the title attribute - can be used, or the figure and figcaption elements can be used. In the - latter case, the image would in fact be a phrase or paragraph with an alternative graphical - representation, and would thus require alternative text.

    +
    - 
    <!-- Using the title="" attribute -->
-<p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<p><img src="images/parsing-model-overview.png" alt=""
-        title="Flowchart representation of the parsing model."></p>
    - 
    <!-- Using <figure> and <figcaption> -->
-<p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<figure>
- <img src="images/parsing-model-overview.png" alt="The Network leads to
- the Input Stream Preprocessor, which leads to the Tokenizer, which
- leads to the Tree Construction stage. The Tree Construction stage
- leads to two items. The first is Script Execution, which leads via
- document.write() back to the Tokenizer. The second item from which
- Tree Construction leads is the DOM. The DOM is related to the Script
- Execution.">
- <figcaption>Flowchart representation of the parsing model.</figcaption>
-</figure>
    +
    If the alternate keyword is used with the type attribute set to the value application/rss+xml or the value application/atom+xml
    - 
    <!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
-<p>The Network passes data to the Input Stream Preprocessor, which
-passes it to the Tokenizer, which passes it to the Tree Construction
-stage. From there, data goes to both the DOM and to Script Execution.
-Script Execution is linked to the DOM, and, using document.write(),
-passes data to the Tokenizer.</p>
-<p><img src="images/parsing-model-overview.png"
-        alt="Flowchart representation of the parsing model."></p>
-<!-- Never put the image's caption in the alt="" attribute! -->
    +
    -
    +

    The keyword creates a hyperlink referencing a syndication feed (though not + necessarily syndicating exactly the same content as the current page).

    -
    +
    -

    A graph that repeats the previous paragraph in graphical form:

    +

    The first link, a, or area element in the document (in + tree order) with the alternate keyword used with the type attribute set to the value application/rss+xml or the value application/atom+xml must + be treated as the default syndication feed for the purposes of feed autodiscovery.

    - 
    <p>According to a study covering several billion pages,
-about 62% of documents on the Web in 2007 triggered the Quirks
-rendering mode of Web browsers, about 30% triggered the Almost
-Standards mode, and about 9% triggered the Standards mode.</p>
-<p><img src="rendering-mode-pie-chart.png" alt=""></p>
    +
    +

    The following link element gives the syndication + feed for the current page:

    + 
    <link rel="alternate" type="application/atom+xml" href="data.xml">
    +

    The following extract offers various different syndication + feeds:

    + 
    <p>You can access the planets database using Atom feeds:</p>
+<ul>
+ <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
+ <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
+ <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
+</ul>
    +
    -
    +
    +
    -
    A purely decorative image that doesn't add any information
    +
    Otherwise
    -

    If an image is decorative but isn't especially page-specific — for example an image that - forms part of a site-wide design scheme — the image should be specified in the site's CSS, - not in the markup of the document.

    +
    -

    However, a decorative image that isn't discussed by the surrounding text but still has some - relevance can be included in a page using the img element. Such images are - decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty - string.

    +

    The keyword creates a hyperlink referencing an alternate representation of the + current document.

    -
    +

    The nature of the referenced document is given by the hreflang, and type attributes.

    -

    Examples where the image is purely decorative despite being relevant would include things like - a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an - image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows - an example of the latter case (only the first verse is included in this snippet):

    +

    If the alternate keyword is used with the hreflang attribute, and that attribute's value differs + from the root element's language, it indicates that the referenced + document is a translation.

    - 
    <h1>The Lady of Shalott</h1>
-<p><img src="shalott.jpeg" alt=""></p>
-<p>On either side the river lie<br>
-Long fields of barley and of rye,<br>
-That clothe the wold and meet the sky;<br>
-And through the field the road run by<br>
-To many-tower'd Camelot;<br>
-And up and down the people go,<br>
-Gazing where the lilies blow<br>
-Round an island there below,<br>
-The island of Shalott.</p>
    +

    If the alternate keyword is used with the type attribute, it indicates that the referenced document is + a reformulation of the current document in the specified format.

    -
    +

    The hreflang and type attributes can be combined when specified with the alternate keyword.

    +
    -
    A group of images that form a single larger picture with no links
    +

    For example, the following link is a French translation that uses the PDF format:

    -

    When a picture has been sliced into smaller image files that are then displayed together to - form the complete picture again, one of the images must have its alt attribute set as per the relevant rules that would be appropriate - for the picture as a whole, and then all the remaining images must have their alt attribute set to the empty string.

    + 
    <link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
    -
    +
    -

    In the following example, a picture representing a company logo for XYZ - Corp has been split into two pieces, the first containing the letters "XYZ" and the second - with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.

    +

    This relationship is transitive — that is, if a document links to two other documents + with the link type "alternate", then, in addition to implying + that those documents are alternative representations of the first document, it is also implying + that those two documents are alternative representations of each other.

    - 
    <h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>
    +
    - + -
    -

    In the following example, a rating is shown as three filled stars and two empty stars. While - the alternative text could have been "★★★☆☆", the author has - instead decided to more helpfully give the rating in the form "3 out of 5". That is the - alternative text of the first image, and the rest have blank alternative text.

    - 
    <p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
-  ><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
-  ><img src="0" alt=""></meter></p>
    +
    Link type "author"
    -
    +

    The author keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    +

    For a and area elements, the author + keyword indicates that the referenced document provides further information about the author of + the nearest article element ancestor of the element defining the hyperlink, if there + is one, or of the page as a whole, otherwise.

    +

    For link elements, the author keyword indicates + that the referenced document provides further information about the author for the page as a + whole.

    -
    A group of images that form a single larger picture with links
    +

    The "referenced document" can be, and often is, a mailto: URL giving the e-mail address of the author.

    -

    Generally, image maps should be used instead of slicing an image - for links.

    +
    -

    However, if an image is indeed sliced and any of the components of the sliced picture are the - sole contents of links, then one image per link must have alternative text in its alt attribute representing the purpose of the link.

    +

    Synonyms: For historical reasons, user agents must also treat + link, a, and area elements that have a rev attribute with the value "made" as having the author keyword specified as a link relationship.

    -
    +
    -

    In the following example, a picture representing the flying spaghetti monster emblem, with - each of the left noodly appendages and the right noodly appendages in different images, so that - the user can pick the left side or the right side in an adventure.

    - 
    <h1>The Church</h1>
-<p>You come across a flying spaghetti monster. Which side of His
-Noodliness do you wish to reach out for?</p>
-<p><a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a
-  ><img src="fsm-middle.png" alt=""
-  ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>
    +
    Link type "bookmark"
    -
    +

    The bookmark keyword may be used with a and + area elements. This keyword creates a hyperlink.

    +

    The bookmark keyword gives a permalink for the nearest + ancestor article element of the linking element in question, or of the section the linking element is most closely associated with, if + there are no ancestor article elements.

    +
    -
    A key part of the content
    +

    The following snippet has three permalinks. A user agent could determine which permalink + applies to which part of the spec by looking at where the permalinks are given.

    -

    In some cases, the image is a critical part of the content. This could be the case, for - instance, on a page that is part of a photo gallery. The image is the whole point of the - page containing it.

    + 
     ...
+ <body>
+  <h1>Example of permalinks</h1>
+  <div id="a">
+   <h2>First example</h2>
+   <p><a href="a.html" rel="bookmark">This permalink applies to
+   only the content from the first H2 to the second H2</a>. The DIV isn't
+   exactly that section, but it roughly corresponds to it.</p>
+  </div>
+  <h2>Second example</h2>
+  <article id="b">
+   <p><a href="b.html" rel="bookmark">This permalink applies to
+   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
+   <article id="c">
+    <p><a href="c.html" rel="bookmark">This permalink applies to
+    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
+   </article>
+  </article>
+ </body>
+ ...
    -

    How to provide alternative text for an image that is a key part of the content depends on the - image's provenance.

    +
    -
    -
    The general case
    +
    Link type "external"
    + -
    +

    The external keyword may be used with a and + area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the + implied hyperlink, if no other keywords create one).

    -

    When it is possible for detailed alternative text to be provided, for example if the image is - part of a series of screenshots in a magazine review, or part of a comic strip, or is a - photograph in a blog entry about that photograph, text that can serve as a substitute for the - image must be given as the contents of the alt attribute.

    +

    The external keyword indicates that the link is leading to a + document that is not part of the site that the current document forms a part of.

    -
    -

    A screenshot in a gallery of screenshots for a new OS, with some alternative text:

    +
    Link type "help"
    - 
    <figure>
- <img src="KDE%20Light%20desktop.png"
-      alt="The desktop is blue, with icons along the left hand side in
-           two columns, reading System, Home, K-Mail, etc. A window is
-           open showing that menus wrap to a second line if they
-           cannot fit in the window. The window has a list of icons
-           along the top, with an address bar below it, a list of
-           icons for tabs along the left edge, a status bar on the
-           bottom, and two panes in the middle. The desktop has a bar
-           at the bottom of the screen with a few buttons, a pager, a
-           list of open applications, and a clock.">
- <figcaption>Screenshot of a KDE desktop.</figcaption>
-</figure>
    +

    The help keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    -
    +

    For a and area elements, the help + keyword indicates that the referenced document provides further help information for the parent of + the element defining the hyperlink, and its children.

    -
    +
    -

    A graph in a financial report:

    +

    In the following example, the form control has associated context-sensitive help. The user + agent could use this information, for example, displaying the referenced document if the user + presses the "Help" or "F1" key.

    - 
    <img src="sales.gif"
-     title="Sales graph"
-     alt="From 1998 to 2005, sales increased by the following percentages
-     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">
    + 
     <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>
    -

    Note that "sales graph" would be inadequate alternative text for a sales graph. Text that - would be a good caption is not generally suitable as replacement text.

    +
    -
    +

    For link elements, the help keyword indicates that + the referenced document provides help for the page as a whole.

    -
    +

    For a and area elements, on some browsers, the help keyword causes the link to use a different cursor.

    -
    Images that defy a complete description
    +
    Link type "icon"
    -
    +

    The icon keyword may be used with link elements. + This keyword creates an external resource link.

    -

    In certain cases, the nature of the image might be such that providing thorough alternative - text is impractical. For example, the image could be indistinct, or could be a complex fractal, - or could be a detailed topographical map.

    +
    -

    In these cases, the alt attribute must contain some - suitable alternative text, but it may be somewhat brief.

    +

    The specified resource is an icon representing the page or site, and should be used by the user + agent when representing the page in the user interface.

    -
    +
    -

    Sometimes there simply is no text that can do justice to an image. For example, there is - little that can be said to usefully describe a Rorschach inkblot test. However, a description, - even if brief, is still better than nothing:

    +

    Icons could be auditory icons, visual icons, or other kinds of icons. If + multiple icons are provided, the user agent must select the most appropriate icon according to the + type, media, and sizes attributes. If there are multiple equally appropriate icons, + user agents must use the last one declared in tree order at the time that the user + agent collected the list of icons. If the user agent tries to use an icon but that icon is + determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an + unsupported format), then the user agent must try the next-most-appropriate icon as determined by + the attributes.

    - 
    <figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
- symmetry with indistinct edges, with a small gap in the center, two
- larger gaps offset slightly from the center, with two similar gaps
- under them. The outline is wider in the top half than the bottom
- half, with the sides extending upwards higher than the center, and
- the center extending below the sides.">
- <figcaption>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</figcaption>
-</figure>
    +
    -

    Note that the following would be a very bad use of alternative text:

    +

    User agents are not required to update icons when the list of icons changes, but + are encouraged to do so.

    - 
    <!-- This example is wrong. Do not copy it. -->
-<figure>
- <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
- of the first of the ten cards in the Rorschach inkblot test.">
- <figcaption>A black outline of the first of the ten cards
- in the Rorschach inkblot test.</figcaption>
-</figure>
    +

    There is no default type for resources given by the icon keyword. + However, for the purposes of determining the type of the + resource, user agents must expect the resource to be an image.

    -

    Including the caption in the alternative text like this isn't useful because it effectively - duplicates the caption for users who don't have images, taunting them twice yet not helping - them any more than if they had only read or heard the caption once.

    +
    -
    +

    The sizes attribute gives the sizes of icons + for visual media. Its value, if present, is merely advisory. User agents may use the value to + decide which icon(s) to use if multiple icons are available.

    -
    +

    If specified, the attribute must have a value that is an unordered set of unique + space-separated tokens which are ASCII case-insensitive. Each value must be + either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT + ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN + CAPITAL LETTER X character.

    -

    Another example of an image that defies full description is a fractal, which, by definition, - is infinite in detail.

    +

    The keywords represent icon sizes in raw pixels (as opposed to CSS pixels).

    -

    The following example shows one possible way of providing alternative text for the full view - of an image of the Mandelbrot set.

    +

    An icon that is 50 CSS pixels wide intended for displays with a device pixel + density of two device pixels per CSS pixel (2x, 192dpi) would have a width of 100 raw pixels. This + feature does not support indicating that a different resource is to be used for small + high-resolution icons vs large low-resolution icons (e.g. 50×50 2x vs 100×100 1x).

    - 
    <img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
-its cusp on the real axis in the positive direction, with a smaller
-bulb aligned along the same center line, touching it in the negative
-direction, and with these two shapes being surrounded by smaller bulbs
-of various sizes.">
    +
    -
    +

    To parse and process the attribute's value, the user agent must first split the attribute's value on spaces, and must then parse each resulting + keyword to determine what it represents.

    -
    +
    -

    Similarly, a photograph of a person's face, for example in a biography, can be considered - quite relevant and key to the content, but it can be hard to fully substitute text for

    +

    The any keyword represents that the + resource contains a scalable icon, e.g. as provided by an SVG image.

    - 
    <section class="bio">
- <h1>A Biography of Isaac Asimov</h1>
- <p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
- <p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
- Later in life, he wore long white sideburns.">
- <p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
- <p>...
-</section>
    +
    -

    In such cases it is unnecessary (and indeed discouraged) to include a reference to the - presence of the image itself in the alternative text, since such text would be redundant with - the browser itself reporting the presence of the image. For example, if the alternative text - was "A photo of Isaac Asimov", then a conforming user agent might read that out as "(Image) A - photo of Isaac Asimov" rather than the more useful "(Image) Isaac Asimov had dark hair, a tall - forehead, and wore glasses...".

    +

    Other keywords must be further parsed as follows to determine what they represent:

    -
    +
      -
    +

  • If the keyword doesn't contain exactly one U+0078 LATIN SMALL LETTER X or U+0058 LATIN + CAPITAL LETTER X character, then this keyword doesn't represent anything. Abort these steps for + that keyword.

    • +

  • Let width string be the string before the "x" or + "X".

    • -
    Images whose contents are not known
    +

  • Let height string be the string after the "x" or + "X".

    • -
    +

  • If either width string or height string start with + a U+0030 DIGIT ZERO (0) character or contain any characters other than ASCII digits, + then this keyword doesn't represent anything. Abort these steps for that keyword.

    • -

    In some unfortunate cases, there might be no alternative text available at all, either - because the image is obtained in some automated fashion without any associated alternative text - (e.g. a Webcam), or because the page is being generated by a script using user-provided images - where the user did not provide suitable or usable alternative text (e.g. photograph sharing - sites), or because the author does not himself know what the images represent (e.g. a blind - photographer sharing an image on his blog).

    +

  • Apply the rules for parsing non-negative integers to width + string to obtain width.

    • -

    In such cases, the alt attribute may be omitted, but one of - the following conditions must be met as well:

    +

  • Apply the rules for parsing non-negative integers to height + string to obtain height.

    • -
      +

    • The keyword represents that the resource contains a bitmap icon with a width of width device pixels and a height of height device + pixels.

      • - +
    - + -

  • The img element is in a - figure element that contains a figcaption element that contains - content other than inter-element whitespace, and, ignoring the - figcaption element and its descendants, the figure element has no - flow content descendants other than inter-element whitespace and the - img element.

    • +

    The keywords specified on the sizes attribute must not + represent icon sizes that are not actually available in the linked resource.

    -
  • +
    -

    The title attribute is present and has a non-empty - value.

    +

    In the absence of a link with the icon keyword, for + Documents obtained over HTTP or HTTPS, user agents may instead attempt to + fetch and use an icon with the absolute URL obtained by + resolving the URL "/favicon.ico" against the document's + address, as if the page had declared that icon using the icon + keyword.

    - -

    Relying on the title attribute is currently - discouraged as many user agents do not expose the attribute in an accessible manner as - required by this specification (e.g. requiring a pointing device such as a mouse to cause a - tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone - with a modern phone or tablet).

    +
    -
    • +
    - +

    The following snippet shows the top part of an application with several icons.

    -

    Such cases are to be kept to an absolute minimum. If there is even the slightest - possibility of the author having the ability to provide real alternative text, then it would not - be acceptable to omit the alt attribute.

    + 
    <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>lsForums — Inbox</title>
+  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
+  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
+  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
+  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
+  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
+  <link rel=stylesheet href=lsforums.css>
+  <script src=lsforums.js></script>
+  <meta name=application-name content="lsForums">
+ </head>
+ <body>
+  ...
    -
    +
    -

    A photo on a photo-sharing site, if the site received the image with no metadata other than - the caption, could be marked up as follows:

    +

    For historical reasons, the icon keyword may be preceded by the + keyword "shortcut". If the "shortcut" keyword is + present, the rel attribute's entire value must be an + ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and + no other space characters).

    - 
    <figure>
- <img src="1100670787_6a7c664aef.jpg">
- <figcaption>Bubbles traveled everywhere with us.</figcaption>
-</figure>
    -

    It would be better, however, if a detailed description of the important parts of the image - obtained from the user and included on the page.

    +
    Link type "license"
    -
    +

    The license keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    -
    +

    The license keyword indicates that the referenced document + provides the copyright license terms under which the main content of the current document is + provided.

    -

    A blind user's blog in which a photo taken by the user is shown. Initially, the user might - not have any idea what the photo he took shows:

    +

    This specification does not specify how to distinguish between the main content of a document + and content that is not deemed to be part of that main content. The distinction should be made + clear to the user.

    - 
    <article>
- <h1>I took a photo</h1>
- <p>I went out today and took a photo!</p>
- <figure>
-  <img src="photo2.jpeg">
-  <figcaption>A photograph taken blindly from my front porch.</figcaption>
- </figure>
-</article>
    +
    -

    Eventually though, the user might obtain a description of the image from his friends and - could then include alternative text:

    +

    Consider a photo sharing site. A page on that site might describe and show a photograph, and + the page might be marked up as follows:

    - 
    <article>
- <h1>I took a photo</h1>
- <p>I went out today and took a photo!</p>
- <figure>
-  <img src="photo2.jpeg" alt="The photograph shows my squirrel
-  feeder hanging from the edge of my roof. It is half full, but there
-  are no squirrels around. In the background, out-of-focus trees fill the
-  shot. The feeder is made of wood with a metal grate, and it contains
-  peanuts. The edge of the roof is wooden too, and is painted white
-  with light blue streaks.">
-  <figcaption>A photograph taken blindly from my front porch.</figcaption>
- </figure>
-</article>
    + 
    <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>Exampl Pictures: Kissat</title>
+  <link rel="stylesheet" href="/style/default">
+ </head>
+ <body>
+  <h1>Kissat</h1>
+  <nav>
+   <a href="../">Return to photo index</a>
+  </nav>
+  <figure>
+   <img src="/pix/39627052_fd8dcd98b5.jpg">
+   <figcaption>Kissat</figcaption>
+  </figure>
+  <p>One of them has six toes!</p>
+  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
+  <footer>
+   <a href="/">Home</a> | <a href="../">Photo index</a>
+   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
+  </footer>
+ </body>
+</html>
    -
    +

    In this case the license applies to just the photo (the main + content of the document), not the whole document. In particular not the design of the page + itself, which is covered by the copyright given at the bottom of the document. This could be made + clearer in the styling (e.g. making the license link prominently positioned near the photograph, + while having the page copyright in light small text at the foot of the page.

    -
    +
    -

    Sometimes the entire point of the image is that a textual description is not available, and - the user is to provide the description. For instance, the point of a CAPTCHA image is to see if - the user can literally read the graphic. Here is one way to mark up a CAPTCHA (note the title attribute):

    +
    - 
    <p><label>What does this image say?
-<img src="captcha.cgi?id=8934" title="CAPTCHA">
-<input type=text name=captcha></label>
-(If you cannot see the image, you can use an <a
-href="?audio">audio</a> test instead.)</p>
    +

    Synonyms: For historical reasons, user agents must also treat the keyword + "copyright" like the license keyword.

    -

    Another example would be software that displays images and asks for alternative text - precisely for the purpose of then writing a page with correct alternative text. Such a page - could have a table of images, like this:

    +
    - 
    <table>
- <thead>
-  <tr> <th> Image <th> Description
- <tbody>
-  <tr>
-   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
-   <td> <input name="alt2421">
-  <tr>
-   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
-   <td> <input name="alt2422">
-</table>
    -

    Notice that even in this example, as much useful information as possible is still included - in the title attribute.

    +
    Link type "nofollow"
    -
    +

    The nofollow keyword may be used with a and + area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the + implied hyperlink, if no other keywords create one).

    -

    Since some users cannot use images at all (e.g. because they have a very slow - connection, or because they are using a text-only browser, or because they are listening to the - page being read out by a hands-free automobile voice Web browser, or simply because they are - blind), the alt attribute is only allowed to be omitted rather - than being provided with replacement text when no alternative text is available and none can be - made available, as in the above examples. Lack of effort from the part of the author is not an - acceptable reason for omitting the alt attribute.

    +

    The nofollow keyword indicates that the link is not endorsed + by the original author or publisher of the page, or that the link to the referenced document was + included primarily because of a commercial relationship between people affiliated with the two + pages.

    -
    -
    +
    Link type "noreferrer"
    +

    The noreferrer keyword may be used with a and + area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the + implied hyperlink, if no other keywords create one).

    +

    It indicates that no referrer information is to be leaked when following the link.

    -
    An image not intended for the user
    +
    -

    Generally authors should avoid using img elements for purposes other than showing - images.

    +

    If a user agent follows a link defined by an a or area element that + has the noreferrer keyword, the user agent must not include a + Referer (sic) HTTP header (or equivalent for other protocols) in the + request.

    -

    If an img element is being used for purposes other than showing an image, e.g. as - part of a service to count page views, then the alt attribute - must be the empty string.

    +

    This keyword also causes the opener + attribute to remain null if the hyperlink creates a new browsing context.

    -

    In such cases, the width and height attributes should both be set to zero.

    +
    + -
    An image in an e-mail or private document intended for a specific person who is known to be able to view images
    -

    This section does not apply to documents that are publicly accessible, or whose target - audience is not necessarily personally known to the author, such as documents on a Web site, - e-mails sent to public mailing lists, or software documentation.

    +
    Link type "pingback"
    -

    When an image is included in a private communication (such as an HTML e-mail) aimed at a - specific person who is known to be able to view images, the alt - attribute may be omitted. However, even in such cases authors are strongly urged to include - alternative text (as appropriate according to the kind of image involved, as described in the - above entries), so that the e-mail is still usable should the user use a mail client that does not - support images, or should the document be forwarded on to other users whose abilities might not - include easily seeing images.

    +

    The pingback keyword may be used with link + elements. This keyword creates an external resource + link.

    +

    For the semantics of the pingback keyword, see the Pingback + 1.0 specification.

    +
    Link type "prefetch"
    -
    +

    The prefetch keyword may be used with link, + a, and area elements. This keyword creates an external resource link.

    -
    Guidance for markup generators
    +

    The prefetch keyword indicates that preemptively fetching and + caching the specified resource is likely to be beneficial, as it is highly likely that the user + will require this resource.

    -

    Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain - alternative text from their users. However, it is recognised that in many cases, this will not be - possible.

    +

    There is no default type for resources given by the prefetch + keyword.

    -

    For images that are the sole contents of links, markup generators should examine the link - target to determine the title of the target, or the URL of the target, and use information - obtained in this manner as the alternative text.

    -

    For images that have captions, markup generators should use the figure and - figcaption elements, or the title attribute, to - provide the image's caption.

    +
    Link type "search"
    -

    As a last resort, implementors should either set the alt - attribute to the empty string, under the assumption that the image is a purely decorative image - that doesn't add any information but is still specific to the surrounding content, or omit the - alt attribute altogether, under the assumption that the image is - a key part of the content.

    +

    The search keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    -

    Markup generators may specify a generator-unable-to-provide-required-alt - attribute on img elements for which they have been unable to obtain alternative text - and for which they have therefore omitted the alt attribute. The - value of this attribute must be the empty string. Documents containing such attributes are not - conforming, but conformance checkers will silently - ignore this error.

    +

    The search keyword indicates that the referenced document + provides an interface specifically for searching the document and its related resources.

    -

    This is intended to avoid markup generators from being pressured into replacing - the error of omitting the alt attribute with the even more - egregious error of providing phony alternative text, because state-of-the-art automated - conformance checkers cannot distinguish phony alternative text from correct alternative text.

    +

    OpenSearch description documents can be used with link elements and + the search link type to enable user agents to autodiscover search + interfaces.

    -

    Markup generators should generally avoid using the image's own file name as the alternative - text. Similarly, markup generators should avoid generating alternative text from any content that - will be equally available to presentation user agents (e.g. Web browsers).

    -

    This is because once a page is generated, it will typically not be updated, - whereas the browsers that later read the page can be updated by the user, therefore the browser is - likely to have more up-to-date and finely-tuned heuristics than the markup generator did when - generating the page.

    +
    Link type "sidebar"
    -
    +

    The sidebar keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    -
    +

    The sidebar keyword indicates that the referenced document, if + retrieved, is intended to be shown in a secondary browsing context (if possible), + instead of in the current browsing context.

    -
    Guidance for conformance checkers
    +

    A hyperlink with the sidebar keyword specified is + a sidebar hyperlink.

    -

    A conformance checker must report the lack of an alt - attribute as an error unless one of the conditions listed below applies:

    + + +
    Link type "stylesheet"
    + +

    The stylesheet keyword may be used with link + elements. This keyword creates an external resource + link that contributes to the styling processing model.

    + +

    The specified resource is a resource that describes how to present the document. Exactly how + the resource is to be processed depends on the actual type of the resource.

    + +

    If the alternate keyword is also specified on the + link element, then the link is an alternative stylesheet; in this case, + the title attribute must be specified on the link + element, with a non-empty value.

    + +

    The default type for resources given by the stylesheet + keyword is text/css.

    + +
    + +

    The appropriate times to obtain the resource are:

      - +

    • When the external resource link is created on a link element + that is already in a Document.

      • + -

    • The img element is in a figure element that satisfies the conditions described above.

      • +

    • When the external resource link's link element is inserted into a document.

      • -

    • The img element has a title attribute with a - value that is not the empty string (also as described - above).

      • +

    • When the href attribute of the link + element of an external resource link that is already in a + Document is changed.

      • + - +

    • When the crossorigin attribute of the + link element of an external resource + link that is already in a Document is set, changed, or + removed.

      • -

    • The conformance checker has been configured to assume that the document is an e-mail or - document intended for a specific person who is known to be able to view images.

      • +

    • When the type attribute of the link + element of an external resource link that is already in a + Document is set or changed to a value that does not or no longer matches the + Content-Type metadata of the previous obtained external + resource, if any.

      • -

    • The img element has a (non-conforming) generator-unable-to-provide-required-alt - attribute whose value is the empty string. A conformance checker that is not reporting the lack - of an alt attribute as an error must also not report the - presence of the empty generator-unable-to-provide-required-alt - attribute as an error. (This case does not represent a case where the document is conforming, - only that the generator could not determine appropriate alternative text — validators are - not required to show an error in this case, because such an error might encourage markup - generators to include bogus alternative text purely in an attempt to silence validators. - Naturally, conformance checkers may report the lack of an alt attribute as an error even in the presence of the generator-unable-to-provide-required-alt - attribute; for example, there could be a user option to report all conformance errors - even those that might be the more or less inevitable result of using a markup - generator.)

      • +

    • When the type attribute of the link + element of an external resource link that is already in a + Document but was previously not obtained due to the type attribute specifying an unsupported type is set, removed, or + changed.

      • + +

    • When the external resource link changes from being an alternative stylesheet to not being one, or vice + versa.

    -
    +

    Quirk: If the document has been set to quirks mode, has the + same origin as the URL of the external resource, + and the Content-Type metadata of the external resource is not a + supported style sheet type, the user agent must instead assume it to be text/css.

    +

    Once a resource has been obtained, if its Content-Type metadata is text/css, the user + agent must run these steps:

    - + -
    Adaptive images
    +
      - +

    1. Let element be the link element that created the + external resource link.

      2. -

      CSS and media queries can be used to construct graphical page layouts that adapt dynamically to - the user's environment, in particular to different viewport dimensions and pixel densities. For - content, however, CSS does not help; instead, we have the img element's srcset attribute. This section walks through a sample case showing - how to use this attribute.

      +

    2. If element has an associated CSS style sheet, remove the CSS style sheet in question.

      3. -

      Consider a situation where on wide screens (wider than 600 CSS pixels) a 300×150 image - named a-rectangle.png is to be used, but on smaller screens (600 CSS pixels - and less), a smaller 100×100 image called a-square.png is to be used. - The markup for this would look like this:

      +

    3. If element no longer creates an external resource link + that contributes to the styling processing model, or if, since the resource in question was obtained, it has become appropriate to obtain it again (meaning this algorithm is about to be + invoked again for a newly obtained resource), then abort these steps.

      4. - 
      <figure>
- <img src="a-rectangle.png" srcset="a-square.png 600w"
-      alt="Barney Frank wears a suit and glasses.">
- <figcaption>Barney Frank, 2011</figcaption>
-</figure>
      +
    4. -

      For details on what to put in the alt attribute, - see the earlier sections.

      +

      Create a CSS style sheet with the following properties:

      -

      The problem with this is that the user agent does not necessarily know what dimensions to use - for the image when the image is loading. To avoid the layout having to be reflowed multiple times - as the page is loading, CSS and CSS media queries can be used to provide the dimensions:

      +
      - 
      <figure>
- <style scoped>
-  #a { width: 300px; height: 150px; }
-  @media all and (max-width: 600px) { #a { width: 100px; height: 100px; } }
- </style>
- <img src="a-rectangle.png" srcset="a-square.png 600w" id="a"
-      alt="Barney Frank wears a suit and glasses.">
- <figcaption>Barney Frank, 2011</figcaption>
-</figure>
      +
      type
      +

      text/css

      -

      Alternatively, the width and height attributes can be used to provide the width for legacy user - agents, using CSS just for the user agents that support srcset:

      +
      location
      +
      - 
      <figure>
- <style scoped media="all and (max-width: 600px)">
-  #a { width: 100px; height: 100px; }
- </style>
- <img src="a-rectangle.png" width="300" height="100"
-      srcset="a-square.png 600w" id=a
-      alt="Barney Frank wears a suit and glasses.">
- <figcaption>Barney Frank, 2011</figcaption>
-</figure>
      +

      The resulting absolute URL determined during the obtain algorithm.

      -
      +

      This is before any redirects get applied.

      -

      The srcset attribute is used with the src attribute, which gives the URL of the image to use for legacy user - agents that do not support the srcset attribute. This leads - to a question of which image to provide in the src - attribute.

      +
      -

      The answer that results in the least duplication is to provide the image suitable for an - infinite width and infinite height viewport with a pixel density of 1 CSS pixel per device - pixel:

      +
      owner node
      +

      element

      - 
      <img src="pear-desktop.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w"
-     alt="The pear is juicy.">
      +
      media
      -

      However, if legacy mobile user agents are more important, one can list all three images in the - srcset attribute, overriding the src attribute entirely. To do this, the widest image has to have the - pixel density descriptor instead of the width, since there is no way to specify an infinite width - explicitly:

      +
      - 
      <img src="pear-mobile.jpeg"
-     srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
-     alt="The pear is juicy.">
      +

      The media attribute of element.

      -

      Since at this point the src attribute is actually being - ignored entirely by srcset-supporting user agents, the src attribute can default to any image, including one that is neither - the smallest nor biggest:

      +

      This is a reference to the (possibly absent at this time) attribute, rather + than a copy of the attribute's current value. The CSSOM specification defines what happens + when the attribute is dynamically set, changed, or removed.

      - 
      <img src="pear-tablet.jpeg"
-     srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
-     alt="The pear is juicy.">
      +
      -
      +
      title
      -

      The dimensions in the srcset attribute are the maximum - (viewport) dimensions that an image is intended for. It is possible to think of the numbers as - minimums, though... if the images are listed in order, then the minimum for an image is the - dimension given for the previous image. This example attempts to demonstrate this by using the - file names to show the minimum values for each image:

      +
      - 
      <img src="pear-tablet.jpeg"
-     srcset="pear-min0.jpeg 720w, pear-min721.jpeg 1280w, pear-min1281.jpeg 1x"
-     alt="The pear is juicy.">
      +

      The title attribute of element.

      ---> +

      This is similarly a reference to the attribute, rather than a copy of the + attribute's current value.

      +
      -

      The iframe element

      +
      alternate flag
      +

      Set if the link is an alternative stylesheet; unset otherwise.

      -
      -
      Categories:
      -
      Flow content.
      -
      Phrasing content.
      -
      Embedded content.
      -
      Interactive content.
      -
      Palpable content.
      -
      Contexts in which this element can be used:
      -
      Where embedded content is expected.
      -
      Content model:
      -
      Text that conforms to the requirements given in the prose.
      -
      Content attributes:
      -
      Global attributes
      -
      src
      -
      srcdoc
      -
      name
      -
      sandbox
      -
      seamless
      -
      allowfullscreen
      -
      width
      -
      height
      -
      DOM interface:
      -
      -
      interface HTMLIFrameElement : HTMLElement {
-           attribute DOMString src;
-           attribute DOMString srcdoc;
-           attribute DOMString name;
-  [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
-           attribute boolean seamless;
-           attribute boolean allowFullscreen;
-           attribute DOMString width;
-           attribute DOMString height;
-  readonly attribute Document? contentDocument;
-  readonly attribute WindowProxy? contentWindow;
-};
      -
      -
      +
      origin-clean flag
      +

      Set if the resource is CORS-same-origin; unset otherwise.

      - +
      parent CSS style sheet
      +
      owner CSS rule
      +

      null

      -

      The iframe element represents a nested browsing - context.

      +
      disabled flag
      +

      Left at its default value.

      +
      CSS rules
      +

      Left uninitialized.

      - +
      -

      The src attribute gives the address of a page - that the nested browsing context is to contain. The attribute, if present, must be a - valid non-empty URL potentially surrounded by spaces. If the itemprop is specified on an iframe element, then the - src attribute must also be specified.

      +

      The CSS environment encoding is the result of running the following steps:

      -

      The srcdoc attribute gives the content of - the page that the nested browsing context is to contain. The value of the attribute - is the source of an iframe srcdoc - document.

      +
        -

        For iframe elements in HTML documents, the srcdoc attribute, if present, must have a value using the - HTML syntax that consists of the following syntactic components, in the given order:

        +

      1. If the element has a charset attribute, get an encoding from that attribute's value. If that + succeeds, return the resulting encoding and abort these steps.

        2. -
          +

        1. Otherwise, return the document's character encoding.

          2. -
        2. Any number of comments and space characters.
          3. +
        -
      2. Optionally, a DOCTYPE. +
        3. -
      3. Any number of comments and space characters.
        4. +
      -
    5. The root element, in the form of an html element.
      6. +
    + -
  • Any number of comments and space characters.
    • - +
    Link type "tag"
    -

    For iframe elements in XML documents, the srcdoc attribute, if present, must have a value that matches the - production labeled document in the XML specification.

    +

    The tag keyword may be used with a and + area elements. This keyword creates a hyperlink.

    + +

    The tag keyword indicates that the tag that the + referenced document represents applies to the current document.

    + +

    Since it indicates that the tag applies to the current document, it would + be inappropriate to use this keyword in the markup of a tag cloud, which + lists the popular tags across a set of pages.

    -

    Here a blog uses the srcdoc attribute in conjunction - with the sandbox and seamless attributes described below to provide users of user - agents that support this feature with an extra layer of protection from script injection in the - blog post comments:

    +

    This document is about some gems, and so it is tagged with "http://en.wikipedia.org/wiki/Gemstone" to unambiguously categorise it as applying + to the "jewel" kind of gems, and not to, say, the towns in the US, the Ruby package format, or + the Swiss locomotive class:

    - 
    <article>
- <h1>I got my own magazine!</h1>
- <p>After much effort, I've finally found a publisher, and so now I
- have my own magazine! Isn't that awesome?! The first issue will come
- out in September, and we have articles about getting food, and about
- getting in boxes, it's going to be great!</p>
- <footer>
-  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
- </footer>
- <article>
-  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
-  <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
- </article>
- <article>
-  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
-  <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
- </article>
- <article>
-  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
-  <iframe seamless sandbox srcdoc="<p>hey that's earl's table.
-<p>you should get earl&amp;amp;me on the next cover."></iframe>
- </article>
    + 
    <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>My Precious</title>
+ </head>
+ <body>
+  <header><h1>My precious</h1> <p>Summer 2012</p></header>
+  <p>Recently I managed to dispose of a red gem that had been
+  bothering me. I now have a much nicer blue sapphire.</p>
+  <p>The red gem had been found in a bauxite stone while I was digging
+  out the office level, but nobody was willing to haul it away. The
+  same red gem stayed there for literally years.</p>
+  <footer>
+   Tags: <a rel=tag href="http://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
+  </footer>
+ </body>
+</html>
    -

    Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw - ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be - doubly escaped — once so that the ampersand is preserved when originally parsing - the srcdoc attribute, and once more to prevent the - ampersand from being misinterpreted when parsing the sandboxed content.

    +
    -

    Furthermore, notice that since the DOCTYPE is optional in - iframe srcdoc documents, and the html, - head, and body elements have optional - start and end tags, and the title element is also optional in iframe srcdoc - documents, the markup in a srcdoc attribute can be - relatively succint despite representing an entire document, since only the contents of the - body element need appear literally in the syntax. The other elements are still - present, but only by implication.

    +
    + +

    In this document, there are two articles. The "tag" + link, however, applies to the whole page (and would do so wherever it was placed, including if it + was within the article elements).

    + + 
    <!DOCTYPE HTML>
+<html>
+ <head>
+  <title>Gem 4/4</title>
+ </head>
+ <body>
+  <article>
+   <h1>801: Steinbock</h1>
+   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
+  </article>
+  <article>
+   <h1>802: Murmeltier</h1>
+   <figure>
+    <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
+         alt="The 802 was red with pantographs and tall vents on the side.">
+    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
+   </figure>
+   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
+  </article>
+  <p class="topic"><a rel=tag href="http://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
+ </body>
+</html>
    -

    In the HTML syntax, authors need only remember to use U+0022 - QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0022 - QUOTATION MARK (") and U+0026 AMPERSAND (&) characters, and to specify the sandbox attribute, to ensure safe embedding of content.

    -

    Due to restrictions of the XHTML syntax, in XML the U+003C LESS-THAN - SIGN character (<) needs to be escaped as well. In order to prevent attribute-value normalization, some of XML's - whitespace characters — specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED - (LF), and U+000D CARRIAGE RETURN (CR) — also need to be escaped.

    -

    If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority. This allows authors to provide - a fallback URL for legacy user agents that do not support the srcdoc attribute.

    +
    Sequential link types
    +

    Some documents form part of a sequence of documents.

    -
    +

    A sequence of documents is one where each document can have a previous sibling and a + next sibling. A document with no previous sibling is the start of its sequence, a + document with no next sibling is the end of its sequence.

    -
    +

    A document may be part of multiple sequences.

    -

    When an iframe element is inserted - into a document, the user agent must create a nested browsing context, and - then process the iframe attributes for the "first time".

    -

    When an iframe element is removed - from a document, the user agent must discard the nested browsing context.

    +
    Link type "next"
    -

    This happens without any unload events firing - (the nested browsing context and its Document are discarded, not data-x="unload a - document">unloaded).

    +

    The next keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    - +

    The next keyword indicates that the document is part of a + sequence, and that the link is leading to the document that is the next logical document in the + sequence.

    -

    Whenever an iframe element with a nested browsing context has its - srcdoc attribute set, changed, or removed, the user agent - must process the iframe attributes.

    -

    Similarly, whenever an iframe element with a nested browsing context - but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must - process the iframe attributes.

    +
    Link type "prev"
    -

    When the user agent is to process the iframe attributes, it must run - the first appropriate steps from the following list:

    +

    The prev keyword may be used with link, + a, and area elements. This keyword creates a hyperlink.

    -
    +

    The prev keyword indicates that the document is part of a + sequence, and that the link is leading to the document that is the previous logical document in + the sequence.

    -
    If the srcdoc attribute is specified
    +
    -

    Navigate the element's child browsing context - to a resource whose Content-Type is text/html, whose URL - is about:srcdoc, and whose data consists of the value of the attribute. The - resulting Document must be considered an iframe srcdoc document.

    +

    Synonyms: For historical reasons, user agents must also treat the keyword + "previous" like the prev keyword.

    -
    Otherwise, if the element has no src attribute - specified, and the user agent is processing the iframe's attributes for the "first - time"
    +
    -
    -

    Queue a task to run the iframe load event steps.

    +
    Other link types
    -

    The task source for this task is the - DOM manipulation task source.

    +

    Extensions to the predefined set of link types may be + registered in the microformats + wiki existing-rel-values page.

    -
    +

    Anyone is free to edit the microformats wiki existing-rel-values page at + any time to add a type. Extension types must be specified with the following information:

    -
    Otherwise
    +
    + +
    Keyword
    -
      +

      The actual value being defined. The value should not be confusingly similar to any other + defined value (e.g. differing only in case).

      -
    1. +

      If the value contains a U+003A COLON character (:), it must also be an absolute + URL.

      -

      If the value of the src attribute is missing, or its - value is the empty string, let url be the string - "about:blank".

      - +
    -

    Otherwise, resolve the value of the src attribute, relative to the iframe element.

    -

    If that is not successful, then let url be the string - "about:blank". Otherwise, let url be the resulting - absolute URL.

    +
    Effect on... link
    - +
    -
  • +

    One of the following:

    -

    If there exists an ancestor browsing context whose active - document's address, ignoring fragment - identifiers, is equal to url, then abort these steps.

    - - - +
    -
    • +
    Not allowed
    -
  • +
    The keyword must not be specified on link elements.
    -

    Navigate the element's child browsing context - to url.

    +
    Hyperlink
    -
    • +
    The keyword may be specified on a link element; it creates a + hyperlink.
    - +
    External Resource
    + +
    The keyword may be specified on a link element; it creates an external + resource link.
    + +
    -
    -

    Any navigation required of the user agent in the process - the iframe attributes algorithm must be completed as an explicit - self-navigation override and with the iframe element's document's - browsing context as the source browsing context.

    +
    Effect on... a and area
    -

    Furthermore, if the active document of the element's child browsing - context before such a navigation was not completely - loaded at the time of the new navigation, then the navigation must be completed with replacement enabled.

    +
    -

    Similarly, if the child browsing context's session history contained - only one Document when the process the iframe attributes - algorithm was invoked, and that was the about:blank Document created - when the child browsing context was created, then any navigation required of the user agent in that algorithm must be completed - with replacement enabled.

    +

    One of the following:

    -

    When a Document in an iframe is marked as completely - loaded, the user agent must synchronously run the iframe load event steps.

    +
    -

    A load event is also fired at the - iframe element when it is created if no other data is loaded in it.

    +
    Not allowed
    -

    Each Document has an iframe load in progress flag and a mute - iframe load flag. When a Document is created, these flags must be unset for - that Document.

    +
    The keyword must not be specified on a and area elements.
    -

    The iframe load event steps are as follows:

    +
    Hyperlink
    -
      +
      The keyword may be specified on a and area elements; it creates a + hyperlink.
      -

    1. Let child document be the active document of the - iframe element's nested browsing context.

      2. +
      External Resource
      -

    2. If child document has its mute iframe load flag set, - abort these steps.

      3. +
      The keyword may be specified on a and area elements; it creates + an external resource link.
      -

    3. Set child document's iframe load in progress - flag.

      4. +
      Hyperlink Annotation
      -

    4. Fire a simple event named load at the - iframe element.

      5. +
      The keyword may be specified on a and area elements; it annotates other hyperlinks + created by the element.
      -

    5. Unset child document's iframe load in progress - flag.

      6. +
    - +
    -

    This, in conjunction with scripting, can be used to probe the URL space of the - local network's HTTP servers. User agents may implement cross-origin - access control policies that are stricter than those described above to mitigate this attack, but - unfortunately such policies are typically not compatible with existing Web content.

    -

    When the iframe's browsing context's active document is - not ready for post-load tasks, and when anything in the iframe is delaying the load event of the iframe's - browsing context's active document, and when the iframe's - browsing context is in the delaying load events - mode, the iframe must delay the load event of its document.

    +
    Brief description
    -

    If, during the handling of the load event, the - browsing context in the iframe is again navigated, that will further delay the load event.

    +

    A short non-normative description of what the keyword's meaning is.

    -
    - +
    Specification
    -

    If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be - resolved, the browsing context will remain at the initial - about:blank page.

    +

    A link to a more detailed description of the keyword's semantics and requirements. It + could be another page on the Wiki, or a link to an external page.

    -

    If the user navigates away from this page, the - iframe's corresponding WindowProxy object will proxy new - Window objects for new Document objects, but the src attribute will not change.

    +
    Synonyms
    -
    +

    A list of other keyword values that have exactly the same processing requirements. Authors + should not use the values defined to be synonyms, they are only intended to allow user agents to + support legacy content. Anyone may remove synonyms that are not used in practice; only names that + need to be processed as synonyms for compatibility with legacy content are to be registered in + this way.

    -

    The name attribute, if present, must be a - valid browsing context name. The given value is used to name the nested - browsing context. When the browsing context is created, if the attribute - is present, the browsing context name must be set to the value of this attribute; - otherwise, the browsing context name must be set to the empty string.

    -
    +
    Status
    -

    Whenever the name attribute is set, the nested - browsing context's name must be changed to - the new value. If the attribute is removed, the browsing context name must be set to - the empty string.

    +
    -
    +

    One of the following:

    +
    -
    +
    Proposed
    -

    The sandbox attribute, when specified, - enables a set of extra restrictions on any content hosted by the iframe. Its value - must be an unordered set of unique space-separated tokens that are ASCII - case-insensitive. The allowed values are allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation.

    +
    The keyword has not received wide peer review and approval. Someone has proposed it and is, + or soon will be, using it.
    -

    When the attribute is set, the content is treated as being from a unique origin, - forms, scripts, and various potentially annoying APIs are disabled, links are prevented from - targeting other browsing contexts, and plugins are secured. - The allow-same-origin keyword causes - the content to be treated as being from its real origin instead of forcing it into a unique - origin; the allow-top-navigation - keyword allows the content to navigate its top-level browsing context; - and the allow-forms, allow-pointer-lock, allow-popups and allow-scripts keywords re-enable forms, the - pointer lock API, popups, and scripts respectively.

    +
    Ratified
    -

    Setting both the allow-scripts and allow-same-origin keywords together when the - embedded page has the same origin as the page containing the iframe - allows the embedded page to simply remove the sandbox - attribute and then reload itself, effectively breaking out of the sandbox altogether.

    +
    The keyword has received wide peer review and approval. It has a specification that + unambiguously defines how to handle pages that use the keyword, including when they use it in + incorrect ways.
    -

    These flags only take effect when the nested browsing context of - the iframe is navigated. Removing them, or removing the - entire sandbox attribute, has no effect on an - already-loaded page.

    +
    Discontinued
    -

    Potentially hostile files should not be served from the same server as the file - containing the iframe element. Sandboxing hostile content is of minimal help if an - attacker can convince the user to just visit the hostile content directly, rather than in the - iframe. To limit the damage that can be caused by hostile HTML content, it should be - served from a separate dedicated domain. Using a different domain ensures that scripts in the - files are unable to attack the site, even if the user is tricked into visiting those pages - directly, without the protection of the sandbox - attribute.

    +
    The keyword has received wide peer review and it has been found wanting. Existing pages are + using this keyword, but new pages should avoid it. The "brief description" and "specification" + entries will give details of what authors should use instead, if anything.
    -
    +
    - +

    If a keyword is found to be redundant with existing values, it should be removed and listed + as a synonym for the existing value.

    -

    When an iframe element with a sandbox - attribute has its nested browsing context created (before the initial - about:blank Document is created), and when an iframe - element's sandbox attribute is set or changed while it - has a nested browsing context, the user agent must parse the sandboxing directive using the attribute's value as the input, the iframe element's nested browsing context's - iframe sandboxing flag set as the output, and, if the - iframe has an allowfullscreen - attribute, the allow fullscreen flag.

    +

    If a keyword is registered in the "proposed" state for a period of a month or more without + being used or specified, then it may be removed from the registry.

    -

    When an iframe element's sandbox - attribute is removed while it has a nested browsing context, the user agent must - empty the iframe element's nested browsing context's - iframe sandboxing flag set as the output.

    +

    If a keyword is added with the "proposed" status and found to be redundant with existing + values, it should be removed and listed as a synonym for the existing value. If a keyword is + added with the "proposed" status and found to be harmful, then it should be changed to + "discontinued" status.

    - +

    Anyone can change the status at any time, but should only do so in accordance with the + definitions above.

    -
    + -

    In this example, some completely-unknown, potentially hostile, user-provided HTML content is - embedded in a page. Because it is served from a separate domain, it is affected by all the normal - cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, - forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or - windows it itself embeds).

    + - 
    <p>We're not scared of you! Here is your content, unedited:</p>
-<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
    +
    -

    It is important to use a separate domain so that if the attacker convinces the - user to visit that page directly, the page doesn't run in the context of the site's origin, which - would make the user vulnerable to any attack found in the page.

    +

    Conformance checkers must use the information given on the microformats wiki + existing-rel-values page to establish if a value is allowed or not: values defined in this + specification or marked as "proposed" or "ratified" must be accepted when used on the elements for + which they apply as described in the "Effect on..." field, whereas values marked as "discontinued" + or not listed in either this specification or on the aforementioned page must be rejected as + invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid + the use of unreliable network connectivity).

    -
    +

    When an author uses a new type not defined by either this specification or the Wiki page, + conformance checkers should offer to add the value to the Wiki, with the details described above, + with the "proposed" status.

    -
    +
    -

    In this example, a gadget from another site is embedded. The gadget has scripting and forms - enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with - its originating server. The sandbox is still useful, however, as it disables plugins and popups, - thus reducing the risk of the user being exposed to malware and other annoyances.

    +

    Types defined as extensions in the microformats + wiki existing-rel-values page with the status "proposed" or "ratified" may be used with the + rel attribute on link, a, and area + elements in accordance to the "Effect on..." field.

    - 
    <iframe sandbox="allow-same-origin allow-forms allow-scripts"
-        src="http://maps.example.com/embedded.html"></iframe>
    -
    -
    +

    Edits

    -

    Suppose a file A contained the following fragment:

    +

    The ins and del elements represent edits to the document.

    - 
    <iframe sandbox="allow-same-origin allow-forms" src=B></iframe>
    -

    Suppose that file B contained an iframe also:

    +

    The ins element

    - 
    <iframe sandbox="allow-scripts" src=C></iframe>
    +
    +
    Categories:
    +
    Flow content.
    +
    Phrasing content.
    +
    Palpable content.
    +
    Contexts in which this element can be used:
    +
    Where phrasing content is expected.
    +
    Content model:
    +
    Transparent.
    +
    Content attributes:
    +
    Global attributes
    +
    cite
    +
    datetime
    +
    DOM interface:
    +
    Uses the HTMLModElement interface.
    +
    -

    Further, suppose that file C contained a link:

    +

    The ins element represents an addition to the document.

    - 
    <a href=D>Link</a>
    +
    -

    For this example, suppose all the files were served as text/html.

    +

    The following represents the addition of a single paragraph:

    -

    Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the - iframe in A has scripts disabled, and this overrides the allow-scripts keyword set on the - iframe in B. Forms are also disabled, because the inner iframe (in B) - does not have the allow-forms keyword - set.

    + 
    <aside>
+ <ins>
+  <p> I like fruit. </p>
+ </ins>
+</aside>
    -

    Suppose now that a script in A removes all the sandbox attributes in A and B. - This would change nothing immediately. If the user clicked the link in C, loading page D into the - iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the - state of the nested browsing context in the iframe in A when page B was - loaded.

    +

    As does the following, because everything in the aside element here counts as + phrasing content and therefore there is just one paragraph:

    -

    Generally speaking, dynamically removing or changing the sandbox attribute is ill-advised, because it can make it quite - hard to reason about what will be allowed and what will not.

    + 
    <aside>
+ <ins>
+  Apples are <em>tasty</em>.
+ </ins>
+ <ins>
+  So are pears.
+ </ins>
+</aside>
    +

    ins elements should not cross implied paragraph + boundaries.

    -
    +
    -

    The seamless attribute is a boolean - attribute. When specified, it indicates that the iframe element's - browsing context is to be rendered in a manner that makes it appear to be part of the - containing document (seamlessly included in the parent document).

    +

    The following example represents the addition of two paragraphs, the second of which was + inserted in two parts. The first ins element in this example thus crosses a + paragraph boundary, which is considered poor form.

    -
    + 
    <aside>
+ <!-- don't do this -->
+ <ins datetime="2005-03-16 00:00Z">
+  <p> I like fruit. </p>
+  Apples are <em>tasty</em>.
+ </ins>
+ <ins datetime="2007-12-19 00:00Z">
+  So are pears.
+ </ins>
+</aside>
    -

    An HTML inclusion is effected using this attribute as in the following example. - In this case, the inclusion is of a site-wide navigation bar. Any links in the - iframe will, in new user agents, be automatically opened in the - iframe's parent browsing context; for legacy user agents, the site could also - include a base element with a target - attribute with the value _parent. Similarly, in new user agents the styles - of the parent page will be automatically applied to the contents of the frame, but to support - legacy user agents authors might wish to include the styles explicitly.

    +

    Here is a better way of marking this up. It uses more elements, but none of the elements cross + implied paragraph boundaries.

    - 
    <!DOCTYPE HTML>
-<title>Mirror Mirror — MovieInfo™</title>
-<header>
- <hgroup>
-  <h1>Mirror Mirror</h1>
-  <h2>Part of the MovieInfo™ Database</h2>
- </hgroup>
- <nav>
-  <iframe seamless src="nav.inc"></iframe>
- </nav>
-</header>
-...
    + 
    <aside>
+ <ins datetime="2005-03-16 00:00Z">
+  <p> I like fruit. </p>
+ </ins>
+ <ins datetime="2005-03-16 00:00Z">
+  Apples are <em>tasty</em>.
+ </ins>
+ <ins datetime="2007-12-19 00:00Z">
+  So are pears.
+ </ins>
+</aside>
    + +
    -
    -

    An iframe element is said to be in seamless mode when all of the - following conditions are met:

    +

    The del element

    -
      +
      +
      Categories:
      +
      Flow content.
      +
      Phrasing content.
      +
      Contexts in which this element can be used:
      +
      Where phrasing content is expected.
      +
      Content model:
      +
      Transparent.
      +
      Content attributes:
      +
      Global attributes
      +
      cite
      +
      datetime
      +
      DOM interface:
      +
      Uses the HTMLModElement interface.
      +
      -
    • The seamless attribute is set on the - iframe element, and +

      The del element represents a removal from the document.

      -
    • The iframe element's owner Document's active sandboxing flag - set does not have the sandboxed seamless iframes flag set, and +

      del elements should not cross implied paragraph + boundaries.

      -
    • Either: +
      -
        +

        The following shows a "to do" list where items that have been done are crossed-off with the + date and time of their completion.

        -
      • The browsing context's active document has the same - origin as the iframe element's Document, or + 
        <h1>To Do</h1>
+<ul>
+ <li>Empty the dishwasher</li>
+ <li><del datetime="2009-10-11T01:25-07:00">Watch Walter Lewin's lectures</del></li>
+ <li><del datetime="2009-10-10T23:38-07:00">Download more tracks</del></li>
+ <li>Buy a printer</li>
+</ul>
        -
      • The browsing context's active document's address has the same origin as the - iframe element's Document, or +
      -
    • The browsing context's active document is an - iframe srcdoc document. -
    - +

    Attributes common to ins and del elements

    - +

    The cite attribute may be used to specify the + address of a document that explains the change. When that document is long, for instance the + minutes of a meeting, authors are encouraged to include a fragment identifier pointing to the + specific part of that document that discusses the change.

    -

    When an iframe element is in seamless mode, the following - requirements apply:

    +

    If the cite attribute is present, it must be a valid + URL potentially surrounded by spaces that explains the change. To obtain + the corresponding citation link, the value of the attribute must be resolved relative to the element. User agents may allow users to follow such + citation links, but they are primarily intended for private use (e.g. by server-side scripts + collecting statistics about a site's edits), not for readers.

    -
      -

    • The user agent must set the seamless browsing context flag to true for that - browsing context. This will cause links to open in the - parent browsing context unless an explicit self-navigation override is used - (target="_self").

      • +

      The datetime attribute may be used to specify + the time and date of the change.

      -

    • Media queries in the context of the iframe's browsing context - (e.g. on media attributes of style elements in - Documents in that iframe) must be evaluated with respect to the nearest - ancestor browsing context that is not itself being nested through an iframe that is in seamless - mode.

      • +

      If present, the datetime attribute's value must be a + valid date string with optional time.

      -

    • In a CSS-supporting user agent: the user agent must add all the style sheets that apply to - the iframe element to the cascade of the active document of the - iframe element's nested browsing context, at the appropriate cascade - levels, before any style sheets specified by the document itself.

      • +
      -

    • In a CSS-supporting user agent: the user agent must, for the purpose of CSS property - inheritance only, treat the root element of the active document of the - iframe element's nested browsing context as being a child of the - iframe element. (Thus inherited properties on the root element of the document in - the iframe will inherit the computed values of those properties on the - iframe element instead of taking their initial values.)

      • +

      User agents must parse the datetime attribute according + to the parse a date or time string algorithm. If that doesn't return a date or a global date and time, + then the modification has no associated timestamp (the value is non-conforming; it is not a + valid date string with optional time). Otherwise, the modification is marked as + having been made at the given date or global date and time. If the given value is a global date and time then user agents should use the associated + time-zone offset information to determine which time zone to present the given datetime in.

      -

    • In visual media, in a CSS-supporting user agent: the user agent should set the intrinsic - width of the iframe to the width that the element would have if it was a - non-replaced block-level element with 'width: auto', unless that width would be zero (e.g. if the - element is floating or absolutely positioned), in which case the user agent should set the - intrinsic width of the iframe to the shrink-to-fit width of the root element (if - any) of the content rendered in the iframe.

      • +
      -

    • In visual media, in a CSS-supporting user agent: the user agent should set the intrinsic - height of the iframe to the shortest height that would make the content rendered in - the iframe at its current width (as given in the previous bullet point) have no - scrollable overflow at its bottom edge. Scrollable overflow is any overflow that would increase the range to - which a scrollbar or other scrolling mechanism can scroll.

      • +

      This value may be shown to the user, but it is primarily intended for + private use.

      -
    • +

      The ins and del elements must implement the + HTMLModElement interface:

      -

      In visual media, in a CSS-supporting user agent: the user agent must force the height of the - initial containing block of the active document of the nested browsing - context of the iframe to zero.

      + 
      interface HTMLModElement : HTMLElement {
+           attribute DOMString cite;
+           attribute DOMString dateTime;
+};
      -

      This is intended to get around the otherwise circular dependency of percentage - dimensions that depend on the height of the containing block, thus affecting the height of the - document's bounding box, thus affecting the height of the viewport, thus affecting the size of - the initial containing block.

      +
      -
      • +

      The cite IDL attribute must reflect + the element's cite content attribute. The dateTime IDL attribute must reflect the + element's datetime content attribute.

      -

    • In speech media, the user agent should render the nested browsing context - without announcing that it is a separate document.

      • +
    -
  • -

    User agents should, in general, act as if the active document of the - iframe's nested browsing context was part of the document that the - iframe is in, if any.

    -

    For example if the user agent supports listing all the links in a document, - links in "seamlessly" nested documents would be included in that list without being - significantly distinguished from links in the document itself.

    +

    Edits and paragraphs

    -
    • + -

  • The nested browsing context's Window object's - cross-boundary event parent is the browsing context container.

    • +

    Since the ins and del elements do not affect paragraphing, it is possible, in some cases where paragraphs are implied (without explicit p elements), for an + ins or del element to span both an entire paragraph or other + non-phrasing content elements and part of another paragraph. For example:

    - + 
    <section>
+ <ins>
+  <p>
+   This is a paragraph that was inserted.
+  </p>
+  This is another paragraph whose first sentence was inserted
+  at the same time as the paragraph above.
+ </ins>
+ This is a second sentence, which was there all along.
+</section>
    -

    If the attribute is not specified, or if the origin conditions listed above are - not met, then the user agent should render the nested browsing context in a manner - that is clearly distinguishable as a separate browsing context, and the - seamless browsing context flag must be set to false for that browsing - context.

    +

    By only wrapping some paragraphs in p elements, one can even get the end of one + paragraph, a whole second paragraph, and the start of a third paragraph to be covered by the same + ins or del element (though this is very confusing, and not considered + good practice):

    -

    It is important that user agents recheck the above conditions whenever the - active document of the nested browsing context of the - iframe changes, such that the seamless browsing context flag gets unset - if the nested browsing context is navigated to another - origin.

    + 
    <section>
+ This is the first paragraph. <ins>This sentence was
+ inserted.
+ <p>This second paragraph was inserted.</p>
+ This sentence was inserted too.</ins> This is the
+ third paragraph in this example.
+ <!-- (don't do this) -->
+</section>
    -
    +

    However, due to the way implied paragraphs are defined, it is + not possible to mark up the end of one paragraph and the start of the very next one using the same + ins or del element. You instead have to use one (or two) p + element(s) and two ins or del elements, as for example:

    -

    The attribute can be set or removed dynamically, with the rendering updating in - tandem.

    + 
    <section>
+ <p>This is the first paragraph. <del>This sentence was
+ deleted.</del></p>
+ <p><del>This sentence was deleted too.</del> That
+ sentence needed a separate &lt;del&gt; element.</p>
+</section>
    -

    The contenteditable attribute does not - propagate into seamless iframes.

    +

    Partly because of the confusion described above, authors are strongly encouraged to always mark + up all paragraphs with the p element, instead of having ins or + del elements that cross implied paragraphs + boundaries.

    -
    +

    Edits and lists

    -

    The allowfullscreen attribute is a - boolean attribute. When specified, it indicates that Document objects in - the iframe element's browsing context are to be allowed to use requestFullscreen() (if it's not blocked for other - reasons, e.g. there is another ancestor iframe without this attribute set).

    + + +

    The content models of the ol and ul elements do not allow + ins and del elements as children. Lists always represent all their + items, including items that would otherwise have been marked as deleted.

    + +

    To indicate that an item is inserted or deleted, an ins or del + element can be wrapped around the contents of the li element. To indicate that an + item has been replaced by another, a single li element can have one or more + del elements followed by one or more ins elements.

    -

    Here, an iframe is used to embed a player from a video site. The allowfullscreen attribute is needed to enable the - player to show its video full-screen.

    +

    In the following example, a list that started empty had items added and removed from it over + time. The bits in the example that have been emphasized show the parts that are the "current" + state of the list. The list item numbers don't take into account the edits, though.

    - 
    <article>
- <header>
-  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
-  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
- </header>
- <main>
-  <p>Check out my new ride!</p>
-  <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
- </main>
-</article>
    + 
    <h1>Stop-ship bugs</h1>
+<ol>
+ <li><ins datetime="2008-02-12T15:20Z">Bug 225:
+ Rain detector doesn't work in snow</ins></li>
+ <li><del datetime="2008-03-01T20:22Z"><ins datetime="2008-02-14T12:02Z">Bug 228:
+ Water buffer overflows in April</ins></del></li>
+ <li><ins datetime="2008-02-16T13:50Z">Bug 230:
+ Water heater doesn't use renewable fuels</ins></li>
+ <li><del datetime="2008-02-20T21:15Z"><ins datetime="2008-02-16T14:25Z">Bug 232:
+ Carbon dioxide emissions detected after startup</ins></del></li>
+</ol>
    +
    -
    +

    In the following example, a list that started with just fruit was replaced by a list with just + colours.

    -

    The iframe element supports dimension attributes for cases where the - embedded content has specific dimensions (e.g. ad units have well-defined dimensions).

    + 
    <h1>List of <del>fruits</del><ins>colours</ins></h1>
+<ul>
+ <li><del>Lime</del><ins>Green</ins></li>
+ <li><del>Apple</del></li>
+ <li>Orange</li>
+ <li><del>Pear</del></li>
+ <li><ins>Teal</ins></li>
+ <li><del>Lemon</del><ins>Yellow</ins></li>
+ <li>Olive</li>
+ <li><ins>Purple</ins></li>
+</ul>
    -

    An iframe element never has fallback content, as it will always - create a nested browsing context, regardless of whether the specified initial - contents are successfully used.

    +
    -
    +

    Edits and tables

    -

    Descendants of iframe elements represent nothing. (In legacy user agents that do - not support iframe elements, the contents would be parsed as markup that could act as - fallback content.)

    + -

    When used in HTML documents, the allowed content model - of iframe elements is text, except that invoking the HTML fragment parsing - algorithm with the iframe element as the context element and the text contents as the input must result in a list of nodes that are all phrasing content, - with no parse errors having occurred, with no script - elements being anywhere in the list or as descendants of elements in the list, and with all the - elements in the list (including their descendants) being themselves conforming.

    +

    The elements that form part of the table model have complicated content model requirements that + do not allow for the ins and del elements, so indicating edits to a + table can be difficult.

    -

    The iframe element must be empty in XML documents.

    +

    To indicate that an entire row or an entire column has been added or removed, the entire + contents of each cell in that row or column can be wrapped in ins or del + elements (respectively).

    -

    The HTML parser treats markup inside iframe elements as - text.

    +
    +

    Here, a table's row has been added:

    -
    + 
    <table>
+ <thead>
+  <tr> <th> Game name           <th> Game publisher   <th> Verdict
+ <tbody>
+  <tr> <td> Diablo 2            <td> Blizzard         <td> 8/10
+  <tr> <td> Portal              <td> Valve            <td> 10/10
+  <tr> <td> <ins>Portal 2</ins> <td> <ins>Valve</ins> <td> <ins>10/10</ins>
+</table>
    -
    +

    Here, a column has been removed (the time at which it was removed is given also, as is a link + to the page explaining why):

    -

    The IDL attributes src, srcdoc, name, sandbox, and seamless must reflect the respective - content attributes of the same name.

    + 
    <table>
+ <thead>
+  <tr> <th> Game name           <th> Game publisher   <th> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">Verdict</del>
+ <tbody>
+  <tr> <td> Diablo 2            <td> Blizzard         <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">8/10</del>
+  <tr> <td> Portal              <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
+  <tr> <td> Portal 2            <td> Valve            <td> <del cite="/edits/r192" datetime="2011-05-02 14:23Z">10/10</del>
+</table>
    -

    The allowFullscreen IDL attribute - must reflect the allowfullscreen - content attribute.

    +
    -

    The contentDocument IDL attribute - must return the Document object of the active document of the - iframe element's nested browsing context, if any and if its - effective script origin is the same origin as the effective script - origin specified by the incumbent settings object, or null otherwise.

    +

    Generally speaking, there is no good way to indicate more complicated edits (e.g. that a cell + was removed, moving all subsequent cells up or to the left).

    -

    The contentWindow IDL attribute must - return the WindowProxy object of the iframe element's nested - browsing context, if any, or null otherwise.

    -
    -
    -

    Here is an example of a page using an iframe to include advertising from an - advertising broker:

    +

    Embedded content

    - 
    <iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
-        width="468" height="60"></iframe>
    + -
    +
    Requirements for providing text to act as an alternative for images
    +
    General guidelines
    -

    The embed element

    +

    Except where otherwise specified, the alt attribute must be + specified and its value must not be empty; the value must be an appropriate replacement for the + image. The specific requirements for the alt attribute depend on + what the image is intended to represent, as described in the following sections.

    - +

    The most general rule to consider when writing alternative text is the following: the + intent is that replacing every image with the text of its alt + attribute not change the meaning of the page.

    -
    -
    Categories:
    -
    Flow content.
    -
    Phrasing content.
    -
    Embedded content.
    -
    Interactive content.
    -
    Palpable content.
    -
    Contexts in which this element can be used:
    -
    Where embedded content is expected.
    -
    Content model:
    -
    Empty.
    -
    Content attributes:
    -
    Global attributes
    -
    src
    -
    type
    -
    width
    -
    height
    -
    Any other attribute that has no namespace (see prose).
    -
    DOM interface:
    -
    -
    interface HTMLEmbedElement : HTMLElement {
-           attribute DOMString src;
-           attribute DOMString type;
-           attribute DOMString width;
-           attribute DOMString height;
-  legacycaller any (any... arguments);
-};
    -
    -

    Depending on the type of content instantiated by the - embed element, the node may also support other - interfaces.

    -
    -
    -
    +

    So, in general, alternative text can be written by considering what one would have written had + one not been able to include the image.

    -

    The embed element provides an integration point for an external (typically - non-HTML) application or interactive content.

    +

    A corollary to this is that the alt attribute's value should + never contain text that could be considered the image's caption, title, or + legend. It is supposed to contain replacement text that could be used by users + instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.

    -

    The src attribute gives the address of the - resource being embedded. The attribute, if present, must contain a valid non-empty URL - potentially surrounded by spaces.

    +

    Another corollary is that the alt attribute's value should + not repeat information that is already provided in the prose next to the image.

    -

    If the itemprop attribute is specified on an - embed element, then the src attribute must also - be specified.

    +

    One way to think of alternative text is to think about how you would read the page + containing the image to someone over the phone, without mentioning that there is an image present. + Whatever you say instead of the image is typically a good start for writing the alternative + text.

    -

    The type attribute, if present, gives the - MIME type by which the plugin to instantiate is selected. The value must be a - valid MIME type. If both the type attribute and - the src attribute are present, then the type attribute must specify the same type as the explicit Content-Type metadata of the resource given by the src attribute.

    -
    +
    A link or button containing nothing but the image
    -

    While any of the following conditions are occurring, any plugin instantiated for - the element must be removed, and the embed element represents - nothing:

    +

    When an a element that creates a hyperlink, or a button + element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of + the link or button.

    -
      +
      -

    • The element has neither a src attribute nor a type attribute.

      • +

      In this example, a user is asked to pick his preferred colour from a list of three. Each colour + is given by an image, but for users who have configured their user agent not to display images, + the colour names are used instead:

      -

    • The element has a media element ancestor.

      • + 
      <h1>Pick your colour</h1>
+<ul>
+ <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
+ <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
+ <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
+</ul>
      -

    • The element has an ancestor object element that is not showing its - fallback content.

      • +
      -
    +
    -

    An embed element is said to be potentially - active when the following conditions are all met simultaneously:

    +

    In this example, each button has a set of images to indicate the kind of colour output desired + by the user. The first image is used in each case to give the alternative text.

    -
      - -
    • The element is in a Document or was in a Document the last time the event loop - reached step 1.
      • + 
      <button name="rgb"><img src="red" alt="RGB"><img src="green" alt=""><img src="blue" alt=""></button>
+<button name="cmyk"><img src="cyan" alt="CMYK"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
      -
    • The element's Document is fully active.
      • +

      Since each image represents one part of the text, it could also be written like this:

      -
    • The element has either a src attribute set or a type attribute set (or both).
      • + 
      <button name="rgb"><img src="red" alt="R"><img src="green" alt="G"><img src="blue" alt="B"></button>
+<button name="cmyk"><img src="cyan" alt="C"><img src="magenta" alt="M"><img src="yellow" alt="Y"><img src="black" alt="K"></button>
      -
    • The element's src attribute is either absent or its value - is not the empty string.
      • +

      However, with other alternative text, this might not work, and putting all the alternative + text into one image in each case might make more sense:

      -
    • The element is not a descendant of a media element.
      • + 
      <button name="rgb"><img src="red" alt="sRGB profile"><img src="green" alt=""><img src="blue" alt=""></button>
+<button name="cmyk"><img src="cyan" alt="CMYK profile"><img src="magenta" alt=""><img src="yellow" alt=""><img src="black" alt=""></button>
      -
    • The element is not a descendant of an object element that is not showing its - fallback content.
      • +
    -
  • The element is being rendered, or was being rendered the last time - the event loop reached step 1.
    • - -

    Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is - remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must - queue a task using the embed task source to run the - embed element setup steps.

    +
    A phrase or paragraph with an alternative graphical representation: charts, diagrams, graphs, maps, illustrations
    -

    The embed element setup steps are as follows:

    +

    Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a + diagram, a graph, or a simple map showing directions. In such cases, an image can be given using + the img element, but the lesser textual version must still be given, so that users + who are unable to view the image (e.g. because they have a very slow connection, or because they + are using a text-only browser, or because they are listening to the page being read out by a + hands-free automobile voice Web browser, or simply because they are blind) are still able to + understand the message being conveyed.

    -
      +

      The text must be given in the alt attribute, and must convey + the same message as the image specified in the src + attribute.

      -

    1. If another task has since been queued to run the - embed element setup steps for this element, then abort these steps.

      2. +

      It is important to realise that the alternative text is a replacement for the image, + not a description of the image.

      -
    2. +
      -
      +

      In the following example we have a flowchart + in image form, with text in the alt attribute rephrasing the + flowchart in prose form:

      -
      If the element has a src attribute set
      + 
      <p>In the common case, the data handled by the tokenization stage
+comes from the network, but it can also come from script.</p>
+<p><img src="images/parsing-model-overview.png" alt="The Network
+passes data to the Input Stream Preprocessor, which passes it to the
+Tokenizer, which passes it to the Tree Construction stage. From there,
+data goes to both the DOM and to Script Execution. Script Execution is
+linked to the DOM, and, using document.write(), passes data to the
+Tokenizer."></p>
      -
      +
      -

      The user agent must resolve the value of the element's - src attribute, relative to the element. If that is - successful, the user agent should fetch the resulting absolute - URL, from the element's browsing context scope origin if it has one. The task that - is queued by the networking task source once - the resource has been fetched must run the following steps:

      - +
      -
        +

        Here's another example, showing a good solution and a bad solution to the problem of including + an image in a description.

        -

      1. If another task has since been queued to run - the embed element setup steps for this element, then abort these - steps.

        2. +

        First, here's the good solution. This sample shows how the alternative text should just be + what you would have put in the prose if the image had never existed.

        -
      2. + 
        <!-- This is the correct way to do things. -->
+<p>
+ You are standing in an open field west of a house.
+ <img src="house.jpeg" alt="The house is white, with a boarded front door.">
+ There is a small mailbox here.
+</p>
        -

        Determine the type of the content being embedded, as - follows (stopping at the first substep that determines the type):

        +

        Second, here's the bad solution. In this incorrect way of doing things, the alternative text + is simply a description of the image, instead of a textual replacement for the image. It's bad + because when the image isn't shown, the text doesn't flow as well as in the first example.

        -
          + 
          <!-- This is the wrong way to do things. -->
+<p>
+ You are standing in an open field west of a house.
+ <img src="house.jpeg" alt="A white house, with a boarded front door.">
+ There is a small mailbox here.
+</p>
          -

        1. If the element has a type attribute, and that - attribute's value is a type that a plugin supports, then the value of the - type attribute is the content's type.

          2. +

          Text such as "Photo of white house with boarded door" would be equally bad alternative text + (though it could be suitable for the title attribute or in the + figcaption element of a figure with this image).

          -
        2. +
      - -

      Otherwise, if applying the URL parser algorithm to the URL of - the specified resource (after any redirects) results in a parsed URL whose - path component matches a pattern that a - plugin supports, then the content's - type is the type that that plugin can handle.

      +
      A short phrase or label with an alternative graphical representation: icons, logos
      -

      For example, a plugin might say that it can handle resources with path components that end with the four character string - ".swf".

      +

      A document can contain information in iconic form. The icon is intended to help users of visual + browsers to recognise features at a glance.

      - - +

      In some cases, the icon is supplemental to a text label conveying the same meaning. In those + cases, the alt attribute must be present but must be empty.

      -
      3. +
      -

    3. Otherwise, if the specified resource has explicit - Content-Type metadata, then that is the content's - type.

      4. +

      Here the icons are next to text that conveys the same meaning, so they have an empty alt attribute:

      -

    4. Otherwise, the content has no type and there - can be no appropriate plugin for it.

      5. + 
      <nav>
+ <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
+ <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
+ Configuration Tools</a></p>
+</nav>
      - +
      -
    +

    In other cases, the icon has no text next to it describing what it means; the icon is supposed + to be self-explanatory. In those cases, an equivalent textual label must be given in the alt attribute.

    - +
    -
  • +

    Here, posts on a news site are labeled with an icon indicating their topic.

    -

    If the previous step determined that the content's - type is image/svg+xml, then run the following substeps:

    + 
    <body>
+ <article>
+  <header>
+   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
+   <p><img src="movies.png" alt="Movies"></p>
+  </header>
+  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
+  making this its 8th win in the last 12 years.</p>
+ </article>
+ <article>
+  <header>
+   <h1>Latest TWiT episode is online</h1>
+   <p><img src="podcasts.png" alt="Podcasts"></p>
+  </header>
+  <p>The latest TWiT episode has been posted, in which we hear
+  several tech news stories as well as learning much more about the
+  iPhone. This week, the panelists compare how reflective their
+  iPhones' Apple logos are.</p>
+ </article>
+</body>
    -
      +
    • -

  • If the embed element is not associated with a nested browsing - context, associate the element with a newly created nested browsing - context, and, if the element has a name - attribute, set the browsing context name of the element's nested - browsing context to the value of this attribute.

    - +

    Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such + as a company, organization, project, band, software package, country, or some such.

    -

  • Navigate the nested browsing context to - the fetched resource, with replacement enabled, and with the - embed element's document's browsing context as the source - browsing context. (The src attribute of the - embed element doesn't get updated if the browsing context gets further - navigated to other locations.)

    • +

    If the logo is being used to represent the entity, e.g. as a page heading, the alt attribute must contain the name of the entity being represented by + the logo. The alt attribute must not contain text like + the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity + itself.

    -

  • The embed element now represents its associated - nested browsing context.

    • +

    If the logo is being used next to the name of the entity that it represents, then the logo is + supplemental, and its alt attribute must instead be empty.

    - +

    If the logo is merely used as decorative material (as branding, or, for example, as a side + image in an article that mentions the entity to which the logo belongs), then the entry below on + purely decorative images applies. If the logo is actually being discussed, then it is being used + as a phrase or paragraph (the description of the logo) with an alternative graphical + representation (the logo itself), and the first entry above applies.

    - +
    -
  • +

    In the following snippets, all four of the above cases are present. First, we see a logo used + to represent a company:

    -

    Otherwise, find and instantiate an appropriate plugin based on the content's type, and hand that plugin the - content of the resource, replacing any previously instantiated plugin for the element. The - embed element now represents this plugin instance.

    + 
    <h1><img src="XYZ.gif" alt="The XYZ company"></h1>
    -
    • +

    Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have + any alternative text: -

  • Once the resource or plugin has completely loaded, queue a task to - fire a simple event named load at the - element.

    • + 
    <article>
+ <h2>News</h2>
+ <p>We have recently been looking at buying the <img src="alpha.gif"
+ alt=""> ΑΒΓ company, a small Greek company
+ specializing in our type of product.</p>
    - +

    In this third snippet, we have a logo being used in an aside, as part of the larger article + discussing the acquisition:

    -

    Whether the resource is fetched successfully or not (e.g. whether the response code was a - 2xx code or equivalent) must be ignored - when determining the content's type and when handing - the resource to the plugin.

    +
     <aside><p><img src="alpha-large.gif" alt=""></p></aside>
+ <p>The ΑΒΓ company has had a good quarter, and our
+ pie chart studies of their accounts suggest a much bigger blue slice
+ than its green and orange slices, which is always a good sign.</p>
+</article>
    -

    This allows servers to return data for plugins even with error responses (e.g. - HTTP 500 Internal Server Error codes can still contain plugin data).

    +

    Finally, we have an opinion piece talking about a logo, and the logo is therefore described in + detail in the alternative text.

    -

    Fetching the resource must delay the load event of the element's document.

    - - - + 
    <p>Consider for a moment their logo:</p>
 
-     
+<p><img src="/images/logo" alt="It consists of a green circle with a
+green question mark centered inside it."></p>
 
-     
    If the element has no src attribute set
    
+<p>How unoriginal can you get? I mean, oooooh, a question mark, how
+<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
+sure everyone will rush to adopt those specifications now! They could
+at least have tried for some sort of, I don't know, sequence of
+rounded squares with varying shades of green and bold white outlines,
+at least that would look good on the cover of a blue book.</p>
    -
    +

    This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into + the surrounding text, as if the image had never been there in the first place.

    -

    The user agent should find and instantiate an appropriate plugin based on the - value of the type attribute. The embed - element now represents this plugin instance.

    +
    -

    Once the plugin is completely loaded, queue a task to fire a simple - event named load at the element.

    - +
    Text that has been rendered to a graphic for typographical effect
    - +

    Sometimes, an image just consists of text, and the purpose of the image is not to highlight the + actual typographic effects used to render the text, but just to convey the text itself.

    - +

    In such cases, the alt attribute must be present but must + consist of the same text as written in the image itself.

    - +
    -

    The embed element has no fallback content. If the user agent can't - find a suitable plugin when attempting to find and instantiate one for the algorithm above, then - the user agent must use a default plugin. This default could be as simple as saying "Unsupported - Format".

    +

    Consider a graphic containing the text "Earth Day", but with the letters all decorated with + flowers and plants. If the text is merely being used as a heading, to spice up the page for + graphical users, then the correct alternative text is just the same text "Earth Day", and no + mention need be made of the decorations:

    -

    Whenever an embed element that was potentially - active stops being potentially active, any - plugin that had been instantiated for that element must be unloaded.

    + 
    <h1><img src="earthdayheading.png" alt="Earth Day"></h1>
    -

    When a plugin is to be instantiated but it cannot be secured and the sandboxed plugins browsing context - flag is set on the embed element's Document's active - sandboxing flag set, then the user agent must not instantiate the plugin, and - must instead render the embed element in a manner that conveys that the - plugin was disabled. The user agent may offer the user the option to override the - sandbox and instantiate the plugin anyway; if the user invokes such an option, the - user agent must act as if the conditions above did not apply for the purposes of this element.

    +
    -

    Plugins that cannot be secured are - disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by - the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User - agents should convey the danger of overriding the sandbox to the user if an option to do so is - provided.

    +
    -

    When an embed element represents a nested browsing context: if the - embed element's nested browsing context's active document - is not ready for post-load tasks, and when anything is delaying the load event of the embed element's browsing - context's active document, and when the embed element's - browsing context is in the delaying load - events mode, the embed must delay the load event of its - document.

    +

    An illuminated manuscript might use graphics for some of its images. The alternative text in + such a situation is just the character that the image represents.

    -

    The task source for the tasks mentioned in this - section is the DOM manipulation task source.

    + 
    <p><img src="initials/o.svg" alt="O">nce upon a time and a long long time ago, late at
+night, when it was dark, over the hills, through the woods, across a great ocean, in a land far
+away, in a small house, on a hill, under a full moon...
    -

    Any namespace-less attribute other than name, align, hspace, and vspace may be - specified on the embed element, so long as its name is XML-compatible - and contains no uppercase ASCII letters. These attributes are then passed as - parameters to the plugin.

    +

    When an image is used to represent a character that cannot otherwise be represented in Unicode, + for example gaiji, itaiji, or new characters such as novel currency symbols, the alternative text + should be a more conventional way of writing the same thing, e.g. using the phonetic hiragana or + katakana to give the character's pronunciation.

    -

    All attributes in HTML documents get lowercased automatically, so the - restriction on uppercase letters doesn't affect such documents.

    +
    -

    The four exceptions are to exclude legacy attributes that have side-effects beyond - just sending parameters to the plugin.

    +

    In this example from 1997, a new-fangled currency symbol that looks like a curly E with two + bars in the middle instead of one is represented using an image. The alternative text gives the + character's pronunication.

    -
    + 
    <p>Only <img src="euro.png" alt="euro ">5.99!
    -

    The user agent should pass the names and values of all the attributes of the embed - element that have no namespace to the plugin used, when one is instantiated.

    +
    -

    The HTMLEmbedElement object representing the element must expose the scriptable - interface of the plugin instantiated for the embed element, if any. At a - minimum, this interface must implement the legacy caller - operation. (It is suggested that the default behavior of this legacy caller operation, e.g. - the behavior of the default plugin's legacy caller operation, be to throw a - NotSupportedError exception.)

    +

    An image should not be used if Unicode characters would serve an identical purpose. Only when + the text cannot be directly represented using Unicode, e.g. because of decorations or because the + character is not in the Unicode character set (as in the case of gaiji), would an image be + appropriate.

    -
    +

    If an author is tempted to use an image because their default system font does not + support a given character, then Web Fonts are a better solution than images.

    -

    The embed element supports dimension attributes.

    -
    -

    The IDL attributes src and type each must reflect the respective - content attributes of the same name.

    +
    A graphical representation of some of the surrounding text
    -
    +

    In many cases, the image is actually just supplementary, and its presence merely reinforces the + surrounding text. In these cases, the alt attribute must be + present but its value must be the empty string.

    -
    +

    In general, an image falls into this category if removing the image doesn't make the page any + less useful, but including the image makes it a lot easier for users of visual browsers to + understand the concept.

    -

    Here's a way to embed a resource that requires a proprietary plugin, like Flash:

    +
    - 
    <embed src="catgame.swf">
    +

    A flowchart that repeats the previous paragraph in graphical form:

    -

    If the user does not have the plugin (for example if the plugin vendor doesn't support the - user's platform), then the user will be unable to use the resource.

    + 
    <p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<p><img src="images/parsing-model-overview.png" alt=""></p>
    -

    To pass the plugin a parameter "quality" with the value "high", an attribute can be - specified:

    +

    In these cases, it would be wrong to include alternative text that consists of just a caption. + If a caption is to be included, then either the title attribute + can be used, or the figure and figcaption elements can be used. In the + latter case, the image would in fact be a phrase or paragraph with an alternative graphical + representation, and would thus require alternative text.

    - 
    <embed src="catgame.swf" quality="high">
    + 
    <!-- Using the title="" attribute -->
+<p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<p><img src="images/parsing-model-overview.png" alt=""
+        title="Flowchart representation of the parsing model."></p>
    -

    This would be equivalent to the following, when using an object element - instead:

    + 
    <!-- Using <figure> and <figcaption> -->
+<p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<figure>
+ <img src="images/parsing-model-overview.png" alt="The Network leads to
+ the Input Stream Preprocessor, which leads to the Tokenizer, which
+ leads to the Tree Construction stage. The Tree Construction stage
+ leads to two items. The first is Script Execution, which leads via
+ document.write() back to the Tokenizer. The second item from which
+ Tree Construction leads is the DOM. The DOM is related to the Script
+ Execution.">
+ <figcaption>Flowchart representation of the parsing model.</figcaption>
+</figure>
    - 
    <object data="catgame.swf">
- <param name="quality" value="high">
-</object>
    + 
    <!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
+<p>The Network passes data to the Input Stream Preprocessor, which
+passes it to the Tokenizer, which passes it to the Tree Construction
+stage. From there, data goes to both the DOM and to Script Execution.
+Script Execution is linked to the DOM, and, using document.write(),
+passes data to the Tokenizer.</p>
+<p><img src="images/parsing-model-overview.png"
+        alt="Flowchart representation of the parsing model."></p>
+<!-- Never put the image's caption in the alt="" attribute! -->
    +
    +

    A graph that repeats the previous paragraph in graphical form:

    + 
    <p>According to a study covering several billion pages,
+about 62% of documents on the Web in 2007 triggered the Quirks
+rendering mode of Web browsers, about 30% triggered the Almost
+Standards mode, and about 9% triggered the Standards mode.</p>
+<p><img src="rendering-mode-pie-chart.png" alt=""></p>
    -

    The object element

    +
    -
    -
    Categories:
    -
    Flow content.
    -
    Phrasing content.
    -
    Embedded content.
    -
    If the element has a usemap attribute: Interactive content.
    -
    Listed, submittable, and reassociateable form-associated element.
    -
    Palpable content.
    -
    Contexts in which this element can be used:
    -
    Where embedded content is expected.
    -
    Content model:
    -
    Zero or more param elements, then, transparent.
    -
    Content attributes:
    -
    Global attributes
    -
    data
    -
    type
    -
    typemustmatch
    -
    name
    -
    usemap
    -
    form
    -
    width
    -
    height
    -
    DOM interface:
    -
    -
    interface HTMLObjectElement : HTMLElement {
-           attribute DOMString data;
-           attribute DOMString type;
-           attribute boolean typeMustMatch;
-           attribute DOMString name;
-           attribute DOMString useMap;
-  readonly attribute HTMLFormElement? form;
-           attribute DOMString width;
-           attribute DOMString height;
-  readonly attribute Document? contentDocument;
-  readonly attribute WindowProxy? contentWindow;
 
-  readonly attribute boolean willValidate;
-  readonly attribute ValidityState validity;
-  readonly attribute DOMString validationMessage;
-  boolean checkValidity();
-  boolean reportValidity();
-  void setCustomValidity(DOMString error);
 
-  legacycaller any (any... arguments);
-};
    -
    -

    Depending on the type of content instantiated by the - object element, the node also supports other - interfaces.

    -
    -
    -
    +
    A purely decorative image that doesn't add any information
    -

    The object element can represent an external resource, which, depending on the - type of the resource, will either be treated as an image, as a nested browsing - context, or as an external resource to be processed by a plugin.

    +

    If an image is decorative but isn't especially page-specific — for example an image that + forms part of a site-wide design scheme — the image should be specified in the site's CSS, + not in the markup of the document.

    -

    The data attribute, if present, specifies the - address of the resource. If present, the attribute must be a valid non-empty URL potentially - surrounded by spaces.

    +

    However, a decorative image that isn't discussed by the surrounding text but still has some + relevance can be included in a page using the img element. Such images are + decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty + string.

    -

    Authors who reference resources from other origins - that they do not trust are urged to use the typemustmatch attribute defined below. Without that - attribute, it is possible in certain cases for an attacker on the remote host to use the plugin - mechanism to run arbitrary scripts, even if the author has used features such as the Flash - "allowScriptAccess" parameter.

    - -

    The type attribute, if present, specifies the - type of the resource. If present, the attribute must be a valid MIME type.

    - -

    At least one of either the data attribute or the type attribute must be present.

    - -

    If the itemprop attribute is specified on an object - element, then the data attribute must also be specified.

    +
    -

    The typemustmatch attribute is a - boolean attribute whose presence indicates that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the - aforementioned resource match.

    +

    Examples where the image is purely decorative despite being relevant would include things like + a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an + image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows + an example of the latter case (only the first verse is included in this snippet):

    -

    The typemustmatch attribute must not be - specified unless both the data attribute and the type attribute are present.

    + 
    <h1>The Lady of Shalott</h1>
+<p><img src="shalott.jpeg" alt=""></p>
+<p>On either side the river lie<br>
+Long fields of barley and of rye,<br>
+That clothe the wold and meet the sky;<br>
+And through the field the road run by<br>
+To many-tower'd Camelot;<br>
+And up and down the people go,<br>
+Gazing where the lilies blow<br>
+Round an island there below,<br>
+The island of Shalott.</p>
    -

    The name attribute, if present, must be a - valid browsing context name. The given value is used to name the nested - browsing context, if applicable.

    +
    -
    -

    Whenever one of the following conditions occur:

    +
    A group of images that form a single larger picture with no links
    -
      +

      When a picture has been sliced into smaller image files that are then displayed together to + form the complete picture again, one of the images must have its alt attribute set as per the relevant rules that would be appropriate + for the picture as a whole, and then all the remaining images must have their alt attribute set to the empty string.

      -
    • the element is created, +
      -
    • the element is popped off the stack of open elements of an HTML - parser or XML parser, +

      In the following example, a picture representing a company logo for XYZ + Corp has been split into two pieces, the first containing the letters "XYZ" and the second + with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.

      -
    • the element is not on the stack of open elements of an HTML parser - or XML parser, and it is either inserted into a document or removed from a document, + 
      <h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>
      -
    • the element's Document changes whether it is fully active, +
    -
  • one of the element's ancestor object elements changes to or from showing its - fallback content, +
    -
  • the element's classid attribute is set, changed, or - removed, +

    In the following example, a rating is shown as three filled stars and two empty stars. While + the alternative text could have been "★★★☆☆", the author has + instead decided to more helpfully give the rating in the form "3 out of 5". That is the + alternative text of the first image, and the rest have blank alternative text.

    -
  • the element's classid attribute is not present, and - its data attribute is set, changed, or removed, + 
    <p>Rating: <meter max=5 value=3><img src="1" alt="3 out of 5"
+  ><img src="1" alt=""><img src="1" alt=""><img src="0" alt=""
+  ><img src="0" alt=""></meter></p>
    -
  • neither the element's classid attribute nor its - data attribute are present, and its type attribute is set, changed, or removed, +
    • -
  • the element changes from being rendered to not being rendered, or vice versa, - -

    ...the user agent must queue a task to run the following steps to (re)determine - what the object element represents. This task - being queued or actively running must delay the load - event of the element's document.

    +
    A group of images that form a single larger picture with links
    -
      +

      Generally, image maps should be used instead of slicing an image + for links.

      -
    1. +

      However, if an image is indeed sliced and any of the components of the sliced picture are the + sole contents of links, then one image per link must have alternative text in its alt attribute representing the purpose of the link.

      -

      If the user has indicated a preference that this object element's fallback - content be shown instead of the element's usual behavior, then jump to the step below - labeled fallback.

      +
      -

      For example, a user could ask for the element's fallback content to - be shown because that content uses a format that the user finds more accessible.

      +

      In the following example, a picture representing the flying spaghetti monster emblem, with + each of the left noodly appendages and the right noodly appendages in different images, so that + the user can pick the left side or the right side in an adventure.

      -
      2. + 
      <h1>The Church</h1>
+<p>You come across a flying spaghetti monster. Which side of His
+Noodliness do you wish to reach out for?</p>
+<p><a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a
+  ><img src="fsm-middle.png" alt=""
+  ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>
      -
    2. +
    • -

    If the element has an ancestor media element, or has an ancestor - object element that is not showing its fallback content, or - if the element is not in a Document with a - browsing context, or if the element's Document is not fully - active, or if the element is still in the stack of open elements of an - HTML parser or XML parser, or if the element is not being - rendered, then jump to the step below labeled fallback.

    - -
  • +
    A key part of the content
    - +

    In some cases, the image is a critical part of the content. This could be the case, for + instance, on a page that is part of a photo gallery. The image is the whole point of the + page containing it.

    -

    If the classid attribute is present, and has a - value that isn't the empty string, then: if the user agent can find a plugin - suitable according to the value of the classid - attribute, and either plugins aren't being sandboxed or that - plugin can be secured, then that - plugin should be used, and the value of the data attribute, if any, should be passed to the - plugin. If no suitable plugin can be found, or if the - plugin reports an error, jump to the step below labeled fallback.

    +

    How to provide alternative text for an image that is a key part of the content depends on the + image's provenance.

    - +
    -
    • +
    The general case
    - +
    -

  • If the data attribute is present and its value is - not the empty string, then:

    +

    When it is possible for detailed alternative text to be provided, for example if the image is + part of a series of screenshots in a magazine review, or part of a comic strip, or is a + photograph in a blog entry about that photograph, text that can serve as a substitute for the + image must be given as the contents of the alt attribute.

    -
      +
      -

    1. If the type attribute is present and its value is - not a type that the user agent supports, and is not a type that the user agent can find a - plugin for, then the user agent may jump to the step below labeled fallback - without fetching the content to examine its real type.

      2. +

      A screenshot in a gallery of screenshots for a new OS, with some alternative text:

      -

    2. Resolve the URL specified by the data attribute, relative to the element.

      3. + 
      <figure>
+ <img src="KDE%20Light%20desktop.png"
+      alt="The desktop is blue, with icons along the left hand side in
+           two columns, reading System, Home, K-Mail, etc. A window is
+           open showing that menus wrap to a second line if they
+           cannot fit in the window. The window has a list of icons
+           along the top, with an address bar below it, a list of
+           icons for tabs along the left edge, a status bar on the
+           bottom, and two panes in the middle. The desktop has a bar
+           at the bottom of the screen with a few buttons, a pager, a
+           list of open applications, and a clock.">
+ <figcaption>Screenshot of a KDE desktop.</figcaption>
+</figure>
      -

    3. If that failed, fire a simple event named error at the element, then jump to the step below labeled - fallback.

      4. +
      -
    4. +
      -

      Fetch the resulting absolute URL, from the element's - browsing context scope origin if it has one.

      +

      A graph in a financial report:

      - -

      Fetching the resource must delay the load event of the element's document - until the task that is queued by the networking task source once the resource has been - fetched (defined next) has been run.

      + 
      <img src="sales.gif"
+     title="Sales graph"
+     alt="From 1998 to 2005, sales increased by the following percentages
+     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">
      -

      For the purposes of the application cache networking model, this - fetch operation is not for a child browsing context (though it might - end up being used for one after all, as defined below).

      +

      Note that "sales graph" would be inadequate alternative text for a sales graph. Text that + would be a good caption is not generally suitable as replacement text.

      -
      5. +
    • -

  • If the resource is not yet available (e.g. because the resource was not available in the - cache, so that loading the resource required making a request over the network), then jump to - the step below labeled fallback. The task that is - queued by the networking task source once the - resource is available must restart this algorithm from this step. Resources can load - incrementally; user agents may opt to consider a resource "available" whenever enough data has - been obtained to begin processing the resource.

    • + -

  • If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire - a simple event named error at the element, then jump to - the step below labeled fallback.

    • -
  • +
    Images that defy a complete description
    -

    Determine the resource type, as follows:

    +
    - + 
    <figure>
+ <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
+ symmetry with indistinct edges, with a small gap in the center, two
+ larger gaps offset slightly from the center, with two similar gaps
+ under them. The outline is wider in the top half than the bottom
+ half, with the sides extending upwards higher than the center, and
+ the center extending below the sides.">
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
+</figure>
    -
      +

      Note that the following would be a very bad use of alternative text:

      -
    1. + 
      <!-- This example is wrong. Do not copy it. -->
+<figure>
+ <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
+ of the first of the ten cards in the Rorschach inkblot test.">
+ <figcaption>A black outline of the first of the ten cards
+ in the Rorschach inkblot test.</figcaption>
+</figure>
      -

      Let the resource type be unknown.

      +

      Including the caption in the alternative text like this isn't useful because it effectively + duplicates the caption for users who don't have images, taunting them twice yet not helping + them any more than if they had only read or heard the caption once.

      -
      2. + -
    2. +
      -

      If the object element has a type - attribute and a typemustmatch attribute, and - the resource has associated Content-Type metadata, and the - type specified in the resource's Content-Type metadata is - an ASCII case-insensitive match for the value of the element's type attribute, then let resource type - be that type and jump to the step below labeled handler.

      +

      Another example of an image that defies full description is a fractal, which, by definition, + is infinite in detail.

      - +

      The following example shows one possible way of providing alternative text for the full view + of an image of the Mandelbrot set.

      -
      3. + 
      <img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
+its cusp on the real axis in the positive direction, with a smaller
+bulb aligned along the same center line, touching it in the negative
+direction, and with these two shapes being surrounded by smaller bulbs
+of various sizes.">
      -
    3. + -

      If the object element has a typemustmatch attribute, jump to the step below - labeled handler.

      +
      -
      4. +

      Similarly, a photograph of a person's face, for example in a biography, can be considered + quite relevant and key to the content, but it can be hard to fully substitute text for

      -
    4. + 
      <section class="bio">
+ <h1>A Biography of Isaac Asimov</h1>
+ <p>Born <b>Isaak Yudovich Ozimov</b> in 1920, Isaac was a prolific author.</p>
+ <p><img src="headpics/asimov.jpeg" alt="Isaac Asimov had dark hair, a tall forehead, and wore glasses.
+ Later in life, he wore long white sideburns.">
+ <p>Asimov was born in Russia, and moved to the US when he was three years old.</p>
+ <p>...
+</section>
      - +

      In such cases it is unnecessary (and indeed discouraged) to include a reference to the + presence of the image itself in the alternative text, since such text would be redundant with + the browser itself reporting the presence of the image. For example, if the alternative text + was "A photo of Isaac Asimov", then a conforming user agent might read that out as "(Image) A + photo of Isaac Asimov" rather than the more useful "(Image) Isaac Asimov had dark hair, a tall + forehead, and wore glasses...".

      -

      If the user agent is configured to strictly obey Content-Type headers for this resource, - and the resource has associated Content-Type metadata, - then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below - labeled handler.

      + -

      This can introduce a vulnerability, wherein a site is trying to embed a - resource that uses a particular plugin, but the remote site overrides that and instead - furnishes the user agent with a resource that triggers a different plugin with different - security characteristics.

      +
    -
    • -
  • +
    Images whose contents are not known
    -

    If there is a type attribute present on the - object element, and that attribute's value is not a type that the user agent - supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled - handler.

    +
    -
    • +

    In some unfortunate cases, there might be no alternative text available at all, either + because the image is obtained in some automated fashion without any associated alternative text + (e.g. a Webcam), or because the page is being generated by a script using user-provided images + where the user did not provide suitable or usable alternative text (e.g. photograph sharing + sites), or because the author does not himself know what the images represent (e.g. a blind + photographer sharing an image on his blog).

    -
  • +

    In such cases, the alt attribute may be omitted, but one of + the following conditions must be met as well:

    -

    Run the appropriate set of steps from the following - list:

    +
      -
      + -
      If the resource has associated Content-Type - metadata
      + -
      +

    • The img element is in a + figure element that contains a figcaption element that contains + content other than inter-element whitespace, and, ignoring the + figcaption element and its descendants, the figure element has no + flow content descendants other than inter-element whitespace and the + img element.

      • -
        +
      1. -
      2. +

        The title attribute is present and has a non-empty + value.

        -

        Let binary be false.

        + +

        Relying on the title attribute is currently + discouraged as many user agents do not expose the attribute in an accessible manner as + required by this specification (e.g. requiring a pointing device such as a mouse to cause a + tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone + with a modern phone or tablet).

        -
        3. + -
      3. +
    -

    If the type specified in the resource's Content-Type - metadata is "text/plain", and the result of applying the rules for distinguishing if a resource is - text or binary to the resource is that the resource is not - text/plain, then set binary to true.

    +

    Such cases are to be kept to an absolute minimum. If there is even the slightest + possibility of the author having the ability to provide real alternative text, then it would not + be acceptable to omit the alt attribute.

    -
    • +
    -
  • +

    A photo on a photo-sharing site, if the site received the image with no metadata other than + the caption, could be marked up as follows:

    -

    If the type specified in the resource's Content-Type - metadata is "application/octet-stream", then set binary to true.

    + 
    <figure>
+ <img src="1100670787_6a7c664aef.jpg">
+ <figcaption>Bubbles traveled everywhere with us.</figcaption>
+</figure>
    -
    • +

    It would be better, however, if a detailed description of the important parts of the image + obtained from the user and included on the page.

    -
  • +
    • -

    If binary is false, then let the resource - type be the type specified in the resource's - Content-Type metadata, and jump to the step below labeled handler.

    +
    - +

    A blind user's blog in which a photo taken by the user is shown. Initially, the user might + not have any idea what the photo he took shows:

    -
  • + 
    <article>
+ <h1>I took a photo</h1>
+ <p>I went out today and took a photo!</p>
+ <figure>
+  <img src="photo2.jpeg">
+  <figcaption>A photograph taken blindly from my front porch.</figcaption>
+ </figure>
+</article>
    -

    If there is a type attribute present on the - object element, and its value is not application/octet-stream, - then run the following steps:

    +

    Eventually though, the user might obtain a description of the image from his friends and + could then include alternative text:

    -
      + 
      <article>
+ <h1>I took a photo</h1>
+ <p>I went out today and took a photo!</p>
+ <figure>
+  <img src="photo2.jpeg" alt="The photograph shows my squirrel
+  feeder hanging from the edge of my roof. It is half full, but there
+  are no squirrels around. In the background, out-of-focus trees fill the
+  shot. The feeder is made of wood with a metal grate, and it contains
+  peanuts. The edge of the roof is wooden too, and is painted white
+  with light blue streaks.">
+  <figcaption>A photograph taken blindly from my front porch.</figcaption>
+ </figure>
+</article>
      -
    1. +
    • -

    If the attribute's value is a type that a plugin supports, or the - attribute's value is a type that starts with "image/" that is - not also an XML MIME type, then let the resource type be the - type specified in that type attribute.

    +
    - +

    Sometimes the entire point of the image is that a textual description is not available, and + the user is to provide the description. For instance, the point of a CAPTCHA image is to see if + the user can literally read the graphic. Here is one way to mark up a CAPTCHA (note the title attribute):

    -
  • + 
    <p><label>What does this image say?
+<img src="captcha.cgi?id=8934" title="CAPTCHA">
+<input type=text name=captcha></label>
+(If you cannot see the image, you can use an <a
+href="?audio">audio</a> test instead.)</p>
    -

    Jump to the step below labeled handler.

    +

    Another example would be software that displays images and asks for alternative text + precisely for the purpose of then writing a page with correct alternative text. Such a page + could have a table of images, like this:

    -
    • + 
    <table>
+ <thead>
+  <tr> <th> Image <th> Description
+ <tbody>
+  <tr>
+   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
+   <td> <input name="alt2421">
+  <tr>
+   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
+   <td> <input name="alt2422">
+</table>
    - +

    Notice that even in this example, as much useful information as possible is still included + in the title attribute.

    - +
    - +

    Since some users cannot use images at all (e.g. because they have a very slow + connection, or because they are using a text-only browser, or because they are listening to the + page being read out by a hands-free automobile voice Web browser, or simply because they are + blind), the alt attribute is only allowed to be omitted rather + than being provided with replacement text when no alternative text is available and none can be + made available, as in the above examples. Lack of effort from the part of the author is not an + acceptable reason for omitting the alt attribute.

    - + -
    Otherwise, if the resource does not have associated - Content-Type metadata
    + -
    -
      -
    1. +
      An image not intended for the user
      -

      If there is a type attribute present on the - object element, then let the tentative type be the type - specified in that type attribute.

      +

      Generally authors should avoid using img elements for purposes other than showing + images.

      -

      Otherwise, let tentative type be the sniffed type of the resource.

      +

      If an img element is being used for purposes other than showing an image, e.g. as + part of a service to count page views, then the alt attribute + must be the empty string.

      -
      2. +

      In such cases, the width and height attributes should both be set to zero.

      -
    2. -

      If tentative type is not - application/octet-stream, then let resource type be - tentative type and jump to the step below labeled - handler.

      +
      An image in an e-mail or private document intended for a specific person who is known to be able to view images
      -
      3. +

      This section does not apply to documents that are publicly accessible, or whose target + audience is not necessarily personally known to the author, such as documents on a Web site, + e-mails sent to public mailing lists, or software documentation.

      -
    +

    When an image is included in a private communication (such as an HTML e-mail) aimed at a + specific person who is known to be able to view images, the alt + attribute may be omitted. However, even in such cases authors are strongly urged to include + alternative text (as appropriate according to the kind of image involved, as described in the + above entries), so that the e-mail is still usable should the user use a mail client that does not + support images, or should the document be forwarded on to other users whose abilities might not + include easily seeing images.

    -
    - - -
  • +
    - +
    Guidance for markup generators
    -

    If applying the URL parser algorithm to the URL of the - specified resource (after any redirects) results in a parsed URL whose path component matches a pattern that a plugin - supports, then let resource type be the type that that plugin can - handle.

    +

    Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain + alternative text from their users. However, it is recognised that in many cases, this will not be + possible.

    -

    For example, a plugin might say that it can handle resources with path components that end with the four character string - ".swf".

    +

    For images that are the sole contents of links, markup generators should examine the link + target to determine the title of the target, or the URL of the target, and use information + obtained in this manner as the alternative text.

    - - +

    For images that have captions, markup generators should use the figure and + figcaption elements, or the title attribute, to + provide the image's caption.

    -
    • +

    As a last resort, implementors should either set the alt + attribute to the empty string, under the assumption that the image is a purely decorative image + that doesn't add any information but is still specific to the surrounding content, or omit the + alt attribute altogether, under the assumption that the image is + a key part of the content.

    - +

    Markup generators may specify a generator-unable-to-provide-required-alt + attribute on img elements for which they have been unable to obtain alternative text + and for which they have therefore omitted the alt attribute. The + value of this attribute must be the empty string. Documents containing such attributes are not + conforming, but conformance checkers will silently + ignore this error.

    -

    It is possible for this step to finish, or for one of the substeps above to - jump straight to the next step, with resource type still being unknown. In - both cases, the next step will trigger fallback.

    +

    This is intended to avoid markup generators from being pressured into replacing + the error of omitting the alt attribute with the even more + egregious error of providing phony alternative text, because state-of-the-art automated + conformance checkers cannot distinguish phony alternative text from correct alternative text.

    - +

    Markup generators should generally avoid using the image's own file name as the alternative + text. Similarly, markup generators should avoid generating alternative text from any content that + will be equally available to presentation user agents (e.g. Web browsers).

    -

  • Handler: Handle the content as given by the first of the following cases that - matches:

    +

    This is because once a page is generated, it will typically not be updated, + whereas the browsers that later read the page can be updated by the user, therefore the browser is + likely to have more up-to-date and finely-tuned heuristics than the markup generator did when + generating the page.

    -
    + -
    If the resource type is not a type that the user agent supports, but - it is a type that a plugin supports
    +
    -
    +
    Guidance for conformance checkers
    -

    If plugins are being sandboxed and the plugin that - supports resource type cannot be secured, jump to the step below labeled fallback.

    +

    A conformance checker must report the lack of an alt + attribute as an error unless one of the conditions listed below applies:

    -

    Otherwise, the user agent should use the plugin that supports - resource type and pass the content of the resource to that - plugin. If the plugin reports an error, then jump to the step - below labeled fallback.

    +
      -
    + +

  • The img element is in a figure element that satisfies the conditions described above.

    • -
    If the resource type is an XML MIME type, or if the resource type - does not start with "image/"
    +

  • The img element has a title attribute with a + value that is not the empty string (also as described + above).

    • -
    + -

    The object element must be associated with a newly created nested - browsing context, if it does not already have one.

    +

  • The conformance checker has been configured to assume that the document is an e-mail or + document intended for a specific person who is known to be able to view images.

    • -

    If the URL of the given resource is not about:blank, the - element's nested browsing context must then be navigated to that resource, with - replacement enabled, and with the object element's document's - browsing context as the source browsing context. (The data attribute of the object element doesn't - get updated if the browsing context gets further navigated to other locations.)

    +

  • The img element has a (non-conforming) generator-unable-to-provide-required-alt + attribute whose value is the empty string. A conformance checker that is not reporting the lack + of an alt attribute as an error must also not report the + presence of the empty generator-unable-to-provide-required-alt + attribute as an error. (This case does not represent a case where the document is conforming, + only that the generator could not determine appropriate alternative text — validators are + not required to show an error in this case, because such an error might encourage markup + generators to include bogus alternative text purely in an attempt to silence validators. + Naturally, conformance checkers may report the lack of an alt attribute as an error even in the presence of the generator-unable-to-provide-required-alt + attribute; for example, there could be a user option to report all conformance errors + even those that might be the more or less inevitable result of using a markup + generator.)

    • -

    If the URL of the given resource is about:blank, then, - instead, the user agent must queue a task to fire a simple event - named load at the object element. No load event is fired at the - about:blank document itself.

    + -

    The object element represents the nested browsing - context.

    +
    -

    If the name attribute is present, the - browsing context name must be set to the value of this attribute; otherwise, - the browsing context name must be set to the empty string.

    -

    In certain situations, e.g. if the resource was fetched from an application cache but it is an HTML file - with a manifest attribute that points to a different - application cache manifest, the navigation of the browsing context will be restarted so - as to load the resource afresh from the network or a different application - cache. Even if the resource is then found to have a different type, it is still used - as part of a nested browsing context: only the navigate algorithm - is restarted, not this object algorithm.

    + +
    Adaptive images
    - + +

    CSS and media queries can be used to construct graphical page layouts that adapt dynamically to + the user's environment, in particular to different viewport dimensions and pixel densities. For + content, however, CSS does not help; instead, we have the img element's srcset attribute. This section walks through a sample case showing + how to use this attribute.

    -
    If the resource type starts with "image/", and support - for images has not been disabled
    +

    Consider a situation where on wide screens (wider than 600 CSS pixels) a 300×150 image + named a-rectangle.png is to be used, but on smaller screens (600 CSS pixels + and less), a smaller 100×100 image called a-square.png is to be used. + The markup for this would look like this:

    -
    + 
    <figure>
+ <img src="a-rectangle.png" srcset="a-square.png 600w"
+      alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure>
    -

    Apply the image sniffing rules to - determine the type of the image.

    +

    For details on what to put in the alt attribute, + see the earlier sections.

    -

    The object element represents the specified image. The image is - not a nested browsing context.

    +

    The problem with this is that the user agent does not necessarily know what dimensions to use + for the image when the image is loading. To avoid the layout having to be reflowed multiple times + as the page is loading, CSS and CSS media queries can be used to provide the dimensions:

    -

    If the image cannot be rendered, e.g. because it is malformed or in an unsupported - format, jump to the step below labeled fallback.

    + 
    <figure>
+ <style scoped>
+  #a { width: 300px; height: 150px; }
+  @media all and (max-width: 600px) { #a { width: 100px; height: 100px; } }
+ </style>
+ <img src="a-rectangle.png" srcset="a-square.png 600w" id="a"
+      alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure>
    -
    +

    Alternatively, the width and height attributes can be used to provide the width for legacy user + agents, using CSS just for the user agents that support srcset:

    + 
    <figure>
+ <style scoped media="all and (max-width: 600px)">
+  #a { width: 100px; height: 100px; }
+ </style>
+ <img src="a-rectangle.png" width="300" height="100"
+      srcset="a-square.png 600w" id=a
+      alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure>
    -
    Otherwise
    +
    -
    +

    The srcset attribute is used with the src attribute, which gives the URL of the image to use for legacy user + agents that do not support the srcset attribute. This leads + to a question of which image to provide in the src + attribute.

    -

    The given resource type is not supported. Jump to the step below - labeled fallback.

    +

    The answer that results in the least duplication is to provide the image suitable for an + infinite width and infinite height viewport with a pixel density of 1 CSS pixel per device + pixel:

    -

    If the previous step ended with the resource type being - unknown, this is the case that is triggered.

    + 
    <img src="pear-desktop.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w"
+     alt="The pear is juicy.">
    -
    +

    However, if legacy mobile user agents are more important, one can list all three images in the + srcset attribute, overriding the src attribute entirely. To do this, the widest image has to have the + pixel density descriptor instead of the width, since there is no way to specify an infinite width + explicitly:

    -
    + 
    <img src="pear-mobile.jpeg"
+     srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
+     alt="The pear is juicy.">
    -
    • +

    Since at this point the src attribute is actually being + ignored entirely by srcset-supporting user agents, the src attribute can default to any image, including one that is neither + the smallest nor biggest:

    -

  • The element's contents are not part of what the object element - represents.

    + 
    <img src="pear-tablet.jpeg"
+     srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
+     alt="The pear is juicy.">
    -
  • +
    -

    Abort these steps. Once the resource is completely loaded, queue a task to - fire a simple event named load at the - element.

    +

    The dimensions in the srcset attribute are the maximum + (viewport) dimensions that an image is intended for. It is possible to think of the numbers as + minimums, though... if the images are listed in order, then the minimum for an image is the + dimension given for the previous image. This example attempts to demonstrate this by using the + file names to show the minimum values for each image:

    -
    • + 
    <img src="pear-tablet.jpeg"
+     srcset="pear-min0.jpeg 720w, pear-min721.jpeg 1280w, pear-min1281.jpeg 1x"
+     alt="The pear is juicy.">
    - +--> - -

  • If the data attribute is absent but the type attribute is present, and the user agent can find a - plugin suitable according to the value of the type attribute, and either plugins aren't being sandboxed or the plugin can be - secured, then that plugin should be used. If these conditions cannot be met, or if the - plugin reports an error, jump to the step below labeled fallback. Otherwise - abort these steps; once the plugin is completely loaded, queue a task to fire - a simple event named load at the element.

    • +

    The iframe element

    -

  • Fallback: The object element represents the element's - children, ignoring any leading param element children. This is the element's - fallback content. If the element has an instantiated plugin, then - unload it.

    • +
    +
    Categories:
    +
    Flow content.
    +
    Phrasing content.
    +
    Embedded content.
    +
    Interactive content.
    +
    Palpable content.
    +
    Contexts in which this element can be used:
    +
    Where embedded content is expected.
    +
    Content model:
    +
    Text that conforms to the requirements given in the prose.
    +
    Content attributes:
    +
    Global attributes
    +
    src
    +
    srcdoc
    +
    name
    +
    sandbox
    +
    seamless
    +
    allowfullscreen
    +
    width
    +
    height
    +
    DOM interface:
    +
    +
    interface HTMLIFrameElement : HTMLElement {
+           attribute DOMString src;
+           attribute DOMString srcdoc;
+           attribute DOMString name;
+  [PutForwards=value] readonly attribute DOMSettableTokenList sandbox;
+           attribute boolean seamless;
+           attribute boolean allowFullscreen;
+           attribute DOMString width;
+           attribute DOMString height;
+  readonly attribute Document? contentDocument;
+  readonly attribute WindowProxy? contentWindow;
+};
    +
    +
    - + -

    When the algorithm above instantiates a plugin, the user agent - should pass to the plugin used the names and values of all the attributes on the - element, in the order they were added to the element, with the attributes added by the parser - being ordered in source order, followed by a parameter named "PARAM" whose value is null, followed - by all the names and values of parameters given by - param elements that are children of the object element, in tree - order. If the plugin supports a scriptable interface, the - HTMLObjectElement object representing the element should expose that interface. The - object element represents the plugin. The - plugin is not a nested browsing context.

    +

    The iframe element represents a nested browsing + context.

    -

    Plugins are considered sandboxed for the purpose of an - object element if the sandboxed plugins browsing context flag is set on - the object element's Document's active sandboxing flag - set.

    -

    Due to the algorithm above, the contents of object elements act as fallback - content, used only when referenced resources can't be shown (e.g. because it returned a 404 - error). This allows multiple object elements to be nested inside each other, - targeting multiple user agents with different capabilities, with the user agent picking the first - one it supports.

    + -

    When an object element represents a nested browsing context: if the - object element's nested browsing context's active document - is not ready for post-load tasks, and when anything is delaying the load event of the object element's browsing - context's active document, and when the object element's - browsing context is in the delaying load - events mode, the object must delay the load event of its - document.

    +

    The src attribute gives the address of a page + that the nested browsing context is to contain. The attribute, if present, must be a + valid non-empty URL potentially surrounded by spaces. If the itemprop is specified on an iframe element, then the + src attribute must also be specified.

    -

    The task source for the tasks mentioned in this - section is the DOM manipulation task source.

    +

    The srcdoc attribute gives the content of + the page that the nested browsing context is to contain. The value of the attribute + is the source of an iframe srcdoc + document.

    -

    Whenever the name attribute is set, if the - object element has a nested browsing context, its name must be changed to the new value. If the attribute is removed, if the - object element has a browsing context, the browsing context - name must be set to the empty string.

    +

    For iframe elements in HTML documents, the srcdoc attribute, if present, must have a value using the + HTML syntax that consists of the following syntactic components, in the given order:

    - +
      -

      The usemap attribute, if present while the - object element represents an image, can indicate that the object has an associated - image map. The attribute must be ignored if the - object element doesn't represent an image.

      +
    1. Any number of comments and space characters.
      2. -

      The form attribute is used to explicitly associate the - object element with its form owner.

      +
    2. Optionally, a DOCTYPE. -
      +
    3. Any number of comments and space characters.
      4. -

      Constraint validation: object elements are always barred - from constraint validation.

      +
    4. The root element, in the form of an html element.
      5. - +
    5. Any number of comments and space characters.
      6. -

      The object element supports dimension attributes.

      +
    -
    +

    For iframe elements in XML documents, the srcdoc attribute, if present, must have a value that matches the + production labeled document in the XML specification.

    -

    The IDL attributes data, type and name each must reflect the respective - content attributes of the same name. The typeMustMatch IDL attribute must - reflect the typemustmatch content - attribute. The useMap IDL attribute must - reflect the usemap content attribute.

    +
    -

    The contentDocument IDL attribute - must return the Document object of the active document of the - object element's nested browsing context, if any and if its - effective script origin is the same origin as the effective script - origin specified by the incumbent settings object, or null otherwise.

    +

    Here a blog uses the srcdoc attribute in conjunction + with the sandbox and seamless attributes described below to provide users of user + agents that support this feature with an extra layer of protection from script injection in the + blog post comments:

    -

    The contentWindow IDL attribute must - return the WindowProxy object of the object element's nested - browsing context, if it has one; otherwise, it must return null.

    + 
    <article>
+ <h1>I got my own magazine!</h1>
+ <p>After much effort, I've finally found a publisher, and so now I
+ have my own magazine! Isn't that awesome?! The first issue will come
+ out in September, and we have articles about getting food, and about
+ getting in boxes, it's going to be great!</p>
+ <footer>
+  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
+ </footer>
+ <article>
+  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
+  <iframe seamless sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
+ </article>
+ <article>
+  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
+  <iframe seamless sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
+ </article>
+ <article>
+  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
+  <iframe seamless sandbox srcdoc="<p>hey that's earl's table.
+<p>you should get earl&amp;amp;me on the next cover."></iframe>
+ </article>
    -

    The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the - constraint validation API. The form IDL attribute - is part of the element's forms API.

    +

    Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw + ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be + doubly escaped — once so that the ampersand is preserved when originally parsing + the srcdoc attribute, and once more to prevent the + ampersand from being misinterpreted when parsing the sandboxed content.

    -

    All object elements have a legacy caller - operation. If the object element has an instantiated plugin that - supports a scriptable interface that defines a legacy caller operation, then that must be the - behavior of the object's legacy caller operation. Otherwise, the object's legacy caller operation - must be to throw a NotSupportedError exception.

    +

    Furthermore, notice that since the DOCTYPE is optional in + iframe srcdoc documents, and the html, + head, and body elements have optional + start and end tags, and the title element is also optional in iframe srcdoc + documents, the markup in a srcdoc attribute can be + relatively succint despite representing an entire document, since only the contents of the + body element need appear literally in the syntax. The other elements are still + present, but only by implication.

    -
    - -

    In the following example, a Java applet is embedded in a page using the object - element. (Generally speaking, it is better to avoid using applets like these and instead use - native JavaScript and HTML to provide the functionality, since that way the application will work - on all Web browsers without requiring a third-party plugin. Many devices, especially embedded - devices, do not support third-party technologies like Java.)

    +

    In the HTML syntax, authors need only remember to use U+0022 + QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0022 + QUOTATION MARK (") and U+0026 AMPERSAND (&) characters, and to specify the sandbox attribute, to ensure safe embedding of content.

    - 
    <figure>
- <object type="application/x-java-applet">
-  <param name="code" value="MyJavaClass">
-  <p>You do not have Java available, or it is disabled.</p>
- </object>
- <figcaption>My Java Clock</figcaption>
-</figure>
    +

    Due to restrictions of the XHTML syntax, in XML the U+003C LESS-THAN + SIGN character (<) needs to be escaped as well. In order to prevent attribute-value normalization, some of XML's + whitespace characters — specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED + (LF), and U+000D CARRIAGE RETURN (CR) — also need to be escaped.

    -
    +

    If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority. This allows authors to provide + a fallback URL for legacy user agents that do not support the srcdoc attribute.

    -
    -

    In this example, an HTML page is embedded in another using the object - element.

    +
    - 
    <figure>
- <object data="clock.html"></object>
- <figcaption>My HTML Clock</figcaption>
-</figure>
    +
    -
    +

    When an iframe element is inserted + into a document, the user agent must create a nested browsing context, and + then process the iframe attributes for the "first time".

    -
    +

    When an iframe element is removed + from a document, the user agent must discard the nested browsing context.

    -

    The following example shows how a plugin can be used in HTML (in this case the Flash plugin, - to show a video file). Fallback is provided for users who do not have Flash enabled, in this case - using the video element to show the video for those using user agents that support - video, and finally providing a link to the video for those who have neither Flash - nor a video-capable browser.

    +

    This happens without any unload events firing + (the nested browsing context and its Document are discarded, not data-x="unload a + document">unloaded).

    - 
    <p>Look at my video:
- <object type="application/x-shockwave-flash">
-  <param name=movie value="http://video.example.com/library/watch.swf">
-  <param name=allowfullscreen value=true>
-  <param name=flashvars value="http://video.example.com/vids/315981">
-  <video controls src="http://video.example.com/vids/315981">
-   <a href="http://video.example.com/vids/315981">View video</a>.
-  </video>
- </object>
-</p>
    + -
    +

    Whenever an iframe element with a nested browsing context has its + srcdoc attribute set, changed, or removed, the user agent + must process the iframe attributes.

    +

    Similarly, whenever an iframe element with a nested browsing context + but with no srcdoc attribute specified has its src attribute set, changed, or removed, the user agent must + process the iframe attributes.

    +

    When the user agent is to process the iframe attributes, it must run + the first appropriate steps from the following list:

    -

    The param element

    +
    + +
    If the srcdoc attribute is specified
    + +

    Navigate the element's child browsing context + to a resource whose Content-Type is text/html, whose URL + is about:srcdoc, and whose data consists of the value of the attribute. The + resulting Document must be considered an iframe srcdoc document.

    + +
    Otherwise, if the element has no src attribute + specified, and the user agent is processing the iframe's attributes for the "first + time"
    -
    -
    Categories:
    -
    None.
    -
    Contexts in which this element can be used:
    -
    As a child of an object element, before any flow content.
    -
    Content model:
    -
    Empty.
    -
    Content attributes:
    -
    Global attributes
    -
    name
    -
    value
    -
    DOM interface:
    -
    interface HTMLParamElement : HTMLElement {
-           attribute DOMString name;
-           attribute DOMString value;
-};
    + +

    Queue a task to run the iframe load event steps.

    + +

    The task source for this task is the + DOM manipulation task source.

    +
    -
    -

    The param element defines parameters for plugins invoked by object - elements. It does not represent anything on its own.

    +
    Otherwise
    -

    The name attribute gives the name of the - parameter.

    +
    -

    The value attribute gives the value of the - parameter.

    +
      -

      Both attributes must be present. They may have any value.

      +
    1. -
      +

      If the value of the src attribute is missing, or its + value is the empty string, let url be the string + "about:blank".

      + -

      If both attributes are present, and if the parent element of the param is an - object element, then the element defines a parameter with the given name-value pair.

      +

      Otherwise, resolve the value of the src attribute, relative to the iframe element.

      -

      If either the name or value of a parameter defined - by a param element that is the child of an object element that - represents an instantiated plugin changes, and if that - plugin is communicating with the user agent using an API that features the ability to - update the plugin when the name or value of a parameter so changes, then the user agent must - appropriately exercise that ability to notify the plugin of the change.

      +

      If that is not successful, then let url be the string + "about:blank". Otherwise, let url be the resulting + absolute URL.

      -

      The IDL attributes name and value must both reflect the respective - content attributes of the same name.

      +
      2. -
    +
  • -
    +

    If there exists an ancestor browsing context whose active + document's address, ignoring fragment + identifiers, is equal to url, then abort these steps.

    + + + -

    The following example shows how the param element can be used to pass a parameter - to a plugin, in this case the O3D plugin.

    +
    • - 
    <!DOCTYPE HTML>
-<html lang="en">
-  <head>
-   <title>O3D Utah Teapot</title>
-  </head>
-  <body>
-   <p>
-    <object type="application/vnd.o3d.auto">
-     <param name="o3d_features" value="FloatingPointTextures">
-     <img src="o3d-teapot.png"
-          title="3D Utah Teapot illustration rendered using O3D."
-          alt="When O3D renders the Utah Teapot, it appears as a squat
-          teapot with a shiny metallic finish on which the
-          surroundings are reflected, with a faint shadow caused by
-          the lighting.">
-     <p>To see the teapot actually rendered by O3D on your
-     computer, please download and install the <a
-     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
-    </object>
-    <script src="o3d-teapot.js"></script>
-   </p>
-  </body>
-</html>
    +
  • -
    • +

    Navigate the element's child browsing context + to url.

    + - -

    The video element

    + -
    -
    Categories:
    -
    Flow content.
    -
    Phrasing content.
    -
    Embedded content.
    -
    If the element has a controls attribute: Interactive content.
    -
    Palpable content.
    -
    Contexts in which this element can be used:
    -
    Where embedded content is expected.
    -
    Content model:
    -
    If the element has a src attribute: - zero or more track elements, then - transparent, but with no media element descendants.
    -
    If the element does not have a src attribute: zero or more source elements, then - zero or more track elements, then - transparent, but with no media element descendants.
    -
    Content attributes:
    -
    Global attributes
    -
    src
    -
    crossorigin
    -
    poster
    -
    preload
    -
    autoplay
    -
    mediagroup
    -
    loop
    -
    muted
    -
    controls
    -
    width
    -
    height
    -
    DOM interface:
    -
    - 
    interface HTMLVideoElement : HTMLMediaElement {
-           attribute unsigned long width;
-           attribute unsigned long height;
-  readonly attribute unsigned long videoWidth;
-  readonly attribute unsigned long videoHeight;
-           attribute DOMString poster;
-};
    -
    -

    A video element is used for playing videos or movies, and audio files with - captions.

    + -

    Content may be provided inside the video element. User agents - should not show this content to the user; it is intended for older Web browsers which do - not support video, so that legacy video plugins can be tried, or to show text to the - users of these older browsers informing them of how to access the video contents.

    +

    Any navigation required of the user agent in the process + the iframe attributes algorithm must be completed as an explicit + self-navigation override and with the iframe element's document's + browsing context as the source browsing context.

    -

    In particular, this content is not intended to address accessibility concerns. To - make video content accessible to the partially sighted, the blind, the hard-of-hearing, the deaf, - and those with other physical or cognitive disabilities, a variety of features are available. - Captions can be provided, either embedded in the video stream or as external files using the - track element. Sign-language tracks can be provided, again either embedded in the - video stream or by synchronizing multiple video elements using the mediagroup attribute or a MediaController - object. Audio descriptions can be provided, either as a separate track embedded in the video - stream, or a separate audio track in an audio element slaved to the same controller as the video element(s), or in text - form using a WebVTT file referenced using the track element and - synthesized into speech by the user agent. WebVTT can also be used to provide chapter titles. For - users who would rather not use a media element at all, transcripts or other textual alternatives - can be provided by simply linking to them in the prose near the video element.

    +

    Furthermore, if the active document of the element's child browsing + context before such a navigation was not completely + loaded at the time of the new navigation, then the navigation must be completed with replacement enabled.

    -

    The video element is a media element whose media data is - ostensibly video data, possibly with associated audio data.

    +

    Similarly, if the child browsing context's session history contained + only one Document when the process the iframe attributes + algorithm was invoked, and that was the about:blank Document created + when the child browsing context was created, then any navigation required of the user agent in that algorithm must be completed + with replacement enabled.

    -

    The src, preload, - autoplay, mediagroup, loop, muted, and controls - attributes are the attributes common to all media - elements.

    +

    When a Document in an iframe is marked as completely + loaded, the user agent must synchronously run the iframe load event steps.

    -

    The poster attribute gives the address of an - image file that the user agent can show while no video data is available. The attribute, if - present, must contain a valid non-empty URL potentially surrounded by spaces.

    +

    A load event is also fired at the + iframe element when it is created if no other data is loaded in it.

    -
    +

    Each Document has an iframe load in progress flag and a mute + iframe load flag. When a Document is created, these flags must be unset for + that Document.

    -

    If the specified resource is to be used, then, when the element is created or when the poster attribute is set, changed, or removed, the user agent must - run the following steps to determine the element's poster frame (regardless of the - value of the element's show poster flag):

    +

    The iframe load event steps are as follows:

      -

    1. If there is an existing instance of this algorithm running for this video - element, abort that instance of this algorithm without changing the poster - frame.

      2. - -

    2. If the poster attribute's value is the empty string - or if the attribute is absent, then there is no poster frame; abort these - steps.

      3. +

    3. Let child document be the active document of the + iframe element's nested browsing context.

      4. -

    4. Resolve the poster attribute's value relative to the element. If this fails, - then there is no poster frame; abort these steps.

      5. +

    5. If child document has its mute iframe load flag set, + abort these steps.

      6. -

    6. Fetch the resulting absolute URL, from the element's - Document's origin. This must delay the load event of the - element's document.

      7. +

    7. Set child document's iframe load in progress + flag.

      8. - +

    8. Fire a simple event named load at the + iframe element.

      9. -

    9. If an image is thus obtained, the poster frame is that image. Otherwise, - there is no poster frame.

      10. +

    10. Unset child document's iframe load in progress + flag.

    +

    This, in conjunction with scripting, can be used to probe the URL space of the + local network's HTTP servers. User agents may implement cross-origin + access control policies that are stricter than those described above to mitigate this attack, but + unfortunately such policies are typically not compatible with existing Web content.

    + +

    When the iframe's browsing context's active document is + not ready for post-load tasks, and when anything in the iframe is delaying the load event of the iframe's + browsing context's active document, and when the iframe's + browsing context is in the delaying load events + mode, the iframe must delay the load event of its document.

    + +

    If, during the handling of the load event, the + browsing context in the iframe is again navigated, that will further delay the load event.

    +
    -

    The image given by the poster attribute, - the poster frame, is intended to be a representative frame of the - video (typically one of the first non-blank frames) that gives the user an idea of what the video - is like.

    + -
    +

    If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be + resolved, the browsing context will remain at the initial + about:blank page.

    -
    +

    If the user navigates away from this page, the + iframe's corresponding WindowProxy object will proxy new + Window objects for new Document objects, but the src attribute will not change.

    -

    A video element represents what is given for the first matching condition in the - list below:

    -
    +
    -
    When no video data is available (the element's readyState attribute is either HAVE_NOTHING, or HAVE_METADATA but no video data has yet been obtained at - all, or the element's readyState attribute is any - subsequent value but the media resource does not have a video channel)
    +

    The name attribute, if present, must be a + valid browsing context name. The given value is used to name the nested + browsing context. When the browsing context is created, if the attribute + is present, the browsing context name must be set to the value of this attribute; + otherwise, the browsing context name must be set to the empty string.

    -
    The video element represents its poster frame, if any, - or else transparent black with no intrinsic dimensions.
    +
    -
    When the video element is paused, the current playback position is the first frame of video, - and the element's show poster flag is set
    +

    Whenever the name attribute is set, the nested + browsing context's name must be changed to + the new value. If the attribute is removed, the browsing context name must be set to + the empty string.

    -
    The video element represents its poster frame, if any, - or else the first frame of the video.
    +
    -
    When the video element is paused, and the - frame of video corresponding to the current playback - position is not available (e.g. because the video is seeking or buffering)
    -
    When the video element is neither potentially playing nor paused (e.g. when seeking or stalled)
    +
    -
    The video element represents the last frame of the video to have - been rendered.
    +

    The sandbox attribute, when specified, + enables a set of extra restrictions on any content hosted by the iframe. Its value + must be an unordered set of unique space-separated tokens that are ASCII + case-insensitive. The allowed values are allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation.

    -
    When the video element is paused
    +

    When the attribute is set, the content is treated as being from a unique origin, + forms, scripts, and various potentially annoying APIs are disabled, links are prevented from + targeting other browsing contexts, and plugins are secured. + The allow-same-origin keyword causes + the content to be treated as being from its real origin instead of forcing it into a unique + origin; the allow-top-navigation + keyword allows the content to navigate its top-level browsing context; + and the allow-forms, allow-pointer-lock, allow-popups and allow-scripts keywords re-enable forms, the + pointer lock API, popups, and scripts respectively.

    -
    The video element represents the frame of video corresponding to - the current playback position.
    +

    Setting both the allow-scripts and allow-same-origin keywords together when the + embedded page has the same origin as the page containing the iframe + allows the embedded page to simply remove the sandbox + attribute and then reload itself, effectively breaking out of the sandbox altogether.

    -
    Otherwise (the video element has a video channel and is potentially - playing)
    +

    These flags only take effect when the nested browsing context of + the iframe is navigated. Removing them, or removing the + entire sandbox attribute, has no effect on an + already-loaded page.

    -
    The video element represents the frame of video at the continuously - increasing "current" position. When the - current playback position changes such that the last frame rendered is no longer the - frame corresponding to the current playback position in the video, the new frame - must be rendered.
    +

    Potentially hostile files should not be served from the same server as the file + containing the iframe element. Sandboxing hostile content is of minimal help if an + attacker can convince the user to just visit the hostile content directly, rather than in the + iframe. To limit the damage that can be caused by hostile HTML content, it should be + served from a separate dedicated domain. Using a different domain ensures that scripts in the + files are unable to attack the site, even if the user is tricked into visiting those pages + directly, without the protection of the sandbox + attribute.

    -
    +
    -

    Frames of video must be obtained from the video track that was selected when the event loop last reached - step 1.

    + -

    Which frame in a video stream corresponds to a particular playback position is - defined by the video stream's format.

    +

    When an iframe element with a sandbox + attribute has its nested browsing context created (before the initial + about:blank Document is created), and when an iframe + element's sandbox attribute is set or changed while it + has a nested browsing context, the user agent must parse the sandboxing directive using the attribute's value as the input, the iframe element's nested browsing context's + iframe sandboxing flag set as the output, and, if the + iframe has an allowfullscreen + attribute, the allow fullscreen flag.

    -

    The video element also represents any text track cues whose text track cue active flag is set and whose - text track is in the showing mode, and any - audio from the media resource, at the current playback position.

    +

    When an iframe element's sandbox + attribute is removed while it has a nested browsing context, the user agent must + empty the iframe element's nested browsing context's + iframe sandboxing flag set as the output.

    -

    Any audio associated with the media resource must, if played, be played - synchronised with the current playback position, at the element's effective - media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step - 1.

    +
    -

    In addition to the above, the user agent may provide messages to the user (such as "buffering", - "no video loaded", "error", or more detailed information) by overlaying text or icons on the video - or other areas of the element's playback area, or in another appropriate manner.

    +
    -

    User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video - data itself.

    +

    In this example, some completely-unknown, potentially hostile, user-provided HTML content is + embedded in a page. Because it is served from a separate domain, it is affected by all the normal + cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, + forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or + windows it itself embeds).

    -

    When a video element's media resource has a video channel, the - element provides a paint source whose width is the media resource's - intrinsic width, whose height is the - media resource's intrinsic - height, and whose appearance is the frame of video corresponding to the current playback position, if that is available, or else - (e.g. when the video is seeking or buffering) its previous appearance, if any, or else (e.g. - because the video is still loading the first frame) blackness.

    + 
    <p>We're not scared of you! Here is your content, unedited:</p>
+<iframe sandbox src="http://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>
    -
    +

    It is important to use a separate domain so that if the attacker convinces the + user to visit that page directly, the page doesn't run in the context of the site's origin, which + would make the user vulnerable to any attack found in the page.

    -
    +
    -
    video . videoWidth
    -
    video . videoHeight
    +

    In this example, a gadget from another site is embedded. The gadget has scripting and forms + enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with + its originating server. The sandbox is still useful, however, as it disables plugins and popups, + thus reducing the risk of the user being exposed to malware and other annoyances.

    -
    + 
    <iframe sandbox="allow-same-origin allow-forms allow-scripts"
+        src="http://maps.example.com/embedded.html"></iframe>
    -

    These attributes return the intrinsic dimensions of the video, - or zero if the dimensions are not known.

    +
    - +
    -
    +

    Suppose a file A contained the following fragment:

    -
    + 
    <iframe sandbox="allow-same-origin allow-forms" src=B></iframe>
    -

    The intrinsic width and intrinsic height of the media resource - are the dimensions of the resource in CSS pixels after taking into account the resource's - dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used - by the resource. If an anamorphic format does not define how to apply the aspect ratio to the - video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the - ratio by increasing one dimension and leaving the other unchanged.

    +

    Suppose that file B contained an iframe also:

    -

    The videoWidth IDL attribute must return - the intrinsic width of the video in CSS pixels. - The videoHeight IDL attribute must return - the intrinsic height of the video in CSS - pixels. If the element's readyState attribute is HAVE_NOTHING, then the attributes must return 0.

    + 
    <iframe sandbox="allow-scripts" src=C></iframe>
    -

    Whenever the intrinsic width - or intrinsic height of the video changes - (including, for example, because the selected video - track was changed), if the element's readyState - attribute is not HAVE_NOTHING, the user agent must - queue a task to fire a simple event named resize at the media element.

    +

    Further, suppose that file C contained a link:

    -
    + 
    <a href=D>Link</a>
    -

    The video element supports dimension attributes.

    +

    For this example, suppose all the files were served as text/html.

    -
    +

    Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the + iframe in A has scripts disabled, and this overrides the allow-scripts keyword set on the + iframe in B. Forms are also disabled, because the inner iframe (in B) + does not have the allow-forms keyword + set.

    -

    In the absence of style rules to the contrary, video content should be rendered inside the - element's playback area such that the video content is shown centered in the playback area at the - largest possible size that fits completely within it, with the video content's aspect ratio being - preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the - video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area - that do not contain the video represent nothing.

    +

    Suppose now that a script in A removes all the sandbox attributes in A and B. + This would change nothing immediately. If the user clicked the link in C, loading page D into the + iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the + state of the nested browsing context in the iframe in A when page B was + loaded.

    -

    In user agents that implement CSS, the above requirement can be implemented by - using the style rule suggested in the rendering section.

    +

    Generally speaking, dynamically removing or changing the sandbox attribute is ill-advised, because it can make it quite + hard to reason about what will be allowed and what will not.

    -

    The intrinsic width of a video element's playback area is the intrinsic width of - the poster frame, if that is available and the element currently - represents its poster frame; otherwise, it is the intrinsic width of the video resource, if that is - available; otherwise the intrinsic width is missing.

    +
    -

    The intrinsic height of a video element's playback area is the intrinsic height of - the poster frame, if that is available and the element currently - represents its poster frame; otherwise it is the intrinsic height of the video resource, if that is - available; otherwise the intrinsic height is missing.

    -

    The default object size is a width of 300 CSS pixels and a height of 150 CSS - pixels.

    +
    -
    +

    The seamless attribute is a boolean + attribute. When specified, it indicates that the iframe element's + browsing context is to be rendered in a manner that makes it appear to be part of the + containing document (seamlessly included in the parent document).

    -

    User agents should provide controls to enable or disable the display of closed captions, audio - description tracks, and other additional data associated with the video stream, though such - features should, again, not interfere with the page's normal rendering.

    +
    -

    User agents may allow users to view the video content in manners more suitable to the user - (e.g. full-screen or in an independent resizable window). As for the other user interface - features, controls to enable this should not interfere with the page's normal rendering unless the - user agent is exposing a user interface. - In such an independent context, however, user agents may make full user interfaces visible, with, - e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

    +

    An HTML inclusion is effected using this attribute as in the following example. + In this case, the inclusion is of a site-wide navigation bar. Any links in the + iframe will, in new user agents, be automatically opened in the + iframe's parent browsing context; for legacy user agents, the site could also + include a base element with a target + attribute with the value _parent. Similarly, in new user agents the styles + of the parent page will be automatically applied to the contents of the frame, but to support + legacy user agents authors might wish to include the styles explicitly.

    -

    User agents may allow video playback to affect system features that could interfere with the - user's experience; for example, user agents could disable screensavers while video playback is in - progress.

    + 
    <!DOCTYPE HTML>
+<title>Mirror Mirror — MovieInfo™</title>
+<header>
+ <hgroup>
+  <h1>Mirror Mirror</h1>
+  <h2>Part of the MovieInfo™ Database</h2>
+ </hgroup>
+ <nav>
+  <iframe seamless src="nav.inc"></iframe>
+ </nav>
+</header>
+...
    -
    +
    -

    The poster IDL attribute must - reflect the poster content attribute.

    +
    -
    +

    An iframe element is said to be in seamless mode when all of the + following conditions are met:

    -
    +
      -

      This example shows how to detect when a video has failed to play correctly:

      +
    • The seamless attribute is set on the + iframe element, and - 
      <script>
- function failed(e) {
-   // video playback failed - show a message saying why
-   switch (e.target.error.code) {
-     case e.target.error.MEDIA_ERR_ABORTED:
-       alert('You aborted the video playback.');
-       break;
-     case e.target.error.MEDIA_ERR_NETWORK:
-       alert('A network error caused the video download to fail part-way.');
-       break;
-     case e.target.error.MEDIA_ERR_DECODE:
-       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
-       break;
-     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
-       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
-       break;
-     default:
-       alert('An unknown error occurred.');
-       break;
-   }
- }
-</script>
-<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
-<p><a href="tgif.vid">Download the video file</a>.</p>
      +
    • The iframe element's owner Document's active sandboxing flag + set does not have the sandboxed seamless iframes flag set, and -
    +
  • Either: +
      +
    • The browsing context's active document has the same + origin as the iframe element's Document, or +
    • The browsing context's active document's address has the same origin as the + iframe element's Document, or - +

    • Media queries in the context of the iframe's browsing context + (e.g. on media attributes of style elements in + Documents in that iframe) must be evaluated with respect to the nearest + ancestor browsing context that is not itself being nested through an iframe that is in seamless + mode.

      • +

    • In a CSS-supporting user agent: the user agent must add all the style sheets that apply to + the iframe element to the cascade of the active document of the + iframe element's nested browsing context, at the appropriate cascade + levels, before any style sheets specified by the document itself.

      • +

    • In a CSS-supporting user agent: the user agent must, for the purpose of CSS property + inheritance only, treat the root element of the active document of the + iframe element's nested browsing context as being a child of the + iframe element. (Thus inherited properties on the root element of the document in + the iframe will inherit the computed values of those properties on the + iframe element instead of taking their initial values.)

      • +

    • In visual media, in a CSS-supporting user agent: the user agent should set the intrinsic + width of the iframe to the width that the element would have if it was a + non-replaced block-level element with 'width: auto', unless that width would be zero (e.g. if the + element is floating or absolutely positioned), in which case the user agent should set the + intrinsic width of the iframe to the shrink-to-fit width of the root element (if + any) of the content rendered in the iframe.

      • +

    • In visual media, in a CSS-supporting user agent: the user agent should set the intrinsic + height of the iframe to the shortest height that would make the content rendered in + the iframe at its current width (as given in the previous bullet point) have no + scrollable overflow at its bottom edge. Scrollable overflow is any overflow that would increase the range to + which a scrollbar or other scrolling mechanism can scroll.

      • -

      The audio element

      +
    • -
      -
      Categories:
      -
      Flow content.
      -
      Phrasing content.
      -
      Embedded content.
      -
      If the element has a controls attribute: Interactive content.
      -
      If the element has a controls attribute: Palpable content.
      -
      Contexts in which this element can be used:
      -
      Where embedded content is expected.
      -
      Content model:
      -
      If the element has a src attribute: -zero or more track elements, then -transparent, but with no media element descendants.
      -
      If the element does not have a src attribute: zero or more source elements, then - zero or more track elements, then - transparent, but with no media element descendants.
      -
      Content attributes:
      -
      Global attributes
      -
      src
      -
      crossorigin
      -
      preload
      -
      autoplay
      -
      mediagroup
      -
      loop
      -
      muted
      -
      controls
      -
      DOM interface:
      -
      - 
      [NamedConstructor=Audio(optional DOMString src)]
-interface HTMLAudioElement : HTMLMediaElement {};
      -
      -
      +

      In visual media, in a CSS-supporting user agent: the user agent must force the height of the + initial containing block of the active document of the nested browsing + context of the iframe to zero.

      -

      An audio element represents a sound or audio stream.

      +

      This is intended to get around the otherwise circular dependency of percentage + dimensions that depend on the height of the containing block, thus affecting the height of the + document's bounding box, thus affecting the height of the viewport, thus affecting the size of + the initial containing block.

      - +
      • -

      Content may be provided inside the audio element. User agents - should not show this content to the user; it is intended for older Web browsers which do - not support audio, so that legacy audio plugins can be tried, or to show text to the - users of these older browsers informing them of how to access the audio contents.

      +

    • In speech media, the user agent should render the nested browsing context + without announcing that it is a separate document.

      • -

      In particular, this content is not intended to address accessibility concerns. To - make audio content accessible to the deaf or to those with other physical or cognitive - disabilities, a variety of features are available. If captions or a sign language video are - available, the video element can be used instead of the audio element to - play the audio, allowing users to enable the visual alternatives. Chapter titles can be provided - to aid navigation, using the track element and a WebVTT file. And, - naturally, transcripts or other textual alternatives can be provided by simply linking to them in - the prose near the audio element.

      +
    • -

      The audio element is a media element whose media data is - ostensibly audio data.

      +

      User agents should, in general, act as if the active document of the + iframe's nested browsing context was part of the document that the + iframe is in, if any.

      -

      The src, preload, - autoplay, mediagroup, loop, muted, and controls - attributes are the attributes common to all media - elements.

      +

      For example if the user agent supports listing all the links in a document, + links in "seamlessly" nested documents would be included in that list without being + significantly distinguished from links in the document itself.

      -
      +
      • -

      When an audio element is potentially playing, it must have its audio - data played synchronised with the current playback position, at the element's - effective media volume. The user agent must play the audio from audio tracks that - were enabled when the event loop last reached step 1.

      +

    • The nested browsing context's Window object's + cross-boundary event parent is the browsing context container.

      • -

      When an audio element is not potentially playing, audio must not play - for the element.

      +
    + +

    If the attribute is not specified, or if the origin conditions listed above are + not met, then the user agent should render the nested browsing context in a manner + that is clearly distinguishable as a separate browsing context, and the + seamless browsing context flag must be set to false for that browsing + context.

    + +

    It is important that user agents recheck the above conditions whenever the + active document of the nested browsing context of the + iframe changes, such that the seamless browsing context flag gets unset + if the nested browsing context is navigated to another + origin.

    • -
    +

    The attribute can be set or removed dynamically, with the rendering updating in + tandem.

    -
    audio = new Audio( [ url ] )
    +

    The contenteditable attribute does not + propagate into seamless iframes.

    -
    -

    Returns a new audio element, with the src - attribute set to the value passed in the argument, if applicable.

    +
    -
    +

    The allowfullscreen attribute is a + boolean attribute. When specified, it indicates that Document objects in + the iframe element's browsing context are to be allowed to use requestFullscreen() (if it's not blocked for other + reasons, e.g. there is another ancestor iframe without this attribute set).

    -
    +
    -
    +

    Here, an iframe is used to embed a player from a video site. The allowfullscreen attribute is needed to enable the + player to show its video full-screen.

    -

    A constructor is provided for creating HTMLAudioElement objects (in addition to - the factory methods from DOM such as createElement()): Audio(src). When invoked as a - constructor, it must return a new HTMLAudioElement object (a new audio - element). The element must be created with its preload - attribute set to the literal value "auto". If the - src argument is present, the object created must be created with its src content attribute set to the provided value (this will cause the user agent to invoke the object's - resource selection algorithm before returning). - The element's document must be the active document of the browsing - context of the Window object on which the interface object of the invoked - constructor is found.

    + 
    <article>
+ <header>
+  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
+  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
+ </header>
+ <main>
+  <p>Check out my new ride!</p>
+  <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
+ </main>
+</article>
    +
    + +

    The iframe element supports dimension attributes for cases where the + embedded content has specific dimensions (e.g. ad units have well-defined dimensions).

    + +

    An iframe element never has fallback content, as it will always + create a nested browsing context, regardless of whether the specified initial + contents are successfully used.

    + + +
    + +

    Descendants of iframe elements represent nothing. (In legacy user agents that do + not support iframe elements, the contents would be parsed as markup that could act as + fallback content.)

    + +

    When used in HTML documents, the allowed content model + of iframe elements is text, except that invoking the HTML fragment parsing + algorithm with the iframe element as the context element and the text contents as the input must result in a list of nodes that are all phrasing content, + with no parse errors having occurred, with no script + elements being anywhere in the list or as descendants of elements in the list, and with all the + elements in the list (including their descendants) being themselves conforming.

    + +

    The iframe element must be empty in XML documents.

    + +

    The HTML parser treats markup inside iframe elements as + text.

    - -

    User agents may support any audio codecs and container formats.

    +

    The IDL attributes src, srcdoc, name, sandbox, and seamless must reflect the respective + content attributes of the same name.

    -

    User agents must support the WAVE container format with audio encoded using the 16 bit PCM (LE) - codec, at sampling frequencies of 11.025kHz, 22.050kHz, and 44.100kHz, and for both mono and - stereo. [WAVE]

    +

    The allowFullscreen IDL attribute + must reflect the allowfullscreen + content attribute.

    - WAVE -
    http://en.wikipedia.org/wiki/WAV?
    - - -> +

    The contentDocument IDL attribute + must return the Document object of the active document of the + iframe element's nested browsing context, if any and if its + effective script origin is the same origin as the effective script + origin specified by the incumbent settings object, or null otherwise.

    - -

    Implementations are free to implement support for audio codecs either natively, or - using platform-specific APIs, or using plugins: this specification does not specify how codecs are - to be implemented.

    +

    The contentWindow IDL attribute must + return the WindowProxy object of the iframe element's nested + browsing context, if any, or null otherwise.

    - (when replacing this text, also fix "- -" nested comments)--> +
    + +

    Here is an example of a page using an iframe to include advertising from an + advertising broker:

    + 
    <iframe src="http://ads.example.com/?customerid=923513721&amp;format=banner"
+        width="468" height="60"></iframe>
    +
    -

    The source element

    + + + +

    The embed element

    + +
    Categories:
    -
    None.
    +
    Flow content.
    +
    Phrasing content.
    +
    Embedded content.
    +
    Interactive content.
    +
    Palpable content.
    Contexts in which this element can be used:
    -
    As a child of a media element, before any flow content - or track elements.
    +
    Where embedded content is expected.
    Content model:
    Empty.
    Content attributes:
    Global attributes
    -
    src
    -
    type
    +
    src
    +
    type
    +
    width
    +
    height
    +
    Any other attribute that has no namespace (see prose).
    DOM interface:
    -
    interface HTMLSourceElement : HTMLElement {
-           attribute DOMString src;
-           attribute DOMString type;
+
    interface HTMLEmbedElement : HTMLElement {
+           attribute DOMString src;
+           attribute DOMString type;
+           attribute DOMString width;
+           attribute DOMString height;
+  legacycaller any (any... arguments);
 };
    
+    
    
+    
    Depending on the type of content instantiated by the
+    embed element, the node may also support other
+    interfaces.
    
+
    -

    The source element allows authors to specify multiple alternative media resources for media - elements. It does not represent anything on its own.

    +

    The embed element provides an integration point for an external (typically + non-HTML) application or interactive content.

    -

    The src attribute gives the address of the - media resource. The value must be a valid non-empty URL potentially surrounded - by spaces. This attribute must be present.

    +

    The src attribute gives the address of the + resource being embedded. The attribute, if present, must contain a valid non-empty URL + potentially surrounded by spaces.

    -

    Dynamically modifying a source element and its attribute when the - element is already inserted in a video or audio element will have no - effect. To change what is playing, just use the src attribute - on the media element directly, possibly making use of the canPlayType() method to pick from amongst available - resources. Generally, manipulating source elements manually after the document has - been parsed is an unnecessarily complicated approach.

    +

    If the itemprop attribute is specified on an + embed element, then the src attribute must also + be specified.

    -

    The type attribute gives the type of the - media resource, to help the user agent determine if it can play this media - resource before fetching it. If specified, its value must be a valid MIME - type. The codecs parameter, which certain MIME types define, might be - necessary to specify exactly how the resource is encoded.

    +

    The type attribute, if present, gives the + MIME type by which the plugin to instantiate is selected. The value must be a + valid MIME type. If both the type attribute and + the src attribute are present, then the type attribute must specify the same type as the explicit Content-Type metadata of the resource given by the src attribute.

    -
    +
    -

    The following list shows some examples of how to use the codecs= MIME - parameter in the type attribute.

    +

    While any of the following conditions are occurring, any plugin instantiated for + the element must be removed, and the embed element represents + nothing:

    -
    +
      -
      H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
      - 
      <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      +

    • The element has neither a src attribute nor a type attribute.

      • -
      H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
      - 
      <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
      +

    • The element has a media element ancestor.

      • -
      H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
      - 
      <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
      +

    • The element has an ancestor object element that is not showing its + fallback content.

      • -
      H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
      - 
      <source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
      +
    +

    An embed element is said to be potentially + active when the following conditions are all met simultaneously:

    -
    MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    - 
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
    +
      -
      MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
      - 
      <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
      +
    • The element is in a Document or was in a Document the last time the event loop + reached step 1.
      • -
      MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
      - 
      <source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
      +
    • The element's Document is fully active.
      • +
    • The element has either a src attribute set or a type attribute set (or both).
      • -
      Theora video and Vorbis audio in Ogg container
      - 
      <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
      +
    • The element's src attribute is either absent or its value + is not the empty string.
      • -
      Theora video and Speex audio in Ogg container
      - 
      <source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
      +
    • The element is not a descendant of a media element.
      • -
      Vorbis audio alone in Ogg container
      - 
      <source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
      +
    • The element is not a descendant of an object element that is not showing its + fallback content.
      • -
      Speex audio alone in Ogg container
      - 
      <source src='audio.spx' type='audio/ogg; codecs=speex'>
      +
    • The element is being rendered, or was being rendered the last time + the event loop reached step 1.
      • -
      FLAC audio alone in Ogg container
      - 
      <source src='audio.oga' type='audio/ogg; codecs=flac'>
      +
    -
    Dirac video and Vorbis audio in Ogg container
    - 
    <source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
    +

    Whenever an embed element that was not potentially active becomes potentially active, and whenever a potentially active embed element that is + remaining potentially active and has its src attribute set, changed, or removed or its type attribute set, changed, or removed, the user agent must + queue a task using the embed task source to run the + embed element setup steps.

    - +

    The embed element setup steps are as follows:

    - +
      - +
      - +

      The user agent must resolve the value of the element's + src attribute, relative to the element. If that is + successful, the user agent should fetch the resulting absolute + URL, from the element's browsing context scope origin if it has one. The task that + is queued by the networking task source once + the resource has been fetched must run the following steps:

      + - +
        -
    +

  • If another task has since been queued to run + the embed element setup steps for this element, then abort these + steps.

    • -
    +
  • -
    +

    Determine the type of the content being embedded, as + follows (stopping at the first substep that determines the type):

    -

    If a source element is inserted as a child of a media element that - has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media - element's resource selection - algorithm.

    +
      -

      The IDL attributes src and type must reflect the respective content - attributes of the same name.

      +

    1. If the element has a type attribute, and that + attribute's value is a type that a plugin supports, then the value of the + type attribute is the content's type.

      2. -
    +
  • -
    + -

    If the author isn't sure if user agents will all be able to render the media resources - provided, the author can listen to the error event on the last - source element and trigger fallback behavior:

    +

    Otherwise, if applying the URL parser algorithm to the URL of + the specified resource (after any redirects) results in a parsed URL whose + path component matches a pattern that a + plugin supports, then the content's + type is the type that that plugin can handle.

    - 
    <script>
- function fallback(video) {
-   // replace <video> with its contents
-   while (video.hasChildNodes()) {
-     if (video.firstChild instanceof HTMLSourceElement)
-       video.removeChild(video.firstChild);
-     else
-       video.parentNode.insertBefore(video.firstChild, video);
-   }
-   video.parentNode.removeChild(video);
- }
-</script>
-<video controls autoplay>
- <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
- <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
-         onerror="fallback(parentNode)">
- ...
-</video>
    +

    For example, a plugin might say that it can handle resources with path components that end with the four character string + ".swf".

    -
    + + +
    • - -

    The track element

    +

  • Otherwise, if the specified resource has explicit + Content-Type metadata, then that is the content's + type.

    • -
    -
    Categories:
    -
    None.
    -
    Contexts in which this element can be used:
    -
    As a child of a media element, before any flow content.
    -
    Content model:
    -
    Empty.
    -
    Content attributes:
    -
    Global attributes
    -
    kind
    -
    src
    -
    srclang
    -
    label
    -
    default
    -
    DOM interface:
    -
    -
    interface HTMLTrackElement : HTMLElement {
-           attribute DOMString kind;
-           attribute DOMString src;
-           attribute DOMString srclang;
-           attribute DOMString label;
-           attribute boolean default;
+         
  • Otherwise, the content has no type and there
+         can be no appropriate plugin for it.
    • 
 
-  const unsigned short NONE = 0;
-  const unsigned short LOADING = 1;
-  const unsigned short LOADED = 2;
-  const unsigned short ERROR = 3;
-  readonly attribute unsigned short readyState;
+         
 
-  readonly attribute TextTrack track;
-};
    -
    -
    + -

    The track element allows authors to specify explicit external timed text tracks for media elements. It - does not represent anything on its own.

    + -

    The kind attribute is an enumerated - attribute. The following table lists the keywords defined for this attribute. The keyword - given in the first cell of each row maps to the state given in the second cell.

    +
  • - - - - - - - - - -
    Keyword - State - Brief description -
    subtitles - Subtitles - - Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the media resource's audio track). - Overlaid on the video. -
    captions - Captions - - Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf). - Overlaid on the video; labeled as appropriate for the hard-of-hearing. -
    descriptions - Descriptions - - Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). - Synthesized as audio. -
    chapters - Chapters - - Chapter titles, intended to be used for navigating the media resource. - Displayed as an interactive (potentially nested) list in the user agent's interface. -
    metadata - Metadata - - Tracks intended for use from script. - Not displayed by the user agent. -
    +

    If the previous step determined that the content's + type is image/svg+xml, then run the following substeps:

    -

    The attribute may be omitted. The missing value default is the subtitles state.

    +
      -

      The src attribute gives the address of the text - track data. The value must be a valid non-empty URL potentially surrounded by spaces. - This attribute must be present.

      +

    1. If the embed element is not associated with a nested browsing + context, associate the element with a newly created nested browsing + context, and, if the element has a name + attribute, set the browsing context name of the element's nested + browsing context to the value of this attribute.

      + -
      +

    2. Navigate the nested browsing context to + the fetched resource, with replacement enabled, and with the + embed element's document's browsing context as the source + browsing context. (The src attribute of the + embed element doesn't get updated if the browsing context gets further + navigated to other locations.)

      3. -

      If the element has a src attribute whose value is not the - empty string and whose value, when the attribute was set, could be successfully resolved relative to the element, then the element's track - URL is the resulting absolute URL. Otherwise, the element's track - URL is the empty string.

      +

    3. The embed element now represents its associated + nested browsing context.

      4. -
    • + -

    If the element's track URL identifies a WebVTT resource, and the - element's kind attribute is not in the metadata state, then the WebVTT file must be - a WebVTT file using cue text.

    + -

    Furthermore, if the element's track URL identifies a WebVTT resource, - and the element's kind attribute is in the chapters state, then the WebVTT file must be - both a WebVTT file using chapter title text and a WebVTT file using only nested - cues.

    +
  • -

    The srclang attribute gives the language of - the text track data. The value must be a valid BCP 47 language tag. This attribute must be present - if the element's kind attribute is in the subtitles state.

    +

    Otherwise, find and instantiate an appropriate plugin based on the content's type, and hand that plugin the + content of the resource, replacing any previously instantiated plugin for the element. The + embed element now represents this plugin instance.

    -
    +
    • -

    If the element has a srclang attribute whose value is - not the empty string, then the element's track language is the value of the attribute. - Otherwise, the element has no track language.

    +

  • Once the resource or plugin has completely loaded, queue a task to + fire a simple event named load at the + element.

    • - + -

    The label attribute gives a user-readable - title for the track. This title is used by user agents when listing subtitle, caption, and audio description tracks in their user interface.

    +

    Whether the resource is fetched successfully or not (e.g. whether the response code was a + 2xx code or equivalent) must be ignored + when determining the content's type and when handing + the resource to the plugin.

    -

    The value of the label attribute, if the attribute is - present, must not be the empty string. Furthermore, there must not be two track - element children of the same media element whose kind attributes are in the same state, whose srclang attributes are both missing or have values that - represent the same language, and whose label attributes are - again both missing or both have the same value.

    +

    This allows servers to return data for plugins even with error responses (e.g. + HTTP 500 Internal Server Error codes can still contain plugin data).

    -
    +

    Fetching the resource must delay the load event of the element's document.

    + + + -

    If the element has a label attribute whose value is not - the empty string, then the element's track label is the value of the attribute. - Otherwise, the element's track label is an empty string.

    + -
    +
    If the element has no src attribute set
    -

    The default attribute is a boolean - attribute, which, if specified, indicates that the track is to be enabled if the user's - preferences do not indicate that another track would be more appropriate.

    +
    -

    Each media element must have no more than one track element child - whose kind attribute is in the subtitles or captions state and whose default attribute is specified.

    +

    The user agent should find and instantiate an appropriate plugin based on the + value of the type attribute. The embed + element now represents this plugin instance.

    -

    Each media element must have no more than one track element child - whose kind attribute is in the description state and whose default attribute is specified.

    +

    Once the plugin is completely loaded, queue a task to fire a simple + event named load at the element.

    -

    Each media element must have no more than one track element child - whose kind attribute is in the chapters state and whose default attribute is specified.

    +
    -

    There is no limit on the number of track elements whose kind attribute is in the metadata state and whose default attribute is specified.

    + -
    + -
    track . readyState
    -
    -

    Returns the text track readiness state, - represented by a number from the following list:

    -
    -
    track . NONE (0)
    -
    -

    The text track not loaded state.

    -
    -
    track . LOADING (1)
    -
    -

    The text track loading state.

    -
    -
    track . LOADED (2)
    -
    -

    The text track loaded state.

    -
    -
    track . ERROR (3)
    -
    -

    The text track failed to load state.

    -
    -
    -
    + -
    track . track
    +

    The embed element has no fallback content. If the user agent can't + find a suitable plugin when attempting to find and instantiate one for the algorithm above, then + the user agent must use a default plugin. This default could be as simple as saying "Unsupported + Format".

    -
    +

    Whenever an embed element that was potentially + active stops being potentially active, any + plugin that had been instantiated for that element must be unloaded.

    -

    Returns the TextTrack object corresponding to the text track of the track element.

    +

    When a plugin is to be instantiated but it cannot be secured and the sandboxed plugins browsing context + flag is set on the embed element's Document's active + sandboxing flag set, then the user agent must not instantiate the plugin, and + must instead render the embed element in a manner that conveys that the + plugin was disabled. The user agent may offer the user the option to override the + sandbox and instantiate the plugin anyway; if the user invokes such an option, the + user agent must act as if the conditions above did not apply for the purposes of this element.

    -
    +

    Plugins that cannot be secured are + disabled in sandboxed browsing contexts because they might not honor the restrictions imposed by + the sandbox (e.g. they might allow scripting even when scripting in the sandbox is disabled). User + agents should convey the danger of overriding the sandbox to the user if an option to do so is + provided.

    -
    +

    When an embed element represents a nested browsing context: if the + embed element's nested browsing context's active document + is not ready for post-load tasks, and when anything is delaying the load event of the embed element's browsing + context's active document, and when the embed element's + browsing context is in the delaying load + events mode, the embed must delay the load event of its + document.

    + +

    The task source for the tasks mentioned in this + section is the DOM manipulation task source.

    + + + +

    Any namespace-less attribute other than name, align, hspace, and vspace may be + specified on the embed element, so long as its name is XML-compatible + and contains no uppercase ASCII letters. These attributes are then passed as + parameters to the plugin.

    + +

    All attributes in HTML documents get lowercased automatically, so the + restriction on uppercase letters doesn't affect such documents.

    + +

    The four exceptions are to exclude legacy attributes that have side-effects beyond + just sending parameters to the plugin.

    -

    The readyState attribute must return the - numeric value corresponding to the text track readiness state of the - track element's text track, as defined by the following list:

    +

    The user agent should pass the names and values of all the attributes of the embed + element that have no namespace to the plugin used, when one is instantiated.

    -
    -
    NONE (numeric value 0)
    -
    The text track not loaded state.
    -
    LOADING (numeric value 1)
    -
    The text track loading state.
    -
    LOADED (numeric value 2)
    -
    The text track loaded state.
    -
    ERROR (numeric value 3)
    -
    The text track failed to load state.
    -
    +

    The HTMLEmbedElement object representing the element must expose the scriptable + interface of the plugin instantiated for the embed element, if any. At a + minimum, this interface must implement the legacy caller + operation. (It is suggested that the default behavior of this legacy caller operation, e.g. + the behavior of the default plugin's legacy caller operation, be to throw a + NotSupportedError exception.)

    -

    The track IDL attribute must, on getting, - return the track element's text track's corresponding - TextTrack object.

    +
    -

    The src, srclang, label, and default IDL attributes must reflect the - respective content attributes of the same name. The kind IDL attribute must reflect the content - attribute of the same name, limited to only known values.

    +

    The embed element supports dimension attributes.

    + +
    + +

    The IDL attributes src and type each must reflect the respective + content attributes of the same name.

    -

    This video has subtitles in several languages:

    +

    Here's a way to embed a resource that requires a proprietary plugin, like Flash:

    - 
    <video src="brave.webm">
- <track kind=subtitles src=brave.en.vtt srclang=en label="English">
- <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
- <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
- <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
-</video>
    + 
    <embed src="catgame.swf">
    -

    (The lang attributes on the last two describe the language of - the label attribute, not the language of the subtitles - themselves. The language of the subtitles is given by the srclang attribute.)

    +

    If the user does not have the plugin (for example if the plugin vendor doesn't support the + user's platform), then the user will be unable to use the resource.

    -
    +

    To pass the plugin a parameter "quality" with the value "high", an attribute can be + specified:

    - -

    Media elements

    + 
    <embed src="catgame.swf" quality="high">
    -

    Media elements (audio and video, in - this specification) implement the following interface:

    +

    This would be equivalent to the following, when using an object element + instead:

    - 
    enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
-interface HTMLMediaElement : HTMLElement {
+   
    <object data="catgame.swf">
+ <param name="quality" value="high">
+</object>
    
 
-  // error state
-  readonly attribute MediaError? error;
+  
 
-  // network state
-           attribute DOMString src;
-  readonly attribute DOMString currentSrc;
-           attribute DOMString crossOrigin;
-  const unsigned short NETWORK_EMPTY = 0;
-  const unsigned short NETWORK_IDLE = 1;
-  const unsigned short NETWORK_LOADING = 2;
-  const unsigned short NETWORK_NO_SOURCE = 3;
-  readonly attribute unsigned short networkState;
-           attribute DOMString preload;
-  readonly attribute TimeRanges buffered;
-  void load();
-  CanPlayTypeResult canPlayType(DOMString type);
-
-  // ready state
-  const unsigned short HAVE_NOTHING = 0;
-  const unsigned short HAVE_METADATA = 1;
-  const unsigned short HAVE_CURRENT_DATA = 2;
-  const unsigned short HAVE_FUTURE_DATA = 3;
-  const unsigned short HAVE_ENOUGH_DATA = 4;
-  readonly attribute unsigned short readyState;
-  readonly attribute boolean seeking;
-
-  // playback state
-           attribute double currentTime;
-  void fastSeek(double time);
-  readonly attribute unrestricted double duration;
-  Date getStartDate();
-  readonly attribute boolean paused;
-           attribute double defaultPlaybackRate;
-           attribute double playbackRate;
-  readonly attribute TimeRanges played;
-  readonly attribute TimeRanges seekable;
-  readonly attribute boolean ended;
-           attribute boolean autoplay;
-           attribute boolean loop;
-  void play();
-  void pause();
-
-  // media controller
-           attribute DOMString mediaGroup;
-           attribute MediaController? controller;
-
-  // controls
-           attribute boolean controls;
-           attribute double volume;
-           attribute boolean muted;
-           attribute boolean defaultMuted;
-
-  // tracks
-  readonly attribute AudioTrackList audioTracks;
-  readonly attribute VideoTrackList videoTracks;
-  readonly attribute TextTrackList textTracks;
-  TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = "");
-};
    - -

    The media element attributes, src, crossorigin, preload, autoplay, - mediagroup, loop, - muted, and controls, apply to all media - elements. They are defined in this section.

    - - - - - -

    Media elements are used to present audio data, or video and - audio data, to the user. This is referred to as media data in this section, since this - section applies equally to media elements for audio or for - video. - - The term media resource is used to refer to the complete set of media data, e.g. the - complete video file, or complete audio file. - -

    -

    A media resource can have multiple audio and video tracks. For the purposes of a - media element, the video data of the media resource is only that of the - currently selected track (if any) as given by the element's videoTracks attribute when the event loop last - reached step 1, and the audio data of the media resource is the result of mixing all - the currently enabled tracks (if any) given by the element's audioTracks attribute when the event loop last - reached step 1.

    - -

    Both audio and video elements can be used for both audio - and video. The main difference between the two is simply that the audio element has - no playback area for visual content (such as video or captions), whereas the video - element does.

    - -
    - -

    Except where otherwise explicitly specified, the task source for all the tasks - queued in this section and its subsections is the media - element event task source of the media element in question.

    - -
    +

    The object element

    -
    Error codes
    - -
    - -
    media . error
    - +
    +
    Categories:
    +
    Flow content.
    +
    Phrasing content.
    +
    Embedded content.
    +
    If the element has a usemap attribute: Interactive content.
    +
    Listed, submittable, and reassociateable form-associated element.
    +
    Palpable content.
    +
    Contexts in which this element can be used:
    +
    Where embedded content is expected.
    +
    Content model:
    +
    Zero or more param elements, then, transparent.
    +
    Content attributes:
    +
    Global attributes
    +
    data
    +
    type
    +
    typemustmatch
    +
    name
    +
    usemap
    +
    form
    +
    width
    +
    height
    +
    DOM interface:
    +
    interface HTMLObjectElement : HTMLElement {
+           attribute DOMString data;
+           attribute DOMString type;
+           attribute boolean typeMustMatch;
+           attribute DOMString name;
+           attribute DOMString useMap;
+  readonly attribute HTMLFormElement? form;
+           attribute DOMString width;
+           attribute DOMString height;
+  readonly attribute Document? contentDocument;
+  readonly attribute WindowProxy? contentWindow;
 
-    
    Returns a MediaError object representing the current error state of the
-    element.
    
-
-    
    Returns null if there is no error.
    
-
-
    - -
    - -
    - -

    All media elements have an associated error status, which - records the last error the element encountered since its resource selection algorithm was last invoked. The - error attribute, on getting, must return the - MediaError object created for this last error, or null if there has not been an - error.

    - -
    + readonly attribute boolean willValidate; + readonly attribute ValidityState validity; + readonly attribute DOMString validationMessage; + boolean checkValidity(); + boolean reportValidity(); + void setCustomValidity(DOMString error); - 
    interface MediaError {
-  const unsigned short MEDIA_ERR_ABORTED = 1;
-  const unsigned short MEDIA_ERR_NETWORK = 2;
-  const unsigned short MEDIA_ERR_DECODE = 3;
-  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
-  readonly attribute unsigned short code;
+  legacycaller any (any... arguments);
 };
    - -
    - -
    media . error . code
    - -
    - -

    Returns the current error's error code, from the list below.

    - +
    +

    Depending on the type of content instantiated by the + object element, the node also supports other + interfaces.

    +
    +
    -
    - -
    - -

    The code attribute of a - MediaError object must return the code for the error, which must be one of the - following:

    - -
    - -
    - -
    MEDIA_ERR_ABORTED (numeric value 1)
    - -
    The fetching process for the media resource was aborted by the user agent at the - user's request.
    - -
    MEDIA_ERR_NETWORK (numeric value 2)
    - -
    A network error of some description caused the user agent to stop fetching the media - resource, after the resource was established to be usable.
    - -
    MEDIA_ERR_DECODE (numeric value 3)
    - -
    An error of some description occurred while decoding the media resource, after - the resource was established to be usable.
    - -
    MEDIA_ERR_SRC_NOT_SUPPORTED (numeric value 4)
    +

    The object element can represent an external resource, which, depending on the + type of the resource, will either be treated as an image, as a nested browsing + context, or as an external resource to be processed by a plugin.

    -
    The media resource indicated by the src - attribute was not suitable.
    +

    The data attribute, if present, specifies the + address of the resource. If present, the attribute must be a valid non-empty URL potentially + surrounded by spaces.

    -
    +

    Authors who reference resources from other origins + that they do not trust are urged to use the typemustmatch attribute defined below. Without that + attribute, it is possible in certain cases for an attacker on the remote host to use the plugin + mechanism to run arbitrary scripts, even if the author has used features such as the Flash + "allowScriptAccess" parameter.

    +

    The type attribute, if present, specifies the + type of the resource. If present, the attribute must be a valid MIME type.

    +

    At least one of either the data attribute or the type attribute must be present.

    -
    Location of the media resource
    +

    If the itemprop attribute is specified on an object + element, then the data attribute must also be specified.

    -

    The src content attribute on media elements gives the address of the media resource (video, audio) to show. The - attribute, if present, must contain a valid non-empty URL potentially surrounded by - spaces.

    +

    The typemustmatch attribute is a + boolean attribute whose presence indicates that the resource specified by the data attribute is only to be used if the value of the type attribute and the Content-Type of the + aforementioned resource match.

    -

    If the itemprop attribute is specified on the media - element, then the src attribute must also be - specified.

    +

    The typemustmatch attribute must not be + specified unless both the data attribute and the type attribute are present.

    -

    The crossorigin content attribute on - media elements is a CORS settings attribute.

    +

    The name attribute, if present, must be a + valid browsing context name. The given value is used to name the nested + browsing context, if applicable.

    -

    If a media element is created with a - src attribute, the user agent must synchronously invoke the - media element's resource selection - algorithm.

    - -

    If a src attribute of a media element is set - or changed, the user agent must invoke the media element's media element load - algorithm. (Removing the src attribute does - not do this, even if there are source elements present.)

    - -

    The src IDL attribute on media elements must reflect the content attribute of the same - name.

    +

    Whenever one of the following conditions occur:

    -

    The crossOrigin IDL attribute must - reflect the crossorigin content - attribute, limited to only known values.

    +
      -
    +
  • the element is created, -
    +
  • the element is popped off the stack of open elements of an HTML + parser or XML parser, -
    media . currentSrc
    +
  • the element is not on the stack of open elements of an HTML parser + or XML parser, and it is either inserted into a document or removed from a document, -
    +
  • the element's Document changes whether it is fully active, -

    Returns the address of the current media resource.

    +
  • one of the element's ancestor object elements changes to or from showing its + fallback content, -

    Returns the empty string when there is no media resource.

    +
  • the element's classid attribute is set, changed, or + removed, -
    • +
  • the element's classid attribute is not present, and + its data attribute is set, changed, or removed, -
    • +
  • neither the element's classid attribute nor its + data attribute are present, and its type attribute is set, changed, or removed, -
    +
  • the element changes from being rendered to not being rendered, or vice versa, -

    The currentSrc IDL attribute is initially - the empty string. Its value is changed by the resource - selection algorithm defined below.

    + - +

    ...the user agent must queue a task to run the following steps to (re)determine + what the object element represents. This task + being queued or actively running must delay the load + event of the element's document.

    -

    There are two ways to specify a media resource, the src attribute, or source elements. The attribute - overrides the elements.

    +
      +
    1. +

      If the user has indicated a preference that this object element's fallback + content be shown instead of the element's usual behavior, then jump to the step below + labeled fallback.

      -
      MIME types
      +

      For example, a user could ask for the element's fallback content to + be shown because that content uses a format that the user finds more accessible.

      -

      A media resource can be described in terms of its type, specifically a - MIME type, in some cases with a codecs parameter. (Whether the - codecs parameter is allowed or not depends on the MIME type.)

      +
      2. -

      Types are usually somewhat incomplete descriptions; for example "video/mpeg" doesn't say anything except what the container type is, and even a - type like "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" doesn't - include information like the actual bitrate (only the maximum bitrate). Thus, given a type, a user - agent can often only know whether it might be able to play media of that type (with - varying levels of confidence), or whether it definitely cannot play media of that - type.

      +
    2. -

      A type that the user agent knows it cannot render is one that describes a resource - that the user agent definitely does not support, for example because it doesn't recognise the - container type, or it doesn't support the listed codecs.

      +

      If the element has an ancestor media element, or has an ancestor + object element that is not showing its fallback content, or + if the element is not in a Document with a + browsing context, or if the element's Document is not fully + active, or if the element is still in the stack of open elements of an + HTML parser or XML parser, or if the element is not being + rendered, then jump to the step below labeled fallback.

      -

      The MIME type "application/octet-stream" with no parameters is never - a type that the user agent knows it cannot render. User agents must treat that type - as equivalent to the lack of any explicit Content-Type metadata - when it is used to label a potential media resource.

      +
      3. -

      Only the MIME type "application/octet-stream" with no - parameters is special-cased here; if any parameter appears with it, it will be treated just like - any other MIME type. This is a deviation from the rule that unknown MIME type parameters should be ignored.

      +
    3. -
      + -
      media . canPlayType(type)
      +

      If the classid attribute is present, and has a + value that isn't the empty string, then: if the user agent can find a plugin + suitable according to the value of the classid + attribute, and either plugins aren't being sandboxed or that + plugin can be secured, then that + plugin should be used, and the value of the data attribute, if any, should be passed to the + plugin. If no suitable plugin can be found, or if the + plugin reports an error, jump to the step below labeled fallback.

      -
      + -

      Returns the empty string (a negative response), "maybe", or "probably" based on how confident - the user agent is that it can play media resources of the given type.

      +
      4. - + - +

    4. If the data attribute is present and its value is + not the empty string, then:

      -
      +
        -

        The canPlayType(type) method must return the - empty string if type is a type that the user agent knows it cannot - render or is the type "application/octet-stream"; it must return "probably" if the user agent is confident - that the type represents a media resource that it can render if used in with this - audio or video element; and it must return "maybe" otherwise. Implementors are encouraged - to return "maybe" unless the type can be - confidently established as being supported or not. Generally, a user agent should never return - "probably" for a type that allows the codecs parameter if that parameter is not present.

        +

      1. If the type attribute is present and its value is + not a type that the user agent supports, and is not a type that the user agent can find a + plugin for, then the user agent may jump to the step below labeled fallback + without fetching the content to examine its real type.

        2. -
      +

    5. Resolve the URL specified by the data attribute, relative to the element.

      6. -
      +

    6. If that failed, fire a simple event named error at the element, then jump to the step below labeled + fallback.

      7. -

      This script tests to see if the user agent supports a (fictional) new format to dynamically - decide whether to use a video element or a plugin:

      +
    7. - 
      <section id="video">
- <p><a href="playing-cats.nfv">Download video</a></p>
-</section>
-<script>
- var videoSection = document.getElementById('video');
- var videoElement = document.createElement('video');
- var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
- if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
-   // not confident of browser support
-   // but we have a plugin
-   // so use plugin instead
-   videoElement = document.createElement("embed");
- } else if (support == "") {
-   // no support from browser and no plugin
-   // do nothing
-   videoElement = null;
- }
- if (videoElement) {
-   while (videoSection.hasChildNodes())
-     videoSection.removeChild(videoSection.firstChild);
-   videoElement.setAttribute("src", "playing-cats.nfv");
-   videoSection.appendChild(videoElement);
- }
-</script>
      +

      Fetch the resulting absolute URL, from the element's + browsing context scope origin if it has one.

      -
      8. + +

      Fetching the resource must delay the load event of the element's document + until the task that is queued by the networking task source once the resource has been + fetched (defined next) has been run.

      -

      The type attribute of the - source element allows the user agent to avoid downloading resources that use formats - it cannot render.

      +

      For the purposes of the application cache networking model, this + fetch operation is not for a child browsing context (though it might + end up being used for one after all, as defined below).

      + -
      Network states
      +

    8. If the resource is not yet available (e.g. because the resource was not available in the + cache, so that loading the resource required making a request over the network), then jump to + the step below labeled fallback. The task that is + queued by the networking task source once the + resource is available must restart this algorithm from this step. Resources can load + incrementally; user agents may opt to consider a resource "available" whenever enough data has + been obtained to begin processing the resource.

      9. -
      +

    9. If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), fire + a simple event named error at the element, then jump to + the step below labeled fallback.

      10. -
      media . networkState
      +
    10. -
      +

      Determine the resource type, as follows:

      -

      Returns the current state of network activity for the element, from the codes in the list - below.

      + - +
        -
        +
      1. -
        NETWORK_EMPTY (numeric value 0)
        +

        Let the resource type be unknown.

        -
        The element has not yet been initialized. All attributes are in their initial states.
        +
        2. -
        NETWORK_IDLE (numeric value 1)
        +
      2. -
        The element's resource - selection algorithm is active and has selected a resource, but it is not actually using the network at this time.
        +

        If the object element has a type + attribute and a typemustmatch attribute, and + the resource has associated Content-Type metadata, and the + type specified in the resource's Content-Type metadata is + an ASCII case-insensitive match for the value of the element's type attribute, then let resource type + be that type and jump to the step below labeled handler.

        -
        NETWORK_LOADING (numeric value 2)
        + -
        The user agent is actively trying to download data.
        +
        3. -
        NETWORK_NO_SOURCE (numeric value 3)
        +
      3. -
        The element's resource - selection algorithm is active, but it has not yet found a resource to use.
        +

        If the object element has a typemustmatch attribute, jump to the step below + labeled handler.

        -
        4. + -
        +
      4. -

        The resource selection algorithm defined - below describes exactly when the networkState - attribute changes value and what events fire to indicate changes in this state.

        + -
        5. +

        If the user agent is configured to strictly obey Content-Type headers for this resource, + and the resource has associated Content-Type metadata, + then let the resource type be the type specified in the resource's Content-Type metadata, and jump to the step below + labeled handler.

        +

        This can introduce a vulnerability, wherein a site is trying to embed a + resource that uses a particular plugin, but the remote site overrides that and instead + furnishes the user agent with a resource that triggers a different plugin with different + security characteristics.

        + +
      5. -
        Loading the media resource
        +

        If there is a type attribute present on the + object element, and that attribute's value is not a type that the user agent + supports, but it is a type that a plugin supports, then let the resource type be the type specified in that type attribute, and jump to the step below labeled + handler.

        -
        +
        6. -
        media . load()
        +
      6. -
        +

        Run the appropriate set of steps from the following + list:

        -

        Causes the element to reset and start selecting and loading a new media resource - from scratch.

        +
        -
        +
        If the resource has associated Content-Type + metadata
        -
      11. +
      -
      +
        -

        All media elements have an autoplaying flag, - which must begin in the true state, and a delaying-the-load-event flag, which must - begin in the false state. While the delaying-the-load-event flag is true, the element - must delay the load event of its document.

        +
      1. -

        When the load() method on a media - element is invoked, the user agent must run the media element load - algorithm.

        +

        Let binary be false.

        -

        The media element load algorithm consists of the following steps.

        +
        2. -
          +
        1. -

        2. Abort any already-running instance of the resource selection algorithm for this - element.

          3. +

          If the type specified in the resource's Content-Type + metadata is "text/plain", and the result of applying the rules for distinguishing if a resource is + text or binary to the resource is that the resource is not + text/plain, then set binary to true.

          -
        3. +
          4. -

          If there are any tasks from the media - element's media element event task source in one of the task queues, then remove those tasks.

          +
        4. - +

          If the type specified in the resource's Content-Type + metadata is "application/octet-stream", then set binary to true.

          -

          Basically, pending events and callbacks for the media element are discarded when - the media element starts loading a new resource.

          +
          5. - +
        5. -

        6. If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a task to fire a - simple event named abort at the media - element.

          7. +

          If binary is false, then let the resource + type be the type specified in the resource's + Content-Type metadata, and jump to the step below labeled handler.

          -
        7. +
          8. -

          If the media element's networkState - is not set to NETWORK_EMPTY, then run these - substeps:

          +
        8. -
            +

            If there is a type attribute present on the + object element, and its value is not application/octet-stream, + then run the following steps:

            -

          1. Queue a task to fire a simple event named emptied at the media element.

            2. +
              -

            1. If a fetching process is in progress for the media - element, the user agent should stop it.

              2. +
            2. - +

              If the attribute's value is a type that a plugin supports, or the + attribute's value is a type that starts with "image/" that is + not also an XML MIME type, then let the resource type be the + type specified in that type attribute.

              -

            3. Forget the media element's media-resource-specific tracks.

              4. + -

            4. If readyState is not set to HAVE_NOTHING, then set it to that state. - -

              5. +
            5. -

            6. If the paused attribute is false, then set it to - true.

              7. +

              Jump to the step below labeled handler.

              -

            7. If seeking is true, set it to false.

              8. + -
            8. +
            -

            Set the current playback position to 0.

            + -

            Set the official playback position to 0.

            +
          -

          If this changed the official playback position, then queue a task - to fire a simple event named timeupdate at the media element.

          +
      - +
      Otherwise, if the resource does not have associated + Content-Type metadata
      -

    11. Set the initial playback position to 0.

      12. +
      -

    12. Set the timeline offset to Not-a-Number (NaN).

      13. +
        -
      1. +
      2. -

        Update the duration attribute to Not-a-Number - (NaN).

        +

        If there is a type attribute present on the + object element, then let the tentative type be the type + specified in that type attribute.

        -

        The user agent will not fire a durationchange event for this particular change of - the duration.

        +

        Otherwise, let tentative type be the sniffed type of the resource.

        -
        3. + -
      +
    13. -
      14. +

      If tentative type is not + application/octet-stream, then let resource type be + tentative type and jump to the step below labeled + handler.

      -

    14. Set the playbackRate attribute to the value of - the defaultPlaybackRate attribute.

      15. + -

    15. Set the error attribute to null and the - autoplaying flag to true.

      16. +
    -

  • Invoke the media element's resource selection algorithm.

    • + -
  • + -

    Playback of any previously playing media resource for this element - stops.

    +
    • - +
  • - + -

    The resource selection algorithm for a - media element is as follows. This algorithm is always invoked synchronously, but one - of the first steps in the algorithm is to return and continue running the remaining steps - asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts - closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop - algorithm). Steps in such sections are marked with ⌛.

    +

    If applying the URL parser algorithm to the URL of the + specified resource (after any redirects) results in a parsed URL whose path component matches a pattern that a plugin + supports, then let resource type be the type that that plugin can + handle.

    -
      +

      For example, a plugin might say that it can handle resources with path components that end with the four character string + ".swf".

      - + + -

    1. Set the element's networkState attribute to - the NETWORK_NO_SOURCE value.

      2. + -

    2. Set the element's show poster flag to true.

      3. +
    -

  • Set the media element's delaying-the-load-event flag to true - (this delays the load event).

    • +

    It is possible for this step to finish, or for one of the substeps above to + jump straight to the next step, with resource type still being unknown. In + both cases, the next step will trigger fallback.

    -

  • Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous - section consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    • + -
  • +

  • Handler: Handle the content as given by the first of the following cases that + matches:

    -

    ⌛ If the media element's blocked-on-parser flag is false, - then populate the list of pending text tracks.

    +
    -
    • +
    If the resource type is not a type that the user agent supports, but + it is a type that a plugin supports
    -
  • +
    -

    ⌛ If the media element has a src - attribute, then let mode be attribute.

    +

    If plugins are being sandboxed and the plugin that + supports resource type cannot be secured, jump to the step below labeled fallback.

    -

    ⌛ Otherwise, if the media element does not have a src attribute but has a source element child, then - let mode be children and let candidate - be the first such source element child in tree order.

    +

    Otherwise, the user agent should use the plugin that supports + resource type and pass the content of the resource to that + plugin. If the plugin reports an error, then jump to the step + below labeled fallback.

    -

    ⌛ Otherwise the media element has neither a src attribute nor a source element child: set the - networkState to NETWORK_EMPTY, and abort these steps; the - synchronous section ends.

    +
    -
    • -

  • ⌛ Set the media element's networkState to NETWORK_LOADING.

    • +
    If the resource type is an XML MIME type, or if the resource type + does not start with "image/"
    -

  • ⌛ Queue a task to fire a simple event named loadstart at the media element.

    • +
    -
  • +

    The object element must be associated with a newly created nested + browsing context, if it does not already have one.

    -

    If mode is attribute, then run these substeps:

    +

    If the URL of the given resource is not about:blank, the + element's nested browsing context must then be navigated to that resource, with + replacement enabled, and with the object element's document's + browsing context as the source browsing context. (The data attribute of the object element doesn't + get updated if the browsing context gets further navigated to other locations.)

    -
      +

      If the URL of the given resource is about:blank, then, + instead, the user agent must queue a task to fire a simple event + named load at the object element. No load event is fired at the + about:blank document itself.

      -

    1. ⌛ If the src - attribute's value is the empty string, then end the synchronous section, and jump - down to the failed with attribute step below.

      2. +

      The object element represents the nested browsing + context.

      -

    2. ⌛ Let absolute URL be the absolute URL that - would have resulted from resolving the URL - specified by the src attribute's value relative to the - media element when the src attribute was last - changed.

      +

      If the name attribute is present, the + browsing context name must be set to the value of this attribute; otherwise, + the browsing context name must be set to the empty string.

      -

    3. ⌛ If absolute URL was obtained successfully, set the currentSrc attribute to absolute - URL.

      4. +

      In certain situations, e.g. if the resource was fetched from an application cache but it is an HTML file + with a manifest attribute that points to a different + application cache manifest, the navigation of the browsing context will be restarted so + as to load the resource afresh from the network or a different application + cache. Even if the resource is then found to have a different type, it is still used + as part of a nested browsing context: only the navigate algorithm + is restarted, not this object algorithm.

      -

    4. End the synchronous section, continuing the remaining steps - asynchronously.

      5. + -

    5. If absolute URL was obtained successfully, run the resource fetch algorithm with absolute - URL. If that algorithm returns without aborting this one, then the load - failed.

      6. +
    • -
  • -

    Failed with attribute: Reaching this step indicates that the media resource - failed to load or that the given URL could not be resolved. Queue a task to run the following steps:

    +
    If the resource type starts with "image/", and support + for images has not been disabled
    -
      +
      -

    1. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_SRC_NOT_SUPPORTED.

      2. +

      Apply the image sniffing rules to + determine the type of the image.

      -

    2. Forget the media element's media-resource-specific tracks.

      3. +

      The object element represents the specified image. The image is + not a nested browsing context.

      -

    3. Set the element's networkState attribute - to the NETWORK_NO_SOURCE value.

      4. +

      If the image cannot be rendered, e.g. because it is malformed or in an unsupported + format, jump to the step below labeled fallback.

      -

    4. Set the element's show poster flag to true.

      5. +
      -

    5. Fire a simple event named error at - the media element.

      6. -

    6. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

      7. +
      Otherwise
      -
    +
    -
    • +

    The given resource type is not supported. Jump to the step below + labeled fallback.

    -

  • Wait for the task queued by the previous step to have - executed.

    • +

    If the previous step ended with the resource type being + unknown, this is the case that is triggered.

    -

  • Abort these steps. Until the load() method is - invoked or the src attribute is changed, the element won't - attempt to load another resource.

    • - + - + -

    Otherwise, the source elements will be used; run these substeps:

    + -
      +

    1. The element's contents are not part of what the object element + represents.

    2. -

      ⌛ Let pointer be a position defined by two adjacent nodes in the - media element's child list, treating the start of the list (before the first - child in the list, if any) and end of the list (after the last child in the list, if any) as - nodes in their own right. One node is the node before pointer, and the - other node is the node after pointer. Initially, let pointer be the position between the candidate node and the - next node, if there are any, or the end of the list, if it is the last node.

      +

      Abort these steps. Once the resource is completely loaded, queue a task to + fire a simple event named load at the + element.

      -

      As nodes are inserted and removed into the media element, pointer must be updated as follows:

      +
      3. -
      +
    -
    If a new node is inserted between the two nodes that define pointer
    + -
    Let pointer be the point between the node before pointer and the new node. In other words, insertions at pointer go after pointer.
    +

  • If the data attribute is absent but the type attribute is present, and the user agent can find a + plugin suitable according to the value of the type attribute, and either plugins aren't being sandboxed or the plugin can be + secured, then that plugin should be used. If these conditions cannot be met, or if the + plugin reports an error, jump to the step below labeled fallback. Otherwise + abort these steps; once the plugin is completely loaded, queue a task to fire + a simple event named load at the element.

    • -
    If the node before pointer is removed
    +

  • Fallback: The object element represents the element's + children, ignoring any leading param element children. This is the element's + fallback content. If the element has an instantiated plugin, then + unload it.

    • -
    Let pointer be the point between the node after pointer and the node before the node after pointer. In - other words, pointer doesn't move relative to the remaining nodes.
    + -
    If the node after pointer is removed
    +

    When the algorithm above instantiates a plugin, the user agent + should pass to the plugin used the names and values of all the attributes on the + element, in the order they were added to the element, with the attributes added by the parser + being ordered in source order, followed by a parameter named "PARAM" whose value is null, followed + by all the names and values of parameters given by + param elements that are children of the object element, in tree + order. If the plugin supports a scriptable interface, the + HTMLObjectElement object representing the element should expose that interface. The + object element represents the plugin. The + plugin is not a nested browsing context.

    -
    Let pointer be the point between the node before pointer and the node after the node before pointer. Just - as with the previous case, pointer doesn't move relative to the remaining - nodes.
    +

    Plugins are considered sandboxed for the purpose of an + object element if the sandboxed plugins browsing context flag is set on + the object element's Document's active sandboxing flag + set.

    - +

    Due to the algorithm above, the contents of object elements act as fallback + content, used only when referenced resources can't be shown (e.g. because it returned a 404 + error). This allows multiple object elements to be nested inside each other, + targeting multiple user agents with different capabilities, with the user agent picking the first + one it supports.

    -

    Other changes don't affect pointer.

    +

    When an object element represents a nested browsing context: if the + object element's nested browsing context's active document + is not ready for post-load tasks, and when anything is delaying the load event of the object element's browsing + context's active document, and when the object element's + browsing context is in the delaying load + events mode, the object must delay the load event of its + document.

    - +

    The task source for the tasks mentioned in this + section is the DOM manipulation task source.

    -

  • ⌛ Process candidate: If candidate does not have a - src attribute, or if its src attribute's value is the empty string, then end the - synchronous section, and jump down to the failed with elements step - below.

    • +

    Whenever the name attribute is set, if the + object element has a nested browsing context, its name must be changed to the new value. If the attribute is removed, if the + object element has a browsing context, the browsing context + name must be set to the empty string.

    -

  • ⌛ Let absolute URL be the absolute URL that - would have resulted from resolving the URL - specified by candidate's src - attribute's value relative to the candidate when the src attribute was last changed.

    + -

  • ⌛ If absolute URL was not obtained successfully, then end the - synchronous section, and jump down to the failed with elements step - below.

    • +

    The usemap attribute, if present while the + object element represents an image, can indicate that the object has an associated + image map. The attribute must be ignored if the + object element doesn't represent an image.

    -

  • ⌛ If candidate has a type attribute whose value, when parsed as a MIME - type (including any codecs described by the codecs parameter, for - types that define that parameter), represents a type that the user agent knows it cannot - render, then end the synchronous section, and jump down to the failed with elements step below.

    • +

    The form attribute is used to explicitly associate the + object element with its form owner.

    -

  • ⌛ Set the currentSrc attribute to absolute URL.

    • +
    -

  • End the synchronous section, continuing the remaining steps - asynchronously.

    • +

    Constraint validation: object elements are always barred + from constraint validation.

    -

  • Run the resource fetch algorithm with - absolute URL. If that algorithm returns without aborting this one, - then the load failed.

    • +
    -

  • Failed with elements: Queue a task to fire a simple - event named error at the candidate element.

    • +

    The object element supports dimension attributes.

    -

  • Asynchronously await a stable state. The synchronous section - consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    • +
    -

  • ⌛ Forget the media element's media-resource-specific - tracks.

    • +

    The IDL attributes data, type and name each must reflect the respective + content attributes of the same name. The typeMustMatch IDL attribute must + reflect the typemustmatch content + attribute. The useMap IDL attribute must + reflect the usemap content attribute.

    -

  • ⌛ Find next candidate: Let candidate be - null.

    • +

    The contentDocument IDL attribute + must return the Document object of the active document of the + object element's nested browsing context, if any and if its + effective script origin is the same origin as the effective script + origin specified by the incumbent settings object, or null otherwise.

    -

  • ⌛ Search loop: If the node after pointer is - the end of the list, then jump to the waiting step below.

    • +

    The contentWindow IDL attribute must + return the WindowProxy object of the object element's nested + browsing context, if it has one; otherwise, it must return null.

    -

  • ⌛ If the node after pointer is a source element, - let candidate be that element.

    • +

    The willValidate, validity, and validationMessage attributes, and the checkValidity(), reportValidity(), and setCustomValidity() methods, are part of the + constraint validation API. The form IDL attribute + is part of the element's forms API.

    -

  • ⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node - after pointer is the node after the node that used to be after pointer, if any.

    • +

    All object elements have a legacy caller + operation. If the object element has an instantiated plugin that + supports a scriptable interface that defines a legacy caller operation, then that must be the + behavior of the object's legacy caller operation. Otherwise, the object's legacy caller operation + must be to throw a NotSupportedError exception.

    -

  • ⌛ If candidate is null, jump back to the search - loop step. Otherwise, jump back to the process candidate step.

    • +
    -

  • ⌛ Waiting: Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

    • +
    -

  • ⌛ Set the element's show poster flag to true.

    • +

    In the following example, a Java applet is embedded in a page using the object + element. (Generally speaking, it is better to avoid using applets like these and instead use + native JavaScript and HTML to provide the functionality, since that way the application will work + on all Web browsers without requiring a third-party plugin. Many devices, especially embedded + devices, do not support third-party technologies like Java.)

    -

  • ⌛ Queue a task to set the element's delaying-the-load-event - flag to false. This stops delaying the load - event.

    • + 
    <figure>
+ <object type="application/x-java-applet">
+  <param name="code" value="MyJavaClass">
+  <p>You do not have Java available, or it is disabled.</p>
+ </object>
+ <figcaption>My Java Clock</figcaption>
+</figure>
    -

  • End the synchronous section, continuing the remaining steps - asynchronously.

    • +
    -

  • Wait until the node after pointer is a node other than the end of - the list. (This step might wait forever.)

    • +
    -

  • Asynchronously await a stable state. The synchronous section - consists of all the remaining steps of this algorithm until the algorithm says the - synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    • +

    In this example, an HTML page is embedded in another using the object + element.

    -

  • ⌛ Set the element's delaying-the-load-event flag back to true (this - delays the load event again, in case it hasn't been - fired yet).

    + 
    <figure>
+ <object data="clock.html"></object>
+ <figcaption>My HTML Clock</figcaption>
+</figure>
    -

  • ⌛ Set the networkState back to NETWORK_LOADING.

    • +
    -

  • ⌛ Jump back to the find next candidate step above.

    • +
    - +

    The following example shows how a plugin can be used in HTML (in this case the Flash plugin, + to show a video file). Fallback is provided for users who do not have Flash enabled, in this case + using the video element to show the video for those using user agents that support + video, and finally providing a link to the video for those who have neither Flash + nor a video-capable browser.

    - + 
    <p>Look at my video:
+ <object type="application/x-shockwave-flash">
+  <param name=movie value="http://video.example.com/library/watch.swf">
+  <param name=allowfullscreen value=true>
+  <param name=flashvars value="http://video.example.com/vids/315981">
+  <video controls src="http://video.example.com/vids/315981">
+   <a href="http://video.example.com/vids/315981">View video</a>.
+  </video>
+ </object>
+</p>
    - +
    -

    The resource fetch algorithm for a media - element and a given absolute URL is as follows:

    -
      -

    1. Let the current media resource be the resource given by the - absolute URL passed to this algorithm. This is now the element's media - resource.

      2. +

      The param element

      -

    2. Remove all media-resource-specific text - tracks from the media element's list of pending text tracks, if - any.

      +
      +
      Categories:
      +
      None.
      +
      Contexts in which this element can be used:
      +
      As a child of an object element, before any flow content.
      +
      Content model:
      +
      Empty.
      +
      Content attributes:
      +
      Global attributes
      +
      name
      +
      value
      +
      DOM interface:
      +
      +
      interface HTMLParamElement : HTMLElement {
+           attribute DOMString name;
+           attribute DOMString value;
+};
      +
      +
      -

    3. Optionally, run the following substeps. This is the expected behavior if the user agent - intends to not attempt to fetch the resource until the user requests it explicitly (e.g. as a way - to implement the preload attribute's none keyword).

      +

      The param element defines parameters for plugins invoked by object + elements. It does not represent anything on its own.

      -
        +

        The name attribute gives the name of the + parameter.

        -

      1. Set the networkState to NETWORK_IDLE.

        2. +

        The value attribute gives the value of the + parameter.

        -

      2. Queue a task to fire a simple event named suspend at the element.

        3. +

        Both attributes must be present. They may have any value.

        -

      3. Queue a task to set the element's delaying-the-load-event flag - to false. This stops delaying the load - event.

        4. +
        -

      4. Wait for the task to be run.

        5. +

        If both attributes are present, and if the parent element of the param is an + object element, then the element defines a parameter with the given name-value pair.

        -

      5. Wait for an implementation-defined event (e.g. the user requesting that the media - element begin playback).

        6. +

        If either the name or value of a parameter defined + by a param element that is the child of an object element that + represents an instantiated plugin changes, and if that + plugin is communicating with the user agent using an API that features the ability to + update the plugin when the name or value of a parameter so changes, then the user agent must + appropriately exercise that ability to notify the plugin of the change.

        -

      6. Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired - yet).

        +

        The IDL attributes name and value must both reflect the respective + content attributes of the same name.

        -

      7. Set the networkState to NETWORK_LOADING.

        8. +
        -
      +
      -
      4. +

      The following example shows how the param element can be used to pass a parameter + to a plugin, in this case the O3D plugin.

      -
    4. + 
      <!DOCTYPE HTML>
+<html lang="en">
+  <head>
+   <title>O3D Utah Teapot</title>
+  </head>
+  <body>
+   <p>
+    <object type="application/vnd.o3d.auto">
+     <param name="o3d_features" value="FloatingPointTextures">
+     <img src="o3d-teapot.png"
+          title="3D Utah Teapot illustration rendered using O3D."
+          alt="When O3D renders the Utah Teapot, it appears as a squat
+          teapot with a shiny metallic finish on which the
+          surroundings are reflected, with a faint shadow caused by
+          the lighting.">
+     <p>To see the teapot actually rendered by O3D on your
+     computer, please download and install the <a
+     href="http://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
+    </object>
+    <script src="o3d-teapot.js"></script>
+   </p>
+  </body>
+</html>
      -

      Perform a potentially CORS-enabled fetch of the current media resource's absolute URL, with the mode being - the state of the media element's crossorigin content attribute, the origin - being the origin of the media element's Document, and the - default origin behaviour set to taint.

      + -

      The resource obtained in this fashion, if any, contains the media data. It can - be CORS-same-origin or CORS-cross-origin; this affects whether - subtitles referenced in the media data are exposed in the API and, for - video elements, whether a canvas gets tainted when the video is drawn - on it.

      -

      While the load is not suspended (see below), every 350ms (±200ms) or for every byte - received, whichever is least frequent, queue a task to fire a simple - event named progress at the element.

      + +

      The video element

      -

      The stall timeout is a user-agent defined length of time, which should be about - three seconds. When a media element that is actively attempting to obtain - media data has failed to receive any data for a duration equal to the stall - timeout, the user agent must queue a task to fire a simple - event named stalled at the element.

      +
      +
      Categories:
      +
      Flow content.
      +
      Phrasing content.
      +
      Embedded content.
      +
      If the element has a controls attribute: Interactive content.
      +
      Palpable content.
      +
      Contexts in which this element can be used:
      +
      Where embedded content is expected.
      +
      Content model:
      +
      If the element has a src attribute: + zero or more track elements, then + transparent, but with no media element descendants.
      +
      If the element does not have a src attribute: zero or more source elements, then + zero or more track elements, then + transparent, but with no media element descendants.
      +
      Content attributes:
      +
      Global attributes
      +
      src
      +
      crossorigin
      +
      poster
      +
      preload
      +
      autoplay
      +
      mediagroup
      +
      loop
      +
      muted
      +
      controls
      +
      width
      +
      height
      +
      DOM interface:
      +
      + 
      interface HTMLVideoElement : HTMLMediaElement {
+           attribute unsigned long width;
+           attribute unsigned long height;
+  readonly attribute unsigned long videoWidth;
+  readonly attribute unsigned long videoHeight;
+           attribute DOMString poster;
+};
      +
      +
      -

      User agents may allow users to selectively block or slow media data downloads. - When a media element's download has been blocked altogether, the user agent must - act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the - download may also be throttled automatically by the user agent, e.g. to balance the download - with other connections sharing the same bandwidth.

      +

      A video element is used for playing videos or movies, and audio files with + captions.

      + +

      Content may be provided inside the video element. User agents + should not show this content to the user; it is intended for older Web browsers which do + not support video, so that legacy video plugins can be tried, or to show text to the + users of these older browsers informing them of how to access the video contents.

      + +

      In particular, this content is not intended to address accessibility concerns. To + make video content accessible to the partially sighted, the blind, the hard-of-hearing, the deaf, + and those with other physical or cognitive disabilities, a variety of features are available. + Captions can be provided, either embedded in the video stream or as external files using the + track element. Sign-language tracks can be provided, again either embedded in the + video stream or by synchronizing multiple video elements using the mediagroup attribute or a MediaController + object. Audio descriptions can be provided, either as a separate track embedded in the video + stream, or a separate audio track in an audio element slaved to the same controller as the video element(s), or in text + form using a WebVTT file referenced using the track element and + synthesized into speech by the user agent. WebVTT can also be used to provide chapter titles. For + users who would rather not use a media element at all, transcripts or other textual alternatives + can be provided by simply linking to them in the prose near the video element.

      -

      User agents may decide to not download more content at any time, e.g. - after buffering five minutes of a one hour media resource, while waiting for the user to decide - whether to play the resource or not, while waiting for user input in an interactive resource, or - when the user navigates away from the page. When a media element's download has - been suspended, the user agent must queue a task, to set the networkState to NETWORK_IDLE and fire a simple event named - suspend at the element. If and when downloading of the - resource resumes, the user agent must queue a task to set the networkState to NETWORK_LOADING. Between the queuing of these tasks, - the load is suspended (so progress events don't fire, - as described above).

      +

      The video element is a media element whose media data is + ostensibly video data, possibly with associated audio data.

      -

      The preload attribute provides a hint - regarding how much buffering the author thinks is advisable, even in the absence of the autoplay attribute.

      +

      The src, preload, + autoplay, mediagroup, loop, muted, and controls + attributes are the attributes common to all media + elements.

      -

      When a user agent decides to completely stall a download, e.g. if it is waiting until the - user starts playback before downloading any further content, the user agent must queue a - task to set the element's delaying-the-load-event flag to false. This stops - delaying the load event.

      +

      The poster attribute gives the address of an + image file that the user agent can show while no video data is available. The attribute, if + present, must contain a valid non-empty URL potentially surrounded by spaces.

      -

      The user agent may use whatever means necessary to fetch the resource (within the constraints - put forward by this and other specifications); for example, reconnecting to the server in the - face of network errors, using HTTP range retrieval requests, or switching to a streaming - protocol. The user agent must consider a resource erroneous only if it has given up trying to - fetch it.

      +
      -

      This specification does not currently say whether or how to check the MIME - types of the media resources, or whether or how to perform file type sniffing using the actual - file data. Implementors differ in their intentions on this matter and it is therefore unclear - what the right solution is. In the absence of any requirement here, the HTTP specification's - strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media - type of the underlying data." ... "If and only if the media type is not given by a Content-Type - field, the recipient MAY attempt to guess the media type via inspection of its content - and/or the name extension(s) of the URI used to identify the resource.").

      +

      If the specified resource is to be used, then, when the element is created or when the poster attribute is set, changed, or removed, the user agent must + run the following steps to determine the element's poster frame (regardless of the + value of the element's show poster flag):

      -

      The networking task source tasks to process - the data as it is being fetched must each immediately queue a task to run the first - appropriate steps from the following list. (A new task is used for this so that the work - described below occurs relative to the media element event task source rather than - the networking task source.)

      +
        -
        +

      1. If there is an existing instance of this algorithm running for this video + element, abort that instance of this algorithm without changing the poster + frame.

        2. -
        If the media data cannot be fetched at all, due to network errors, causing the - user agent to give up trying to fetch the resource
        +

      2. If the poster attribute's value is the empty string + or if the attribute is absent, then there is no poster frame; abort these + steps.

        3. -
        If the media data can be fetched but is found by inspection to be in an - unsupported format, or can otherwise not be rendered at all
        +

      3. Resolve the poster attribute's value relative to the element. If this fails, + then there is no poster frame; abort these steps.

        4. -
        +

      4. Fetch the resulting absolute URL, from the element's + Document's origin. This must delay the load event of the + element's document.

        5. -

        DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal - network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported - container format, or using unsupported codecs for all the data, must cause the user agent to - execute the following steps:

        + -
          +

        1. If an image is thus obtained, the poster frame is that image. Otherwise, + there is no poster frame.

          2. -

        2. The user agent should cancel the fetching process.

          3. +
        -

      5. Abort this subalgorithm, returning to the resource selection algorithm.

        +
      -
    +

    The image given by the poster attribute, + the poster frame, is intended to be a representative frame of the + video (typically one of the first non-blank frames) that gives the user an idea of what the video + is like.

    - +
    +
    - - +

    A video element represents what is given for the first matching condition in the + list below:

    +
    -
    If the media resource is found to have an audio - track
    +
    When no video data is available (the element's readyState attribute is either HAVE_NOTHING, or HAVE_METADATA but no video data has yet been obtained at + all, or the element's readyState attribute is any + subsequent value but the media resource does not have a video channel)
    -
    +
    The video element represents its poster frame, if any, + or else transparent black with no intrinsic dimensions.
    -
      +
      When the video element is paused, the current playback position is the first frame of video, + and the element's show poster flag is set
      -

    1. Create an AudioTrack object to represent the audio track.

      2. +
      The video element represents its poster frame, if any, + or else the first frame of the video.
      -

    2. Update the media element's audioTracks attribute's AudioTrackList - object with the new AudioTrack object.

      3. +
      When the video element is paused, and the + frame of video corresponding to the current playback + position is not available (e.g. because the video is seeking or buffering)
      -

    3. Let enable be unknown.

      4. +
      When the video element is neither potentially playing nor paused (e.g. when seeking or stalled)
      -
    4. +
      The video element represents the last frame of the video to have + been rendered.
      -

      If either the media resource or the address of the current - media resource indicate a particular set of audio tracks to enable, or if the user - agent has information that would facilitate the selection of specific audio tracks to - improve the user's experience, then: if this audio track is one of the ones to enable, then - set enable to true, otherwise, set enable - to false.

      +
      When the video element is paused
      -

      This could be triggered by Media Fragments URI fragment - identifier syntax, but it could also be triggered e.g. by the user agent selecting a 5.1 - surround sound audio track over a stereo audio track.

      +
      The video element represents the frame of video corresponding to + the current playback position.
      -
      5. +
      Otherwise (the video element has a video channel and is potentially + playing)
      -

    5. If enable is still unknown, then, if the media - element does not yet have an enabled - audio track, then set enable to true, otherwise, set enable to false.

      6. +
      The video element represents the frame of video at the continuously + increasing "current" position. When the + current playback position changes such that the last frame rendered is no longer the + frame corresponding to the current playback position in the video, the new frame + must be rendered.
      -

    6. If enable is true, then enable this audio track, - otherwise, do not enable this audio track.

      7. +
    -

  • Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, - and that uses the TrackEvent interface, with the track attribute initialised to the new - AudioTrack object, at this AudioTrackList object.

    • +

    Frames of video must be obtained from the video track that was selected when the event loop last reached + step 1.

    - +

    Which frame in a video stream corresponds to a particular playback position is + defined by the video stream's format.

    - +

    The video element also represents any text track cues whose text track cue active flag is set and whose + text track is in the showing mode, and any + audio from the media resource, at the current playback position.

    +

    Any audio associated with the media resource must, if played, be played + synchronised with the current playback position, at the element's effective + media volume. The user agent must play the audio from audio tracks that were enabled when the event loop last reached step + 1.

    -
    If the media resource is found to have a video - track
    +

    In addition to the above, the user agent may provide messages to the user (such as "buffering", + "no video loaded", "error", or more detailed information) by overlaying text or icons on the video + or other areas of the element's playback area, or in another appropriate manner.

    -
    +

    User agents that cannot render the video may instead make the element represent a link to an external video playback utility or to the video + data itself.

    -
      +

      When a video element's media resource has a video channel, the + element provides a paint source whose width is the media resource's + intrinsic width, whose height is the + media resource's intrinsic + height, and whose appearance is the frame of video corresponding to the current playback position, if that is available, or else + (e.g. when the video is seeking or buffering) its previous appearance, if any, or else (e.g. + because the video is still loading the first frame) blackness.

      -

    1. Create a VideoTrack object to represent the video track.

      2. +
      -

    2. Update the media element's videoTracks attribute's VideoTrackList - object with the new VideoTrack object.

      3. +
    -

  • Let enable be unknown.

    • +
    -
  • +
    video . videoWidth
    +
    video . videoHeight
    -

    If either the media resource or the address of the current - media resource indicate a particular set of video tracks to enable, or if the user - agent has information that would facilitate the selection of specific video tracks to - improve the user's experience, then: if this video track is the first such video track, then - set enable to true, otherwise, set enable - to false.

    +
    -

    This could again be triggered by Media Fragments URI - fragment identifier syntax.

    +

    These attributes return the intrinsic dimensions of the video, + or zero if the dimensions are not known.

    -
    • + -

  • If enable is still unknown, then, if the media - element does not yet have a selected - video track, then set enable to true, otherwise, set enable to false.

    • +
    -

  • If enable is true, then select this track and unselect any - previously selected video tracks, otherwise, do not select this video track. If other tracks - are unselected, then a change event will be fired.

    • +
    -

  • Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, - and that uses the TrackEvent interface, with the track attribute initialised to the new - VideoTrack object, at this VideoTrackList object.

    • +

    The intrinsic width and intrinsic height of the media resource + are the dimensions of the resource in CSS pixels after taking into account the resource's + dimensions, aspect ratio, clean aperture, resolution, and so forth, as defined for the format used + by the resource. If an anamorphic format does not define how to apply the aspect ratio to the + video data's dimensions to obtain the "correct" dimensions, then the user agent must apply the + ratio by increasing one dimension and leaving the other unchanged.

    - +

    The videoWidth IDL attribute must return + the intrinsic width of the video in CSS pixels. + The videoHeight IDL attribute must return + the intrinsic height of the video in CSS + pixels. If the element's readyState attribute is HAVE_NOTHING, then the attributes must return 0.

    - +

    Whenever the intrinsic width + or intrinsic height of the video changes + (including, for example, because the selected video + track was changed), if the element's readyState + attribute is not HAVE_NOTHING, the user agent must + queue a task to fire a simple event named resize at the media element.

    +
    -
    Once enough of the media data has been fetched to - determine the duration of the media resource, its dimensions, and other - metadata
    +

    The video element supports dimension attributes.

    -
    +
    -

    This indicates that the resource is usable. The user agent must follow these substeps:

    +

    In the absence of style rules to the contrary, video content should be rendered inside the + element's playback area such that the video content is shown centered in the playback area at the + largest possible size that fits completely within it, with the video content's aspect ratio being + preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the + video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area + that do not contain the video represent nothing.

    -
      +

      In user agents that implement CSS, the above requirement can be implemented by + using the style rule suggested in the rendering section.

      -
    1. +

      The intrinsic width of a video element's playback area is the intrinsic width of + the poster frame, if that is available and the element currently + represents its poster frame; otherwise, it is the intrinsic width of the video resource, if that is + available; otherwise the intrinsic width is missing.

      -

      Establish the media timeline for the purposes of the current playback - position, the earliest possible position, and the initial playback - position, based on the media data.

      +

      The intrinsic height of a video element's playback area is the intrinsic height of + the poster frame, if that is available and the element currently + represents its poster frame; otherwise it is the intrinsic height of the video resource, if that is + available; otherwise the intrinsic height is missing.

      -
      2. +

      The default object size is a width of 300 CSS pixels and a height of 150 CSS + pixels.

      -
    2. +
      -

      Update the timeline offset to the date and time that corresponds to the zero - time in the media timeline established in the previous step, if any. If no - explicit time and date is given by the media resource, the timeline - offset must be set to Not-a-Number (NaN).

      +

      User agents should provide controls to enable or disable the display of closed captions, audio + description tracks, and other additional data associated with the video stream, though such + features should, again, not interfere with the page's normal rendering.

      -
      3. +

      User agents may allow users to view the video content in manners more suitable to the user + (e.g. full-screen or in an independent resizable window). As for the other user interface + features, controls to enable this should not interfere with the page's normal rendering unless the + user agent is exposing a user interface. + In such an independent context, however, user agents may make full user interfaces visible, with, + e.g., play, pause, seeking, and volume controls, even if the controls attribute is absent.

      -

    3. Set the current playback position and the official playback - position to the earliest possible position.

      4. +

      User agents may allow video playback to affect system features that could interfere with the + user's experience; for example, user agents could disable screensavers while video playback is in + progress.

      -
    4. +
      -

      Update the duration attribute with the time of - the last frame of the resource, if known, on the media timeline established - above. If it is not known (e.g. a stream that is in principle infinite), update the duration attribute to the value positive Infinity.

      +

      The poster IDL attribute must + reflect the poster content attribute.

      -

      The user agent will queue a task - to fire a simple event named durationchange at the element at this point.

      +
    - +
    -
  • +

    This example shows how to detect when a video has failed to play correctly:

    -

    For video elements, set the videoWidth and videoHeight attributes, and queue a task - to fire a simple event named resize at - the media element.

    + 
    <script>
+ function failed(e) {
+   // video playback failed - show a message saying why
+   switch (e.target.error.code) {
+     case e.target.error.MEDIA_ERR_ABORTED:
+       alert('You aborted the video playback.');
+       break;
+     case e.target.error.MEDIA_ERR_NETWORK:
+       alert('A network error caused the video download to fail part-way.');
+       break;
+     case e.target.error.MEDIA_ERR_DECODE:
+       alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
+       break;
+     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+       alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
+       break;
+     default:
+       alert('An unknown error occurred.');
+       break;
+   }
+ }
+</script>
+<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
+<p><a href="tgif.vid">Download the video file</a>.</p>
    -

    Further resize events will be fired - if the dimensions subsequently change.

    +
    • - -
  • -

    Set the readyState attribute to HAVE_METADATA.

    -

    A loadedmetadata DOM event - will be fired as part of setting the readyState attribute to a new value.

    + +
    -
    • +
    Video and audio codecs for video elements
    -

  • Let jumped be false.

    • +

    User agents may support any video and audio codecs and container formats.

    -

  • If the media element's default playback start position is - greater than zero, then seek to that time, and let jumped be true.

    • +

    Certain user agents might support no codecs at all, e.g. text browsers running + over SSH connections.

    -

  • Let the media element's default playback - start position be zero.

    • + +

    Implementations are free to implement support for video codecs either natively, or + using platform-specific APIs, or using plugins: this specification does not specify how codecs are + to be implemented.

    -
  • + -

    If either the media resource or the address of the current - media resource indicate a particular start time, then set the initial playback - position to that time and, if jumped is still false, seek to that time and let jumped be - true.

    + (when replacing this text, also fix "- -" nested comments)--> -

    For example, with media formats that support the Media Fragments - URI fragment identifier syntax, the fragment identifier can be used to indicate a - start position.

    -
    • -

  • If there is no enabled audio track, then - enable an audio track. This will cause a change event to be fired.

    • -

  • If there is no selected video track, - then select a video track. This will cause a change event to be fired.

    • -

  • If the media element has a current media controller, then: - if jumped is true and the initial playback position, - relative to the current media controller's timeline, is greater than the - current media controller's media controller position, then - seek the media controller to the media element's initial - playback position, relative to the current media controller's timeline; - otherwise, seek the media element to the - media controller position, relative to the media element's - timeline.

    • +

    The audio element

    - +
    +
    Categories:
    +
    Flow content.
    +
    Phrasing content.
    +
    Embedded content.
    +
    If the element has a controls attribute: Interactive content.
    +
    If the element has a controls attribute: Palpable content.
    +
    Contexts in which this element can be used:
    +
    Where embedded content is expected.
    +
    Content model:
    +
    If the element has a src attribute: +zero or more track elements, then +transparent, but with no media element descendants.
    +
    If the element does not have a src attribute: zero or more source elements, then + zero or more track elements, then + transparent, but with no media element descendants.
    +
    Content attributes:
    +
    Global attributes
    +
    src
    +
    crossorigin
    +
    preload
    +
    autoplay
    +
    mediagroup
    +
    loop
    +
    muted
    +
    controls
    +
    DOM interface:
    +
    + 
    [NamedConstructor=Audio(optional DOMString src)]
+interface HTMLAudioElement : HTMLMediaElement {};
    +
    +
    -

    Once the readyState attribute reaches HAVE_CURRENT_DATA, after - the loadeddata event has been fired, set the - element's delaying-the-load-event flag to false. This stops delaying the load event.

    +

    An audio element represents a sound or audio stream.

    -

    A user agent that is attempting to reduce network usage while still fetching - the metadata for each media resource would also stop buffering at this point, - following the rules described previously, which involve the - networkState attribute switching to the NETWORK_IDLE value and a suspend event firing.

    + -

    The user agent is required to determine the duration of the - media resource and go through this step before playing.

    +

    Content may be provided inside the audio element. User agents + should not show this content to the user; it is intended for older Web browsers which do + not support audio, so that legacy audio plugins can be tried, or to show text to the + users of these older browsers informing them of how to access the audio contents.

    -
    +

    In particular, this content is not intended to address accessibility concerns. To + make audio content accessible to the deaf or to those with other physical or cognitive + disabilities, a variety of features are available. If captions or a sign language video are + available, the video element can be used instead of the audio element to + play the audio, allowing users to enable the visual alternatives. Chapter titles can be provided + to aid navigation, using the track element and a WebVTT file. And, + naturally, transcripts or other textual alternatives can be provided by simply linking to them in + the prose near the audio element.

    +

    The audio element is a media element whose media data is + ostensibly audio data.

    -
    Once the entire media resource has been fetched - (but potentially before any of it has been decoded)
    +

    The src, preload, + autoplay, mediagroup, loop, muted, and controls + attributes are the attributes common to all media + elements.

    + +
    + +

    When an audio element is potentially playing, it must have its audio + data played synchronised with the current playback position, at the element's + effective media volume. The user agent must play the audio from audio tracks that + were enabled when the event loop last reached step 1.

    -
    +

    When an audio element is not potentially playing, audio must not play + for the element.

    -

    Fire a simple event named progress - at the media element.

    +
    -

    Set the networkState to NETWORK_IDLE and fire a simple event named - suspend at the media element.

    +
    -

    If the user agent ever discards any media data and then needs to resume the - network activity to obtain it again, then it must queue a task to set the networkState to NETWORK_LOADING.

    +
    audio = new Audio( [ url ] )
    -

    If the user agent can keep the media resource loaded, then the - algorithm will continue to its final step below, which aborts the algorithm.

    +
    -
    +

    Returns a new audio element, with the src + attribute set to the value passed in the argument, if applicable.

    + -
    If the connection is interrupted after some media data has been received, - causing the user agent to give up trying to fetch the resource
    +
    -
    +
    -

    Fatal network errors that occur after the user agent has established whether the current media resource is usable (i.e. once the media element's - readyState attribute is no longer HAVE_NOTHING) must cause the user agent to execute the - following steps:

    +

    A constructor is provided for creating HTMLAudioElement objects (in addition to + the factory methods from DOM such as createElement()): Audio(src). When invoked as a + constructor, it must return a new HTMLAudioElement object (a new audio + element). The element must be created with its preload + attribute set to the literal value "auto". If the + src argument is present, the object created must be created with its src content attribute set to the provided value (this will cause the user agent to invoke the object's + resource selection algorithm before returning). + The element's document must be the active document of the browsing + context of the Window object on which the interface object of the invoked + constructor is found.

    -
      +
    -

  • The user agent should cancel the fetching process.

    • -

  • Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_NETWORK.

    • -

  • Fire a simple event named error at - the media element.

    • + -

    Fatal errors in decoding the media data that occur after the user agent has - established whether the current media resource is usable must cause the - user agent to execute the following steps:

    -
      -

    1. The user agent should cancel the fetching process.

      2. +

      The source element

      -

    2. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_DECODE.

      3. +
      +
      Categories:
      +
      None.
      +
      Contexts in which this element can be used:
      +
      As a child of a media element, before any flow content + or track elements.
      +
      Content model:
      +
      Empty.
      +
      Content attributes:
      +
      Global attributes
      +
      src
      +
      type
      +
      DOM interface:
      +
      +
      interface HTMLSourceElement : HTMLElement {
+           attribute DOMString src;
+           attribute DOMString type;
+};
      +
      +
      -

    3. Fire a simple event named error at - the media element.

      4. +

      The source element allows authors to specify multiple alternative media resources for media + elements. It does not represent anything on its own.

      -
    4. +

      The src attribute gives the address of the + media resource. The value must be a valid non-empty URL potentially surrounded + by spaces. This attribute must be present.

      -

      If the media element's readyState - attribute has a value equal to HAVE_NOTHING, set - the element's networkState attribute to the - NETWORK_EMPTY value, set the element's - show poster flag to true, and fire a simple event named emptied at the element.

      +

      Dynamically modifying a source element and its attribute when the + element is already inserted in a video or audio element will have no + effect. To change what is playing, just use the src attribute + on the media element directly, possibly making use of the canPlayType() method to pick from amongst available + resources. Generally, manipulating source elements manually after the document has + been parsed is an unnecessarily complicated approach.

      -

      Otherwise, set the element's networkState - attribute to the NETWORK_IDLE value.

      +

      The type attribute gives the type of the + media resource, to help the user agent determine if it can play this media + resource before fetching it. If specified, its value must be a valid MIME + type. The codecs parameter, which certain MIME types define, might be + necessary to specify exactly how the resource is encoded.

      -
      5. +
      -

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

      6. +

      The following list shows some examples of how to use the codecs= MIME + parameter in the type attribute.

      -

    6. Abort the overall resource selection - algorithm.

      7. +
      -
    +
    H.264 Constrained baseline profile video (main and extended video compatible) level 3 and Low-Complexity AAC audio in MP4 container
    + 
    <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    - +
    H.264 Extended profile video (baseline-compatible) level 3 and Low-Complexity AAC audio in MP4 container
    + 
    <source src='video.mp4' type='video/mp4; codecs="avc1.58A01E, mp4a.40.2"'>
    +
    H.264 Main profile video level 3 and Low-Complexity AAC audio in MP4 container
    + 
    <source src='video.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
    -
    If the media data fetching process is aborted by the user
    +
    H.264 'High' profile video (incompatible with main, baseline, or extended profiles) level 3 and Low-Complexity AAC audio in MP4 container
    + 
    <source src='video.mp4' type='video/mp4; codecs="avc1.64001E, mp4a.40.2"'>
    -
    -

    The fetching process is aborted by the user, e.g. because the user - pressed a "stop" button, the user agent must execute the following steps. These steps are not - followed if the load() method itself is invoked while - these steps are running, as the steps above handle that particular kind of abort.

    +
    MPEG-4 Visual Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
    + 
    <source src='video.mp4' type='video/mp4; codecs="mp4v.20.8, mp4a.40.2"'>
    -
      +
      MPEG-4 Advanced Simple Profile Level 0 video and Low-Complexity AAC audio in MP4 container
      + 
      <source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
      -

    1. The user agent should cancel the fetching process.

      2. +
      MPEG-4 Visual Simple Profile Level 0 video and AMR audio in 3GPP container
      + 
      <source src='video.3gp' type='video/3gpp; codecs="mp4v.20.8, samr"'>
      -

    2. Set the error attribute to a new - MediaError object whose code attribute - is set to MEDIA_ERR_ABORTED.

      3. -

    3. Fire a simple event named abort at - the media element.

      4. +
      Theora video and Vorbis audio in Ogg container
      + 
      <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
      -
    4. +
      Theora video and Speex audio in Ogg container
      + 
      <source src='video.ogv' type='video/ogg; codecs="theora, speex"'>
      -

      If the media element's readyState - attribute has a value equal to HAVE_NOTHING, set - the element's networkState attribute to the - NETWORK_EMPTY value, set the element's - show poster flag to true, and fire a simple event named emptied at the element.

      +
      Vorbis audio alone in Ogg container
      + 
      <source src='audio.ogg' type='audio/ogg; codecs=vorbis'>
      -

      Otherwise, set the element's networkState - attribute to the NETWORK_IDLE value.

      +
      Speex audio alone in Ogg container
      + 
      <source src='audio.spx' type='audio/ogg; codecs=speex'>
      -
      5. +
      FLAC audio alone in Ogg container
      + 
      <source src='audio.oga' type='audio/ogg; codecs=flac'>
      -

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

      6. +
      Dirac video and Vorbis audio in Ogg container
      + 
      <source src='video.ogv' type='video/ogg; codecs="dirac, vorbis"'>
      -

    6. Abort the overall resource selection - algorithm.

      7. + -
    + - + - + - + + -
    If the media resource is - found to declare a media-resource-specific text track that the user agent - supports
    + -
    +
    -

    If the media data is CORS-same-origin, run the steps to - expose a media-resource-specific text track with the relevant data.

    +

    If a source element is inserted as a child of a media element that + has no src attribute and whose networkState has the value NETWORK_EMPTY, the user agent must invoke the media + element's resource selection + algorithm.

    -

    Cross-origin videos do not expose their subtitles, since that would allow - attacks such as hostile sites reading subtitles from confidential videos on a user's - intranet.

    +

    The IDL attributes src and type must reflect the respective content + attributes of the same name.

    -
    + - +
    -

    When the networking task source has queued the - last task as part of fetching the - media resource (i.e. once the download has completed), if the fetching process - completes without errors, including decoding the media data, and if all of the data is available - to the user agent without network access, then, the user agent must move on to the next step. - This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the - resource is longer than the user agent's ability to cache data.

    +

    If the author isn't sure if user agents will all be able to render the media resources + provided, the author can listen to the error event on the last + source element and trigger fallback behavior:

    -

    While the user agent might still need network access to obtain parts of the media - resource, the user agent must remain on this step.

    + 
    <script>
+ function fallback(video) {
+   // replace <video> with its contents
+   while (video.hasChildNodes()) {
+     if (video.firstChild instanceof HTMLSourceElement)
+       video.removeChild(video.firstChild);
+     else
+       video.parentNode.insertBefore(video.firstChild, video);
+   }
+   video.parentNode.removeChild(video);
+ }
+</script>
+<video controls autoplay>
+ <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
+ <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
+         onerror="fallback(parentNode)">
+ ...
+</video>
    -

    For example, if the user agent has discarded the first half of a video, the - user agent will remain at this step even once the playback has - ended, because there is always the chance the user will seek back to the start. In fact, - in this situation, once playback has ended, the user agent - will end up firing a suspend event, as described - earlier.

    +
    - - -

  • If the user agent ever reaches this step (which can only happen if the entire resource - gets loaded and kept available): abort the overall resource selection algorithm.

    • + +

    The track element

    - +
    +
    Categories:
    +
    None.
    +
    Contexts in which this element can be used:
    +
    As a child of a media element, before any flow content.
    +
    Content model:
    +
    Empty.
    +
    Content attributes:
    +
    Global attributes
    +
    kind
    +
    src
    +
    srclang
    +
    label
    +
    default
    +
    DOM interface:
    +
    +
    interface HTMLTrackElement : HTMLElement {
+           attribute DOMString kind;
+           attribute DOMString src;
+           attribute DOMString srclang;
+           attribute DOMString label;
+           attribute boolean default;
 
-  
    When a media element is to forget the media element's media-resource-specific
-  tracks, the user agent must remove from the media element's list of text
-  tracks all the media-resource-specific
-  text tracks, then empty the media element's audioTracks attribute's AudioTrackList object,
-  then empty the media element's videoTracks
-  attribute's VideoTrackList object. No events (in particular, no removetrack events) are fired as part of this; the error and emptied
-  events, fired by the algorithms that invoke this one, can be used instead.
    
+  const unsigned short NONE = 0;
+  const unsigned short LOADING = 1;
+  const unsigned short LOADED = 2;
+  const unsigned short ERROR = 3;
+  readonly attribute unsigned short readyState;
 
-  
+  readonly attribute TextTrack track;
+};
    +
    +
    -
    +

    The track element allows authors to specify explicit external timed text tracks for media elements. It + does not represent anything on its own.

    -

    The preload attribute is an enumerated - attribute. The following table lists the keywords and states for the attribute — the - keywords in the left column map to the states in the cell in the second column on the same row as - the keyword. The attribute can be changed even once the media resource is being - buffered or played; the descriptions in the table below are to be interpreted with that in - mind.

    +

    The kind attribute is an enumerated + attribute. The following table lists the keywords defined for this attribute. The keyword + given in the first cell of each row maps to the state given in the second cell.

    - - - - + +
    Keyword - State - Brief description + Keyword + State + Brief description
    none - None - Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic. - This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play"). + subtitles + Subtitles + + Transcription or translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the media resource's audio track). + Overlaid on the video.
    metadata - Metadata - Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, track list, duration, etc), and maybe even the first few frames, is reasonable. If the user agent precisely fetches no more than the metadata, then the media element will end up with its readyState attribute set to HAVE_METADATA; typically though, some frames will be obtained as well and it will probably be HAVE_CURRENT_DATA or HAVE_FUTURE_DATA. - When the media resource is playing, hints to the user agent that bandwidth is to be considered scarce, e.g. suggesting throttling the download so that the media data is obtained at the slowest possible rate that still maintains consistent playback. + captions + Captions + + Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information, suitable for when sound is unavailable or not clearly audible (e.g. because it is muted, drowned-out by ambient noise, or because the user is deaf). + Overlaid on the video; labeled as appropriate for the hard-of-hearing.
    auto - Automatic - Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource. + descriptions + Descriptions + + Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is obscured, unavailable, or not usable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind). + Synthesized as audio. +
    chapters + Chapters + + Chapter titles, intended to be used for navigating the media resource. + Displayed as an interactive (potentially nested) list in the user agent's interface. +
    metadata + Metadata + + Tracks intended for use from script. + Not displayed by the user agent.
    -

    The empty string is also a valid keyword, and maps to the Automatic state. The attribute's missing value default is user-agent defined, though the Metadata state is suggested as a compromise - between reducing server load and providing an optimal user experience.

    +

    The attribute may be omitted. The missing value default is the subtitles state.

    -

    Authors might switch the attribute from "none" or "metadata" to "auto" dynamically once the user begins playback. For - example, on a page with many videos this might be used to indicate that the many videos are not to - be downloaded unless requested, but that once one is requested it is to be downloaded - aggressively.

    +

    The src attribute gives the address of the text + track data. The value must be a valid non-empty URL potentially surrounded by spaces. + This attribute must be present.

    -

    The preload attribute is intended to provide a hint to - the user agent about what the author thinks will lead to the best user experience. The attribute - may be ignored altogether, for example based on explicit user preferences or based on the - available connectivity.

    - -

    The preload IDL attribute must - reflect the content attribute of the same name, limited to only known - values.

    +

    If the element has a src attribute whose value is not the + empty string and whose value, when the attribute was set, could be successfully resolved relative to the element, then the element's track + URL is the resulting absolute URL. Otherwise, the element's track + URL is the empty string.

    -

    The autoplay attribute can override the - preload attribute (since if the media plays, it naturally - has to buffer first, regardless of the hint given by the preload attribute). Including both is not an error, however.

    - -
    - - +

    Furthermore, if the element's track URL identifies a WebVTT resource, and the + element's kind attribute is in the chapters state, then the WebVTT file must be both a + WebVTT file using chapter title text and a WebVTT file using only nested + cues.

    -
    +

    The srclang attribute gives the language of + the text track data. The value must be a valid BCP 47 language tag. This attribute must be present + if the element's kind attribute is in the subtitles state.

    -
    media . buffered
    +
    -
    +

    If the element has a srclang attribute whose value is + not the empty string, then the element's track language is the value of the attribute. + Otherwise, the element has no track language.

    -

    Returns a TimeRanges object that represents the ranges of the media - resource that the user agent has buffered.

    +
    - +

    The label attribute gives a user-readable + title for the track. This title is used by user agents when listing subtitle, caption, and audio description tracks in their user interface.

    -
    +

    The value of the label attribute, if the attribute is + present, must not be the empty string. Furthermore, there must not be two track + element children of the same media element whose kind attributes are in the same state, whose srclang attributes are both missing or have values that + represent the same language, and whose label attributes are + again both missing or both have the same value.

    -

    The buffered attribute must return a new - static normalised TimeRanges object that represents the ranges of the - media resource, if any, that the user agent has buffered, at the time the attribute - is evaluated. Users agents must accurately determine the ranges available, even for media streams - where this can only be determined by tedious inspection.

    - -

    Typically this will be a single range anchored at the zero point, but if, e.g. the - user agent uses HTTP range requests in response to seeking, then there could be multiple - ranges.

    +

    If the element has a label attribute whose value is not + the empty string, then the element's track label is the value of the attribute. + Otherwise, the element's track label is an empty string.

    -

    User agents may discard previously buffered data.

    +
    -

    Thus, a time position included within a range of the objects return by the buffered attribute at one time can end up being not included in - the range(s) of objects returned by the same attribute at later times.

    +

    The default attribute is a boolean + attribute, which, if specified, indicates that the track is to be enabled if the user's + preferences do not indicate that another track would be more appropriate.

    - +

    Each media element must have no more than one track element child + whose kind attribute is in the subtitles or captions state and whose default attribute is specified.

    +

    Each media element must have no more than one track element child + whose kind attribute is in the description state and whose default attribute is specified.

    +

    Each media element must have no more than one track element child + whose kind attribute is in the chapters state and whose default attribute is specified.

    -
    Offsets into the media resource
    +

    There is no limit on the number of track elements whose kind attribute is in the metadata state and whose default attribute is specified.

    -
    media . duration
    - +
    track . readyState
    - -

    Returns the length of the media resource, in seconds, assuming that the start of - the media resource is at time zero.

    - -

    Returns NaN if the duration isn't available.

    - -

    Returns Infinity for unbounded streams.

    - +

    Returns the text track readiness state, + represented by a number from the following list:

    +
    +
    track . NONE (0)
    +
    +

    The text track not loaded state.

    +
    +
    track . LOADING (1)
    +
    +

    The text track loading state.

    +
    +
    track . LOADED (2)
    +
    +

    The text track loaded state.

    +
    +
    track . ERROR (3)
    +
    +

    The text track failed to load state.

    +
    +
    -
    media . currentTime [ = value ]
    +
    track . track
    -

    Returns the official playback position, in seconds.

    - -

    Can be set, to seek to the given time.

    - -

    Will throw an InvalidStateError exception if there is no selected media - resource or if there is a current media controller.

    +

    Returns the TextTrack object corresponding to the text track of the track element.

    @@ -27518,248 +27529,207 @@ interface HTMLMediaElement : HTMLElement {
    -

    A media resource has a media timeline that maps times (in seconds) to - positions in the media resource. The origin of a timeline is its earliest defined - position. The duration of a timeline is its last defined position.

    - -

    Establishing the media - timeline: If the media resource somehow specifies an explicit timeline whose - origin is not negative (i.e. gives each frame a specific time offset and gives the first frame a - zero or positive offset), then the media timeline should be that timeline. (Whether - the media resource can specify a timeline or not depends on the media resource's format.) If the media resource specifies an - explicit start time and date, then that time and date should be considered the zero point - in the media timeline; the timeline offset will be the time and date, - exposed using the getStartDate() method.

    - -

    If the media resource has a discontinuous timeline, the user agent must extend the - timeline used at the start of the resource across the entire resource, so that the media - timeline of the media resource increases linearly starting from the - earliest possible position (as defined below), even if the underlying media - data has out-of-order or even overlapping time codes.

    - -

    For example, if two clips have been concatenated into one video file, but the - video format exposes the original times for the two clips, the video data might expose a timeline - that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those - times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.

    +

    The readyState attribute must return the + numeric value corresponding to the text track readiness state of the + track element's text track, as defined by the following list:

    -

    In the rare case of a media resource that does not have an explicit timeline, the - zero time on the media timeline should correspond to the first frame of the - media resource. In the even rarer case of a media resource with no - explicit timings of any kind, not even frame durations, the user agent must itself determine the - time for each frame in a user-agent-defined manner. - -

    +
    +
    NONE (numeric value 0)
    +
    The text track not loaded state.
    +
    LOADING (numeric value 1)
    +
    The text track loading state.
    +
    LOADED (numeric value 2)
    +
    The text track loaded state.
    +
    ERROR (numeric value 3)
    +
    The text track failed to load state.
    +
    -

    An example of a file format with no explicit timeline but with explicit frame - durations is the Animated GIF format. An example of a file format with no explicit timings at all - is the JPEG-push format (multipart/x-mixed-replace with JPEG frames, often - used as the format for MJPEG streams).

    +

    The track IDL attribute must, on getting, + return the track element's text track's corresponding + TextTrack object.

    -

    If, in the case of a resource with no timing information, the user agent will nonetheless be - able to seek to an earlier point than the first frame originally provided by the server, then the - zero time should correspond to the earliest seekable time of the media resource; - otherwise, it should correspond to the first frame received from the server (the point in the - media resource at which the user agent began receiving the stream).

    +

    The src, srclang, label, and default IDL attributes must reflect the + respective content attributes of the same name. The kind IDL attribute must reflect the content + attribute of the same name, limited to only known values.

    -

    At the time of writing, there is no known format that lacks explicit frame time - offsets yet still supports seeking to a frame before the first frame sent by the server.

    +
    -

    Consider a stream from a TV broadcaster, which begins streaming on a sunny Friday afternoon in - October, and always sends connecting user agents the media data on the same media timeline, with - its zero time set to the start of this stream. Months later, user agents connecting to this - stream will find that the first frame they receive has a time with millions of seconds. The getStartDate() method would always return the date that the - broadcast started; this would allow controllers to display real times in their scrubber (e.g. - "2:30pm") rather than a time relative to when the broadcast began ("8 months, 4 hours, 12 - minutes, and 23 seconds").

    +

    This video has subtitles in several languages:

    -

    Consider a stream that carries a video with several concatenated fragments, broadcast by a - server that does not allow user agents to request specific times but instead just streams the - video data in a predetermined order, with the first frame delivered always being identified as - the frame with time zero. If a user agent connects to this stream and receives fragments defined - as covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 - UTC to 2010-02-12 14:35:00 UTC, it would expose this with a media timeline starting - at 0s and extending to 3,600s (one hour). Assuming the streaming server disconnected at the end - of the second clip, the duration attribute would then - return 3,600. The getStartDate() method would return a - Date object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a - different user agent connected five minutes later, it would (presumably) receive - fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 - 14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a media timeline - starting at 0s and extending to 3,300s (fifty five minutes). In this case, the getStartDate() method would return a Date object - with a time corresponding to 2010-03-20 23:20:00 UTC.

    + 
    <video src="brave.webm">
+ <track kind=subtitles src=brave.en.vtt srclang=en label="English">
+ <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
+ <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
+ <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
+</video>
    -

    In both of these examples, the seekable attribute - would give the ranges that the controller would want to actually display in its UI; typically, if - the servers don't support seeking to arbitrary times, this would be the range of time from the - moment the user agent connected to the stream up to the latest frame that the user agent has - obtained; however, if the user agent starts discarding earlier information, the actual range - might be shorter.

    +

    (The lang attributes on the last two describe the language of + the label attribute, not the language of the subtitles + themselves. The language of the subtitles is given by the srclang attribute.)

    -

    In any case, the user agent must ensure that the earliest possible position (as - defined below) using the established media timeline, is greater than or equal to - zero.

    - -

    The media timeline also has an associated clock. Which clock is used is user-agent - defined, and may be media resource-dependent, but it should approximate the user's - wall clock.

    - -

    All the media elements that share current - media controller use the same clock for their media timeline.

    - -

    Media elements have a current playback position, - which must initially (i.e. in the absence of media data) be zero seconds. The - current playback position is a time on the media timeline.

    - -

    Media elements also have an official playback - position, which must initially be set to zero seconds. The official playback - position is an approximation of the current playback position that is kept - stable while scripts are running.

    - -

    Media elements also have a default playback start - position, which must initially be set to zero seconds. This time is used to allow the - element to be seeked even before the media is loaded.

    - -

    Each media element has a show poster flag. When a media - element is created, this flag must be set to true. This flag is used to control when the - user agent is to show a poster frame for a video element instead of showing the video - contents.

    - -

    The currentTime attribute must, on - getting, return the media element's default playback start position, - unless that is zero, in which case it must return the element's official playback - position. The returned value must be expressed in seconds. On setting, if the media - element has a current media controller, then the user agent must throw an - InvalidStateError exception; otherwise, if the media element's readyState is HAVE_NOTHING, then it must set the media - element's default playback start position to the new value; otherwise, it must - set the official playback position to the new value and then seek to the new value. The new value must be interpreted as being in - seconds.

    + +

    Media elements

    -

    Media elements have an initial playback position, - which must initially (i.e. in the absence of media data) be zero seconds. The - initial playback position is updated when a media resource is loaded. - The initial playback position is a time on the media timeline.

    +

    Media elements (audio and video, in + this specification) implement the following interface:

    -

    If the media resource is a streaming resource, then the user agent might be unable - to obtain certain parts of the resource after it has expired from its buffer. Similarly, some - media resources might have a media timeline that - doesn't start at zero. The earliest possible position is the earliest position in the - stream or resource that the user agent can ever obtain again. It is also a time on the media - timeline.

    + 
    enum CanPlayTypeResult { "" /* empty string */, "maybe", "probably" };
+interface HTMLMediaElement : HTMLElement {
 
-  
    The earliest possible position is not explicitly exposed in the API;
-  it corresponds to the start time of the first range in the seekable attribute's TimeRanges object, if any, or
-  the current playback position otherwise.
    
+  // error state
+  readonly attribute MediaError? error;
 
-  
    When the earliest possible position changes, then: if the current playback
-  position is before the earliest possible position, the user agent must seek to the earliest possible position; otherwise, if
-  the user agent has not fired a timeupdate event at the
-  element in the past 15 to 250ms and is not still running event handlers for such an event, then
-  the user agent must queue a task to fire a simple event named timeupdate at the element.
    
+  // network state
+           attribute DOMString src;
+  readonly attribute DOMString currentSrc;
+           attribute DOMString crossOrigin;
+  const unsigned short NETWORK_EMPTY = 0;
+  const unsigned short NETWORK_IDLE = 1;
+  const unsigned short NETWORK_LOADING = 2;
+  const unsigned short NETWORK_NO_SOURCE = 3;
+  readonly attribute unsigned short networkState;
+           attribute DOMString preload;
+  readonly attribute TimeRanges buffered;
+  void load();
+  CanPlayTypeResult canPlayType(DOMString type);
 
-  
    Because of the above requirement and the requirement in the resource fetch algorithm that kicks in when the metadata of the clip becomes known, the current
-  playback position can never be less than the earliest possible position.
    
+  // ready state
+  const unsigned short HAVE_NOTHING = 0;
+  const unsigned short HAVE_METADATA = 1;
+  const unsigned short HAVE_CURRENT_DATA = 2;
+  const unsigned short HAVE_FUTURE_DATA = 3;
+  const unsigned short HAVE_ENOUGH_DATA = 4;
+  readonly attribute unsigned short readyState;
+  readonly attribute boolean seeking;
 
-  
-  
+  // playback state
+           attribute double currentTime;
+  void fastSeek(double time);
+  readonly attribute unrestricted double duration;
+  Date getStartDate();
+  readonly attribute boolean paused;
+           attribute double defaultPlaybackRate;
+           attribute double playbackRate;
+  readonly attribute TimeRanges played;
+  readonly attribute TimeRanges seekable;
+  readonly attribute boolean ended;
+           attribute boolean autoplay;
+           attribute boolean loop;
+  void play();
+  void pause();
 
-  
    If at any time the user agent learns that an audio or video track has ended and all media
-  data relating to that track corresponds to parts of the media timeline that
-  are before the earliest possible position, the user agent may queue a
-  task to first remove the track from the audioTracks
-  attribute's AudioTrackList object or the videoTracks attribute's VideoTrackList object as
-  appropriate and then fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that
-  uses the TrackEvent interface, with the track attribute initialised to the AudioTrack or
-  VideoTrack object representing the track, at the media element's
-  aforementioned AudioTrackList or VideoTrackList object.
    
+  // media controller
+           attribute DOMString mediaGroup;
+           attribute MediaController? controller;
 
-  
    The duration attribute must return the time
-  of the end of the media resource, in seconds, on the media timeline. If
-  no media data is available, then the attributes must return the Not-a-Number (NaN)
-  value. If the media resource is not known to be bounded (e.g. streaming radio, or a
-  live event with no announced end time), then the attribute must return the positive Infinity
-  value.
    
+  // controls
+           attribute boolean controls;
+           attribute double volume;
+           attribute boolean muted;
+           attribute boolean defaultMuted;
 
-  
    The user agent must determine the duration of the media resource before playing
-  any part of the media data and before setting readyState to a value equal to or greater than HAVE_METADATA, even if doing so requires fetching multiple
-  parts of the resource.
    
+  // tracks
+  readonly attribute AudioTrackList audioTracks;
+  readonly attribute VideoTrackList videoTracks;
+  readonly attribute TextTrackList textTracks;
+  TextTrack addTextTrack(TextTrackKind kind, optional DOMString label = "", optional DOMString language = "");
+};
    -

    When the length of the media resource changes to a known value - (e.g. from being unknown to known, or from a previously established length to a new length) the - user agent must queue a task to fire a simple event named durationchange at the media element. (The - event is not fired when the duration is reset as part of loading a new media resource.) If the - duration is changed such that the current playback position ends up being greater - than the time of the end of the media resource, then the user agent must also seek to the time of the end of the media resource.

    +

    The media element attributes, src, crossorigin, preload, autoplay, + mediagroup, loop, + muted, and controls, apply to all media + elements. They are defined in this section.

    -

    If an "infinite" stream ends for some reason, then the duration would change - from positive Infinity to the time of the last frame or sample in the stream, and the durationchange event would be fired. Similarly, if the - user agent initially estimated the media resource's duration instead of determining - it precisely, and later revises the estimate based on new information, then the duration would - change and the durationchange event would be - fired.

    + -

    Some video files also have an explicit date and time corresponding to the zero time in the - media timeline, known as the timeline offset. Initially, the - timeline offset must be set to Not-a-Number (NaN).

    + -

    The getStartDate() method must return a new Date object representing the current - timeline offset.

    +

    Media elements are used to present audio data, or video and + audio data, to the user. This is referred to as media data in this section, since this + section applies equally to media elements for audio or for + video. - + The term media resource is used to refer to the complete set of media data, e.g. the + complete video file, or complete audio file. -

    +

    -

    The loop attribute is a boolean - attribute that, if specified, indicates that the media element is to seek back - to the start of the media resource upon reaching the end.

    +

    A media resource can have multiple audio and video tracks. For the purposes of a + media element, the video data of the media resource is only that of the + currently selected track (if any) as given by the element's videoTracks attribute when the event loop last + reached step 1, and the audio data of the media resource is the result of mixing all + the currently enabled tracks (if any) given by the element's audioTracks attribute when the event loop last + reached step 1.

    -

    The loop attribute has no effect while the element has a - current media controller.

    +

    Both audio and video elements can be used for both audio + and video. The main difference between the two is simply that the audio element has + no playback area for visual content (such as video or captions), whereas the video + element does.

    -

    The loop IDL attribute must reflect - the content attribute of the same name.

    +

    Except where otherwise explicitly specified, the task source for all the tasks + queued in this section and its subsections is the media + element event task source of the media element in question.

    -
    Ready states
    +
    Error codes
    -
    media . readyState
    +
    media . error
    -

    Returns a value that expresses the current state of the element with respect to rendering the - current playback position, from the codes in the list below.

    +

    Returns a MediaError object representing the current error state of the + element.

    + +

    Returns null if there is no error.

    @@ -27767,351 +27737,295 @@ interface HTMLMediaElement : HTMLElement {
    -

    Media elements have a ready state, which describes to - what degree they are ready to be rendered at the current playback position. The - possible values are as follows; the ready state of a media element at any particular time is the - greatest value describing the state of the element:

    +

    All media elements have an associated error status, which + records the last error the element encountered since its resource selection algorithm was last invoked. The + error attribute, on getting, must return the + MediaError object created for this last error, or null if there has not been an + error.

    -
    - -
    HAVE_NOTHING (numeric value 0)
    - -

    No information regarding the media resource is available. No data for the - current playback position is available. Media - elements whose networkState attribute are set - to NETWORK_EMPTY are always in the HAVE_NOTHING state.

    - -
    HAVE_METADATA (numeric value 1)
    - -

    Enough of the resource has been obtained that the duration of the resource is available. - In the case of a video element, the dimensions of the video are also available. The - API will no longer throw an exception when seeking. No media data is available for - the immediate current playback position.

    - -
    HAVE_CURRENT_DATA (numeric value 2)
    - -

    Data for the immediate current playback position is available, but either not - enough data is available that the user agent could successfully advance the current - playback position in the direction of playback at all without immediately - reverting to the HAVE_METADATA state, or there is no - more data to obtain in the direction of playback. For example, in video this - corresponds to the user agent having data from the current frame, but not the next frame, when - the current playback position is at the end of the current frame; and to when playback has ended.

    - -
    HAVE_FUTURE_DATA (numeric value 3)
    + 
    interface MediaError {
+  const unsigned short MEDIA_ERR_ABORTED = 1;
+  const unsigned short MEDIA_ERR_NETWORK = 2;
+  const unsigned short MEDIA_ERR_DECODE = 3;
+  const unsigned short MEDIA_ERR_SRC_NOT_SUPPORTED = 4;
+  readonly attribute unsigned short code;
+};
    -

    Data for the immediate current playback position is available, as well as - enough data for the user agent to advance the current playback position in the - direction of playback at least a little without immediately reverting to the HAVE_METADATA state, and the text tracks are - ready. For example, in video this corresponds to the user agent having data for at least - the current frame and the next frame when the current playback position is at the - instant in time between the two frames, or to the user agent having the video data for the - current frame and audio data to keep playing at least a little when the current playback - position is in the middle of a frame. The user agent cannot be in this state if playback has ended, as the current playback position - can never advance in this case.

    +
    -
    HAVE_ENOUGH_DATA (numeric value 4)
    +
    media . error . code
    -

    All the conditions described for the HAVE_FUTURE_DATA state are met, and, in addition, - either of the following conditions is also true:

    - -
      +

      Returns the current error's error code, from the list below.

      -
    • The user agent estimates that data is being fetched at a rate where the current - playback position, if it were to advance at the effective playback rate, - would not overtake the available data before playback reaches the end of the media - resource.
      • +
    -
  • The user agent has entered a state where waiting longer will not result in further data - being obtained, and therefore nothing would be gained by delaying playback any further. (For - example, the buffer might be full.)
    • +
    - +
    - +

    The code attribute of a + MediaError object must return the code for the error, which must be one of the + following:

    -
    + -

    In practice, the difference between HAVE_METADATA and HAVE_CURRENT_DATA is negligible. Really the only time - the difference is relevant is when painting a video element onto a - canvas, where it distinguishes the case where something will be drawn (HAVE_CURRENT_DATA or greater) from the case where - nothing is drawn (HAVE_METADATA or less). Similarly, - the difference between HAVE_CURRENT_DATA (only - the current frame) and HAVE_FUTURE_DATA (at least - this frame and the next) can be negligible (in the extreme, only one frame). The only time that - distinction really matters is when a page provides an interface for "frame-by-frame" - navigation.

    +
    -
    +
    MEDIA_ERR_ABORTED (numeric value 1)
    -

    When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the user agent must follow the steps - given below:

    +
    The fetching process for the media resource was aborted by the user agent at the + user's request.
    -
      +
      MEDIA_ERR_NETWORK (numeric value 2)
      -
    1. +
      A network error of some description caused the user agent to stop fetching the media + resource, after the resource was established to be usable.
      -

      Apply the first applicable set of substeps from the following list:

      +
      MEDIA_ERR_DECODE (numeric value 3)
      +
      An error of some description occurred while decoding the media resource, after + the resource was established to be usable.
      -
      +
      MEDIA_ERR_SRC_NOT_SUPPORTED (numeric value 4)
      - -
      If the previous ready state was HAVE_NOTHING, - and the new ready state is HAVE_METADATA
      +
      The media resource indicated by the src + attribute was not suitable.
      -
      +
      -

      Queue a task to fire a simple event named loadedmetadata at the element.

      -

      Before this task is run, as part of the event loop mechanism, the - rendering will have been updated to resize the video element if appropriate.

      - +
      Location of the media resource
      - +

      The src content attribute on media elements gives the address of the media resource (video, audio) to show. The + attribute, if present, must contain a valid non-empty URL potentially surrounded by + spaces.

      -
      If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater
      +

      If the itemprop attribute is specified on the media + element, then the src attribute must also be + specified.

      -
      +

      The crossorigin content attribute on + media elements is a CORS settings attribute.

      -

      If this is the first time this occurs for this media - element since the load() algorithm was last - invoked, the user agent must queue a task to fire a simple event - named loadeddata at the element.

      +
      -

      If the new ready state is HAVE_FUTURE_DATA - or HAVE_ENOUGH_DATA, then the relevant steps - below must then be run also.

      +

      If a media element is created with a + src attribute, the user agent must synchronously invoke the + media element's resource selection + algorithm.

      -
      +

      If a src attribute of a media element is set + or changed, the user agent must invoke the media element's media element load + algorithm. (Removing the src attribute does + not do this, even if there are source elements present.)

      - -
      If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready state is - HAVE_CURRENT_DATA or less
      +

      The src IDL attribute on media elements must reflect the content attribute of the same + name.

      -
      +

      The crossOrigin IDL attribute must + reflect the crossorigin content + attribute, limited to only known values.

      -

      If the media element was potentially - playing before its readyState attribute - changed to a value lower than HAVE_FUTURE_DATA, and the element has not - ended playback, and playback has not stopped due to errors, - paused for user interaction, or paused for in-band content, the user - agent must queue a task to fire a simple event named timeupdate at the element, and queue a task - to fire a simple event named waiting at - the element.

      +
    - +
    - -
    If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state - is HAVE_FUTURE_DATA
    +
    media . currentSrc
    -
    +
    -

    The user agent must queue a task to fire a simple event named - canplay at the element.

    +

    Returns the address of the current media resource.

    -

    If the element's paused attribute is false, the user - agent must queue a task to fire a simple event named playing at the element.

    +

    Returns the empty string when there is no media resource.

    -
    + - -
    If the new ready state is HAVE_ENOUGH_DATA
    +
    -
    +
    -

    If the previous ready state was HAVE_CURRENT_DATA or less, the user agent must - queue a task to fire a simple event named canplay at the element, and, if the element's paused attribute is false, queue a task to - fire a simple event named playing - at the element.

    +

    The currentSrc IDL attribute is initially + the empty string. Its value is changed by the resource + selection algorithm defined below.

    -

    If the autoplaying flag is true, and the paused attribute is true, and the media element - has an autoplay attribute specified, and the - media element's Document's active sandboxing flag set - does not have the sandboxed automatic features browsing context flag set, then - the user agent may also run the following substeps:

    +
    -
      +

      There are two ways to specify a media resource, the src attribute, or source elements. The attribute + overrides the elements.

      -
    1. Set the paused attribute to false.
      2. -
    2. If the element's show poster flag is true, set it to false and run the - time marches on steps.
      3. -
    3. Queue a task to fire a simple event named play at the element.
      4. +
      MIME types
      -
    4. Queue a task to fire a simple event named playing at the element.
      5. +

      A media resource can be described in terms of its type, specifically a + MIME type, in some cases with a codecs parameter. (Whether the + codecs parameter is allowed or not depends on the MIME type.)

      -
    +

    Types are usually somewhat incomplete descriptions; for example "video/mpeg" doesn't say anything except what the container type is, and even a + type like "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" doesn't + include information like the actual bitrate (only the maximum bitrate). Thus, given a type, a user + agent can often only know whether it might be able to play media of that type (with + varying levels of confidence), or whether it definitely cannot play media of that + type.

    -

    User agents do not need to support autoplay, and it is suggested that user - agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the - video to play, so as to allow the user to override the behavior if so desired.

    +

    A type that the user agent knows it cannot render is one that describes a resource + that the user agent definitely does not support, for example because it doesn't recognise the + container type, or it doesn't support the listed codecs.

    -

    In any case, the user agent must finally queue a task to fire a simple - event named canplaythrough at the element.

    +

    The MIME type "application/octet-stream" with no parameters is never + a type that the user agent knows it cannot render. User agents must treat that type + as equivalent to the lack of any explicit Content-Type metadata + when it is used to label a potential media resource.

    -
    +

    Only the MIME type "application/octet-stream" with no + parameters is special-cased here; if any parameter appears with it, it will be treated just like + any other MIME type. This is a deviation from the rule that unknown MIME type parameters should be ignored.

    -
    +
    - +
    media . canPlayType(type)
    -

  • If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

    • +
    - +

    Returns the empty string (a negative response), "maybe", or "probably" based on how confident + the user agent is that it can play media resources of the given type.

    - +
    -

    It is possible for the ready state of a media element to jump between these states - discontinuously. For example, the state of a media element can jump straight from HAVE_METADATA to HAVE_ENOUGH_DATA without passing through the HAVE_CURRENT_DATA and HAVE_FUTURE_DATA states.

    +
    -

    The readyState IDL attribute must, on - getting, return the value described above that describes the current ready state of the - media element.

    +

    The canPlayType(type) method must return the + empty string if type is a type that the user agent knows it cannot + render or is the type "application/octet-stream"; it must return "probably" if the user agent is confident + that the type represents a media resource that it can render if used in with this + audio or video element; and it must return "maybe" otherwise. Implementors are encouraged + to return "maybe" unless the type can be + confidently established as being supported or not. Generally, a user agent should never return + "probably" for a type that allows the codecs parameter if that parameter is not present.

    -

    The autoplay attribute is a boolean - attribute. When present, the user agent (as described in the algorithm - described herein) will automatically begin playback of the media resource as - soon as it can do so without stopping.

    - -

    Authors are urged to use the autoplay - attribute rather than using script to trigger automatic playback, as this allows the user to - override the automatic playback when it is not desired, e.g. when using a screen reader. Authors - are also encouraged to consider not using the automatic playback behavior at all, and instead to - let the user agent wait for the user to start playback explicitly.

    +
    -
    +

    This script tests to see if the user agent supports a (fictional) new format to dynamically + decide whether to use a video element or a plugin:

    -

    The autoplay IDL attribute must - reflect the content attribute of the same name.

    + 
    <section id="video">
+ <p><a href="playing-cats.nfv">Download video</a></p>
+</section>
+<script>
+ var videoSection = document.getElementById('video');
+ var videoElement = document.createElement('video');
+ var support = videoElement.canPlayType('video/x-new-fictional-format;codecs="kittens,bunnies"');
+ if (support != "probably" && "New Fictional Video Plugin" in navigator.plugins) {
+   // not confident of browser support
+   // but we have a plugin
+   // so use plugin instead
+   videoElement = document.createElement("embed");
+ } else if (support == "") {
+   // no support from browser and no plugin
+   // do nothing
+   videoElement = null;
+ }
+ if (videoElement) {
+   while (videoSection.hasChildNodes())
+     videoSection.removeChild(videoSection.firstChild);
+   videoElement.setAttribute("src", "playing-cats.nfv");
+   videoSection.appendChild(videoElement);
+ }
+</script>
    +

    The type attribute of the + source element allows the user agent to avoid downloading resources that use formats + it cannot render.

    -
    Playing the media resource
    +
    Network states
    -
    media . paused
    +
    media . networkState
    -

    Returns true if playback is paused; false otherwise.

    +

    Returns the current state of network activity for the element, from the codes in the list + below.

    -
    media . ended
    - -
    - -

    Returns true if playback has reached the end of the media resource.

    - -
    +
    -
    media . defaultPlaybackRate [ = value ]
    +
    -
    +

    As media elements interact with the network, their current + network activity is represented by the networkState attribute. On getting, it must + return the current network state of the element, which must be one of the following values:

    -

    Returns the default rate of playback, for when the user is not fast-forwarding or reversing - through the media resource.

    +
    -

    Can be set, to change the default rate of playback.

    +
    -

    The default rate has no direct effect on playback, but if the user switches to a fast-forward - mode, when they return to the normal playback mode, it is expected that the rate of playback - will be returned to the default rate of playback.

    +
    NETWORK_EMPTY (numeric value 0)
    -

    When the element has a current media controller, the defaultPlaybackRate attribute is ignored and the - current media controller's defaultPlaybackRate is used instead.

    +
    The element has not yet been initialized. All attributes are in their initial states.
    - +
    NETWORK_IDLE (numeric value 1)
    -
    media . playbackRate [ = value ]
    +
    The element's resource + selection algorithm is active and has selected a resource, but it is not actually using the network at this time.
    -
    +
    NETWORK_LOADING (numeric value 2)
    -

    Returns the current rate playback, where 1.0 is normal speed.

    +
    The user agent is actively trying to download data.
    -

    Can be set, to change the rate of playback.

    +
    NETWORK_NO_SOURCE (numeric value 3)
    -

    When the element has a current media controller, the playbackRate attribute is ignored and the current - media controller's playbackRate is - used instead.

    +
    The element's resource + selection algorithm is active, but it has not yet found a resource to use.
    - +
    -
    media . played
    +
    -
    +

    The resource selection algorithm defined + below describes exactly when the networkState + attribute changes value and what events fire to indicate changes in this state.

    -

    Returns a TimeRanges object that represents the ranges of the media - resource that the user agent has played.

    +
    - -
    media . play()
    -
    -

    Sets the paused attribute to false, loading the - media resource and beginning playback if necessary. If the playback had ended, will - restart it from the start.

    +
    Loading the media resource
    -
    +
    -
    media . pause()
    +
    media . load()
    -

    Sets the paused attribute to true, loading the - media resource if necessary.

    +

    Causes the element to reset and start selecting and loading a new media resource + from scratch.

    @@ -28119,7426 +28033,7508 @@ interface HTMLMediaElement : HTMLElement {
    -

    The paused attribute represents whether the - media element is paused or not. The attribute must initially be true.

    - -

    A media element is a blocked media element if its readyState attribute is in the HAVE_NOTHING state, the HAVE_METADATA state, or the HAVE_CURRENT_DATA state, or if the element has - paused for user interaction or paused for in-band content.

    - -

    A media element is said to be potentially playing when its paused attribute is false, the element has not ended - playback, playback has not stopped due to errors, the element either has no - current media controller or has a current media controller but is not - blocked on its media controller, and the element is not a blocked media - element.

    +

    All media elements have an autoplaying flag, + which must begin in the true state, and a delaying-the-load-event flag, which must + begin in the false state. While the delaying-the-load-event flag is true, the element + must delay the load event of its document.

    -

    A waiting DOM event can be fired as a result of an element that is - potentially playing stopping playback due to its readyState attribute changing to a value lower than HAVE_FUTURE_DATA.

    +

    When the load() method on a media + element is invoked, the user agent must run the media element load + algorithm.

    -

    A media element is said to have ended playback when:

    +

    The media element load algorithm consists of the following steps.

    -
      +
        -
      1. The element's readyState attribute is HAVE_METADATA or greater, and +

      2. Abort any already-running instance of the resource selection algorithm for this + element.

      3. -

        Either: +

        If there are any tasks from the media + element's media element event task source in one of the task queues, then remove those tasks.

        -
          + -
        • The current playback position is the end of the media resource, - and +

          Basically, pending events and callbacks for the media element are discarded when + the media element starts loading a new resource.

          -
        • The direction of playback is forwards, and +
          • -
        • Either the media element does not have a loop attribute specified, or the media element has - a current media controller. +

        • If the media element's networkState is set to NETWORK_LOADING or NETWORK_IDLE, queue a task to fire a + simple event named abort at the media + element.

          • -
        +
      4. -

        Or: +

        If the media element's networkState + is not set to NETWORK_EMPTY, then run these + substeps:

        -
          +
            -
          1. The current playback position is the earliest possible position, - and +

          2. Queue a task to fire a simple event named emptied at the media element.

            3. -
          3. The direction of playback is backwards. +

          4. If a fetching process is in progress for the media + element, the user agent should stop it.

            5. -
        + -
        5. +

      5. Forget the media element's media-resource-specific tracks.

        6. -
    +

  • If readyState is not set to HAVE_NOTHING, then set it to that state. + +

    • -

    The ended attribute must return true if, the - last time the event loop reached step 1, the media element had - ended playback and the direction of playback was forwards, and false - otherwise.

    +

  • If the paused attribute is false, then set it to + true.

    • -

    A media element is said to have stopped due to errors when the - element's readyState attribute is HAVE_METADATA or greater, and the user agent encounters a non-fatal error during the processing of the - media data, and due to that error, is not able to play the content at the - current playback position.

    +

  • If seeking is true, set it to false.

    • -

    A media element is said to have paused for user interaction when its - paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a point - in the media resource where the user has to make a selection for the resource to - continue. If the media element has a current media controller when this - happens, then the user agent must report the controller state for the media - element's current media controller. If the media element has a - current media controller when the user makes a selection, allowing playback to - resume, the user agent must similarly report the controller state for the media - element's current media controller.

    +
  • -

    It is possible for a media element to have both ended playback and - paused for user interaction at the same time.

    +

    Set the current playback position to 0.

    -

    When a media element that is potentially playing stops playing - because it has paused for user interaction, the user agent must queue a - task to fire a simple event named timeupdate at the element.

    +

    Set the official playback position to 0.

    -

    A media element is said to have paused for in-band content when its - paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has suspended - playback of the media resource in order to play content that is temporally anchored - to the media resource and has a non-zero length, or to play content that is - temporally anchored to a segment of the media resource but has a length longer than - that segment. If the media element has a current media controller when - this happens, then the user agent must report the controller state for the - media element's current media controller. If the media - element has a current media controller when the user agent unsuspends - playback, the user agent must similarly report the controller state for the - media element's current media controller.

    +

    If this changed the official playback position, then queue a task + to fire a simple event named timeupdate at the media element.

    -

    One example of when a media element would be paused for - in-band content is when the user agent is playing audio descriptions from an external WebVTT file, and - the synthesized speech generated for a cue is longer than the time between the text track - cue start time and the text track cue end time.

    +
    • -
    +

  • Set the initial playback position to 0.

    • -

    When the current playback position reaches the end of the - media resource when the direction of playback is forwards, then the user - agent must follow these steps:

    +

  • Set the timeline offset to Not-a-Number (NaN).

    • -
      +
    1. -

    2. If the media element has a loop - attribute specified and does not have a current media controller, then seek to the earliest possible position of the - media resource and abort these steps.

      3. +

      Update the duration attribute to Not-a-Number + (NaN).

      -

    3. As defined above, the ended IDL attribute starts - returning true once the event loop returns to step 1.

      4. +

      The user agent will not fire a durationchange event for this particular change of + the duration.

      -

    4. Queue a task to fire a simple event named timeupdate at the media element.

      5. + -

    5. Queue a task that, if the media element does not have a - current media controller, and the media element has still ended - playback, and the direction of playback is still forwards, and paused is false, changes paused to true and fires a - simple event named pause at the media - element.

      6. +
    -

  • Queue a task to fire a simple event named ended at the media element.

    • + -

  • If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

    • +

  • Set the playbackRate attribute to the value of + the defaultPlaybackRate attribute.

    • - +

  • Set the error attribute to null and the + autoplaying flag to true.

    • + +

  • Invoke the media element's resource selection algorithm.

    • -

    When the current playback position reaches the earliest possible - position of the media resource when the direction of playback is - backwards, then the user agent must only queue a task to fire a simple - event named timeupdate at the element.

    +
  • -

    The word "reaches" here does not imply that the current playback - position needs to have changed during normal playback; it could be via seeking, for instance.

    +

    Playback of any previously playing media resource for this element + stops.

    -
    +
    • -

    The defaultPlaybackRate attribute - gives the desired speed at which the media resource is to play, as a multiple of its - intrinsic speed. The attribute is mutable: on getting it must return the last value it was set to, - or 1.0 if it hasn't yet been set; on setting the attribute must be set to the new value.

    + -

    The defaultPlaybackRate is used - by the user agent when it exposes a user - interface to the user.

    +

    The resource selection algorithm for a + media element is as follows. This algorithm is always invoked synchronously, but one + of the first steps in the algorithm is to return and continue running the remaining steps + asynchronously, meaning that it runs in the background with scripts and other tasks running in parallel. In addition, this algorithm interacts + closely with the event loop mechanism; in particular, it has synchronous sections (which are triggered as part of the event loop + algorithm). Steps in such sections are marked with ⌛.

    -

    The playbackRate attribute gives the - effective playback rate (assuming there is no current media controller - overriding it), which is the speed at which the media resource plays, as a multiple - of its intrinsic speed. If it is not equal to the defaultPlaybackRate, then the implication is that the - user is using a feature such as fast forward or slow motion playback. The attribute is mutable: on - getting it must return the last value it was set to, or 1.0 if it hasn't yet been set; on setting - the attribute must be set to the new value, and the playback will change speed (if the element is - potentially playing and there is no current media controller).

    +
      -

      When the defaultPlaybackRate - or playbackRate attributes change value (either by - being set by script or by being changed directly by the user agent, e.g. in response to user - control) the user agent must queue a task to fire a simple event named - ratechange at the media element.

      + -

      The defaultPlaybackRate and - playbackRate attributes have no effect when the - media element has a current media controller; the namesake attributes on - the MediaController object are used instead in that situation.

      +

    1. Set the element's networkState attribute to + the NETWORK_NO_SOURCE value.

      2. -
      +

    2. Set the element's show poster flag to true.

      3. -

      The played attribute must return a new static - normalised TimeRanges object that represents the ranges of points on the - media timeline of the media resource reached through the usual monotonic - increase of the current playback position during normal playback, if any, at the time - the attribute is evaluated.

      +

    3. Set the media element's delaying-the-load-event flag to true + (this delays the load event).

      4. -
      +

    4. Asynchronously await a stable state, allowing the task that invoked this algorithm to continue. The synchronous + section consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

      5. -

      When the play() method on a media - element is invoked, the user agent must run the following steps.

      +
    5. -
        +

        ⌛ If the media element's blocked-on-parser flag is false, + then populate the list of pending text tracks.

        -

      1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's - resource selection algorithm.

        2. +
      2. -

        If the playback has ended and the direction of - playback is forwards, and the media element does not have a current - media controller, seek to the earliest possible - position of the media resource.

        +

        ⌛ If the media element has a src + attribute, then let mode be attribute.

        -

        This will cause the user agent to queue a - task to fire a simple event named timeupdate at the media element.

        - +

        ⌛ Otherwise, if the media element does not have a src attribute but has a source element child, then + let mode be children and let candidate + be the first such source element child in tree order.

        + +

        ⌛ Otherwise the media element has neither a src attribute nor a source element child: set the + networkState to NETWORK_EMPTY, and abort these steps; the + synchronous section ends.

        3. -

      3. If the media element has a current media controller, then - bring the media element up to speed with its new media controller.

        +

      4. ⌛ Set the media element's networkState to NETWORK_LOADING.

        5. + +

      5. ⌛ Queue a task to fire a simple event named loadstart at the media element.

      6. -

        If the media element's paused attribute is - true, run the following substeps:

        +

        If mode is attribute, then run these substeps:

          -

        1. Change the value of paused to false.

          2. +

        2. ⌛ If the src + attribute's value is the empty string, then end the synchronous section, and jump + down to the failed with attribute step below.

          3. -

        3. If the show poster flag is true, set the element's show poster - flag to false and run the time marches on steps.

          4. +

        4. ⌛ Let absolute URL be the absolute URL that + would have resulted from resolving the URL + specified by the src attribute's value relative to the + media element when the src attribute was last + changed.

          -

        5. Queue a task to fire a simple event named play at the element.

          6. +

        6. ⌛ If absolute URL was obtained successfully, set the currentSrc attribute to absolute + URL.

          7. -
        7. +

        8. End the synchronous section, continuing the remaining steps + asynchronously.

          9. -

          If the media element's readyState - attribute has the value HAVE_NOTHING, HAVE_METADATA, or HAVE_CURRENT_DATA, queue a task to - fire a simple event named waiting at the - element.

          +

        9. If absolute URL was obtained successfully, run the resource fetch algorithm with absolute + URL. If that algorithm returns without aborting this one, then the load + failed.

          10. -

          Otherwise, the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA: queue a task to - fire a simple event named playing at the - element.

          +
        10. -
          11. +

          Failed with attribute: Reaching this step indicates that the media resource + failed to load or that the given URL could not be resolved. Queue a task to run the following steps:

          -
        +
          - +

        1. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_SRC_NOT_SUPPORTED.

          2. -

        2. Set the media element's autoplaying flag to false.

          3. +

        3. Forget the media element's media-resource-specific tracks.

          4. -

        4. If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

          5. +

        5. Set the element's networkState attribute + to the NETWORK_NO_SOURCE value.

          6. -
        +

      7. Set the element's show poster flag to true.

        8. -
        +

      8. Fire a simple event named error at + the media element.

        9. -

        When the pause() method is invoked, and when - the user agent is required to pause the media element, the user agent must run the - following steps:

        +

      9. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

        10. -
          +
        -

      10. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's - resource selection algorithm.

        11. + -

      11. Run the internal pause steps for the media element.

        12. +

      12. Wait for the task queued by the previous step to have + executed.

        13. -
      +

    6. Abort these steps. Until the load() method is + invoked or the src attribute is changed, the element won't + attempt to load another resource.

      7. + -

      The internal pause steps for a media element are as follows:

      +
    -
      +

      Otherwise, the source elements will be used; run these substeps:

      -

    1. Set the media element's autoplaying flag to false.

      2. +
        -

      1. If the media element's paused attribute - is false, run the following steps:

        +
      2. -
          +

          ⌛ Let pointer be a position defined by two adjacent nodes in the + media element's child list, treating the start of the list (before the first + child in the list, if any) and end of the list (after the last child in the list, if any) as + nodes in their own right. One node is the node before pointer, and the + other node is the node after pointer. Initially, let pointer be the position between the candidate node and the + next node, if there are any, or the end of the list, if it is the last node.

          -

        1. Change the value of paused to true.

          2. +

          As nodes are inserted and removed into the media element, pointer must be updated as follows:

          -

        2. Queue a task to fire a simple - event named timeupdate at the - element.

          3. +
          -

        3. Queue a task to fire a simple - event named pause - at the element.

          4. +
          If a new node is inserted between the two nodes that define pointer
          -

        4. Set the official playback position to the current playback - position.

          5. +
          Let pointer be the point between the node before pointer and the new node. In other words, insertions at pointer go after pointer.
          -
        +
        If the node before pointer is removed
        -
        3. +
        Let pointer be the point between the node after pointer and the node before the node after pointer. In + other words, pointer doesn't move relative to the remaining nodes.
        -

      3. If the media element has a current media controller, then - report the controller state for the media element's current media - controller.

        4. +
        If the node after pointer is removed
        -
      +
      Let pointer be the point between the node before pointer and the node after the node before pointer. Just + as with the previous case, pointer doesn't move relative to the remaining + nodes.
      -
      +
    -

    The effective playback rate is not necessarily the element's playbackRate. When a media element has a - current media controller, its effective playback rate is the - MediaController's media controller playback rate. Otherwise, the - effective playback rate is just the element's playbackRate. Thus, the current media - controller overrides the media element.

    +

    Other changes don't affect pointer.

    -

    If the effective playback rate is positive or zero, then the direction of - playback is forwards. Otherwise, it is backwards.

    + -

    When a media element is potentially playing and - its Document is a fully active Document, its current - playback position must increase monotonically at effective playback rate units - of media time per unit time of the media timeline's clock. (This specification always - refers to this as an increase, but that increase could actually be a decrease if - the effective playback rate is negative.)

    +

  • ⌛ Process candidate: If candidate does not have a + src attribute, or if its src attribute's value is the empty string, then end the + synchronous section, and jump down to the failed with elements step + below.

    • -

    The effective playback rate can be 0.0, in which case the - current playback position doesn't move, despite playback not being paused (paused doesn't become true, and the pause event doesn't fire).

    +

  • ⌛ Let absolute URL be the absolute URL that + would have resulted from resolving the URL + specified by candidate's src + attribute's value relative to the candidate when the src attribute was last changed.

    -

    This specification doesn't define how the user agent achieves the appropriate - playback rate — depending on the protocol and media available, it is plausible that the user - agent could negotiate with the server to have the server provide the media data at the appropriate - rate, so that (except for the period between when the rate is changed and when the server updates - the stream's playback rate) the client doesn't actually have to drop or interpolate any - frames.

    +

  • ⌛ If absolute URL was not obtained successfully, then end the + synchronous section, and jump down to the failed with elements step + below.

    • -

    Any time the user agent provides a stable state, - the official playback position must be set to the current playback - position.

    +

  • ⌛ If candidate has a type attribute whose value, when parsed as a MIME + type (including any codecs described by the codecs parameter, for + types that define that parameter), represents a type that the user agent knows it cannot + render, then end the synchronous section, and jump down to the failed with elements step below.

    • -

    While the direction of playback is backwards, any corresponding audio must be - muted. While the effective playback rate is - so low or so high that the user agent cannot play audio usefully, the corresponding audio must - also be muted. If the effective playback - rate is not 1.0, the user agent may apply pitch adjustments to the audio as necessary to - render it faithfully.

    +

  • ⌛ Set the currentSrc attribute to absolute URL.

    • -

    Media elements that are potentially playing - while not in a Document must not play any video, but should play any - audio component. Media elements must not stop playing just because all references to them have - been removed; only once a media element is in a state where no further audio could ever be played - by that element may the element be garbage collected.

    +

  • End the synchronous section, continuing the remaining steps + asynchronously.

    • -

    It is possible for an element to which no explicit references exist to play audio, - even if such an element is not still actively playing: for instance, it could have a current - media controller that still has references and can still be unpaused, or it could be - unpaused but stalled waiting for content to buffer.

    +

  • Run the resource fetch algorithm with + absolute URL. If that algorithm returns without aborting this one, + then the load failed.

    • -
    +

  • Failed with elements: Queue a task to fire a simple + event named error at the candidate element.

    • -

    Each media element has a list of newly introduced cues, which must be - initially empty. Whenever a text track cue is added to the list of cues of a text track that is in the list of text - tracks for a media element, that cue must - be added to the media element's list of newly introduced cues. Whenever - a text track is added to the list of text tracks for a media - element, all of the cues in that text - track's list of cues must be added to the - media element's list of newly introduced cues. When a media - element's list of newly introduced cues has new cues added while the - media element's show poster flag is not set, then the user agent must - run the time marches on steps.

    +

  • Asynchronously await a stable state. The synchronous section + consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

    • -

    When a text track cue is removed from the list of cues of a text track that is in the list of text - tracks for a media element, and whenever a text track is removed - from the list of text tracks of a media element, if the media - element's show poster flag is not set, then the user agent must run the - time marches on steps.

    +

  • ⌛ Forget the media element's media-resource-specific + tracks.

    • -

    When the current playback position of a media element changes (e.g. - due to playback or seeking), the user agent must run the time marches on steps. If the - current playback position changes while the steps are running, then the user agent - must wait for the steps to complete, and then must immediately rerun the steps. (These steps are - thus run as often as possible or needed — if one iteration takes a long time, this can cause - certain cues to be skipped over as the user agent rushes ahead - to "catch up".)

    +

  • ⌛ Find next candidate: Let candidate be + null.

    • -

    The time marches on steps are as follows:

    +

  • ⌛ Search loop: If the node after pointer is + the end of the list, then jump to the waiting step below.

    • -
      +

    1. ⌛ If the node after pointer is a source element, + let candidate be that element.

      2. -

    2. Let current cues be a list of cues, initialised to contain all the cues of all - the hidden or showing text tracks of the media - element (not the disabled ones) whose start times are less than or equal to the current - playback position and whose end times are - greater than the current playback position.

      3. +

    3. ⌛ Advance pointer so that the node before pointer is now the node that was after pointer, and the node + after pointer is the node after the node that used to be after pointer, if any.

      4. -

    4. Let other cues be a list of cues, - initialised to contain all the cues of hidden and showing text tracks of the media element that are not present in current cues.

      5. +

    5. ⌛ If candidate is null, jump back to the search + loop step. Otherwise, jump back to the process candidate step.

      6. -

    6. Let last time be the current playback position at the - time this algorithm was last run for this media element, if this is not the first - time it has run.

      7. +

    7. ⌛ Waiting: Set the element's networkState attribute to the NETWORK_NO_SOURCE value.

      8. -

    8. If the current playback position has, since the last time this algorithm was - run, only changed through its usual monotonic increase during normal playback, then let missed cues be the list of cues in other cues whose start times are - greater than or equal to last time and whose end times are less than or equal to the current playback position. - Otherwise, let missed cues be an empty list.

      9. +

    9. ⌛ Set the element's show poster flag to true.

      10. -

    10. Remove all the cues in missed cues - that are also in the media element's list of newly introduced cues, and - then empty the element's list of newly introduced cues.

      11. +

    11. ⌛ Queue a task to set the element's delaying-the-load-event + flag to false. This stops delaying the load + event.

      12. -

    12. If the time was reached through the usual monotonic increase of the current playback - position during normal playback, and if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and - is not still running event handlers for such an event, then the user agent must queue a - task to fire a simple event named timeupdate at the element. (In the other cases, such as - explicit seeks, relevant events get fired as part of the overall process of changing the - current playback position.)

      +

    13. End the synchronous section, continuing the remaining steps + asynchronously.

      14. -

      The event thus is not to be fired faster than about 66Hz or slower than 4Hz - (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to - vary the frequency of the event based on the system load and the average cost of processing the - event each time, so that the UI updates are not any more frequent than the user agent can - comfortably handle while decoding the video.

      +

    14. Wait until the node after pointer is a node other than the end of + the list. (This step might wait forever.)

      15. -

    15. If all of the cues in current cues - have their text track cue active flag set, none of the cues in other cues have their text track cue active - flag set, and missed cues is empty, then abort these steps.

      16. +

    16. Asynchronously await a stable state. The synchronous section + consists of all the remaining steps of this algorithm until the algorithm says the + synchronous section has ended. (Steps in synchronous sections are marked with ⌛.)

      17. -
    17. +

    18. ⌛ Set the element's delaying-the-load-event flag back to true (this + delays the load event again, in case it hasn't been + fired yet).

      -

      If the time was reached through the usual monotonic increase of the current playback - position during normal playback, and there are cues - in other cues that have their text track cue pause-on-exit flag - set and that either have their text track cue active flag set or are also in missed cues, then immediately pause the - media element.

      +

    19. ⌛ Set the networkState back to NETWORK_LOADING.

      20. -

      In the other cases, such as explicit seeks, playback is not paused by going past - the end time of a cue, even if that cue has its text track cue pause-on-exit flag set.

      +

    20. ⌛ Jump back to the find next candidate step above.

      21. + +
    -
  • + -

    Let events be a list of tasks, - initially empty. Each task in this list will be associated - with a text track, a text track cue, and a time, which are used to - sort the list before the tasks are queued.

    +

    The resource fetch algorithm for a media + element and a given absolute URL is as follows:

    -

    Let affected tracks be a list of text - tracks, initially empty.

    +
      -

      When the steps below say to prepare an event named event for a - text track cue target with a time time, the - user agent must run these substeps:

      +

    1. Let the current media resource be the resource given by the + absolute URL passed to this algorithm. This is now the element's media + resource.

      2. + +

    2. Remove all media-resource-specific text + tracks from the media element's list of pending text tracks, if + any.

      + +

    3. Optionally, run the following substeps. This is the expected behavior if the user agent + intends to not attempt to fetch the resource until the user requests it explicitly (e.g. as a way + to implement the preload attribute's none keyword).

        -

      1. Let track be the text track with which the text - track cue target is associated.

        2. +

      2. Set the networkState to NETWORK_IDLE.

        3. -

      3. Create a task to fire a simple event - named event at target.

        4. +

      4. Queue a task to fire a simple event named suspend at the element.

        5. -

      5. Add the newly created task to events, associated with the time time, the text - track track, and the text track cue target.

        6. +

      6. Queue a task to set the element's delaying-the-load-event flag + to false. This stops delaying the load + event.

        7. -

      7. Add track to affected tracks.

        8. +

      8. Wait for the task to be run.

        9. -
      +

    4. Wait for an implementation-defined event (e.g. the user requesting that the media + element begin playback).

      5. - +

    5. Set the element's delaying-the-load-event flag back to true (this delays the load event again, in case it hasn't been fired + yet).

      -

    6. For each text track cue in missed - cues, prepare an event named enter for the - TextTrackCue object with the text track cue start time.

      7. +

    7. Set the networkState to NETWORK_LOADING.

      8. -

    8. For each text track cue in other - cues that either has its text track cue active flag set or is in missed cues, prepare an event named exit for the TextTrackCue object with the later of the - text track cue end time and the text track cue start time.

      9. +
    -

  • For each text track cue in current - cues that does not have its text track cue active flag set, prepare an - event named enter for the TextTrackCue - object with the text track cue start time.

    • +
  • -

    Sort the tasks in events in ascending - time order (tasks with earlier times first).

    +

    Perform a potentially CORS-enabled fetch of the current media resource's absolute URL, with the mode being + the state of the media element's crossorigin content attribute, the origin + being the origin of the media element's Document, and the + default origin behaviour set to taint.

    -

    Further sort tasks in events that have - the same time by the relative text track cue order of the text track cues associated with these tasks.

    +

    The resource obtained in this fashion, if any, contains the media data. It can + be CORS-same-origin or CORS-cross-origin; this affects whether + subtitles referenced in the media data are exposed in the API and, for + video elements, whether a canvas gets tainted when the video is drawn + on it.

    + +

    While the load is not suspended (see below), every 350ms (±200ms) or for every byte + received, whichever is least frequent, queue a task to fire a simple + event named progress at the element.

    + +

    The stall timeout is a user-agent defined length of time, which should be about + three seconds. When a media element that is actively attempting to obtain + media data has failed to receive any data for a duration equal to the stall + timeout, the user agent must queue a task to fire a simple + event named stalled at the element.

    -

    Finally, sort tasks in events that have - the same time and same text track cue order by placing tasks that fire enter events before - those that fire exit events.

    +

    User agents may allow users to selectively block or slow media data downloads. + When a media element's download has been blocked altogether, the user agent must + act as if it was stalled (as opposed to acting as if the connection was closed). The rate of the + download may also be throttled automatically by the user agent, e.g. to balance the download + with other connections sharing the same bandwidth.

    -
    • +

    User agents may decide to not download more content at any time, e.g. + after buffering five minutes of a one hour media resource, while waiting for the user to decide + whether to play the resource or not, while waiting for user input in an interactive resource, or + when the user navigates away from the page. When a media element's download has + been suspended, the user agent must queue a task, to set the networkState to NETWORK_IDLE and fire a simple event named + suspend at the element. If and when downloading of the + resource resumes, the user agent must queue a task to set the networkState to NETWORK_LOADING. Between the queuing of these tasks, + the load is suspended (so progress events don't fire, + as described above).

    -

  • Queue each task in - events, in list order.

    • +

    The preload attribute provides a hint + regarding how much buffering the author thinks is advisable, even in the absence of the autoplay attribute.

    -

  • Sort affected tracks in the same order as the text tracks appear in the media element's list of text - tracks, and remove duplicates.

    +

    When a user agent decides to completely stall a download, e.g. if it is waiting until the + user starts playback before downloading any further content, the user agent must queue a + task to set the element's delaying-the-load-event flag to false. This stops + delaying the load event.

    -

  • For each text track in affected tracks, in the list - order, queue a task to fire a simple event named cuechange at the TextTrack object, and, if the - text track has a corresponding track element, to then fire a - simple event named cuechange at the - track element as well.

    • +

    The user agent may use whatever means necessary to fetch the resource (within the constraints + put forward by this and other specifications); for example, reconnecting to the server in the + face of network errors, using HTTP range retrieval requests, or switching to a streaming + protocol. The user agent must consider a resource erroneous only if it has given up trying to + fetch it.

    -

  • Set the text track cue active flag of all the cues in the current cues, and unset the text track cue - active flag of all the cues in the other - cues.

    • +

    This specification does not currently say whether or how to check the MIME + types of the media resources, or whether or how to perform file type sniffing using the actual + file data. Implementors differ in their intentions on this matter and it is therefore unclear + what the right solution is. In the absence of any requirement here, the HTTP specification's + strict requirement to follow the Content-Type header prevails ("Content-Type specifies the media + type of the underlying data." ... "If and only if the media type is not given by a Content-Type + field, the recipient MAY attempt to guess the media type via inspection of its content + and/or the name extension(s) of the URI used to identify the resource.").

    -

  • Run the rules for updating the text track rendering of each of the text tracks in affected tracks that are showing. For example, for text - tracks based on WebVTT, the rules for updating the display of WebVTT - text tracks.

    • +

    The networking task source tasks to process + the data as it is being fetched must each immediately queue a task to run the first + appropriate steps from the following list. (A new task is used for this so that the work + described below occurs relative to the media element event task source rather than + the networking task source.)

    - +
    -

    For the purposes of the algorithm above, a text track cue is considered to be part - of a text track only if it is listed in the text track list of cues, not - merely if it is associated with the text track.

    +
    If the media data cannot be fetched at all, due to network errors, causing the + user agent to give up trying to fetch the resource
    -

    If the media element's Document stops being a - fully active document, then the playback will stop - until the document is active again.

    +
    If the media data can be fetched but is found by inspection to be in an + unsupported format, or can otherwise not be rendered at all
    -

    When a media element is removed - from a Document, the user agent must run the following steps:

    +
    -
      +

      DNS errors, HTTP 4xx and 5xx errors (and equivalents in other protocols), and other fatal + network errors that occur before the user agent has established whether the current media resource is usable, as well as the file using an unsupported + container format, or using unsupported codecs for all the data, must cause the user agent to + execute the following steps:

      -

    1. Asynchronously await a stable state, allowing the task that removed the media element from the - Document to continue. The synchronous section consists of all the - remaining steps of this algorithm. (Steps in the synchronous section are marked with - ⌛.)

      2. +
        -

      1. ⌛ If the media element is in a Document, - abort these steps.

        2. +

      2. The user agent should cancel the fetching process.

        3. -

      3. ⌛ Run the internal pause steps for the media element.

        +

      4. Abort this subalgorithm, returning to the resource selection algorithm.

        -
      +
    -
    + + + -
    Seeking
    -
    +
    If the media resource is found to have an audio + track
    -
    media . seeking
    +
    -
    +
      -

      Returns true if the user agent is currently seeking.

      +

    1. Create an AudioTrack object to represent the audio track.

      2. -
    +

  • Update the media element's audioTracks attribute's AudioTrackList + object with the new AudioTrack object.

    • -
    media . seekable
    +

  • Let enable be unknown.

    • -
    +
  • -

    Returns a TimeRanges object that represents the ranges of the media - resource to which it is possible for the user agent to seek.

    +

    If either the media resource or the address of the current + media resource indicate a particular set of audio tracks to enable, or if the user + agent has information that would facilitate the selection of specific audio tracks to + improve the user's experience, then: if this audio track is one of the ones to enable, then + set enable to true, otherwise, set enable + to false.

    -
    • +

    This could be triggered by Media Fragments URI fragment + identifier syntax, but it could also be triggered e.g. by the user agent selecting a 5.1 + surround sound audio track over a stereo audio track.

    -
    media . fastSeek( time )
    + -
    +

  • If enable is still unknown, then, if the media + element does not yet have an enabled + audio track, then set enable to true, otherwise, set enable to false.

    • -

    Seeks to near the given time as fast as possible, trading precision for - speed. (To seek to a precise time, use the currentTime attribute.)

    +

  • If enable is true, then enable this audio track, + otherwise, do not enable this audio track.

    • -

    This does nothing if the media resource has not been loaded.

    +

  • Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, + and that uses the TrackEvent interface, with the track attribute initialised to the new + AudioTrack object, at this AudioTrackList object.

    • -
    + -
    + -
    -

    The seeking attribute must initially have the - value false.

    +
    If the media resource is found to have a video + track
    -

    The fastSeek() method must seek to the time given by the method's argument, with the - approximate-for-speed flag set.

    +
    -

    When the user agent is required to seek to a particular new playback position in the media resource, optionally with the - approximate-for-speed flag set, it means that the user agent must run the following steps. - This algorithm interacts closely with the event loop mechanism; in particular, it has - a synchronous section (which is triggered as part of the event loop - algorithm). Steps in that section are marked with ⌛.

    +
      -
        +

      1. Create a VideoTrack object to represent the video track.

        2. -

      2. Set the media element's show poster flag to false.

        3. +

      3. Update the media element's videoTracks attribute's VideoTrackList + object with the new VideoTrack object.

        4. -

      4. If the media element's readyState - is HAVE_NOTHING, abort these steps.

        5. +

      5. Let enable be unknown.

        6. -

      6. If the element's seeking IDL attribute is true, - then another instance of this algorithm is already running. Abort that other instance of the - algorithm without waiting for the step that it is running to complete.

        7. +
      7. -

      8. Set the seeking IDL attribute to true.

        9. +

        If either the media resource or the address of the current + media resource indicate a particular set of video tracks to enable, or if the user + agent has information that would facilitate the selection of specific video tracks to + improve the user's experience, then: if this video track is the first such video track, then + set enable to true, otherwise, set enable + to false.

        -

      9. If the seek was in response to a DOM method call or setting of an IDL attribute, then - continue the script. The remainder of these steps must be run asynchronously. With the exception - of the steps marked with ⌛, they could be aborted at any time by another instance of this - algorithm being invoked.

        10. +

        This could again be triggered by Media Fragments URI + fragment identifier syntax.

        -

      10. If the new playback position is later than the end of the media - resource, then let it be the end of the media resource instead.

        11. + -

      11. If the new playback position is less than the earliest possible - position, let it be that position instead.

        12. +

      12. If enable is still unknown, then, if the media + element does not yet have a selected + video track, then set enable to true, otherwise, set enable to false.

        13. -

      13. If the (possibly now changed) new playback position is not in one of - the ranges given in the seekable attribute, then let it - be the position in one of the ranges given in the seekable attribute that is the nearest to the new - playback position. If two positions both satisfy that constraint (i.e. the new playback position is exactly in the middle between two ranges in the seekable attribute) then use the position that is closest to - the current playback position. If there are no ranges given in the seekable attribute then set the seeking IDL attribute to false and abort these steps.

        14. +

      14. If enable is true, then select this track and unselect any + previously selected video tracks, otherwise, do not select this video track. If other tracks + are unselected, then a change event will be fired.

        15. -
      15. +

      16. Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, + and that uses the TrackEvent interface, with the track attribute initialised to the new + VideoTrack object, at this VideoTrackList object.

        17. -

        If the approximate-for-speed flag is set, adjust the new playback - position to a value that will allow for playback to resume promptly. If new - playback position before this step is before current playback position, then - the adjusted new playback position must also be before the current - playback position. Similarly, if the new playback position before - this step is after current playback position, then the adjusted new - playback position must also be after the current playback position.

        +
      -

      For example, the user agent could snap to the nearest key frame, so that it - doesn't have to spend time decoding then discarding intermediate frames before resuming - playback.

      +
    - -

  • Queue a task to fire a simple event named seeking at the element.

    • +
    Once enough of the media data has been fetched to + determine the duration of the media resource, its dimensions, and other + metadata
    -
  • +
    -

    Set the current playback position to the given new playback - position.

    +

    This indicates that the resource is usable. The user agent must follow these substeps:

    -

    If the media element was potentially playing - immediately before it started seeking, but seeking caused its readyState attribute to change to a value lower than HAVE_FUTURE_DATA, then a waiting will be - fired at the element.

    - +
      -

      This step sets the current playback position, and thus can - immediately trigger other conditions, such as the rules regarding when playback "reaches the end of the media resource" (part of the logic that - handles looping), even before the user agent is actually able to render the media data for that - position (as determined in the next step).

      +
    1. -

      The currentTime attribute does not - get updated asynchronously, as it returns the official playback position, not the - current playback position.

      +

      Establish the media timeline for the purposes of the current playback + position, the earliest possible position, and the initial playback + position, based on the media data.

      -
      2. + -

    2. Wait until the user agent has established whether or not the media data for - the new playback position is available, and, if it is, until it has decoded - enough data to play back that position.

      - -
      3. +
    3. -

    4. Await a stable state. The synchronous section consists of all - the remaining steps of this algorithm. (Steps in the synchronous section are marked - with ⌛.)

      5. +

      Update the timeline offset to the date and time that corresponds to the zero + time in the media timeline established in the previous step, if any. If no + explicit time and date is given by the media resource, the timeline + offset must be set to Not-a-Number (NaN).

      -

    5. ⌛ Set the seeking IDL attribute to - false.

      6. + -

    6. ⌛ Run the time marches on steps.

      7. +

    7. Set the current playback position and the official playback + position to the earliest possible position.

      8. -

    8. ⌛ Queue a task to fire a simple event - named timeupdate at the element.

      9. +
    9. -

    10. ⌛ Queue a task to fire a simple event named seeked at the element.

      11. +

      Update the duration attribute with the time of + the last frame of the resource, if known, on the media timeline established + above. If it is not known (e.g. a stream that is in principle infinite), update the duration attribute to the value positive Infinity.

      -
    +

    The user agent will queue a task + to fire a simple event named durationchange at the element at this point.

    -
    +
    • -

    The seekable attribute must return a new - static normalised TimeRanges object that represents the ranges of the - media resource, if any, that the user agent is able to seek to, at the time the - attribute is evaluated.

    +
  • -

    If the user agent can seek to anywhere in the media resource, e.g. - because it is a simple movie file and the user agent and the server support HTTP Range requests, - then the attribute would return an object with one range, whose start is the time of the first - frame (the earliest possible position, typically zero), and whose end is the same as - the time of the first frame plus the duration attribute's - value (which would equal the time of the last frame, and might be positive Infinity).

    +

    For video elements, set the videoWidth and videoHeight attributes, and queue a task + to fire a simple event named resize at + the media element.

    -

    The range might be continuously changing, e.g. if the user agent is buffering a - sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for - instance.

    +

    Further resize events will be fired + if the dimensions subsequently change.

    -

    Media resources might be internally scripted or - interactive. Thus, a media element could play in a non-linear fashion. If this - happens, the user agent must act as if the algorithm for seeking was used whenever the current playback position - changes in a discontinuous fashion (so that the relevant events fire). If the media - element has a current media controller, then the user agent must seek - the media controller appropriately instead.

    +
    • -
    +
  • +

    Set the readyState attribute to HAVE_METADATA.

    -
    Media resources with multiple media tracks
    +

    A loadedmetadata DOM event + will be fired as part of setting the readyState attribute to a new value.

    -

    A media resource can have multiple embedded audio and video tracks. For example, - in addition to the primary video and audio tracks, a media resource could have - foreign-language dubbed dialogues, director's commentaries, audio descriptions, alternative - angles, or sign-language overlays.

    + -
    +
    • -
    media . audioTracks
    +

  • Let jumped be false.

    • -
    +

  • If the media element's default playback start position is + greater than zero, then seek to that time, and let jumped be true.

    • -

    Returns an AudioTrackList object representing the audio tracks available in the - media resource.

    +

  • Let the media element's default playback + start position be zero.

    • -
    +
  • -
    media . videoTracks
    +

    If either the media resource or the address of the current + media resource indicate a particular start time, then set the initial playback + position to that time and, if jumped is still false, seek to that time and let jumped be + true.

    -
    +

    For example, with media formats that support the Media Fragments + URI fragment identifier syntax, the fragment identifier can be used to indicate a + start position.

    -

    Returns a VideoTrackList object representing the video tracks available in the - media resource.

    +
    • - +

  • If there is no enabled audio track, then + enable an audio track. This will cause a change event to be fired.

    • -
    +

  • If there is no selected video track, + then select a video track. This will cause a change event to be fired.

    • -
    +

  • If the media element has a current media controller, then: + if jumped is true and the initial playback position, + relative to the current media controller's timeline, is greater than the + current media controller's media controller position, then + seek the media controller to the media element's initial + playback position, relative to the current media controller's timeline; + otherwise, seek the media element to the + media controller position, relative to the media element's + timeline.

    • -

    The audioTracks attribute of a - media element must return a live AudioTrackList object - representing the audio tracks available in the media element's media - resource. The same object must be returned each time.

    + -

    The videoTracks attribute of a - media element must return a live VideoTrackList object - representing the video tracks available in the media element's media - resource. The same object must be returned each time.

    +

    Once the readyState attribute reaches HAVE_CURRENT_DATA, after + the loadeddata event has been fired, set the + element's delaying-the-load-event flag to false. This stops delaying the load event.

    -

    There are only ever one AudioTrackList object and one - VideoTrackList object per media element, even if another media - resource is loaded into the element: the objects are reused. (The AudioTrack - and VideoTrack objects are not, though.)

    +

    A user agent that is attempting to reduce network usage while still fetching + the metadata for each media resource would also stop buffering at this point, + following the rules described previously, which involve the + networkState attribute switching to the NETWORK_IDLE value and a suspend event firing.

    -
    +

    The user agent is required to determine the duration of the + media resource and go through this step before playing.

    -
    + -

    In this example, a script defines a function that takes a URL to a video and a reference to an - element where the video is to be placed. That function then tries to load the video, and, once it - is loaded, checks to see if there is a sign-language track available. If there is, it also - displays that track. Both tracks are just placed in the given container; it's assumed that styles - have been applied to make this work in a pretty way!

    - 
    <script>
- function loadVideo(url, container) {
-   var controller = new MediaController();
-   var video = document.createElement('video');
-   video.src = url;
-   video.autoplay = true;
-   video.controls = true;
-   video.controller = controller;
-   container.appendChild(video);
-   video.onloadedmetadata = function (event) {
-     for (var i = 0; i < video.videoTracks.length; i += 1) {
-       if (video.videoTracks[i].kind == 'sign') {
-         var sign = document.createElement('video');
-         sign.src = url + '#track=' + video.videoTracks[i].id; 
-         sign.autoplay = true;
-         sign.controller = controller;
-         container.appendChild(sign);
-         return;
-       }
-     }
-   };
- }
-</script>
    +
    Once the entire media resource has been fetched + (but potentially before any of it has been decoded)
    -
    +
    +

    Fire a simple event named progress + at the media element.

    -
    AudioTrackList and VideoTrackList objects
    +

    Set the networkState to NETWORK_IDLE and fire a simple event named + suspend at the media element.

    -

    The AudioTrackList and VideoTrackList interfaces are used by - attributes defined in the previous section.

    +

    If the user agent ever discards any media data and then needs to resume the + network activity to obtain it again, then it must queue a task to set the networkState to NETWORK_LOADING.

    - 
    interface AudioTrackList : EventTarget {
-  readonly attribute unsigned long length;
-  getter AudioTrack (unsigned long index);
-  AudioTrack? getTrackById(DOMString id);
+      
    If the user agent can keep the media resource loaded, then the
+      algorithm will continue to its final step below, which aborts the algorithm.
    
 
-           attribute EventHandler onchange;
-           attribute EventHandler onaddtrack;
-           attribute EventHandler onremovetrack;
-};
+
    -interface AudioTrack { - readonly attribute DOMString id; - readonly attribute DOMString kind; - readonly attribute DOMString label; - readonly attribute DOMString language; - attribute boolean enabled; -}; -interface VideoTrackList : EventTarget { - readonly attribute unsigned long length; - getter VideoTrack (unsigned long index); - VideoTrack? getTrackById(DOMString id); - readonly attribute long selectedIndex; +
    If the connection is interrupted after some media data has been received, + causing the user agent to give up trying to fetch the resource
    - attribute EventHandler onchange; - attribute EventHandler onaddtrack; - attribute EventHandler onremovetrack; -}; +
    -interface VideoTrack { - readonly attribute DOMString id; - readonly attribute DOMString kind; - readonly attribute DOMString label; - readonly attribute DOMString language; - attribute boolean selected; -}; +

    Fatal network errors that occur after the user agent has established whether the current media resource is usable (i.e. once the media element's + readyState attribute is no longer HAVE_NOTHING) must cause the user agent to execute the + following steps:

    -
    +
      -
      media . audioTracks . length
      -
      media . videoTracks . length
      +

    1. The user agent should cancel the fetching process.

      2. -
      +

    2. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_NETWORK.

      3. -

      Returns the number of tracks in the list.

      +

    3. Fire a simple event named error at + the media element.

      4. -
      +

    4. Set the element's networkState attribute + to the NETWORK_IDLE value.

      5. -
      audioTrack = media . audioTracks[index]
      -
      videoTrack = media . videoTracks[index]
      +

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

      6. -
      +

    6. Abort the overall resource selection + algorithm.

      7. -

      Returns the specified AudioTrack or VideoTrack object.

      +
    -
    + -
    audioTrack = media . audioTracks . getTrackById( id )
    -
    videoTrack = media . videoTracks . getTrackById( id )
    -
    +
    If the media data is corrupted
    -

    Returns the AudioTrack or VideoTrack object with the given identifier, or null if no track has that identifier.

    +
    -
    +

    Fatal errors in decoding the media data that occur after the user agent has + established whether the current media resource is usable must cause the + user agent to execute the following steps:

    -
    audioTrack . id
    -
    videoTrack . id
    +
      -
      +

    1. The user agent should cancel the fetching process.

      2. -

      Returns the ID of the given track. This is the ID that can be used with a fragment identifier - if the format supports the Media Fragments URI syntax, and that can be used with - the getTrackById() method.

      +

    2. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_DECODE.

      3. -
      +

    3. Fire a simple event named error at + the media element.

      4. -
      audioTrack . kind
      -
      videoTrack . kind
      +
    4. -
      +

      If the media element's readyState + attribute has a value equal to HAVE_NOTHING, set + the element's networkState attribute to the + NETWORK_EMPTY value, set the element's + show poster flag to true, and fire a simple event named emptied at the element.

      -

      Returns the category the given track falls into. The possible track categories are given below.

      +

      Otherwise, set the element's networkState + attribute to the NETWORK_IDLE value.

      -
      +
      5. -
      audioTrack . label
      -
      videoTrack . label
      +

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

      6. -
      +

    6. Abort the overall resource selection + algorithm.

      7. -

      Returns the label of the given track, if known, or the empty string otherwise.

      +
    - + -
    audioTrack . language
    -
    videoTrack . language
    -
    +
    If the media data fetching process is aborted by the user
    -

    Returns the language of the given track, if known, or the empty string otherwise.

    +
    -
    +

    The fetching process is aborted by the user, e.g. because the user + pressed a "stop" button, the user agent must execute the following steps. These steps are not + followed if the load() method itself is invoked while + these steps are running, as the steps above handle that particular kind of abort.

    -
    audioTrack . enabled [ = value ]
    +
      -
      +

    1. The user agent should cancel the fetching process.

      2. -

      Returns true if the given track is active, and false otherwise.

      +

    2. Set the error attribute to a new + MediaError object whose code attribute + is set to MEDIA_ERR_ABORTED.

      3. -

      Can be set, to change whether the track is enabled or not. If multiple audio tracks are - enabled simultaneously, they are mixed.

      +

    3. Fire a simple event named abort at + the media element.

      4. -
      +
    4. -
      media . videoTracks . selectedIndex
      +

      If the media element's readyState + attribute has a value equal to HAVE_NOTHING, set + the element's networkState attribute to the + NETWORK_EMPTY value, set the element's + show poster flag to true, and fire a simple event named emptied at the element.

      -
      +

      Otherwise, set the element's networkState + attribute to the NETWORK_IDLE value.

      -

      Returns the index of the currently selected track, if any, or −1 otherwise.

      +
      5. - +

    5. Set the element's delaying-the-load-event flag to false. This stops delaying the load event.

      6. -
      videoTrack . selected [ = value ]
      +

    6. Abort the overall resource selection + algorithm.

      7. -
      +
    -

    Returns true if the given track is active, and false otherwise.

    + -

    Can be set, to change whether the track is selected or not. Either zero or one video track is - selected; selecting a new track while a previous one is selected will unselect the previous - one.

    - +
    If the media data can be fetched but has non-fatal + errors or uses, in part, codecs that are unsupported, preventing the user agent from rendering + the content completely correctly but not preventing playback altogether
    -
    +
    -
    +

    The server returning data that is partially usable but cannot be optimally rendered must + cause the user agent to render just the bits it can handle, and ignore the rest.

    -

    An AudioTrackList object represents a dynamic list of zero or more audio tracks, - of which zero or more can be enabled at a time. Each audio track is represented by an - AudioTrack object.

    + -

    A VideoTrackList object represents a dynamic list of zero or more video tracks, of - which zero or one can be selected at a time. Each video track is represented by a - VideoTrack object.

    +
    -

    Tracks in AudioTrackList and VideoTrackList objects must be - consistently ordered. If the media resource is in a format that defines an order, - then that order must be used; otherwise, the order must be the relative order in which the tracks - are declared in the media resource. The order used is called the natural order - of the list.

    -

    Each track in one of these objects thus has an index; the first has the index - 0, and each subsequent track is numbered one higher than the previous one. If a media - resource dynamically adds or removes audio or video tracks, then the indices of the tracks - will change dynamically. If the media resource changes entirely, then all the - previous tracks will be removed and replaced with new tracks.

    +
    If the media resource is + found to declare a media-resource-specific text track that the user agent + supports
    -

    The AudioTrackList.length and VideoTrackList.length attributes must return - the number of tracks represented by their objects at the time of getting.

    +
    -

    The supported property indices of AudioTrackList and - VideoTrackList objects at any instant are the numbers from zero to the number of - tracks represented by the respective object minus one, if any tracks are represented. If an - AudioTrackList or VideoTrackList object represents no tracks, it has no - supported property indices.

    +

    If the media data is CORS-same-origin, run the steps to + expose a media-resource-specific text track with the relevant data.

    -

    To determine the value of an indexed property for a given index index in an AudioTrackList or VideoTrackList object list, the user agent must return the AudioTrack or - VideoTrack object that represents the indexth track in list.

    +

    Cross-origin videos do not expose their subtitles, since that would allow + attacks such as hostile sites reading subtitles from confidential videos on a user's + intranet.

    -

    The AudioTrackList.getTrackById(id) and VideoTrackList.getTrackById(id) methods must return the first AudioTrack or - VideoTrack object (respectively) in the AudioTrackList or - VideoTrackList object (respectively) whose identifier is equal to the value of the - id argument (in the natural order of the list, as defined above). When no - tracks match the given argument, the methods must return null.

    +
    -

    The AudioTrack and VideoTrack objects represent specific tracks of a - media resource. Each track can have an identifier, category, label, and language. - These aspects of a track are permanent for the lifetime of the track; even if a track is removed - from a media resource's AudioTrackList or VideoTrackList - objects, those aspects do not change.

    + -

    In addition, AudioTrack objects can each be enabled or disabled; this is the audio - track's enabled state. When an AudioTrack is created, its enabled state - must be set to false (disabled). The resource fetch - algorithm can override this.

    +

    When the networking task source has queued the + last task as part of fetching the + media resource (i.e. once the download has completed), if the fetching process + completes without errors, including decoding the media data, and if all of the data is available + to the user agent without network access, then, the user agent must move on to the next step. + This might never happen, e.g. when streaming an infinite resource such as Web radio, or if the + resource is longer than the user agent's ability to cache data.

    -

    Similarly, a single VideoTrack object per VideoTrackList object can - be selected, this is the video track's selection state. When a VideoTrack is - created, its selection state must be set to false (not selected). The resource fetch algorithm can override this.

    +

    While the user agent might still need network access to obtain parts of the media + resource, the user agent must remain on this step.

    -

    The AudioTrack.id and VideoTrack.id attributes must return the identifier - of the track, if it has one, or the empty string otherwise. If the media resource is - in a format that supports the Media Fragments URI fragment identifier syntax, the - identifier returned for a particular track must be the same identifier that would enable the track - if used as the name of a track in the track dimension of such a fragment identifier.

    +

    For example, if the user agent has discarded the first half of a video, the + user agent will remain at this step even once the playback has + ended, because there is always the chance the user will seek back to the start. In fact, + in this situation, once playback has ended, the user agent + will end up firing a suspend event, as described + earlier.

    -

    For example, in Ogg files, this would be the Name header field of the track.

    + -

    The AudioTrack.kind and VideoTrack.kind attributes must return the category - of the track, if it has one, or the empty string otherwise.

    + +

  • If the user agent ever reaches this step (which can only happen if the entire resource + gets loaded and kept available): abort the overall resource selection algorithm.

    • -

    The category of a track is the string given in the first column of the table below that is the - most appropriate for the track based on the definitions in the table's second and third columns, - as determined by the metadata included in the track in the media resource. The cell - in the third column of a row says what the category given in the cell in the first column of that - row applies to; a category is only appropriate for an audio track if it applies to audio tracks, - and a category is only appropriate for video tracks if it applies to video tracks. Categories must - only be returned for AudioTrack objects if they are appropriate for audio, and must - only be returned for VideoTrack objects if they are appropriate for video.

    + -

    For Ogg files, the Role header field of the track gives the relevant metadata. For DASH media - resources, the Role element conveys the information. For WebM, only the - FlagDefault element currently maps to a value.

    +

    When a media element is to forget the media element's media-resource-specific + tracks, the user agent must remove from the media element's list of text + tracks all the media-resource-specific + text tracks, then empty the media element's audioTracks attribute's AudioTrackList object, + then empty the media element's videoTracks + attribute's VideoTrackList object. No events (in particular, no removetrack events) are fired as part of this; the error and emptied + events, fired by the algorithms that invoke this one, can be used instead.

    - - +
    + +

    The preload attribute is an enumerated + attribute. The following table lists the keywords and states for the attribute — the + keywords in the left column map to the states in the cell in the second column on the same row as + the keyword. The attribute can be changed even once the media resource is being + buffered or played; the descriptions in the table below are to be interpreted with that in + mind.

    + +
    Return values for AudioTrack.kind and VideoTrack.kind
    - - - - - -
    Category - Definition - Applies to...Examples + Keyword + State + Brief description
    "alternative" - A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video). - Audio and video. - Ogg: "audio/alternate" or "video/alternate"; DASH: "alternate" without "main" and "commentary" roles, and, for audio, without the "dub" role (other roles ignored). - + none + None + Hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimise unnecessary traffic. + This state does not provide a hint regarding how aggressively to actually download the media resource if buffering starts anyway (e.g. once the user hits "play").
    "captions" - A version of the main video track with captions burnt in. (For legacy content; new content would use text tracks.) - Video only. - DASH: "caption" and "main" roles together (other roles ignored). - + metadata + Metadata + Hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, track list, duration, etc), and maybe even the first few frames, is reasonable. If the user agent precisely fetches no more than the metadata, then the media element will end up with its readyState attribute set to HAVE_METADATA; typically though, some frames will be obtained as well and it will probably be HAVE_CURRENT_DATA or HAVE_FUTURE_DATA. + When the media resource is playing, hints to the user agent that bandwidth is to be considered scarce, e.g. suggesting throttling the download so that the media data is obtained at the slowest possible rate that still maintains consistent playback.
    "descriptions" - An audio description of a video track. - Audio only. - Ogg: "audio/audiodesc". + auto + Automatic + Hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource. +
    -
    "main" - The primary audio or video track. - Audio and video. - Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set; DASH: "main" role without "caption", "subtitle", and "dub" roles (other roles ignored). +

    The empty string is also a valid keyword, and maps to the Automatic state. The attribute's missing value default is user-agent defined, though the Metadata state is suggested as a compromise + between reducing server load and providing an optimal user experience.

    -
    "main-desc" - The primary audio track, mixed with audio descriptions. - Audio only. - AC3 audio in MPEG-2 TS: bsmod=2 and full_svc=1. +

    Authors might switch the attribute from "none" or "metadata" to "auto" dynamically once the user begins playback. For + example, on a page with many videos this might be used to indicate that the many videos are not to + be downloaded unless requested, but that once one is requested it is to be downloaded + aggressively.

    -
    "sign" - A sign-language interpretation of an audio track. - Video only. - Ogg: "video/sign". +
    -
    "subtitles" - A version of the main video track with subtitles burnt in. (For legacy content; new content would use text tracks.) - Video only. - DASH: "subtitle" and "main" roles together (other roles ignored). +

    The preload attribute is intended to provide a hint to + the user agent about what the author thinks will lead to the best user experience. The attribute + may be ignored altogether, for example based on explicit user preferences or based on the + available connectivity.

    -
    "translation" - A translated version of the main audio track. - Audio only. - Ogg: "audio/dub". DASH: "dub" and "main" roles together (other roles ignored). +

    The preload IDL attribute must + reflect the content attribute of the same name, limited to only known + values.

    -
    "commentary" - Commentary on the primary audio or video track, e.g. a director's commentary. - Audio and video. - DASH: "commentary" role without "main" role (other roles ignored). + -
    "" (empty string) - No explicit kind, or the kind given by the track's metadata is not recognised by the user agent. - Audio and video. - Any other track type, track role, or combination of track roles not described above. +

    The autoplay attribute can override the + preload attribute (since if the media plays, it naturally + has to buffer first, regardless of the hint given by the preload attribute). Including both is not an error, however.

    -
    +
    -
    + -

    The AudioTrack.enabled attribute, on - getting, must return true if the track is currently enabled, and false otherwise. On setting, it - must enable the track if the new value is true, and disable it otherwise. (If the track is no - longer in an AudioTrackList object, then the track being enabled or disabled has no - effect beyond changing the value of the attribute on the AudioTrack object.)

    +
    -

    Whenever an audio track in an AudioTrackList that was - disabled is enabled, and whenever one that was enabled is disabled, the user agent must - queue a task to fire a simple event named change at the AudioTrackList object.

    +
    media . buffered
    -

    The VideoTrackList.selectedIndex attribute - must return the index of the currently selected track, if any. If the VideoTrackList - object does not currently represent any tracks, or if none of the tracks are selected, it must - instead return −1.

    +
    -

    The VideoTrack.selected attribute, on - getting, must return true if the track is currently selected, and false otherwise. On setting, it - must select the track if the new value is true, and unselect it otherwise. If the track is in a - VideoTrackList, then all the other VideoTrack objects in that list must - be unselected. (If the track is no longer in a VideoTrackList object, then the track - being selected or unselected has no effect beyond changing the value of the attribute on the - VideoTrack object.)

    +

    Returns a TimeRanges object that represents the ranges of the media + resource that the user agent has buffered.

    -

    Whenever a track in a VideoTrackList that was previously - not selected is selected, the user agent must queue a task to fire a simple - event named change at the - VideoTrackList object. This task must be queued before the task that fires - the resize event, if any.

    +
    -
    +
    -

    The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, - by all objects implementing the AudioTrackList and VideoTrackList - interfaces:

    +
    - - - -
    Event handler Event handler event type -
    onchange change -
    onaddtrack addtrack -
    onremovetrack removetrack -
    +

    The buffered attribute must return a new + static normalised TimeRanges object that represents the ranges of the + media resource, if any, that the user agent has buffered, at the time the attribute + is evaluated. Users agents must accurately determine the ranges available, even for media streams + where this can only be determined by tedious inspection.

    - +

    Typically this will be a single range anchored at the zero point, but if, e.g. the + user agent uses HTTP range requests in response to seeking, then there could be multiple + ranges.

    -
    +

    User agents may discard previously buffered data.

    +

    Thus, a time position included within a range of the objects return by the buffered attribute at one time can end up being not included in + the range(s) of objects returned by the same attribute at later times.

    -
    Selecting specific audio and video tracks declaratively
    +
    -

    The audioTracks and videoTracks attributes allow scripts to select which track - should play, but it is also possible to select specific tracks declaratively, by specifying - particular tracks in the fragment identifier of the URL of the media - resource. The format of the fragment identifier depends on the MIME type of - the media resource.

    -
    -

    In this example, a video that uses a format that supports the Media Fragments URI - fragment identifier syntax is embedded in such a way that the alternative angles labeled - "Alternative" are enabled instead of the default video track.

    +
    Offsets into the media resource
    - 
    <video src="myvideo#track=Alternative"></video>
    +
    -
    +
    media . duration
    +
    -
    Synchronising multiple media elements
    +

    Returns the length of the media resource, in seconds, assuming that the start of + the media resource is at time zero.

    -
    Introduction
    +

    Returns NaN if the duration isn't available.

    -

    Each media element can have a MediaController. A - MediaController is an object that coordinates the playback of multiple media elements, for instance so that a sign-language interpreter - track can be overlaid on a video track, with the two being kept in sync.

    +

    Returns Infinity for unbounded streams.

    -

    By default, a media element has no MediaController. An implicit - MediaController can be assigned using the mediagroup content attribute. An explicit - MediaController can be assigned directly using the controller IDL attribute.

    +
    -

    Media elements with a MediaController are said - to be slaved to their controller. The MediaController modifies the playback - rate and the playback volume of each of the media elements - slaved to it, and ensures that when any of its slaved media - elements unexpectedly stall, the others are stopped at the same time.

    +
    media . currentTime [ = value ]
    -

    When a media element is slaved to a MediaController, its playback - rate is fixed to that of the other tracks in the same MediaController, and any - looping is disabled.

    +
    - +
    + +

    A media resource has a media timeline that maps times (in seconds) to + positions in the media resource. The origin of a timeline is its earliest defined + position. The duration of a timeline is its last defined position.

    +

    Establishing the media + timeline: If the media resource somehow specifies an explicit timeline whose + origin is not negative (i.e. gives each frame a specific time offset and gives the first frame a + zero or positive offset), then the media timeline should be that timeline. (Whether + the media resource can specify a timeline or not depends on the media resource's format.) If the media resource specifies an + explicit start time and date, then that time and date should be considered the zero point + in the media timeline; the timeline offset will be the time and date, + exposed using the getStartDate() method.

    -
    Media controllers
    +

    If the media resource has a discontinuous timeline, the user agent must extend the + timeline used at the start of the resource across the entire resource, so that the media + timeline of the media resource increases linearly starting from the + earliest possible position (as defined below), even if the underlying media + data has out-of-order or even overlapping time codes.

    - 
    enum MediaControllerPlaybackState { "waiting", "playing", "ended" };
-[Constructor]
-interface MediaController : EventTarget {
-  readonly attribute unsigned short readyState; // uses HTMLMediaElement.readyState's values
+  
    For example, if two clips have been concatenated into one video file, but the
+  video format exposes the original times for the two clips, the video data might expose a timeline
+  that goes, say, 00:15..00:29 and then 00:05..00:38. However, the user agent would not expose those
+  times; it would instead expose the times as 00:15..00:29 and 00:29..01:02, as a single video.
    
 
-  readonly attribute TimeRanges buffered;
-  readonly attribute TimeRanges seekable;
-  readonly attribute unrestricted double duration;
-           attribute double currentTime;
+  
    In the rare case of a media resource that does not have an explicit timeline, the
+  zero time on the media timeline should correspond to the first frame of the
+  media resource. In the even rarer case of a media resource with no
+  explicit timings of any kind, not even frame durations, the user agent must itself determine the
+  time for each frame in a user-agent-defined manner.
+  
+  
    
 
-  readonly attribute boolean paused;
-  readonly attribute MediaControllerPlaybackState playbackState;
-  readonly attribute TimeRanges played;
-  void pause();
-  void unpause();
-  void play(); // calls play() on all media elements as well
+  
    An example of a file format with no explicit timeline but with explicit frame
+  durations is the Animated GIF format. An example of a file format with no explicit timings at all
+  is the JPEG-push format (multipart/x-mixed-replace with JPEG frames, often
+  used as the format for MJPEG streams).
    
 
-           attribute double defaultPlaybackRate;
-           attribute double playbackRate;
+  
    If, in the case of a resource with no timing information, the user agent will nonetheless be
+  able to seek to an earlier point than the first frame originally provided by the server, then the
+  zero time should correspond to the earliest seekable time of the media resource;
+  otherwise, it should correspond to the first frame received from the server (the point in the
+  media resource at which the user agent began receiving the stream).
    
 
-           attribute double volume;
-           attribute boolean muted;
+  
    At the time of writing, there is no known format that lacks explicit frame time
+  offsets yet still supports seeking to a frame before the first frame sent by the server.
    
 
-           attribute EventHandler onemptied;
-           attribute EventHandler onloadedmetadata;
-           attribute EventHandler onloadeddata;
-           attribute EventHandler oncanplay;
-           attribute EventHandler oncanplaythrough;
-           attribute EventHandler onplaying;
-           attribute EventHandler onended;
-           attribute EventHandler onwaiting;
+  
    
 
-           attribute EventHandler ondurationchange;
-           attribute EventHandler ontimeupdate;
-           attribute EventHandler onplay;
-           attribute EventHandler onpause;
-           attribute EventHandler onratechange;
-           attribute EventHandler onvolumechange;
-};
    +

    Consider a stream from a TV broadcaster, which begins streaming on a sunny Friday afternoon in + October, and always sends connecting user agents the media data on the same media timeline, with + its zero time set to the start of this stream. Months later, user agents connecting to this + stream will find that the first frame they receive has a time with millions of seconds. The getStartDate() method would always return the date that the + broadcast started; this would allow controllers to display real times in their scrubber (e.g. + "2:30pm") rather than a time relative to when the broadcast began ("8 months, 4 hours, 12 + minutes, and 23 seconds").

    -
    +

    Consider a stream that carries a video with several concatenated fragments, broadcast by a + server that does not allow user agents to request specific times but instead just streams the + video data in a predetermined order, with the first frame delivered always being identified as + the frame with time zero. If a user agent connects to this stream and receives fragments defined + as covering timestamps 2010-03-20 23:15:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 14:25:00 + UTC to 2010-02-12 14:35:00 UTC, it would expose this with a media timeline starting + at 0s and extending to 3,600s (one hour). Assuming the streaming server disconnected at the end + of the second clip, the duration attribute would then + return 3,600. The getStartDate() method would return a + Date object with a time corresponding to 2010-03-20 23:15:00 UTC. However, if a + different user agent connected five minutes later, it would (presumably) receive + fragments covering timestamps 2010-03-20 23:20:00 UTC to 2010-03-21 00:05:00 UTC and 2010-02-12 + 14:25:00 UTC to 2010-02-12 14:35:00 UTC, and would expose this with a media timeline + starting at 0s and extending to 3,300s (fifty five minutes). In this case, the getStartDate() method would return a Date object + with a time corresponding to 2010-03-20 23:20:00 UTC.

    -
    controller = new MediaController()
    +

    In both of these examples, the seekable attribute + would give the ranges that the controller would want to actually display in its UI; typically, if + the servers don't support seeking to arbitrary times, this would be the range of time from the + moment the user agent connected to the stream up to the latest frame that the user agent has + obtained; however, if the user agent starts discarding earlier information, the actual range + might be shorter.

    -
    +
    -

    Returns a new MediaController object.

    +

    In any case, the user agent must ensure that the earliest possible position (as + defined below) using the established media timeline, is greater than or equal to + zero.

    -
    +

    The media timeline also has an associated clock. Which clock is used is user-agent + defined, and may be media resource-dependent, but it should approximate the user's + wall clock.

    -
    media . controller [ = controller ]
    +

    All the media elements that share current + media controller use the same clock for their media timeline.

    -
    +

    Media elements have a current playback position, + which must initially (i.e. in the absence of media data) be zero seconds. The + current playback position is a time on the media timeline.

    -

    Returns the current MediaController for the media element, if any; - returns null otherwise.

    +

    Media elements also have an official playback + position, which must initially be set to zero seconds. The official playback + position is an approximation of the current playback position that is kept + stable while scripts are running.

    -

    Can be set, to set an explicit MediaController. Doing so removes the mediagroup attribute, if any.

    +

    Media elements also have a default playback start + position, which must initially be set to zero seconds. This time is used to allow the + element to be seeked even before the media is loaded.

    -
    +

    Each media element has a show poster flag. When a media + element is created, this flag must be set to true. This flag is used to control when the + user agent is to show a poster frame for a video element instead of showing the video + contents.

    -
    controller . readyState
    +

    The currentTime attribute must, on + getting, return the media element's default playback start position, + unless that is zero, in which case it must return the element's official playback + position. The returned value must be expressed in seconds. On setting, if the media + element has a current media controller, then the user agent must throw an + InvalidStateError exception; otherwise, if the media element's readyState is HAVE_NOTHING, then it must set the media + element's default playback start position to the new value; otherwise, it must + set the official playback position to the new value and then seek to the new value. The new value must be interpreted as being in + seconds.

    -
    +

    Media elements have an initial playback position, + which must initially (i.e. in the absence of media data) be zero seconds. The + initial playback position is updated when a media resource is loaded. + The initial playback position is a time on the media timeline.

    -

    Returns the state that the MediaController was in the last time it fired events - as a result of reporting the controller state. - The values of this attribute are the same as for the readyState attribute of media - elements.

    +

    If the media resource is a streaming resource, then the user agent might be unable + to obtain certain parts of the resource after it has expired from its buffer. Similarly, some + media resources might have a media timeline that + doesn't start at zero. The earliest possible position is the earliest position in the + stream or resource that the user agent can ever obtain again. It is also a time on the media + timeline.

    -
    +

    The earliest possible position is not explicitly exposed in the API; + it corresponds to the start time of the first range in the seekable attribute's TimeRanges object, if any, or + the current playback position otherwise.

    -
    controller . buffered
    +

    When the earliest possible position changes, then: if the current playback + position is before the earliest possible position, the user agent must seek to the earliest possible position; otherwise, if + the user agent has not fired a timeupdate event at the + element in the past 15 to 250ms and is not still running event handlers for such an event, then + the user agent must queue a task to fire a simple event named timeupdate at the element.

    -
    +

    Because of the above requirement and the requirement in the resource fetch algorithm that kicks in when the metadata of the clip becomes known, the current + playback position can never be less than the earliest possible position.

    -

    Returns a TimeRanges object that represents the intersection of the time ranges - for which the user agent has all relevant media data for all the slaved media elements.

    + + -
    +

    If at any time the user agent learns that an audio or video track has ended and all media + data relating to that track corresponds to parts of the media timeline that + are before the earliest possible position, the user agent may queue a + task to first remove the track from the audioTracks + attribute's AudioTrackList object or the videoTracks attribute's VideoTrackList object as + appropriate and then fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that + uses the TrackEvent interface, with the track attribute initialised to the AudioTrack or + VideoTrack object representing the track, at the media element's + aforementioned AudioTrackList or VideoTrackList object.

    -
    controller . seekable
    +

    The duration attribute must return the time + of the end of the media resource, in seconds, on the media timeline. If + no media data is available, then the attributes must return the Not-a-Number (NaN) + value. If the media resource is not known to be bounded (e.g. streaming radio, or a + live event with no announced end time), then the attribute must return the positive Infinity + value.

    -
    +

    The user agent must determine the duration of the media resource before playing + any part of the media data and before setting readyState to a value equal to or greater than HAVE_METADATA, even if doing so requires fetching multiple + parts of the resource.

    -

    Returns a TimeRanges object that represents the intersection of the time ranges - into which the user agent can seek for all the slaved media - elements.

    +

    When the length of the media resource changes to a known value + (e.g. from being unknown to known, or from a previously established length to a new length) the + user agent must queue a task to fire a simple event named durationchange at the media element. (The + event is not fired when the duration is reset as part of loading a new media resource.) If the + duration is changed such that the current playback position ends up being greater + than the time of the end of the media resource, then the user agent must also seek to the time of the end of the media resource.

    -
    +

    If an "infinite" stream ends for some reason, then the duration would change + from positive Infinity to the time of the last frame or sample in the stream, and the durationchange event would be fired. Similarly, if the + user agent initially estimated the media resource's duration instead of determining + it precisely, and later revises the estimate based on new information, then the duration would + change and the durationchange event would be + fired.

    -
    controller . duration
    +

    Some video files also have an explicit date and time corresponding to the zero time in the + media timeline, known as the timeline offset. Initially, the + timeline offset must be set to Not-a-Number (NaN).

    -
    +

    The getStartDate() method must return a new Date object representing the current + timeline offset.

    -

    Returns the difference between the earliest playable moment and the latest playable moment - (not considering whether the data in question is actually buffered or directly seekable, but not - including time in the future for infinite streams). Will return zero if there is no media.

    + -
    +
    -
    controller . currentTime [ = value ]
    +

    The loop attribute is a boolean + attribute that, if specified, indicates that the media element is to seek back + to the start of the media resource upon reaching the end.

    -
    +

    The loop attribute has no effect while the element has a + current media controller.

    -

    Returns the current playback position, in seconds, as a position between zero - time and the current duration.

    +
    -

    Can be set, to seek to the given time.

    +

    The loop IDL attribute must reflect + the content attribute of the same name.

    -
    + -
    controller . paused
    -
    -

    Returns true if playback is paused; false otherwise. When this attribute is true, any - media element slaved to this controller will be stopped.

    +
    Ready states
    -
    +
    -
    controller . playbackState
    +
    media . readyState
    -

    Returns the state that the MediaController was in the last time it fired events - as a result of reporting the controller state. - The value of this attribute is either "playing", indicating that the media is actively - playing, "ended", indicating that the media is - not playing because playback has reached the end of all the slaved media elements, - or "waiting", indicating that the media is not - playing for some other reason (e.g. the MediaController is paused).

    +

    Returns a value that expresses the current state of the element with respect to rendering the + current playback position, from the codes in the list below.

    -
    controller . pause()
    +
    -
    +
    -

    Sets the paused attribute to true.

    +

    Media elements have a ready state, which describes to + what degree they are ready to be rendered at the current playback position. The + possible values are as follows; the ready state of a media element at any particular time is the + greatest value describing the state of the element:

    -
    + -
    controller . unpause()
    +
    -
    +
    HAVE_NOTHING (numeric value 0)
    -

    Sets the paused attribute to false.

    +

    No information regarding the media resource is available. No data for the + current playback position is available. Media + elements whose networkState attribute are set + to NETWORK_EMPTY are always in the HAVE_NOTHING state.

    -
    • +
    HAVE_METADATA (numeric value 1)
    -
    controller . play()
    +

    Enough of the resource has been obtained that the duration of the resource is available. + In the case of a video element, the dimensions of the video are also available. The + API will no longer throw an exception when seeking. No media data is available for + the immediate current playback position.

    -
    +
    HAVE_CURRENT_DATA (numeric value 2)
    -

    Sets the paused attribute to false and - invokes the play() method of each slaved media element.

    +

    Data for the immediate current playback position is available, but either not + enough data is available that the user agent could successfully advance the current + playback position in the direction of playback at all without immediately + reverting to the HAVE_METADATA state, or there is no + more data to obtain in the direction of playback. For example, in video this + corresponds to the user agent having data from the current frame, but not the next frame, when + the current playback position is at the end of the current frame; and to when playback has ended.

    -
    • +
    HAVE_FUTURE_DATA (numeric value 3)
    -
    controller . played
    +

    Data for the immediate current playback position is available, as well as + enough data for the user agent to advance the current playback position in the + direction of playback at least a little without immediately reverting to the HAVE_METADATA state, and the text tracks are + ready. For example, in video this corresponds to the user agent having data for at least + the current frame and the next frame when the current playback position is at the + instant in time between the two frames, or to the user agent having the video data for the + current frame and audio data to keep playing at least a little when the current playback + position is in the middle of a frame. The user agent cannot be in this state if playback has ended, as the current playback position + can never advance in this case.

    + +
    HAVE_ENOUGH_DATA (numeric value 4)
    -

    Returns a TimeRanges object that represents the union of the time ranges in all - the slaved media elements that have been played.

    +

    All the conditions described for the HAVE_FUTURE_DATA state are met, and, in addition, + either of the following conditions is also true:

    -
    +
      -
      controller . defaultPlaybackRate [ = value ]
      +
    • The user agent estimates that data is being fetched at a rate where the current + playback position, if it were to advance at the effective playback rate, + would not overtake the available data before playback reaches the end of the media + resource.
      • -
      +
    • The user agent has entered a state where waiting longer will not result in further data + being obtained, and therefore nothing would be gained by delaying playback any further. (For + example, the buffer might be full.)
      • -

      Returns the default rate of playback.

      +
    -

    Can be set, to change the default rate of playback.

    +
    -

    This default rate has no direct effect on playback, but if the user switches to a - fast-forward mode, when they return to the normal playback mode, it is expected that rate of - playback (playbackRate) will be returned - to this default rate.

    +
    -
    • +

    In practice, the difference between HAVE_METADATA and HAVE_CURRENT_DATA is negligible. Really the only time + the difference is relevant is when painting a video element onto a + canvas, where it distinguishes the case where something will be drawn (HAVE_CURRENT_DATA or greater) from the case where + nothing is drawn (HAVE_METADATA or less). Similarly, + the difference between HAVE_CURRENT_DATA (only + the current frame) and HAVE_FUTURE_DATA (at least + this frame and the next) can be negligible (in the extreme, only one frame). The only time that + distinction really matters is when a page provides an interface for "frame-by-frame" + navigation.

    -
    controller . playbackRate [ = value ]
    +
    -
    +

    When the ready state of a media element whose networkState is not NETWORK_EMPTY changes, the user agent must follow the steps + given below:

    -

    Returns the current rate of playback.

    +
      -

      Can be set, to change the rate of playback.

      +
    1. -
    +

    Apply the first applicable set of substeps from the following list:

    -
    controller . volume [ = value ]
    -
    +
    -

    Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where - 0.0 is the quietest and 1.0 the loudest.

    + +
    If the previous ready state was HAVE_NOTHING, + and the new ready state is HAVE_METADATA
    -

    Can be set, to change the volume multiplier.

    +
    -

    Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

    +

    Queue a task to fire a simple event named loadedmetadata at the element.

    -
    +

    Before this task is run, as part of the event loop mechanism, the + rendering will have been updated to resize the video element if appropriate.

    -
    controller . muted [ = value ]
    +
    -
    + -

    Returns true if all audio is muted (regardless of other attributes either on the controller - or on any media elements slaved to this controller), and - false otherwise.

    +
    If the previous ready state was HAVE_METADATA and the new ready state is HAVE_CURRENT_DATA or greater
    -

    Can be set, to change whether the audio is muted or not.

    +
    -
    +

    If this is the first time this occurs for this media + element since the load() algorithm was last + invoked, the user agent must queue a task to fire a simple event + named loadeddata at the element.

    - +

    If the new ready state is HAVE_FUTURE_DATA + or HAVE_ENOUGH_DATA, then the relevant steps + below must then be run also.

    -
    +
    • -

    A media element can have a current media controller, which is a - MediaController object. When a media element is created without a mediagroup attribute, it does not have a current media - controller. (If it is created with such an attribute, then that attribute - initializes the current media controller, as defined below.)

    + +
    If the previous ready state was HAVE_FUTURE_DATA or more, and the new ready state is + HAVE_CURRENT_DATA or less
    -

    The slaved media elements of a MediaController are the media elements whose current media controller is that - MediaController. All the slaved media elements of a - MediaController must use the same clock for their definition of their media - timeline's unit time. When the user agent is required to act on each slaved media element in turn, they must be processed in the order that they - were last associated with the MediaController.

    +
    -
    +

    If the media element was potentially + playing before its readyState attribute + changed to a value lower than HAVE_FUTURE_DATA, and the element has not + ended playback, and playback has not stopped due to errors, + paused for user interaction, or paused for in-band content, the user + agent must queue a task to fire a simple event named timeupdate at the element, and queue a task + to fire a simple event named waiting at + the element.

    -

    The controller attribute on a media - element, on getting, must return the element's current media controller, if - any, or null otherwise. On setting, the user agent must run the following steps:

    +
    -
      + +
      If the previous ready state was HAVE_CURRENT_DATA or less, and the new ready state + is HAVE_FUTURE_DATA
      -

    1. Let m be the media element in question.

      2. +
      -

    2. Let old controller be m's current media - controller, if it currently has one, and null otherwise.

      3. +

      The user agent must queue a task to fire a simple event named + canplay at the element.

      -

    3. Let new controller be null.

      4. +

      If the element's paused attribute is false, the user + agent must queue a task to fire a simple event named playing at the element.

      -

    4. Let m have no current media controller, if it currently - has one.

      5. +
      -

    5. Remove the element's mediagroup content - attribute, if any.

      6. + +
      If the new ready state is HAVE_ENOUGH_DATA
      -

    6. If the new value is null, then jump to the update controllers step below.

      7. +
      -

    7. Let m's current media controller be the new - value.

      8. +

      If the previous ready state was HAVE_CURRENT_DATA or less, the user agent must + queue a task to fire a simple event named canplay at the element, and, if the element's paused attribute is false, queue a task to + fire a simple event named playing + at the element.

      -

    8. Let new controller be m's current media - controller.

      9. +

      If the autoplaying flag is true, and the paused attribute is true, and the media element + has an autoplay attribute specified, and the + media element's Document's active sandboxing flag set + does not have the sandboxed automatic features browsing context flag set, then + the user agent may also run the following substeps:

      -

    9. Bring the media element up to speed with its new media controller.

      10. +
        -

      1. Update controllers: If old controller and new - controller are the same (whether both null or both the same controller) then abort these - steps.

        2. +
      2. Set the paused attribute to false.
        3. -

      3. If old controller is not null and still has one or more slaved - media elements, then report the controller state for old - controller.

        4. +
      4. If the element's show poster flag is true, set it to false and run the + time marches on steps.
        5. -

      5. If new controller is not null, then report the controller - state for new controller.

        6. +
      6. Queue a task to fire a simple event named play at the element.
        7. -
      +
    10. Queue a task to fire a simple event named playing at the element.
      11. -
      +
    -

    The MediaController() constructor, when - invoked, must return a newly created MediaController object.

    +

    User agents do not need to support autoplay, and it is suggested that user + agents honor user preferences on the matter. Authors are urged to use the autoplay attribute rather than using script to force the + video to play, so as to allow the user to override the behavior if so desired.

    -
    +

    In any case, the user agent must finally queue a task to fire a simple + event named canplaythrough at the element.

    -

    The readyState attribute must - return the value to which it was most recently set. When the MediaController object - is created, the attribute must be set to the value 0 (HAVE_NOTHING). The value is updated by the report the - controller state algorithm below.

    +
    • -

    The seekable attribute must return - a new static normalised TimeRanges object that represents the - intersection of the ranges of the media resources of the - slaved media elements that the user agent is able to seek to, at the time the - attribute is evaluated.

    + -

    The buffered attribute must return - a new static normalised TimeRanges object that represents the - intersection of the ranges of the media resources of the - slaved media elements that the user agent has buffered, at the time the attribute is - evaluated. Users agents must accurately determine the ranges available, even for media streams - where this can only be determined by tedious inspection.

    +
    • -

    The duration attribute must return - the media controller duration.

    +

  • If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    • -

    Every 15 to 250ms, or whenever the MediaController's media controller - duration changes, whichever happens least often, the user agent must queue a - task to fire a simple event named durationchange at the - MediaController. If the MediaController's media controller - duration decreases such that the media controller position is greater than the - media controller duration, the user agent must immediately seek the media - controller to media controller duration.

    + -

    The currentTime attribute must - return the media controller position on getting, and on setting must seek the - media controller to the new value.

    + -

    Every 15 to 250ms, or whenever the MediaController's media controller - position changes, whichever happens least often, the user agent must queue a - task to fire a simple event named timeupdate at the - MediaController.

    +

    It is possible for the ready state of a media element to jump between these states + discontinuously. For example, the state of a media element can jump straight from HAVE_METADATA to HAVE_ENOUGH_DATA without passing through the HAVE_CURRENT_DATA and HAVE_FUTURE_DATA states.

    -
    +
    -

    When a MediaController is created it is a playing media controller. It - can be changed into a paused media controller and back either via the user agent's user - interface (when the element is exposing a user - interface to the user) or by script using the APIs defined in this section (see below).

    +

    The readyState IDL attribute must, on + getting, return the value described above that describes the current ready state of the + media element.

    -

    The paused attribute must return - true if the MediaController object is a paused media controller, and - false otherwise.

    +
    -

    When the pause() method is invoked, - if the MediaController is a playing media controller then the user agent - must change the MediaController into a paused media controller, - queue a task to fire a simple event named pause at the MediaController, and then - report the controller state of the MediaController.

    +

    The autoplay attribute is a boolean + attribute. When present, the user agent (as described in the algorithm + described herein) will automatically begin playback of the media resource as + soon as it can do so without stopping.

    -

    When the unpause() method is - invoked, if the MediaController is a paused media controller, the user - agent must change the MediaController into a playing media controller, - queue a task to fire a simple event named play at the MediaController, and then - report the controller state of the MediaController.

    +

    Authors are urged to use the autoplay + attribute rather than using script to trigger automatic playback, as this allows the user to + override the automatic playback when it is not desired, e.g. when using a screen reader. Authors + are also encouraged to consider not using the automatic playback behavior at all, and instead to + let the user agent wait for the user to start playback explicitly.

    -

    When the play() method is invoked, the - user agent must invoke the play() method of each slaved media element in turn, and then invoke the unpause method of the MediaController.

    +
    -

    The playbackState attribute - must return the value to which it was most recently set. When the MediaController - object is created, the attribute must be set to the value "waiting". The value is updated by the report the - controller state algorithm below.

    +

    The autoplay IDL attribute must + reflect the content attribute of the same name.

    -

    The played attribute must return a - new static normalised TimeRanges object that represents the union of the - ranges of points on the media timelines of the media resources of the slaved media elements that the - user agent has so far reached through the usual monotonic increase of their current playback positions during normal playback, at the time the - attribute is evaluated.

    +
    -
    -

    A MediaController has a media controller default playback rate and a - media controller playback rate, which must both be set to 1.0 when the - MediaController object is created.

    -

    The defaultPlaybackRate - attribute, on getting, must return the MediaController's media controller - default playback rate, and on setting, must set the MediaController's - media controller default playback rate to the new value, then queue a - task to fire a simple event named ratechange at the - MediaController.

    +
    Playing the media resource
    -

    The playbackRate attribute, on - getting, must return the MediaController's media controller playback - rate, and on setting, must set the MediaController's media controller - playback rate to the new value, then queue a task to fire a simple - event named ratechange at the - MediaController.

    +
    -
    +
    media . paused
    -

    A MediaController has a media controller volume multiplier, which must - be set to 1.0 when the MediaController object is created, and a media controller - mute override, much must initially be false.

    +
    -

    The volume attribute, on getting, - must return the MediaController's media controller volume multiplier, - and on setting, if the new value is in the range 0.0 to 1.0 inclusive, must set the - MediaController's media controller volume multiplier to the new value - and queue a task to fire a simple event named volumechange at the - MediaController. If the new value is outside the range 0.0 to 1.0 inclusive, then, on - setting, an IndexSizeError exception must be thrown instead.

    +

    Returns true if playback is paused; false otherwise.

    -

    The muted attribute, on getting, must - return the MediaController's media controller mute override, and on - setting, must set the MediaController's media controller mute override - to the new value and queue a task to fire a simple event named volumechange at the - MediaController.

    +
    -
    +
    media . ended
    -

    The media resources of all the slaved media - elements of a MediaController have a defined temporal relationship which - provides relative offsets between the zero time of each such media resource: for - media resources with a timeline offset, their - relative offsets are the difference between their timeline offset; the zero times of - all the media resources without a timeline offset - are not offset from each other (i.e. the origins of their timelines are cotemporal); and finally, - the zero time of the media resource with the earliest timeline offset - (if any) is not offset from the zero times of the media - resources without a timeline offset (i.e. the origins of media resources without a timeline offset are further cotemporal - with the earliest defined point on the timeline of the media resource with the - earliest timeline offset).

    +
    -

    The media resource end position of a media resource in a media - element is defined as follows: if the media resource has a finite and known - duration, the media resource end position is the duration of the media - resource's timeline (the last defined position on that timeline); otherwise, the - media resource's duration is infinite or unknown, and the media resource end - position is the time of the last frame of media data currently available for - that media resource.

    +

    Returns true if playback has reached the end of the media resource.

    -

    Each MediaController also has its own defined timeline. On this timeline, all the - media resources of all the slaved media elements - of the MediaController are temporally aligned according to their defined offsets. The - media controller duration of that MediaController is the time from the - earliest earliest possible position, relative to this MediaController - timeline, of any of the media resources of the slaved - media elements of the MediaController, to the time of the latest media - resource end position of the media resources of the - slaved media elements of the MediaController, again relative to this - MediaController timeline.

    +
    -

    Each MediaController has a media controller position. This is the time - on the MediaController's timeline at which the user agent is trying to play the - slaved media elements. When a MediaController is created, its - media controller position is initially zero.

    +
    media . defaultPlaybackRate [ = value ]
    -

    When the user agent is to bring a media element up to speed with its new media controller, it must seek that media element to the - MediaController's media controller position relative to the media - element's timeline.

    +
    -

    When the user agent is to seek the media controller to a particular new playback position, it must follow these steps:

    +

    Returns the default rate of playback, for when the user is not fast-forwarding or reversing + through the media resource.

    -
      +

      Can be set, to change the default rate of playback.

      -

    1. If the new playback position is less than zero, then set it to - zero.

      2. +

      The default rate has no direct effect on playback, but if the user switches to a fast-forward + mode, when they return to the normal playback mode, it is expected that the rate of playback + will be returned to the default rate of playback.

      -

    2. If the new playback position is greater than the media - controller duration, then set it to the media controller duration.

      3. +

      When the element has a current media controller, the defaultPlaybackRate attribute is ignored and the + current media controller's defaultPlaybackRate is used instead.

      -

    3. Set the media controller position to the new playback - position.

      4. +
    -

  • Seek each slaved - media element to the new playback position relative to the media - element timeline.

    • +
    media . playbackRate [ = value ]
    - +
    -

    A MediaController is a restrained media controller if the - MediaController is a playing media controller, but either at least one - of its slaved media elements whose autoplaying flag is true still has - its paused attribute set to true, or, all of its - slaved media elements have their paused - attribute set to true.

    +

    Returns the current rate playback, where 1.0 is normal speed.

    -

    A MediaController is a blocked media controller if the - MediaController is a paused media controller, or if any of its - slaved media elements are blocked media - elements, or if any of its slaved media elements whose autoplaying - flag is true still have their paused attribute set to - true, or if all of its slaved media elements have their paused attribute set to true.

    +

    Can be set, to change the rate of playback.

    -

    A media element is blocked on its media controller if the - MediaController is a blocked media controller, or if its media - controller position is either before the media resource's earliest - possible position relative to the MediaController's timeline or after the end - of the media resource relative to the MediaController's timeline.

    +

    When the element has a current media controller, the playbackRate attribute is ignored and the current + media controller's playbackRate is + used instead.

    -

    When a MediaController is not a blocked media - controller and it has at least one slaved media - element whose Document is a fully active Document, - the MediaController's media controller position must increase - monotonically at media controller playback rate units of time on the - MediaController's timeline per unit time of the clock used by its slaved media - elements.

    +
    -

    When the zero point on the timeline of a MediaController moves relative to the - timelines of the slaved media elements by a time difference ΔT, the MediaController's media controller - position must be decremented by ΔT.

    +
    media . played
    -

    In some situations, e.g. when playing back a live stream without buffering - anything, the media controller position would increase monotonically as described - above at the same rate as the ΔT described in the previous paragraph - decreases it, with the end result that for all intents and purposes, the media controller - position would appear to remain constant (probably with the value 0).

    +
    -
    +

    Returns a TimeRanges object that represents the ranges of the media + resource that the user agent has played.

    -

    A MediaController has a most recently reported readiness state, which - is a number from 0 to 4 derived from the numbers used for the media element readyState attribute, and a most recently reported - playback state, which is either playing, waiting, or ended.

    +
    -

    When a MediaController is created, its most recently reported readiness - state must be set to 0, and its most recently reported playback state must be - set to waiting.

    +
    media . play()
    -

    When a user agent is required to report the controller state for a - MediaController, the user agent must run the following steps:

    +
    -
      +

      Sets the paused attribute to false, loading the + media resource and beginning playback if necessary. If the playback had ended, will + restart it from the start.

      -
    1. +
    -

    If the MediaController has no slaved media elements, let new readiness state be 0.

    +
    media . pause()
    -

    Otherwise, let it have the lowest value of the readyState IDL attributes of all of its slaved media - elements.

    +
    - +

    Sets the paused attribute to true, loading the + media resource if necessary.

    -
  • +
    • -

    If the MediaController's most recently reported readiness state is - less than the new readiness state, then run these substeps:

    +
    -
      +
      -

    1. Let next state be the MediaController's most - recently reported readiness state.

      2. +

      The paused attribute represents whether the + media element is paused or not. The attribute must initially be true.

      -

    2. Loop: Increment next state by one.

      3. +

      A media element is a blocked media element if its readyState attribute is in the HAVE_NOTHING state, the HAVE_METADATA state, or the HAVE_CURRENT_DATA state, or if the element has + paused for user interaction or paused for in-band content.

      -
    3. +

      A media element is said to be potentially playing when its paused attribute is false, the element has not ended + playback, playback has not stopped due to errors, the element either has no + current media controller or has a current media controller but is not + blocked on its media controller, and the element is not a blocked media + element.

      -

      Queue a task to run the following steps:

      +

      A waiting DOM event can be fired as a result of an element that is + potentially playing stopping playback due to its readyState attribute changing to a value lower than HAVE_FUTURE_DATA.

      -
        +

        A media element is said to have ended playback when:

        -

      1. Set the MediaController's readyState attribute to the value next state.

        2. +
          -

        • Fire a simple event at the MediaController object, whose - name is the event name corresponding to the value of next state given in - the table below.

          • +
        • The element's readyState attribute is HAVE_METADATA or greater, and -
      +
    4. -
      5. +

      Either: -

    5. If next state is less than new readiness state, - then return to the step labeled loop.

      6. +
        -
    +
  • The current playback position is the end of the media resource, + and -

    Otherwise, if the MediaController's most recently reported readiness - state is greater than new readiness state then queue a - task to fire a simple event at the MediaController object, - whose name is the event name corresponding to the value of new readiness - state given in the table below.

    +
  • The direction of playback is forwards, and - - - - - - - - - -
    Value of new readiness state - Event name +
  • Either the media element does not have a loop attribute specified, or the media element has + a current media controller. -
    • 0 - emptied + -
    1 - loadedmetadata +

    Or: -

    2 - loadeddata +
      -
    3 - canplay +
  • The current playback position is the earliest possible position, + and -
    • 4 - canplaythrough +
  • The direction of playback is backwards. -
    • +
    • -

  • Let the MediaController's most recently reported readiness state - be new readiness state.

    • + -
  • +

    The ended attribute must return true if, the + last time the event loop reached step 1, the media element had + ended playback and the direction of playback was forwards, and false + otherwise.

    -

    Initialise new playback state by setting it to the state given for the - first matching condition from the following list:

    +

    A media element is said to have stopped due to errors when the + element's readyState attribute is HAVE_METADATA or greater, and the user agent encounters a non-fatal error during the processing of the + media data, and due to that error, is not able to play the content at the + current playback position.

    -
    +

    A media element is said to have paused for user interaction when its + paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has reached a point + in the media resource where the user has to make a selection for the resource to + continue. If the media element has a current media controller when this + happens, then the user agent must report the controller state for the media + element's current media controller. If the media element has a + current media controller when the user makes a selection, allowing playback to + resume, the user agent must similarly report the controller state for the media + element's current media controller.

    -
    If the MediaController has no slaved media elements
    +

    It is possible for a media element to have both ended playback and + paused for user interaction at the same time.

    -
    Let new playback state be waiting.
    +

    When a media element that is potentially playing stops playing + because it has paused for user interaction, the user agent must queue a + task to fire a simple event named timeupdate at the element.

    -
    If all of the MediaController's slaved media elements have - ended playback and the media controller playback rate is positive or - zero
    +

    A media element is said to have paused for in-band content when its + paused attribute is false, the readyState attribute is either HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA and the user agent has suspended + playback of the media resource in order to play content that is temporally anchored + to the media resource and has a non-zero length, or to play content that is + temporally anchored to a segment of the media resource but has a length longer than + that segment. If the media element has a current media controller when + this happens, then the user agent must report the controller state for the + media element's current media controller. If the media + element has a current media controller when the user agent unsuspends + playback, the user agent must similarly report the controller state for the + media element's current media controller.

    -
    Let new playback state be ended.
    +

    One example of when a media element would be paused for + in-band content is when the user agent is playing audio descriptions from an external WebVTT file, and + the synthesized speech generated for a cue is longer than the time between the text track + cue start time and the text track cue end time.

    -
    If the MediaController is a blocked media controller
    +
    -
    Let new playback state be waiting.
    +

    When the current playback position reaches the end of the + media resource when the direction of playback is forwards, then the user + agent must follow these steps:

    -
    Otherwise
    +
      -
      Let new playback state be playing.
      +

    1. If the media element has a loop + attribute specified and does not have a current media controller, then seek to the earliest possible position of the + media resource and abort these steps.

      2. -
    +

  • As defined above, the ended IDL attribute starts + returning true once the event loop returns to step 1.

    • - +

  • Queue a task to fire a simple event named timeupdate at the media element.

    • -

  • If the MediaController's most recently reported playback state - is not equal to new playback state and the new playback - state is ended, then queue a task that, if the - MediaController object is a playing media controller, and all of the - MediaController's slaved media elements have still ended - playback, and the media controller playback rate is still positive or zero, - changes the MediaController object to a paused media controller and - then fires a simple event named pause at the MediaController - object.

    • +

  • Queue a task that, if the media element does not have a + current media controller, and the media element has still ended + playback, and the direction of playback is still forwards, and paused is false, changes paused to true and fires a + simple event named pause at the media + element.

    • -
  • +

  • Queue a task to fire a simple event named ended at the media element.

    • -

    If the MediaController's most recently reported playback state is - not equal to new playback state then queue a task to run the - following steps:

    +

  • If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

    • -
      +
    -

  • Set the MediaController's playbackState attribute to the value given in - the second column of the row of the following table whose first column contains the new playback state.

    • +

    When the current playback position reaches the earliest possible + position of the media resource when the direction of playback is + backwards, then the user agent must only queue a task to fire a simple + event named timeupdate at the element.

    + +

    The word "reaches" here does not imply that the current playback + position needs to have changed during normal playback; it could be via seeking, for instance.

    + +
    -

  • Fire a simple event at the MediaController object, whose name - is the value given in the third column of the row of the following table whose first column - contains the new playback state.

    • +

    The defaultPlaybackRate attribute + gives the desired speed at which the media resource is to play, as a multiple of its + intrinsic speed. The attribute is mutable: on getting it must return the last value it was set to, + or 1.0 if it hasn't yet been set; on setting the attribute must be set to the new value.

    - +

    The defaultPlaybackRate is used + by the user agent when it exposes a user + interface to the user.

    - - - - - - - -
    New playback state - New value for playbackState - Event name -
    playing - "playing" - playing -
    waiting - "waiting" - waiting -
    ended - "ended" - ended -
    +

    The playbackRate attribute gives the + effective playback rate (assuming there is no current media controller + overriding it), which is the speed at which the media resource plays, as a multiple + of its intrinsic speed. If it is not equal to the defaultPlaybackRate, then the implication is that the + user is using a feature such as fast forward or slow motion playback. The attribute is mutable: on + getting it must return the last value it was set to, or 1.0 if it hasn't yet been set; on setting + the attribute must be set to the new value, and the playback will change speed (if the element is + potentially playing and there is no current media controller).

    - +

    When the defaultPlaybackRate + or playbackRate attributes change value (either by + being set by script or by being changed directly by the user agent, e.g. in response to user + control) the user agent must queue a task to fire a simple event named + ratechange at the media element.

    -

  • Let the MediaController's most recently reported playback state - be new playback state.

    • +

    The defaultPlaybackRate and + playbackRate attributes have no effect when the + media element has a current media controller; the namesake attributes on + the MediaController object are used instead in that situation.

    - +
    + +

    The played attribute must return a new static + normalised TimeRanges object that represents the ranges of points on the + media timeline of the media resource reached through the usual monotonic + increase of the current playback position during normal playback, if any, at the time + the attribute is evaluated.

    -

    The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, - by all objects implementing the MediaController interface:

    +

    When the play() method on a media + element is invoked, the user agent must run the following steps.

    - - - - -
    Event handler Event handler event type -
    onemptied emptied -
    onloadedmetadata loadedmetadata -
    onloadeddata loadeddata -
    oncanplay canplay -
    oncanplaythrough canplaythrough -
    onplaying playing -
    onended ended -
    onwaiting waiting -
    ondurationchange durationchange -
    ontimeupdate timeupdate -
    onplay play -
    onpause pause -
    onratechange ratechange -
    onvolumechange volumechange -
    +
      -
      +

    1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's + resource selection algorithm.

      2. -

      The task source for the tasks listed in this - section is the DOM manipulation task source.

      +
    2. - +

      If the playback has ended and the direction of + playback is forwards, and the media element does not have a current + media controller, seek to the earliest possible + position of the media resource.

      +

      This will cause the user agent to queue a + task to fire a simple event named timeupdate at the media element.

      + -
      Assigning a media controller declaratively
      +
      3. -

      The mediagroup content attribute on media elements can be used to link multiple media elements together by implicitly creating a MediaController. The - value is text; media elements with the same value are - automatically linked by the user agent.

      +

    3. If the media element has a current media controller, then + bring the media element up to speed with its new media controller.

      -
      +
    4. -

      When a media element is created with a mediagroup attribute, and when a media element's - mediagroup attribute is set, changed, or removed, the - user agent must run the following steps:

      +

      If the media element's paused attribute is + true, run the following substeps:

      -
        +
          -

        1. Let m be the media element in question.

          2. +

        2. Change the value of paused to false.

          3. -

        3. Let old controller be m's current media - controller, if it currently has one, and null otherwise.

          4. +

        4. If the show poster flag is true, set the element's show poster + flag to false and run the time marches on steps.

          5. -

        5. Let new controller be null.

          6. +

        6. Queue a task to fire a simple event named play at the element.

          7. -

        7. Let m have no current media controller, if it currently - has one.

          8. +
        8. -

        9. If m's mediagroup attribute - is being removed, then jump to the update controllers step below.

          10. +

          If the media element's readyState + attribute has the value HAVE_NOTHING, HAVE_METADATA, or HAVE_CURRENT_DATA, queue a task to + fire a simple event named waiting at the + element.

          -
        10. +

          Otherwise, the media element's readyState attribute has the value HAVE_FUTURE_DATA or HAVE_ENOUGH_DATA: queue a task to + fire a simple event named playing at the + element.

          -

          If there is another media element whose Document is the same as - m's Document (even if one or both of these elements are not - actually in the Document), and which - also has a mediagroup attribute, and whose mediagroup attribute has the same value as the new value of - m's mediagroup attribute, then - let controller be that media element's current media - controller.

          +
          11. -

          Otherwise, let controller be a newly created - MediaController.

          +
        -

      1. Let m's current media controller be controller.

        2. +

      2. Set the media element's autoplaying flag to false.

        3. -

      3. Let new controller be m's current media +

      4. If the media element has a current media controller, then + report the controller state for the media element's current media controller.

        5. -

      5. Bring the media element up to speed with its new media - controller.

        6. +
      -

    5. Update controllers: If old - controller and new controller are the - same (whether both null or both the same controller) then abort - these steps.

      6. +
      -

    6. If old controller is not null and still has one or more slaved - media elements, then report the controller state for old - controller.

      7. +

      When the pause() method is invoked, and when + the user agent is required to pause the media element, the user agent must run the + following steps:

      -

    7. If new controller is not null, then report the controller - state for new controller.

      8. +
        + +

      1. If the media element's networkState attribute has the value NETWORK_EMPTY, invoke the media element's + resource selection algorithm.

        2. + +

      2. Run the internal pause steps for the media element.

      -

      The mediaGroup IDL attribute on media elements must reflect the mediagroup content attribute.

      +

      The internal pause steps for a media element are as follows:

      - +
        -
        +

      1. Set the media element's autoplaying flag to false.

        2. -

        Multiple media elements referencing the same media - resource will share a single network request. This can be used to efficiently play two - (video) tracks from the same media resource in two different places on the screen. - Used with the mediagroup attribute, these elements can - also be kept synchronised.

        +

      2. If the media element's paused attribute + is false, run the following steps:

        -

        In this example, a sign-languge interpreter track from a movie file is overlaid on the primary - video track of that same video file using two video elements, some CSS, and an - implicit MediaController:

        +
          - 
          <article>
- <style scoped>
-  div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
-  video { position; absolute; bottom: 0; right: 0; }
-  video:first-child { width: 100%; height: 100%; }
-  video:last-child { width: 30%; }
- </style>
- <div>
-  <video src="movie.vid#track=Video&amp;track=English" autoplay controls mediagroup=movie></video>
-  <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
- </div>
-</article>
          +

        1. Change the value of paused to true.

          2. -
        3. +

      3. Queue a task to fire a simple + event named timeupdate at the + element.

        4. +

      4. Queue a task to fire a simple + event named pause + at the element.

        5. - +

      5. If the media element has a current media controller, then + report the controller state for the media element's current media + controller.

        6. +
      - -
      Timed text tracks
      +
      -
      Text track model
      +

      The effective playback rate is not necessarily the element's playbackRate. When a media element has a + current media controller, its effective playback rate is the + MediaController's media controller playback rate. Otherwise, the + effective playback rate is just the element's playbackRate. Thus, the current media + controller overrides the media element.

      -

      A media element can have a group of associated text - tracks, known as the media element's list of text tracks. The text tracks are sorted as follows:

      +

      If the effective playback rate is positive or zero, then the direction of + playback is forwards. Otherwise, it is backwards.

      -
        +

        When a media element is potentially playing and + its Document is a fully active Document, its current + playback position must increase monotonically at effective playback rate units + of media time per unit time of the media timeline's clock. (This specification always + refers to this as an increase, but that increase could actually be a decrease if + the effective playback rate is negative.)

        -
      1. The text tracks corresponding to track element - children of the media element, in tree order.
        2. +

        The effective playback rate can be 0.0, in which case the + current playback position doesn't move, despite playback not being paused (paused doesn't become true, and the pause event doesn't fire).

        -
      2. Any text tracks added using the addTextTrack() method, in the order they were added, oldest - first.
        3. +

        This specification doesn't define how the user agent achieves the appropriate + playback rate — depending on the protocol and media available, it is plausible that the user + agent could negotiate with the server to have the server provide the media data at the appropriate + rate, so that (except for the period between when the rate is changed and when the server updates + the stream's playback rate) the client doesn't actually have to drop or interpolate any + frames.

        -
      3. Any media-resource-specific text - tracks (text tracks corresponding to data in the - media resource), in the order defined by the media resource's format - specification.
        4. +

        Any time the user agent provides a stable state, + the official playback position must be set to the current playback + position.

        -
      +

      While the direction of playback is backwards, any corresponding audio must be + muted. While the effective playback rate is + so low or so high that the user agent cannot play audio usefully, the corresponding audio must + also be muted. If the effective playback + rate is not 1.0, the user agent may apply pitch adjustments to the audio as necessary to + render it faithfully.

      -

      A text track consists of:

      +

      Media elements that are potentially playing + while not in a Document must not play any video, but should play any + audio component. Media elements must not stop playing just because all references to them have + been removed; only once a media element is in a state where no further audio could ever be played + by that element may the element be garbage collected.

      -
      +

      It is possible for an element to which no explicit references exist to play audio, + even if such an element is not still actively playing: for instance, it could have a current + media controller that still has references and can still be unpaused, or it could be + unpaused but stalled waiting for content to buffer.

      -
      The kind of text track +
      -
      +

      Each media element has a list of newly introduced cues, which must be + initially empty. Whenever a text track cue is added to the list of cues of a text track that is in the list of text + tracks for a media element, that cue must + be added to the media element's list of newly introduced cues. Whenever + a text track is added to the list of text tracks for a media + element, all of the cues in that text + track's list of cues must be added to the + media element's list of newly introduced cues. When a media + element's list of newly introduced cues has new cues added while the + media element's show poster flag is not set, then the user agent must + run the time marches on steps.

      -

      This decides how the track is handled by the user agent. The kind is represented by a string. - The possible strings are:

      +

      When a text track cue is removed from the list of cues of a text track that is in the list of text + tracks for a media element, and whenever a text track is removed + from the list of text tracks of a media element, if the media + element's show poster flag is not set, then the user agent must run the + time marches on steps.

      -
        -
      • subtitles -
      • captions -
      • descriptions -
      • chapters -
      • metadata -
      +

      When the current playback position of a media element changes (e.g. + due to playback or seeking), the user agent must run the time marches on steps. If the + current playback position changes while the steps are running, then the user agent + must wait for the steps to complete, and then must immediately rerun the steps. (These steps are + thus run as often as possible or needed — if one iteration takes a long time, this can cause + certain cues to be skipped over as the user agent rushes ahead + to "catch up".)

      -

      The kind of track can change dynamically, in the case of - a text track corresponding to a track element.

      +

      The time marches on steps are as follows:

      -
      +
        -
        A label +

      1. Let current cues be a list of cues, initialised to contain all the cues of all + the hidden or showing text tracks of the media + element (not the disabled ones) whose start times are less than or equal to the current + playback position and whose end times are + greater than the current playback position.

        2. -
        +

      2. Let other cues be a list of cues, + initialised to contain all the cues of hidden and showing text tracks of the media element that are not present in current cues.

        3. -

        This is a human-readable string intended to identify the track for the user.

        +

      3. Let last time be the current playback position at the + time this algorithm was last run for this media element, if this is not the first + time it has run.

        4. -

        The label of a track can change dynamically, in the - case of a text track corresponding to a track element.

        +

      4. If the current playback position has, since the last time this algorithm was + run, only changed through its usual monotonic increase during normal playback, then let missed cues be the list of cues in other cues whose start times are + greater than or equal to last time and whose end times are less than or equal to the current playback position. + Otherwise, let missed cues be an empty list.

        5. -

        When a text track label is the empty string, the user agent should automatically - generate an appropriate label from the text track's other properties (e.g. the kind of text - track and the text track's language) for use in its user interface. This automatically-generated - label is not exposed in the API.

        +

      5. Remove all the cues in missed cues + that are also in the media element's list of newly introduced cues, and + then empty the element's list of newly introduced cues.

        6. -
        +

      6. If the time was reached through the usual monotonic increase of the current playback + position during normal playback, and if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and + is not still running event handlers for such an event, then the user agent must queue a + task to fire a simple event named timeupdate at the element. (In the other cases, such as + explicit seeks, relevant events get fired as part of the overall process of changing the + current playback position.)

        -
        An in-band metadata track dispatch type +

        The event thus is not to be fired faster than about 66Hz or slower than 4Hz + (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to + vary the frequency of the event based on the system load and the average cost of processing the + event each time, so that the UI updates are not any more frequent than the user agent can + comfortably handle while decoding the video.

        7. -
        +

      7. If all of the cues in current cues + have their text track cue active flag set, none of the cues in other cues have their text track cue active + flag set, and missed cues is empty, then abort these steps.

        8. -

        This is a string extracted from the media resource specifically for in-band - metadata tracks to enable such tracks to be dispatched to different scripts in the document.

        +
      8. -

        For example, a traditional TV station broadcast streamed on the Web and - augmented with Web-specific interactive features could include text tracks with metadata for ad - targeting, trivia game data during game shows, player states during sports games, recipe - information during food programs, and so forth. As each program starts and ends, new tracks - might be added or removed from the stream, and as each one is added, the user agent could bind - them to dedicated script modules using the value of this attribute.

        +

        If the time was reached through the usual monotonic increase of the current playback + position during normal playback, and there are cues + in other cues that have their text track cue pause-on-exit flag + set and that either have their text track cue active flag set or are also in missed cues, then immediately pause the + media element.

        -

        Other than for in-band metadata text tracks, the in-band metadata track dispatch type is the empty string. How this - value is populated for different media formats is described in steps to expose a - media-resource-specific text track.

        +

        In the other cases, such as explicit seeks, playback is not paused by going past + the end time of a cue, even if that cue has its text track cue pause-on-exit flag set.

        -
        9. + -
        A language +
      9. -
        +

        Let events be a list of tasks, + initially empty. Each task in this list will be associated + with a text track, a text track cue, and a time, which are used to + sort the list before the tasks are queued.

        -

        This is a string (a BCP 47 language tag) representing the language of the text track's cues. -

        +

        Let affected tracks be a list of text + tracks, initially empty.

        -

        The language of a text track can change dynamically, - in the case of a text track corresponding to a track element.

        +

        When the steps below say to prepare an event named event for a + text track cue target with a time time, the + user agent must run these substeps:

        -
        +
          -
          A readiness state +

        1. Let track be the text track with which the text + track cue target is associated.

          2. -
          +

        2. Create a task to fire a simple event + named event at target.

          3. -

          One of the following:

          +

        3. Add the newly created task to events, associated with the time time, the text + track track, and the text track cue target.

          4. -
          +

        4. Add track to affected tracks.

          5. -
          Not loaded +
        -
        +
        10. -

        Indicates that the text track's cues have not been obtained.

        +

      10. For each text track cue in missed + cues, prepare an event named enter for the + TextTrackCue object with the text track cue start time.

        11. -
    +

  • For each text track cue in other + cues that either has its text track cue active flag set or is in missed cues, prepare an event named exit for the TextTrackCue object with the later of the + text track cue end time and the text track cue start time.

    • -
    Loading +

  • For each text track cue in current + cues that does not have its text track cue active flag set, prepare an + event named enter for the TextTrackCue + object with the text track cue start time.

    • -
    +
  • -

    Indicates that the text track is loading and there have been no fatal errors encountered so - far. Further cues might still be added to the track by the parser.

    +

    Sort the tasks in events in ascending + time order (tasks with earlier times first).

    -
    • +

    Further sort tasks in events that have + the same time by the relative text track cue order of the text track cues associated with these tasks.

    -
    Loaded +

    Finally, sort tasks in events that have + the same time and same text track cue order by placing tasks that fire enter events before + those that fire exit events.

    -
    + -

    Indicates that the text track has been loaded with no fatal errors.

    +

  • Queue each task in + events, in list order.

    • -
    +

  • Sort affected tracks in the same order as the text tracks appear in the media element's list of text + tracks, and remove duplicates.

    -
    Failed to load +

  • For each text track in affected tracks, in the list + order, queue a task to fire a simple event named cuechange at the TextTrack object, and, if the + text track has a corresponding track element, to then fire a + simple event named cuechange at the + track element as well.

    • -
    +

  • Set the text track cue active flag of all the cues in the current cues, and unset the text track cue + active flag of all the cues in the other + cues.

    • -

    Indicates that the text track was enabled, but when the user agent attempted to obtain it, - this failed in some way (e.g. URL could not be resolved, network error, unknown text track format). Some or all of the cues are - likely missing and will not be obtained.

    +

  • Run the rules for updating the text track rendering of each of the text tracks in affected tracks that are showing. For example, for text tracks + based on WebVTT, the rules for updating the display of WebVTT text tracks.

    • -
    + - +

    For the purposes of the algorithm above, a text track cue is considered to be part + of a text track only if it is listed in the text track list of cues, not + merely if it is associated with the text track.

    -

    The readiness state of a text - track changes dynamically as the track is obtained.

    +

    If the media element's Document stops being a + fully active document, then the playback will stop + until the document is active again.

    - +

    When a media element is removed + from a Document, the user agent must run the following steps:

    -
    A mode +
      -
      +

    1. Asynchronously await a stable state, allowing the task that removed the media element from the + Document to continue. The synchronous section consists of all the + remaining steps of this algorithm. (Steps in the synchronous section are marked with + ⌛.)

      2. -

      One of the following:

      +

    2. ⌛ If the media element is in a Document, + abort these steps.

      3. -
      +

    3. ⌛ Run the internal pause steps for the media element.

      -
      Disabled +
    -
    + -

    Indicates that the text track is not active. Other than for the purposes of exposing the - track in the DOM, the user agent is ignoring the text track. No cues are active, no events are - fired, and the user agent will not attempt to obtain the track's cues.

    -
    -
    Hidden +
    Seeking
    -
    +
    -

    Indicates that the text track is active, but that the user agent is not actively displaying - the cues. If no attempt has yet been made to obtain the track's cues, the user agent will - perform such an attempt momentarily. The user agent is maintaining a list of which cues are - active, and events are being fired accordingly.

    +
    media . seeking
    -
    +
    -
    Showing +

    Returns true if the user agent is currently seeking.

    -
    +
    -

    Indicates that the text track is active. If no attempt has yet been made to obtain the - track's cues, the user agent will perform such an attempt momentarily. The user agent is - maintaining a list of which cues are active, and events are being fired accordingly. In - addition, for text tracks whose kind is subtitles or captions, the cues are being overlaid on the video - as appropriate; for text tracks whose kind is descriptions, the user agent is making the - cues available to the user in a non-visual fashion; and for text tracks whose kind is chapters, the user agent is making available to - the user a mechanism by which the user can navigate to any point in the media - resource by selecting a cue.

    +
    media . seekable
    - +
    - +

    Returns a TimeRanges object that represents the ranges of the media + resource to which it is possible for the user agent to seek.

    -
    A list of zero or more cues +
    media . fastSeek( time )
    -

    A list of text track cues, along with rules for - updating the text track rendering. For example, for WebVTT, the rules - for updating the display of WebVTT text tracks.

    +

    Seeks to near the given time as fast as possible, trading precision for + speed. (To seek to a precise time, use the currentTime attribute.)

    -

    The list of cues of a text track can change - dynamically, either because the text track has not yet been loaded or is still loading, - or due to DOM manipulation.

    +

    This does nothing if the media resource has not been loaded.

    -

    Each text track has a corresponding TextTrack object.

    +
    -
    +

    The seeking attribute must initially have the + value false.

    -

    Each media element has a list of pending text tracks, which must - initially be empty, a blocked-on-parser flag, which must initially be false, and a - did-perform-automatic-track-selection flag, which must also initially be false.

    +

    The fastSeek() method must seek to the time given by the method's argument, with the + approximate-for-speed flag set.

    -

    When the user agent is required to populate the list of pending text tracks of a - media element, the user agent must add to the element's list of pending text - tracks each text track in the element's list of text tracks whose - text track mode is not disabled and whose - text track readiness state is loading.

    +

    When the user agent is required to seek to a particular new playback position in the media resource, optionally with the + approximate-for-speed flag set, it means that the user agent must run the following steps. + This algorithm interacts closely with the event loop mechanism; in particular, it has + a synchronous section (which is triggered as part of the event loop + algorithm). Steps in that section are marked with ⌛.

    -

    Whenever a track element's parent node changes, the user agent must remove the - corresponding text track from any list of pending text tracks that it is - in.

    +
      -

      Whenever a text track's text track readiness state changes to either - loaded or failed to - load, the user agent must remove it from any list of pending text tracks that - it is in.

      +

    1. Set the media element's show poster flag to false.

      2. -

      When a media element is created by an HTML parser or XML - parser, the user agent must set the element's blocked-on-parser flag to true. - When a media element is popped off the stack of open elements of an - HTML parser or XML parser, the user agent must honor user - preferences for automatic text track selection, populate the list of pending text - tracks, and set the element's blocked-on-parser flag to false.

      +

    2. If the media element's readyState + is HAVE_NOTHING, abort these steps.

      3. -

      The text tracks of a media element are ready when both the element's list of pending text - tracks is empty and the element's blocked-on-parser flag is false.

      +

    3. If the element's seeking IDL attribute is true, + then another instance of this algorithm is already running. Abort that other instance of the + algorithm without waiting for the step that it is running to complete.

      4. -

      Each media element has a pending text track change notification flag, - which must initially be unset.

      +

    4. Set the seeking IDL attribute to true.

      5. -

      Whenever a text track that is in a media element's list of text - tracks has its text track mode change value, the user agent must run the - following steps for the media element:

      +

    5. If the seek was in response to a DOM method call or setting of an IDL attribute, then + continue the script. The remainder of these steps must be run asynchronously. With the exception + of the steps marked with ⌛, they could be aborted at any time by another instance of this + algorithm being invoked.

      6. -
        +

      1. If the new playback position is later than the end of the media + resource, then let it be the end of the media resource instead.

        2. -

      2. If the media element's pending text track change notification - flag is set, abort these steps.

        3. +

      3. If the new playback position is less than the earliest possible + position, let it be that position instead.

        4. -

      4. Set the media element's pending text track change notification - flag.

        5. +

      5. If the (possibly now changed) new playback position is not in one of + the ranges given in the seekable attribute, then let it + be the position in one of the ranges given in the seekable attribute that is the nearest to the new + playback position. If two positions both satisfy that constraint (i.e. the new playback position is exactly in the middle between two ranges in the seekable attribute) then use the position that is closest to + the current playback position. If there are no ranges given in the seekable attribute then set the seeking IDL attribute to false and abort these steps.

      6. -

        Queue a task that runs the following substeps:

        +

        If the approximate-for-speed flag is set, adjust the new playback + position to a value that will allow for playback to resume promptly. If new + playback position before this step is before current playback position, then + the adjusted new playback position must also be before the current + playback position. Similarly, if the new playback position before + this step is after current playback position, then the adjusted new + playback position must also be after the current playback position.

        -
          +

          For example, the user agent could snap to the nearest key frame, so that it + doesn't have to spend time decoding then discarding intermediate frames before resuming + playback.

          -

        1. Unset the media element's pending text track change notification - flag.

          2. + -

        2. Fire a simple event named change at - the media element's textTracks - attribute's TextTrackList object.

          3. +

        3. Queue a task to fire a simple event named seeking at the element.

          4. -
        +
      7. -
        8. +

        Set the current playback position to the given new playback + position.

        -

      8. If the media element's show poster flag is not set, run the - time marches on steps.

        9. +

        If the media element was potentially playing + immediately before it started seeking, but seeking caused its readyState attribute to change to a value lower than HAVE_FUTURE_DATA, then a waiting will be + fired at the element.

        + -
      +

      This step sets the current playback position, and thus can + immediately trigger other conditions, such as the rules regarding when playback "reaches the end of the media resource" (part of the logic that + handles looping), even before the user agent is actually able to render the media data for that + position (as determined in the next step).

      -

      The task source for the tasks listed in this - section is the DOM manipulation task source.

      +

      The currentTime attribute does not + get updated asynchronously, as it returns the official playback position, not the + current playback position.

      -
      + -

      A text track cue is the unit of time-sensitive data in a text track, - corresponding for instance for subtitles and captions to the text that appears at a particular - time and disappears at another time.

      +

    6. Wait until the user agent has established whether or not the media data for + the new playback position is available, and, if it is, until it has decoded + enough data to play back that position.

      + +
      7. -

      Each text track cue consists of:

      +

    7. Await a stable state. The synchronous section consists of all + the remaining steps of this algorithm. (Steps in the synchronous section are marked + with ⌛.)

      8. -
      +

    8. ⌛ Set the seeking IDL attribute to + false.

      9. -
      An identifier -
      -

      An arbitrary string.

      -
      +

    9. ⌛ Run the time marches on steps.

      10. -
      A start time -
      -

      The time, in seconds and fractions of a second, that describes the beginning of the range of - the media data to which the cue applies.

      -
      +

    10. ⌛ Queue a task to fire a simple event + named timeupdate at the element.

      11. -
      An end time -
      -

      The time, in seconds and fractions of a second, that describes the end of the range of the - media data to which the cue applies.

      -
      +

    11. ⌛ Queue a task to fire a simple event named seeked at the element.

      12. -
      A pause-on-exit flag -
      -

      A boolean indicating whether playback of the media resource is to pause when the - end of the range to which the cue applies is reached.

      -
      +
    -
    Some additional format-specific data
    -
    -

    Additional fields, as needed for the format. For example, WebVTT has a text track cue - writing direction and so forth.

    -
    +
    -
    The data of the cue -
    -

    The raw data of the cue, and rules for rendering the cue in isolation.

    -

    The precise nature of this data is defined by the format. For example, WebVTT uses text.

    -
    +

    The seekable attribute must return a new + static normalised TimeRanges object that represents the ranges of the + media resource, if any, that the user agent is able to seek to, at the time the + attribute is evaluated.

    - +

    If the user agent can seek to anywhere in the media resource, e.g. + because it is a simple movie file and the user agent and the server support HTTP Range requests, + then the attribute would return an object with one range, whose start is the time of the first + frame (the earliest possible position, typically zero), and whose end is the same as + the time of the first frame plus the duration attribute's + value (which would equal the time of the last frame, and might be positive Infinity).

    -

    The text track cue start time and text track cue end - time can be negative. (The current playback position can never be negative, - though, so cues entirely before time zero cannot be active.)

    +

    The range might be continuously changing, e.g. if the user agent is buffering a + sliding window on an infinite stream. This is the behavior seen with DVRs viewing live TV, for + instance.

    -

    Each text track cue has a corresponding TextTrackCue object (or more - specifically, an object that inherits from TextTrackCue — for example, WebVTT - cues use the VTTCue interface). A text track cue's in-memory - representation can be dynamically changed through this TextTrackCue API.

    +

    Media resources might be internally scripted or + interactive. Thus, a media element could play in a non-linear fashion. If this + happens, the user agent must act as if the algorithm for seeking was used whenever the current playback position + changes in a discontinuous fashion (so that the relevant events fire). If the media + element has a current media controller, then the user agent must seek + the media controller appropriately instead.

    -

    A text track cue is associated with rules for updating the text track - rendering, as defined by the specification for the specific kind of text track - cue. These rules are used specifically when the object representing the cue is added to a - TextTrack object using the addCue() - method.

    +
    -

    In addition, each text track cue has two pieces of dynamic information:

    -
    +
    Media resources with multiple media tracks
    -
    The active flag -
    +

    A media resource can have multiple embedded audio and video tracks. For example, + in addition to the primary video and audio tracks, a media resource could have + foreign-language dubbed dialogues, director's commentaries, audio descriptions, alternative + angles, or sign-language overlays.

    -

    This flag must be initially unset. The flag is used to ensure events are fired appropriately - when the cue becomes active or inactive, and to make sure the right cues are rendered.

    +
    -

    The user agent must synchronously unset this flag whenever the text track cue is - removed from its text track's text track list of cues; whenever the - text track itself is removed from its media element's list of - text tracks or has its text track mode changed to disabled; and whenever the media element's readyState is changed back to HAVE_NOTHING. When the flag is unset in this way for one - or more cues in text tracks that were showing prior to the relevant incident, the user agent must, after having unset - the flag for all the affected cues, apply the rules for updating the text track - rendering of those text tracks. For example, for text tracks based on WebVTT, the rules for updating - the display of WebVTT text tracks.

    +
    media . audioTracks
    -
    The display state
    -

    This is used as part of the rendering model, to keep cues in a consistent position. It must - initially be empty. Whenever the text track cue active flag is unset, the user - agent must empty the text track cue display state.

    +

    Returns an AudioTrackList object representing the audio tracks available in the + media resource.

    -
    - -

    The text track cues of a media element's text tracks are ordered relative to each other in the text track - cue order, which is determined as follows: first group the cues by their text track, with the groups being sorted in the same order - as their text tracks appear in the media element's - list of text tracks; then, within each group, cues must be sorted by their start - time, earliest first; then, any cues with the same - start time must be sorted by their end time, latest first; and finally, any cues with identical end times must - be sorted in the order they were last added to their respective text track list of - cues, oldest first (so e.g. for cues from a WebVTT file, that would initially - be the order in which the cues were listed in the file).

    +
    media . videoTracks
    +
    -
    Sourcing in-band text tracks
    +

    Returns a VideoTrackList object representing the video tracks available in the + media resource.

    -

    A media-resource-specific text track is a text track that corresponds - to data found in the media resource.

    +
    +
    -

    Rules for processing and rendering such data are defined by the relevant specifications, e.g. - the specification of the video format if the media resource is a video.

    +

    The audioTracks attribute of a + media element must return a live AudioTrackList object + representing the audio tracks available in the media element's media + resource. The same object must be returned each time.

    -

    When a media resource contains data that the user agent recognises and supports as - being equivalent to a text track, the user agent runs the steps to expose a - media-resource-specific text track with the relevant data, as follows.

    +

    The videoTracks attribute of a + media element must return a live VideoTrackList object + representing the video tracks available in the media element's media + resource. The same object must be returned each time.

    - +

    There are only ever one AudioTrackList object and one + VideoTrackList object per media element, even if another media + resource is loaded into the element: the objects are reused. (The AudioTrack + and VideoTrack objects are not, though.)

    -
      +
    -

  • Associate the relevant data with a new text track and its corresponding new - TextTrack object. The text track is a media-resource-specific - text track.

    • +
    -

  • Set the new text track's kind, label, and language - based on the semantics of the relevant data, as defined by the relevant specification. If there - is no label in that data, then the label must be set to the - empty string.

    • +

    In this example, a script defines a function that takes a URL to a video and a reference to an + element where the video is to be placed. That function then tries to load the video, and, once it + is loaded, checks to see if there is a sign-language track available. If there is, it also + displays that track. Both tracks are just placed in the given container; it's assumed that styles + have been applied to make this work in a pretty way!

    -

  • Associate the text track list of cues with the rules for updating the - text track rendering appropriate for the format in question.

    + 
    <script>
+ function loadVideo(url, container) {
+   var controller = new MediaController();
+   var video = document.createElement('video');
+   video.src = url;
+   video.autoplay = true;
+   video.controls = true;
+   video.controller = controller;
+   container.appendChild(video);
+   video.onloadedmetadata = function (event) {
+     for (var i = 0; i < video.videoTracks.length; i += 1) {
+       if (video.videoTracks[i].kind == 'sign') {
+         var sign = document.createElement('video');
+         sign.src = url + '#track=' + video.videoTracks[i].id; 
+         sign.autoplay = true;
+         sign.controller = controller;
+         container.appendChild(sign);
+         return;
+       }
+     }
+   };
+ }
+</script>
    -
  • +
    • -

    If the new text track's kind is metadata, then set the text track in-band - metadata track dispatch type as follows, based on the type of the media - resource:

    -
    +
    AudioTrackList and VideoTrackList objects
    -
    If the media resource is an Ogg file
    +

    The AudioTrackList and VideoTrackList interfaces are used by + attributes defined in the previous section.

    -
    The text track in-band metadata track dispatch type must be set to the value - of the Name header field.
    + 
    interface AudioTrackList : EventTarget {
+  readonly attribute unsigned long length;
+  getter AudioTrack (unsigned long index);
+  AudioTrack? getTrackById(DOMString id);
 
-     
    If the media resource is a WebM file
    
+           attribute EventHandler onchange;
+           attribute EventHandler onaddtrack;
+           attribute EventHandler onremovetrack;
+};
 
-     
    The text track in-band metadata track dispatch type must be set to the value
-     of the CodecID element. 
    
+interface AudioTrack {
+  readonly attribute DOMString id;
+  readonly attribute DOMString kind;
+  readonly attribute DOMString label;
+  readonly attribute DOMString language;
+           attribute boolean enabled;
+};
 
-     
    If the media resource is an MPEG-2 file
    
+interface VideoTrackList : EventTarget {
+  readonly attribute unsigned long length;
+  getter VideoTrack (unsigned long index);
+  VideoTrack? getTrackById(DOMString id);
+  readonly attribute long selectedIndex;
 
-     
    Let stream type be the value of the "stream_type" field describing the
-     text track's type in the file's program map section, interpreted as an 8-bit unsigned integer.
-     Let length be the value of the "ES_info_length" field for the track in the
-     same part of the program map section, interpreted as an integer as defined by the MPEG-2
-     specification. Let descriptor bytes be the length bytes
-     following the "ES_info_length" field. The text track in-band metadata track dispatch
-     type must be set to the concatenation of the stream type byte and
-     the zero or more descriptor bytes bytes, expressed in hexadecimal using
-     uppercase ASCII hex digits. 
+           attribute EventHandler onchange;
+           attribute EventHandler onaddtrack;
+           attribute EventHandler onremovetrack;
+};
 
-     
    
+interface VideoTrack {
+  readonly attribute DOMString id;
+  readonly attribute DOMString kind;
+  readonly attribute DOMString label;
+  readonly attribute DOMString language;
+           attribute boolean selected;
+};
    -
    If the media resource is an MPEG-4 file
    +
    -
    Let the - first stsd box of the - first stbl box of the - first minf box of the - first mdia box of the - text track's trak box in the - first moov box - of the file be the stsd box, if any. +
    media . audioTracks . length
    +
    media . videoTracks . length
    - If the file has no stsd box, or if the stsd box has neither a mett box nor a metx box, then the text track - in-band metadata track dispatch type must be set to the empty string. +
    - Otherwise, if the stsd box has a mett box then the text - track in-band metadata track dispatch type must be set to the concatenation of the - string "mett", a U+0020 SPACE character, and the value of the first mime_format field of the first mett box of the stsd - box, or the empty string if that field is absent in that box. +

    Returns the number of tracks in the list.

    - Otherwise, if the stsd box has no mett box but has a metx box then the text track in-band metadata track dispatch type - must be set to the concatenation of the string "metx", a U+0020 SPACE - character, and the value of the first namespace field of the first metx box of the stsd box, or the empty string if that field is absent in - that box. +
    - +
    audioTrack = media . audioTracks[index]
    +
    videoTrack = media . videoTracks[index]
    - +
    -
    +

    Returns the specified AudioTrack or VideoTrack object.

    - + -

  • Populate the new text track's list of - cues with the cues parsed so far, following the guidelines for exposing - cues, and begin updating it dynamically as necessary.

    • +
    audioTrack = media . audioTracks . getTrackById( id )
    +
    videoTrack = media . videoTracks . getTrackById( id )
    -

  • Set the new text track's readiness - state to loaded.

    • +
    -

  • Set the new text track's mode to the - mode consistent with the user's preferences and the requirements of the relevant specification - for the data.

    +

    Returns the AudioTrack or VideoTrack object with the given identifier, or null if no track has that identifier.

    + +
    • -

    For instance, if there are no other active subtitles, and this is a forced - subtitle track (a subtitle track giving subtitles in the audio track's primary language, but - only for audio that is actually in another language), then those subtitles might be activated - here.

    +
    audioTrack . id
    +
    videoTrack . id
    - +
    -

  • Add the new text track to the media element's list of text - tracks.

    • +

    Returns the ID of the given track. This is the ID that can be used with a fragment identifier + if the format supports the Media Fragments URI syntax, and that can be used with + the getTrackById() method.

    -

  • Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses - the TrackEvent interface, with the track - attribute initialised to the text track's TextTrack object, at the - media element's textTracks attribute's - TextTrackList object.

    • +
    - +
    audioTrack . kind
    +
    videoTrack . kind
    - +
    - +

    Returns the category the given track falls into. The possible track categories are given below.

    - +
    +
    audioTrack . label
    +
    videoTrack . label
    +
    -
    +

    Returns the label of the given track, if known, or the empty string otherwise.

    -
    Sourcing out-of-band text tracks
    +
    -

    When a track element is created, it must be associated with a new text - track (with its value set as defined below) and its corresponding new - TextTrack object.

    +
    audioTrack . language
    +
    videoTrack . language
    -

    The text track kind is determined from the state of the element's kind attribute according to the following table; for a state given - in a cell of the first column, the kind is the string given - in the second column:

    +
    - - - - - - - - - -
    State - String -
    Subtitles - subtitles -
    Captions - captions -
    Descriptions - descriptions -
    Chapters - chapters -
    Metadata - metadata -
    +

    Returns the language of the given track, if known, or the empty string otherwise.

    -

    The text track label is the element's track label.

    +
    -

    The text track language is the element's track language, if any, or - the empty string otherwise.

    +
    audioTrack . enabled [ = value ]
    -

    As the kind, label, - and srclang attributes are set, changed, or removed, the - text track must update accordingly, as per the definitions above.

    +
    -

    Changes to the track URL are handled in the algorithm below.

    +

    Returns true if the given track is active, and false otherwise.

    -

    The text track readiness state is initially not loaded, and the text track mode is initially disabled.

    +

    Can be set, to change whether the track is enabled or not. If multiple audio tracks are + enabled simultaneously, they are mixed.

    -

    The text track list of cues is initially empty. It is dynamically modified when - the referenced file is parsed. Associated with the list are the rules for updating the text - track rendering appropriate for the format in question; for WebVTT, this is - the rules for updating the display of WebVTT text tracks.

    +
    -

    When a track element's parent element changes and the new parent is a media - element, then the user agent must add the track element's corresponding - text track to the media element's list of text tracks, and - then queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses - the TrackEvent interface, with the track - attribute initialised to the text track's TextTrack object, at the - media element's textTracks attribute's - TextTrackList object.

    +
    media . videoTracks . selectedIndex
    -

    When a track element's parent element changes and the old parent was a media - element, then the user agent must remove the track element's corresponding - text track from the media element's list of text tracks, - and then queue a task to fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that - uses the TrackEvent interface, with the track attribute initialised to the text track's - TextTrack object, at the media element's textTracks attribute's TextTrackList object.

    - +
    -
    +

    Returns the index of the currently selected track, if any, or −1 otherwise.

    -

    When a text track corresponding to a track element is added to a - media element's list of text tracks, the user agent must queue a - task to run the following steps for the media element:

    +
    -
      +
      videoTrack . selected [ = value ]
      -

    1. If the element's blocked-on-parser flag is true, abort these steps.

      2. +
      -

    2. If the element's did-perform-automatic-track-selection flag is true, abort - these steps.

      3. +

      Returns true if the given track is active, and false otherwise.

      -

    3. Honor user preferences for automatic text track selection for this - element.

      4. +

      Can be set, to change whether the track is selected or not. Either zero or one video track is + selected; selecting a new track while a previous one is selected will unselect the previous + one.

      -
    + -

    When the user agent is required to honor user preferences for automatic text track - selection for a media element, the user agent must run the following steps:

    +
    -
      +
      -

    1. Perform automatic text track selection for subtitles and captions.

      2. +

      An AudioTrackList object represents a dynamic list of zero or more audio tracks, + of which zero or more can be enabled at a time. Each audio track is represented by an + AudioTrack object.

      -

    2. Perform automatic text track selection for descriptions.

      3. +

      A VideoTrackList object represents a dynamic list of zero or more video tracks, of + which zero or one can be selected at a time. Each video track is represented by a + VideoTrack object.

      -

    3. Perform automatic text track selection for chapters.

      4. +

      Tracks in AudioTrackList and VideoTrackList objects must be + consistently ordered. If the media resource is in a format that defines an order, + then that order must be used; otherwise, the order must be the relative order in which the tracks + are declared in the media resource. The order used is called the natural order + of the list.

      -

    4. If there are any text tracks in the media - element's list of text tracks whose text track kind is metadata that correspond to track - elements with a default attribute set whose text - track mode is set to disabled, then set the - text track mode of all such tracks to hidden

      5. +

      Each track in one of these objects thus has an index; the first has the index + 0, and each subsequent track is numbered one higher than the previous one. If a media + resource dynamically adds or removes audio or video tracks, then the indices of the tracks + will change dynamically. If the media resource changes entirely, then all the + previous tracks will be removed and replaced with new tracks.

      -

    5. Set the element's did-perform-automatic-track-selection flag to - true.

      6. +

      The AudioTrackList.length and VideoTrackList.length attributes must return + the number of tracks represented by their objects at the time of getting.

      -
    +

    The supported property indices of AudioTrackList and + VideoTrackList objects at any instant are the numbers from zero to the number of + tracks represented by the respective object minus one, if any tracks are represented. If an + AudioTrackList or VideoTrackList object represents no tracks, it has no + supported property indices.

    -

    When the steps above say to perform automatic text track selection for one or more - text track kinds, it means to run the following steps:

    +

    To determine the value of an indexed property for a given index index in an AudioTrackList or VideoTrackList object list, the user agent must return the AudioTrack or + VideoTrack object that represents the indexth track in list.

    -
      +

      The AudioTrackList.getTrackById(id) and VideoTrackList.getTrackById(id) methods must return the first AudioTrack or + VideoTrack object (respectively) in the AudioTrackList or + VideoTrackList object (respectively) whose identifier is equal to the value of the + id argument (in the natural order of the list, as defined above). When no + tracks match the given argument, the methods must return null.

      -

    1. Let candidates be a list consisting of the text tracks in the media element's list of text tracks - whose text track kind is one of the kinds that were passed to the algorithm, if any, - in the order given in the list of text tracks.

      2. +

      The AudioTrack and VideoTrack objects represent specific tracks of a + media resource. Each track can have an identifier, category, label, and language. + These aspects of a track are permanent for the lifetime of the track; even if a track is removed + from a media resource's AudioTrackList or VideoTrackList + objects, those aspects do not change.

      -

    2. If candidates is empty, then abort these steps.

      3. +

      In addition, AudioTrack objects can each be enabled or disabled; this is the audio + track's enabled state. When an AudioTrack is created, its enabled state + must be set to false (disabled). The resource fetch + algorithm can override this.

      -

    3. If any of the text tracks in candidates have a text track mode set to showing, abort these steps.

      4. +

      Similarly, a single VideoTrack object per VideoTrackList object can + be selected, this is the video track's selection state. When a VideoTrack is + created, its selection state must be set to false (not selected). The resource fetch algorithm can override this.

      -
    4. +

      The AudioTrack.id and VideoTrack.id attributes must return the identifier + of the track, if it has one, or the empty string otherwise. If the media resource is + in a format that supports the Media Fragments URI fragment identifier syntax, the + identifier returned for a particular track must be the same identifier that would enable the track + if used as the name of a track in the track dimension of such a fragment identifier.

      -

      If the user has expressed an interest in having a track from candidates - enabled based on its text track kind, text track language, and - text track label, then set its text track mode to showing.

      +

      For example, in Ogg files, this would be the Name header field of the track.

      -

      For example, the user could have set a browser preference to the effect of "I - want French captions whenever possible", or "If there is a subtitle track with 'Commentary' in - the title, enable it", or "If there are audio description tracks available, enable one, ideally - in Swiss German, but failing that in Standard Swiss German or Standard German".

      +

      The AudioTrack.kind and VideoTrack.kind attributes must return the category + of the track, if it has one, or the empty string otherwise.

      -

      Otherwise, if there are any text tracks in candidates that correspond to track elements with a default attribute set whose text track mode is - set to disabled, then set the text track - mode of the first such track to showing.

      +

      The category of a track is the string given in the first column of the table below that is the + most appropriate for the track based on the definitions in the table's second and third columns, + as determined by the metadata included in the track in the media resource. The cell + in the third column of a row says what the category given in the cell in the first column of that + row applies to; a category is only appropriate for an audio track if it applies to audio tracks, + and a category is only appropriate for video tracks if it applies to video tracks. Categories must + only be returned for AudioTrack objects if they are appropriate for audio, and must + only be returned for VideoTrack objects if they are appropriate for video.

      -
      5. +

      For Ogg files, the Role header field of the track gives the relevant metadata. For DASH media + resources, the Role element conveys the information. For WebM, only the + FlagDefault element currently maps to a value.

      -
    + -

    When a text track corresponding to a track element experiences any of - the following circumstances, the user agent must start the track processing - model for that text track and its track element: + + + + + + -
      +
    + + + + + + + + + +
    Return values for AudioTrack.kind and VideoTrack.kind
    Category + Definition + Applies to...Examples +
    "alternative" + A possible alternative to the main track, e.g. a different take of a song (audio), or a different angle (video). + Audio and video. + Ogg: "audio/alternate" or "video/alternate"; DASH: "alternate" without "main" and "commentary" roles, and, for audio, without the "dub" role (other roles ignored). -
  • The track element is created.
    • +
    "captions" + A version of the main video track with captions burnt in. (For legacy content; new content would use text tracks.) + Video only. + DASH: "caption" and "main" roles together (other roles ignored). -
  • The text track has its text track mode changed.
    • +
    "descriptions" + An audio description of a video track. + Audio only. + Ogg: "audio/audiodesc". -
  • The track element's parent element changes and the new parent is a media - element.
    • +
    "main" + The primary audio or video track. + Audio and video. + Ogg: "audio/main" or "video/main"; WebM: the "FlagDefault" element is set; DASH: "main" role without "caption", "subtitle", and "dub" roles (other roles ignored). - +
    "main-desc" + The primary audio track, mixed with audio descriptions. + Audio only. + AC3 audio in MPEG-2 TS: bsmod=2 and full_svc=1. -

    When a user agent is to start the track processing model for a - text track and its track element, it must run the following algorithm. - This algorithm interacts closely with the event loop mechanism; in particular, it has - a synchronous section (which is triggered as part of the event loop - algorithm). The steps in that section are marked with ⌛.

    +
    "sign" + A sign-language interpretation of an audio track. + Video only. + Ogg: "video/sign". -
      +
    "subtitles" + A version of the main video track with subtitles burnt in. (For legacy content; new content would use text tracks.) + Video only. + DASH: "subtitle" and "main" roles together (other roles ignored). -

  • If another occurrence of this algorithm is already running for this text - track and its track element, abort these steps, letting that other algorithm - take care of this element.

    • +
    "translation" + A translated version of the main audio track. + Audio only. + Ogg: "audio/dub". DASH: "dub" and "main" roles together (other roles ignored). -

  • If the text track's text track mode is not set to one of hidden or showing, abort - these steps.

    • +
    "commentary" + Commentary on the primary audio or video track, e.g. a director's commentary. + Audio and video. + DASH: "commentary" role without "main" role (other roles ignored). -

  • If the text track's track element does not have a media - element as a parent, abort these steps.

    • +
    "" (empty string) + No explicit kind, or the kind given by the track's metadata is not recognised by the user agent. + Audio and video. + Any other track type, track role, or combination of track roles not described above. -

  • Run the remainder of these steps asynchronously, allowing whatever caused these steps to - run to continue.

    • +
    -

  • Top: Await a stable state. The synchronous section - consists of the following steps. (The steps in the synchronous section are marked - with ⌛.)

    • +
    -

  • ⌛ Set the text track readiness state to loading.

    • +

    The AudioTrack.label and VideoTrack.label attributes must return the label + of the track, if it has one, or the empty string otherwise.

    -

  • ⌛ Let URL be the track URL of the - track element.

    • +

    The AudioTrack.language and VideoTrack.language attributes must return the + BCP 47 language tag of the language of the track, if it has one, or the empty string otherwise. If + the user agent is not able to express that language as a BCP 47 language tag (for example because + the language information in the media resource's format is a free-form string without + a defined interpretation), then the method must return the empty string, as if the track had no + language.

    -

  • ⌛ If the track element's parent is a media element then - let CORS mode be the state of the parent media element's crossorigin content attribute. Otherwise, let CORS mode be No CORS.

    • +

    The AudioTrack.enabled attribute, on + getting, must return true if the track is currently enabled, and false otherwise. On setting, it + must enable the track if the new value is true, and disable it otherwise. (If the track is no + longer in an AudioTrackList object, then the track being enabled or disabled has no + effect beyond changing the value of the attribute on the AudioTrack object.)

    -

  • End the synchronous section, continuing the remaining steps - asynchronously.

    • +

    Whenever an audio track in an AudioTrackList that was + disabled is enabled, and whenever one that was enabled is disabled, the user agent must + queue a task to fire a simple event named change at the AudioTrackList object.

    -
  • +

    The VideoTrackList.selectedIndex attribute + must return the index of the currently selected track, if any. If the VideoTrackList + object does not currently represent any tracks, or if none of the tracks are selected, it must + instead return −1.

    -

    If URL is not the empty string, perform a potentially CORS-enabled - fetch of URL, with the mode being CORS mode, the origin being the origin of the - track element's Document, and the default origin behaviour set - to fail.

    +

    The VideoTrack.selected attribute, on + getting, must return true if the track is currently selected, and false otherwise. On setting, it + must select the track if the new value is true, and unselect it otherwise. If the track is in a + VideoTrackList, then all the other VideoTrack objects in that list must + be unselected. (If the track is no longer in a VideoTrackList object, then the track + being selected or unselected has no effect beyond changing the value of the attribute on the + VideoTrack object.)

    -

    The resource obtained in this fashion, if any, contains the text track data. If any data is - obtained, it is by definition CORS-same-origin (cross-origin resources that are not - suitably CORS-enabled do not get this far).

    +

    Whenever a track in a VideoTrackList that was previously + not selected is selected, the user agent must queue a task to fire a simple + event named change at the + VideoTrackList object. This task must be queued before the task that fires + the resize event, if any.

    -

    The tasks queued by the - fetching algorithm on the networking task source to - process the data as it is being fetched must determine the type of the resource. If the - type of the resource is not a supported text track format, the load will fail, as - described below. Otherwise, the resource's data must be passed to the appropriate parser (e.g. - the WebVTT parser) as it is received, with the text track list of cues being used for - that parser's output.

    +
    -

    The appropriate parser will synchronously (during these networking task - source tasks) and incrementally (as each such task is - run with whatever data has been received from the network) update the text track list of - cues.

    +

    The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, + by all objects implementing the AudioTrackList and VideoTrackList + interfaces:

    -

    This specification does not currently say whether or how to check the MIME - types of text tracks, or whether or how to perform file type sniffing using the actual file - data. Implementors differ in their intentions on this matter and it is therefore unclear what - the right solution is. In the absence of any requirement here, the HTTP specification's strict - requirement to follow the Content-Type header prevails ("Content-Type specifies the media type - of the underlying data." ... "If and only if the media type is not given by a Content-Type - field, the recipient MAY attempt to guess the media type via inspection of its content - and/or the name extension(s) of the URI used to identify the resource.").

    + + + +
    Event handler Event handler event type +
    onchange change +
    onaddtrack addtrack +
    onremovetrack removetrack +
    -

    If the fetching algorithm fails for any reason (network error, - the server returns an error code, a cross-origin check fails, etc), or if URL is the empty string, then queue a task to first change the - text track readiness state to failed to - load and then fire a simple event named error at the track element. This task must use the DOM manipulation task source.

    + -

    If the fetching algorithm does not fail, but the - type of the resource is not a supported text track format, or the file was not successfully - processed (e.g. the format in question is an XML format and the file contained a well-formedness - error that the XML specification requires be detected and reported to the application), then the - task that is queued by the - networking task source in which the aforementioned problem is found must change the - text track readiness state to failed to - load and fire a simple event named error - at the track element.

    +
    • -

    If the fetching algorithm does not fail, and the file was - successfully processed, then the final task that is queued by the networking task source, after it has - finished parsing the data, must change the text track readiness state to loaded, and fire a simple event named load at the track element.

    -

    If, while the fetching algorithm is active, either:

    +
    Selecting specific audio and video tracks declaratively
    -
      +

      The audioTracks and videoTracks attributes allow scripts to select which track + should play, but it is also possible to select specific tracks declaratively, by specifying + particular tracks in the fragment identifier of the URL of the media + resource. The format of the fragment identifier depends on the MIME type of + the media resource.

      -
    • the track URL changes so that it is no longer equal to URL, while the text track mode is set to hidden or showing; or
      • +
      -
    • the text track mode changes to hidden - or showing, while the track URL is not - equal to URL
      • +

      In this example, a video that uses a format that supports the Media Fragments URI + fragment identifier syntax is embedded in such a way that the alternative angles labeled + "Alternative" are enabled instead of the default video track.

      -
    + 
    <video src="myvideo#track=Alternative"></video>
    -

    ...then the user agent must abort the fetching algorithm, - discarding any pending tasks generated by that algorithm (and - in particular, not adding any cues to the text track list of cues after the moment - the URL changed), and then queue a task that first changes the text track - readiness state to failed to load and - then fires a simple event named error at the track element. This task must use the DOM manipulation task source.

    + - -

  • Wait until the text track readiness state is no longer set to loading.

    • +
    Synchronising multiple media elements
    -

  • Wait until the track URL is no longer equal to URL, at - the same time as the text track mode is set to hidden or showing.

    • +
    Introduction
    -

  • Jump to the step labeled top.

    • +

    Each media element can have a MediaController. A + MediaController is an object that coordinates the playback of multiple media elements, for instance so that a sign-language interpreter + track can be overlaid on a video track, with the two being kept in sync.

    - +

    By default, a media element has no MediaController. An implicit + MediaController can be assigned using the mediagroup content attribute. An explicit + MediaController can be assigned directly using the controller IDL attribute.

    -

    Whenever a track element has its src attribute - set, changed, or removed, the user agent must synchronously empty the element's text - track's text track list of cues. (This also causes the algorithm above to stop - adding cues from the resource being obtained using the previously given URL, if any.)

    +

    Media elements with a MediaController are said + to be slaved to their controller. The MediaController modifies the playback + rate and the playback volume of each of the media elements + slaved to it, and ensures that when any of its slaved media + elements unexpectedly stall, the others are stopped at the same time.

    - +

    When a media element is slaved to a MediaController, its playback + rate is fixed to that of the other tracks in the same MediaController, and any + looping is disabled.

    + -
    The text track cue identifier -
    -

    Should be set to the empty string if the format has no obvious analogue to a per-cue - identifier.

    -
    -
    The text track cue pause-on-exit flag -
    -

    Should be set to false.

    -
    +
    Media controllers
    - + 
    enum MediaControllerPlaybackState { "waiting", "playing", "ended" };
+[Constructor]
+interface MediaController : EventTarget {
+  readonly attribute unsigned short readyState; // uses HTMLMediaElement.readyState's values
 
-  
+  readonly attribute TimeRanges buffered;
+  readonly attribute TimeRanges seekable;
+  readonly attribute unrestricted double duration;
+           attribute double currentTime;
+
+  readonly attribute boolean paused;
+  readonly attribute MediaControllerPlaybackState playbackState;
+  readonly attribute TimeRanges played;
+  void pause();
+  void unpause();
+  void play(); // calls play() on all media elements as well
 
+           attribute double defaultPlaybackRate;
+           attribute double playbackRate;
 
-  
    Text track API
    
+           attribute double volume;
+           attribute boolean muted;
 
-  
    interface TextTrackList : EventTarget {
-  readonly attribute unsigned long length;
-  getter TextTrack (unsigned long index);
-  TextTrack? getTrackById(DOMString id);
+           attribute EventHandler onemptied;
+           attribute EventHandler onloadedmetadata;
+           attribute EventHandler onloadeddata;
+           attribute EventHandler oncanplay;
+           attribute EventHandler oncanplaythrough;
+           attribute EventHandler onplaying;
+           attribute EventHandler onended;
+           attribute EventHandler onwaiting;
 
-           attribute EventHandler onchange;
-           attribute EventHandler onaddtrack;
-           attribute EventHandler onremovetrack;
+           attribute EventHandler ondurationchange;
+           attribute EventHandler ontimeupdate;
+           attribute EventHandler onplay;
+           attribute EventHandler onpause;
+           attribute EventHandler onratechange;
+           attribute EventHandler onvolumechange;
 };
    
 
   
    
 
-   
    media . textTracks . length
    
-   
    
-    
    Returns the number of text tracks associated with the media element (e.g. from track elements). This is the number of text tracks in the media element's list of text tracks.
    
-   
    
+   
    controller = new MediaController()
    
 
-   
    media . textTracks[ n ]
    
    
    
-    
    Returns the TextTrack object representing the nth text track in the media element's list of text tracks.
    
+
+    
    Returns a new MediaController object.
    
+
    
    
 
-   
    textTrack = media . textTracks . getTrackById( id )
    
+   
    media . controller [ = controller ]
    
 
    
    
 
-    
    Returns the TextTrack object with the given identifier, or null if no track has that identifier.
    
+    
    Returns the current MediaController for the media element, if any;
+    returns null otherwise.
    
+
+    
    Can be set, to set an explicit MediaController. Doing so removes the mediagroup attribute, if any.
    
 
    
    
 
-  
    
+   
    controller . readyState
    
 
-  
    
+   
    
 
-  
    A TextTrackList object represents a dynamically updating list of text tracks in a given order.
    
+    
    Returns the state that the MediaController was in the last time it fired events
+    as a result of reporting the controller state.
+    The values of this attribute are the same as for the readyState attribute of media
+    elements.
    
 
-  
    The textTracks attribute of media elements must return a TextTrackList object
-  representing the TextTrack objects of the text tracks
-  in the media element's list of text tracks, in the same order as in the
-  list of text tracks. The same object must be returned each time the attribute is
-  accessed. 
    
+   
    
 
-  
    The length attribute of a
-  TextTrackList object must return the number of text
-  tracks in the list represented by the TextTrackList object.
    
+   
    controller . buffered
    
 
-  
    The supported property indices of a TextTrackList object at any
-  instant are the numbers from zero to the number of text tracks in
-  the list represented by the TextTrackList object minus one, if any. If there are no
-  text tracks in the list, there are no supported property
-  indices.
    
+   
    
 
-  
    To determine the value of an indexed property of a TextTrackList
-  object for a given index index, the user agent must return the indexth text track in the list represented by the
-  TextTrackList object.
    
+    
    Returns a TimeRanges object that represents the intersection of the time ranges
+    for which the user agent has all relevant media data for all the slaved media elements.
    
 
-  
    The getTrackById(id) method must return the first TextTrack in the
-  TextTrackList object whose id IDL attribute
-  would return a value equal to the value of the id argument. When no tracks
-  match the given argument, the method must return null.
    
+   
    
 
-  
    
+   
    controller . seekable
    
 
-  
    
+   
    
 
-  
    enum TextTrackMode { "disabled",  "hidden",  "showing" };
-enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };
-interface TextTrack : EventTarget {
-  readonly attribute TextTrackKind kind;
-  readonly attribute DOMString label;
-  readonly attribute DOMString language;
+    
    Returns a TimeRanges object that represents the intersection of the time ranges
+    into which the user agent can seek for all the slaved media
+    elements.
    
 
-  readonly attribute DOMString id;
-  readonly attribute DOMString inBandMetadataTrackDispatchType;
+   
    
 
-           attribute TextTrackMode mode;
+   
    controller . duration
    
 
-  readonly attribute TextTrackCueList? cues;
-  readonly attribute TextTrackCueList? activeCues;
+   
    
 
-  void addCue(TextTrackCue cue);
-  void removeCue(TextTrackCue cue);
+    
    Returns the difference between the earliest playable moment and the latest playable moment
+    (not considering whether the data in question is actually buffered or directly seekable, but not
+    including time in the future for infinite streams). Will return zero if there is no media.
    
 
-           attribute EventHandler oncuechange;
-};
    + -
    +
    controller . currentTime [ = value ]
    -
    textTrack = media . addTextTrack( kind [, label [, language ] ] )
    -

    Creates and returns a new TextTrack object, which is also added to the - media element's list of text tracks.

    +

    Returns the current playback position, in seconds, as a position between zero + time and the current duration.

    + +

    Can be set, to seek to the given time.

    -
    textTrack . kind
    +
    controller . paused
    +
    -

    Returns the text track kind string.

    +

    Returns true if playback is paused; false otherwise. When this attribute is true, any + media element slaved to this controller will be stopped.

    -
    textTrack . label
    +
    controller . playbackState
    +
    -

    Returns the text track label, if there is one, or the empty string otherwise - (indicating that a custom label probably needs to be generated from the other attributes of the - object if the object is exposed to the user).

    +

    Returns the state that the MediaController was in the last time it fired events + as a result of reporting the controller state. + The value of this attribute is either "playing", indicating that the media is actively + playing, "ended", indicating that the media is + not playing because playback has reached the end of all the slaved media elements, + or "waiting", indicating that the media is not + playing for some other reason (e.g. the MediaController is paused).

    -
    textTrack . language
    -
    -

    Returns the text track language string.

    -
    +
    controller . pause()
    -
    textTrack . id
    -

    Returns the ID of the given track.

    - -

    For in-band tracks, this is the ID that can be used with a fragment identifier if the format - supports the Media Fragments URI syntax, and that can be used with the getTrackById() method.

    - -

    For TextTrack objects corresponding to track elements, this is the - ID of the track element.

    +

    Sets the paused attribute to true.

    -
    textTrack . inBandMetadataTrackDispatchType
    +
    controller . unpause()
    +
    -

    Returns the text track in-band metadata track dispatch type string.

    +

    Sets the paused attribute to false.

    -
    textTrack . mode [ = value ]
    -
    - -

    Returns the text track mode, represented by a string from the following - list:

    +
    controller . play()
    -
    -
    "disabled"
    -
    -

    The text track disabled mode.

    -
    -
    "hidden"
    -
    -

    The text track hidden mode.

    -
    -
    "showing"
    -
    -

    The text track showing mode.

    -
    -
    +
    -

    Can be set, to change the mode.

    +

    Sets the paused attribute to false and + invokes the play() method of each slaved media element.

    -
    textTrack . cues
    -
    -

    Returns the text track list of cues, as a TextTrackCueList object.

    -
    +
    controller . played
    -
    textTrack . activeCues
    -

    Returns the text track cues from the text track - list of cues that are currently active (i.e. that start before the current playback - position and end after it), as a TextTrackCueList object.

    +

    Returns a TimeRanges object that represents the union of the time ranges in all + the slaved media elements that have been played.

    -
    textTrack . addCue( cue )
    -
    -

    Adds the given cue to textTrack's text track list of cues.

    -
    +
    controller . defaultPlaybackRate [ = value ]
    -
    textTrack . removeCue( cue )
    -

    Removes the given cue from textTrack's text track list of cues.

    -
    - -
    - -
    - -

    The addTextTrack(kind, label, language) method of media elements, when invoked, must run the following steps:

    -
      +

      Returns the default rate of playback.

      -
    1. +

      Can be set, to change the default rate of playback.

      -

      Create a new TextTrack object.

      +

      This default rate has no direct effect on playback, but if the user switches to a + fast-forward mode, when they return to the normal playback mode, it is expected that rate of + playback (playbackRate) will be returned + to this default rate.

      -
      2. + -
    2. +
      controller . playbackRate [ = value ]
      -

      Create a new text track corresponding to the new object, and set its text - track kind to kind, its text track label to label, its text track language to language, its - text track readiness state to the text track loaded state, its - text track mode to the text track hidden mode, and its text - track list of cues to an empty list.

      +
      -

      Initially, the text track list of cues is not associated with any rules - for updating the text track rendering. When a text track cue is added to it, - the text track list of cues has its rules permanently set accordingly.

      +

      Returns the current rate of playback.

      -
      3. +

      Can be set, to change the rate of playback.

      -
    3. + -

      Add the new text track to the media element's list of text - tracks.

      +
      controller . volume [ = value ]
      -
      4. +
      -
    4. +

      Returns the current playback volume multiplier, as a number in the range 0.0 to 1.0, where + 0.0 is the quietest and 1.0 the loudest.

      -

      Queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and - that uses the TrackEvent interface, with the track attribute initialised to the new text - track's TextTrack object, at the media element's textTracks attribute's TextTrackList - object.

      +

      Can be set, to change the volume multiplier.

      -
      5. +

      Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

      -
    5. +
      6. -

      Return the new TextTrack object.

      +
      controller . muted [ = value ]
      - +
      -
    +

    Returns true if all audio is muted (regardless of other attributes either on the controller + or on any media elements slaved to this controller), and + false otherwise.

    -
    +

    Can be set, to change whether the audio is muted or not.

    -

    The kind attribute must return the - text track kind of the text track that the TextTrack object - represents.

    + -

    The label attribute must return the - text track label of the text track that the TextTrack - object represents.

    + -

    The language attribute must return the - text track language of the text track that the TextTrack - object represents.

    +
    -

    The id attribute returns the track's - identifier, if it has one, or the empty string otherwise. For tracks that correspond to - track elements, the track's identifier is the value of the element's id attribute, if any. For in-band tracks, the track's identifier is - specified by the media resource. If the media resource is in a format - that supports the Media Fragments URI fragment identifier syntax, the identifier - returned for a particular track must be the same identifier that would enable the track if used as - the name of a track in the track dimension of such a fragment identifier.

    +

    A media element can have a current media controller, which is a + MediaController object. When a media element is created without a mediagroup attribute, it does not have a current media + controller. (If it is created with such an attribute, then that attribute + initializes the current media controller, as defined below.)

    -

    The inBandMetadataTrackDispatchType - attribute must return the text track in-band metadata track dispatch type of the - text track that the TextTrack object represents.

    +

    The slaved media elements of a MediaController are the media elements whose current media controller is that + MediaController. All the slaved media elements of a + MediaController must use the same clock for their definition of their media + timeline's unit time. When the user agent is required to act on each slaved media element in turn, they must be processed in the order that they + were last associated with the MediaController.

    -

    The mode attribute, on getting, must return - the string corresponding to the text track mode of the text track that - the TextTrack object represents, as defined by the following list:

    +
    -
    -
    "disabled"
    -
    The text track disabled mode.
    -
    "hidden"
    -
    The text track hidden mode.
    -
    "showing"
    -
    The text track showing mode.
    -
    +

    The controller attribute on a media + element, on getting, must return the element's current media controller, if + any, or null otherwise. On setting, the user agent must run the following steps:

    -

    On setting, if the new value isn't equal to what the attribute would currently return, the new - value must be processed as follows:

    +
      -
      +

    1. Let m be the media element in question.

      2. -
      If the new value is "disabled"
      +

    2. Let old controller be m's current media + controller, if it currently has one, and null otherwise.

      3. -
      +

    3. Let new controller be null.

      4. -

      Set the text track mode of the text track that the - TextTrack object represents to the text track disabled mode.

      +

    4. Let m have no current media controller, if it currently + has one.

      5. -
      +

    5. Remove the element's mediagroup content + attribute, if any.

      6. -
      If the new value is "hidden"
      +

    6. If the new value is null, then jump to the update controllers step below.

      7. -
      +

    7. Let m's current media controller be the new + value.

      8. -

      Set the text track mode of the text track that the - TextTrack object represents to the text track hidden mode.

      +

    8. Let new controller be m's current media + controller.

      9. -
      +

    9. Bring the media element up to speed with its new media controller.

      10. -
      If the new value is "showing"
      +

    10. Update controllers: If old controller and new + controller are the same (whether both null or both the same controller) then abort these + steps.

      11. -
      +

    11. If old controller is not null and still has one or more slaved + media elements, then report the controller state for old + controller.

      12. -

      Set the text track mode of the text track that the - TextTrack object represents to the text track showing mode.

      +

    12. If new controller is not null, then report the controller + state for new controller.

      13. -
      +
    - +
    -

    If the text track mode of the text track that the - TextTrack object represents is not the text track disabled mode, then - the cues attribute must return a - live TextTrackCueList object that represents the subset of the - text track list of cues of the text track that the - TextTrack object represents whose end - times occur at or after the earliest possible position when the script - started, in text track cue order. Otherwise, it must return null. When an - object is returned, the same object must be returned each time.

    +

    The MediaController() constructor, when + invoked, must return a newly created MediaController object.

    -

    The earliest possible position when the script started is whatever the - earliest possible position was the last time the event loop reached step - 1.

    +
    -

    If the text track mode of the text track that the - TextTrack object represents is not the text track disabled mode, then - the activeCues attribute must return a - live TextTrackCueList object that represents the subset of the - text track list of cues of the text track that the - TextTrack object represents whose active flag was set when the script - started, in text track cue order. Otherwise, it must return null. When an - object is returned, the same object must be returned each time.

    +

    The readyState attribute must + return the value to which it was most recently set. When the MediaController object + is created, the attribute must be set to the value 0 (HAVE_NOTHING). The value is updated by the report the + controller state algorithm below.

    -

    A text track cue's active flag was set when the script started if its - text track cue active flag was set the last time the event loop reached - step 1.

    +

    The seekable attribute must return + a new static normalised TimeRanges object that represents the + intersection of the ranges of the media resources of the + slaved media elements that the user agent is able to seek to, at the time the + attribute is evaluated.

    -
    +

    The buffered attribute must return + a new static normalised TimeRanges object that represents the + intersection of the ranges of the media resources of the + slaved media elements that the user agent has buffered, at the time the attribute is + evaluated. Users agents must accurately determine the ranges available, even for media streams + where this can only be determined by tedious inspection.

    -

    The addCue(cue) method - of TextTrack objects, when invoked, must run the following steps:

    +

    The duration attribute must return + the media controller duration.

    -
      +

      Every 15 to 250ms, or whenever the MediaController's media controller + duration changes, whichever happens least often, the user agent must queue a + task to fire a simple event named durationchange at the + MediaController. If the MediaController's media controller + duration decreases such that the media controller position is greater than the + media controller duration, the user agent must immediately seek the media + controller to media controller duration.

      -

    1. If the text track list of cues does not yet have any associated rules - for updating the text track rendering, then associate the text track list of - cues with the rules for updating the text track rendering appropriate to cue.

      +

      The currentTime attribute must + return the media controller position on getting, and on setting must seek the + media controller to the new value.

      -

    2. If text track list of cues' associated rules for updating the text - track rendering are not the same rules for updating the text track rendering - as appropriate for cue, then throw an InvalidStateError - exception and abort these steps.

      +

      Every 15 to 250ms, or whenever the MediaController's media controller + position changes, whichever happens least often, the user agent must queue a + task to fire a simple event named timeupdate at the + MediaController.

      -

    3. If the given cue is in a text track list of cues, then - remove cue from that text track list of cues.

      4. +
      -

    4. Add cue to the method's TextTrack object's text - track's text track list of cues.

      5. +

      When a MediaController is created it is a playing media controller. It + can be changed into a paused media controller and back either via the user agent's user + interface (when the element is exposing a user + interface to the user) or by script using the APIs defined in this section (see below).

      -
    +

    The paused attribute must return + true if the MediaController object is a paused media controller, and + false otherwise.

    -

    The removeCue(cue) - method of TextTrack objects, when invoked, must run the following steps:

    +

    When the pause() method is invoked, + if the MediaController is a playing media controller then the user agent + must change the MediaController into a paused media controller, + queue a task to fire a simple event named pause at the MediaController, and then + report the controller state of the MediaController.

    -
      +

      When the unpause() method is + invoked, if the MediaController is a paused media controller, the user + agent must change the MediaController into a playing media controller, + queue a task to fire a simple event named play at the MediaController, and then + report the controller state of the MediaController.

      -

    1. If the given cue is not currently listed in the method's - TextTrack object's text track's text track list of cues, - then throw a NotFoundError exception and abort these steps.

      2. +

      When the play() method is invoked, the + user agent must invoke the play() method of each slaved media element in turn, and then invoke the unpause method of the MediaController.

      -

    2. Remove cue from the method's TextTrack object's - text track's text track list of cues.

      3. +

      The playbackState attribute + must return the value to which it was most recently set. When the MediaController + object is created, the attribute must be set to the value "waiting". The value is updated by the report the + controller state algorithm below.

      -
    +

    The played attribute must return a + new static normalised TimeRanges object that represents the union of the + ranges of points on the media timelines of the media resources of the slaved media elements that the + user agent has so far reached through the usual monotonic increase of their current playback positions during normal playback, at the time the + attribute is evaluated.

    -
    +
    -
    +

    A MediaController has a media controller default playback rate and a + media controller playback rate, which must both be set to 1.0 when the + MediaController object is created.

    -

    In this example, an audio element is used to play a specific sound-effect from a - sound file containing many sound effects. A cue is used to pause the audio, so that it ends - exactly at the end of the clip, even if the browser is busy running some script. If the page had - relied on script to pause the audio, then the start of the next clip might be heard if the - browser was not able to run the script at the exact time specified.

    +

    The defaultPlaybackRate + attribute, on getting, must return the MediaController's media controller + default playback rate, and on setting, must set the MediaController's + media controller default playback rate to the new value, then queue a + task to fire a simple event named ratechange at the + MediaController.

    - 
    var sfx = new Audio('sfx.wav');
-var sounds = sfx.addTextTrack('metadata');
+  
    The playbackRate attribute, on
+  getting, must return the MediaController's media controller playback
+  rate, and on setting, must set the MediaController's media controller
+  playback rate to the new value, then queue a task to fire a simple
+  event named ratechange at the
+  MediaController.
    
 
-// add sounds we care about
-function addFX(start, end, name) {
-  var cue = new VTTCue(start, end, '');
-  cue.id = name;
-  cue.pauseOnExit = true;
-  sounds.addCue(cue);
-}
-addFX(12.783, 13.612, 'dog bark');
-addFX(13.612, 15.091, 'kitten mew'))
+  
    
 
-function playSound(id) {
-  sfx.currentTime = sounds.getCueById(id).startTime;
-  sfx.play();
-}
+  
    A MediaController has a media controller volume multiplier, which must
+  be set to 1.0 when the MediaController object is created, and a media controller
+  mute override, much must initially be false.
    
 
-// play a bark as soon as we can
-sfx.oncanplaythrough = function () {
-  playSound('dog bark');
-}
-// meow when the user tries to leave
-window.onbeforeunload = function () {
-  playSound('kitten mew');
-  return 'Are you sure you want to leave this awesome page?';
-}
    +

    The volume attribute, on getting, + must return the MediaController's media controller volume multiplier, + and on setting, if the new value is in the range 0.0 to 1.0 inclusive, must set the + MediaController's media controller volume multiplier to the new value + and queue a task to fire a simple event named volumechange at the + MediaController. If the new value is outside the range 0.0 to 1.0 inclusive, then, on + setting, an IndexSizeError exception must be thrown instead.

    -
    +

    The muted attribute, on getting, must + return the MediaController's media controller mute override, and on + setting, must set the MediaController's media controller mute override + to the new value and queue a task to fire a simple event named volumechange at the + MediaController.

    - 
    interface TextTrackCueList {
-  readonly attribute unsigned long length;
-  getter TextTrackCue (unsigned long index);
-  TextTrackCue? getCueById(DOMString id);
-};
    - -
    +

    The media resources of all the slaved media + elements of a MediaController have a defined temporal relationship which + provides relative offsets between the zero time of each such media resource: for + media resources with a timeline offset, their + relative offsets are the difference between their timeline offset; the zero times of + all the media resources without a timeline offset + are not offset from each other (i.e. the origins of their timelines are cotemporal); and finally, + the zero time of the media resource with the earliest timeline offset + (if any) is not offset from the zero times of the media + resources without a timeline offset (i.e. the origins of media resources without a timeline offset are further cotemporal + with the earliest defined point on the timeline of the media resource with the + earliest timeline offset).

    -
    cuelist . length
    -
    -

    Returns the number of cues in the list.

    -
    +

    The media resource end position of a media resource in a media + element is defined as follows: if the media resource has a finite and known + duration, the media resource end position is the duration of the media + resource's timeline (the last defined position on that timeline); otherwise, the + media resource's duration is infinite or unknown, and the media resource end + position is the time of the last frame of media data currently available for + that media resource.

    -
    cuelist[index]
    -
    -

    Returns the text track cue with index index in the list. The cues are sorted in text track cue order.

    -
    +

    Each MediaController also has its own defined timeline. On this timeline, all the + media resources of all the slaved media elements + of the MediaController are temporally aligned according to their defined offsets. The + media controller duration of that MediaController is the time from the + earliest earliest possible position, relative to this MediaController + timeline, of any of the media resources of the slaved + media elements of the MediaController, to the time of the latest media + resource end position of the media resources of the + slaved media elements of the MediaController, again relative to this + MediaController timeline.

    -
    cuelist . getCueById( id )
    -
    -

    Returns the first text track cue (in text track cue order) with text track cue identifier id.

    -

    Returns null if none of the cues have the given identifier or if the argument is the empty string.

    -
    +

    Each MediaController has a media controller position. This is the time + on the MediaController's timeline at which the user agent is trying to play the + slaved media elements. When a MediaController is created, its + media controller position is initially zero.

    -
    +

    When the user agent is to bring a media element up to speed with its new media controller, it must seek that media element to the + MediaController's media controller position relative to the media + element's timeline.

    -
    +

    When the user agent is to seek the media controller to a particular new playback position, it must follow these steps:

    -

    A TextTrackCueList object represents a dynamically updating list of text track cues in a given order.

    +
      -

      The length attribute must return - the number of cues in the list represented by the - TextTrackCueList object.

      +

    1. If the new playback position is less than zero, then set it to + zero.

      2. -

      The supported property indices of a TextTrackCueList object at any - instant are the numbers from zero to the number of cues in the - list represented by the TextTrackCueList object minus one, if any. If there are no - cues in the list, there are no supported property - indices.

      +

    2. If the new playback position is greater than the media + controller duration, then set it to the media controller duration.

      3. -

      To determine the value of an indexed property for a given index index, the user agent must return the indexth text track - cue in the list represented by the TextTrackCueList object.

      +

    3. Set the media controller position to the new playback + position.

      4. -

      The getCueById(id) method, when called with an argument other than the empty string, - must return the first text track cue in the list represented by the - TextTrackCueList object whose text track cue identifier is id, if any, or null otherwise. If the argument is the empty string, then the method - must return null.

      +

    4. Seek each slaved + media element to the new playback position relative to the media + element timeline.

      5. -
    + -
    +

    A MediaController is a restrained media controller if the + MediaController is a playing media controller, but either at least one + of its slaved media elements whose autoplaying flag is true still has + its paused attribute set to true, or, all of its + slaved media elements have their paused + attribute set to true.

    - 
    interface TextTrackCue : EventTarget {
-  readonly attribute TextTrack? track;
+  
    A MediaController is a blocked media controller if the
+  MediaController is a paused media controller, or if any of its
+  slaved media elements are blocked media
+  elements, or if any of its slaved media elements whose autoplaying
+  flag is true still have their paused attribute set to
+  true, or if all of its slaved media elements have their paused attribute set to true.
    
 
-           attribute DOMString id;
-           attribute double startTime;
-           attribute double endTime;
-           attribute boolean pauseOnExit;
+  
    A media element is blocked on its media controller if the
+  MediaController is a blocked media controller, or if its media
+  controller position is either before the media resource's earliest
+  possible position relative to the MediaController's timeline or after the end
+  of the media resource relative to the MediaController's timeline.
    
 
-           attribute EventHandler onenter;
-           attribute EventHandler onexit;
-};
    +

    When a MediaController is not a blocked media + controller and it has at least one slaved media + element whose Document is a fully active Document, + the MediaController's media controller position must increase + monotonically at media controller playback rate units of time on the + MediaController's timeline per unit time of the clock used by its slaved media + elements.

    -
    +

    When the zero point on the timeline of a MediaController moves relative to the + timelines of the slaved media elements by a time difference ΔT, the MediaController's media controller + position must be decremented by ΔT.

    -
    cue . track
    -
    -

    Returns the TextTrack object to which this - text track cue belongs, if any, or null - otherwise.

    -
    +

    In some situations, e.g. when playing back a live stream without buffering + anything, the media controller position would increase monotonically as described + above at the same rate as the ΔT described in the previous paragraph + decreases it, with the end result that for all intents and purposes, the media controller + position would appear to remain constant (probably with the value 0).

    -
    cue . id [ = value ]
    -
    -

    Returns the text track cue identifier.

    -

    Can be set.

    -
    +
    -
    cue . startTime [ = value ]
    -
    -

    Returns the text track cue start time, in seconds.

    -

    Can be set.

    -
    +

    A MediaController has a most recently reported readiness state, which + is a number from 0 to 4 derived from the numbers used for the media element readyState attribute, and a most recently reported + playback state, which is either playing, waiting, or ended.

    -
    cue . endTime [ = value ]
    -
    -

    Returns the text track cue end time, in seconds.

    -

    Can be set.

    -
    +

    When a MediaController is created, its most recently reported readiness + state must be set to 0, and its most recently reported playback state must be + set to waiting.

    -
    cue . pauseOnExit [ = value ]
    -
    -

    Returns true if the text track cue pause-on-exit flag is set, false otherwise.

    -

    Can be set.

    -
    +

    When a user agent is required to report the controller state for a + MediaController, the user agent must run the following steps:

    -
    +
      -
      +
    1. -

      The track attribute, on getting, must - return the TextTrack object of the text track in whose list of cues the text track cue that the - TextTrackCue object represents finds itself, if any; or null otherwise.

      +

      If the MediaController has no slaved media elements, let new readiness state be 0.

      -

      The id attribute, on getting, must return - the text track cue identifier of the text track cue that the - TextTrackCue object represents. On setting, the text track cue - identifier must be set to the new value.

      +

      Otherwise, let it have the lowest value of the readyState IDL attributes of all of its slaved media + elements.

      -

      The startTime attribute, on - getting, must return the text track cue start time of the text track cue - that the TextTrackCue object represents, in seconds. On setting, the text track - cue start time must be set to the new value, interpreted in seconds; then, if the - TextTrackCue object's text track cue is in a text track's - list of cues, and that text track is in - a media element's list of text tracks, and the media - element's show poster flag is not set, then run the time marches on steps for that media element.

      +
      2. -

      The endTime attribute, on getting, - must return the text track cue end time of the text track cue that the - TextTrackCue object represents, in seconds. On setting, the text track cue end - time must be set to the new value, interpreted in seconds; then, if the - TextTrackCue object's text track cue is in a text track's - list of cues, and that text track is in - a media element's list of text tracks, and the media - element's show poster flag is not set, then run the time marches on steps for that media element.

      +
    2. -

      The pauseOnExit attribute, on - getting, must return true if the text track cue pause-on-exit flag of the text - track cue that the TextTrackCue object represents is set; or false otherwise. - On setting, the text track cue pause-on-exit flag must be set if the new value is - true, and must be unset otherwise.

      +

      If the MediaController's most recently reported readiness state is + less than the new readiness state, then run these substeps:

      -
      3. +
        +

      1. Let next state be the MediaController's most + recently reported readiness state.

        2. -
        Text tracks describing chapters
        +

      2. Loop: Increment next state by one.

        3. -

        Chapters are segments of a media resource with a given title. Chapters can be - nested, in the same way that sections in a document outline can have subsections.

        +
      3. -

        Each text track cue in a text track being used for describing - chapters has three key features: the text track cue start time, giving the start time - of the chapter, the text track cue end time, giving the end time of the chapter, and - the text track cue data giving the chapter title.

        +

        Queue a task to run the following steps:

        -
        +
          -

          The rules for constructing the chapter tree from a text track are as follows. They - produce a potentially nested list of chapters, each of which have a start time, end time, title, - and a list of nested chapters. This algorithm discards cues that do not correctly nest within each - other, or that are out of order.

          +

        1. Set the MediaController's readyState attribute to the value next state.

          2. -
            +

          1. Fire a simple event at the MediaController object, whose + name is the event name corresponding to the value of next state given in + the table below.

            2. -

          2. Let list be a copy of the list - of cues of the text track being processed.

            3. +
          -

        2. Remove from list any text track cue whose text - track cue end time is before its text track cue start time.

          3. + -

        3. Let output be an empty list of chapters, where a chapter is a record - consisting of a start time, an end time, a title, and a (potentially empty) list of nested - chapters. For the purpose of this algorithm, each chapter also has a parent chapter.

          4. +

        4. If next state is less than new readiness state, + then return to the step labeled loop.

          5. -

        5. Let current chapter be a stand-in chapter whose start time is negative - infinity, whose end time is positive infinity, and whose list of nested chapters is output. (This is just used to make the algorithm easier to describe.)

          6. +
        - -

      4. Loop: If list is empty, jump to the step labeled - end.

        5. +

        Otherwise, if the MediaController's most recently reported readiness + state is greater than new readiness state then queue a + task to fire a simple event at the MediaController object, + whose name is the event name corresponding to the value of new readiness + state given in the table below.

        - -

      5. Let current cue be the first cue in list, and then - remove it from list.

        6. + + + + + + + + + +
        Value of new readiness state + Event name -

      6. If current cue's text track cue start time is less than - the start time of current chapter, then return to the step labeled - loop.

        +
        7. 0 + emptied -

      7. While current cue's text track cue start time is greater - than or equal to current chapter's end time, let current - chapter be current chapter's parent chapter.

        8. +
        1 + loadedmetadata -

      8. If current cue's text track cue end time is greater than - the end time of current chapter, then return to the step labeled - loop.

        +
        9. 2 + loadeddata -
      9. +
        10. 3 + canplay -

        Create a new chapter new chapter, whose start time is current cue's text track cue start time, whose end time is current cue's text track cue end time, whose title is current cue's text track cue data interpreted according to its - rules for rendering the cue in isolation, and whose list of nested chapters is - empty.

        +
        4 + canplaythrough -

        For WebVTT, the rules for rendering the cue in isolation are the - rules for interpreting WebVTT cue text.

        +
        -

      10. Append new chapter to current chapter's list of - nested chapters, and let current chapter be new chapter's - parent.

        11. +

      11. Let the MediaController's most recently reported readiness state + be new readiness state.

        12. -

      12. Let current chapter be new chapter.

        13. +
      13. -

      14. Return to the step labeled loop.

        15. - +

        Initialise new playback state by setting it to the state given for the + first matching condition from the following list:

        -

      15. End: Return output.

        16. +
        -
      +
      If the MediaController has no slaved media elements
      -
    +
    Let new playback state be waiting.
    -
    +
    If all of the MediaController's slaved media elements have + ended playback and the media controller playback rate is positive or + zero
    -

    The following snippet of a WebVTT file shows how nested chapters can be marked - up. The file describes three 50-minute chapters, "Astrophysics", "Computational Physics", and - "General Relativity". The first has three subchapters, the second has four, and the third has - two.

    +
    Let new playback state be ended.
    - 
    WEBVTT
+     
    If the MediaController is a blocked media controller
    
 
-00:00:00.000 --> 00:50:00.000
-Astrophysics
+     
    Let new playback state be waiting.
    
 
-00:00:00.000 --> 00:10:00.000
-Introduction to Astrophysics
+     
    Otherwise
    
 
-00:10:00.000 --> 00:45:00.000
-The Solar System
+     
    Let new playback state be playing.
    
 
-00:00:00.000 --> 00:10:00.000
-Coursework Description
+    
 
-00:50:00.000 --> 01:40:00.000
-Computational Physics
+   
 
-00:50:00.000 --> 00:55:00.000
-Introduction to Programming
+   
  • If the MediaController's most recently reported playback state
+   is not equal to new playback state and the new playback
+   state is ended, then queue a task that, if the
+   MediaController object is a playing media controller, and all of the
+   MediaController's slaved media elements have still ended
+   playback, and the media controller playback rate is still positive or zero,
+   changes the MediaController object to a paused media controller and
+   then fires a simple event named pause at the MediaController
+   object.
    • 
 
-00:55:00.000 --> 01:30:00.000
-Data Structures
+   
  • 
 
-01:30:00.000 --> 01:35:00.000
-Answers to Last Exam
+    
    If the MediaController's most recently reported playback state is
+    not equal to new playback state then queue a task to run the
+    following steps:
    
 
-01:35:00.000 --> 01:40:00.000
-Coursework Description
+    
      
 
-01:40:00.000 --> 02:30:00.000
-General Relativity
+     
    1. Set the MediaController's playbackState attribute to the value given in
+     the second column of the row of the following table whose first column contains the new playback state.
      2. 
 
-01:40:00.000 --> 02:00:00.000
-Tensor Algebra
+     
    2. Fire a simple event at the MediaController object, whose name
+     is the value given in the third column of the row of the following table whose first column
+     contains the new playback state.
      3. 
 
-02:00:00.000 --> 02:30:00.000
-The General Relativistic Field Equations
    • + + + + + + + + + +
    New playback state + New value for playbackState + Event name +
    playing + "playing" + playing +
    waiting + "waiting" + waiting +
    ended + "ended" + ended +
    -
    + +

  • Let the MediaController's most recently reported playback state + be new playback state.

    • -
    + -
    Event handlers for objects of the text track APIs
    +
    -

    The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL - attributes, by all objects implementing the TextTrackList interface:

    +

    The following are the event handlers (and their corresponding event handler event types) that must be supported, as event handler IDL attributes, + by all objects implementing the MediaController interface:

    -
    Event handler Event handler event type
    onchange change -
    onaddtrack addtrack -
    onremovetrack removetrack -
    - -

    The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL - attributes, by all objects implementing the TextTrack interface:

    - - - - -
    Event handler Event handler event type +
    onemptied emptied +
    onloadedmetadata loadedmetadata +
    onloadeddata loadeddata +
    oncanplay canplay +
    oncanplaythrough canplaythrough +
    onplaying playing +
    onended ended +
    onwaiting waiting
    oncuechange cuechange +
    ondurationchange durationchange +
    ontimeupdate timeupdate +
    onplay play +
    onpause pause +
    onratechange ratechange +
    onvolumechange volumechange
    -

    The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL - attributes, by all objects implementing the TextTrackCue interface:

    +
    - - - -
    Event handler Event handler event type -
    onenter enter -
    onexit exit -
    +

    The task source for the tasks listed in this + section is the DOM manipulation task source.

    +
    Assigning a media controller declaratively
    -
    Best practices for metadata text tracks
    +

    The mediagroup content attribute on media elements can be used to link multiple media elements together by implicitly creating a MediaController. The + value is text; media elements with the same value are + automatically linked by the user agent.

    - +
    -

    Text tracks can be used for storing data relating to the media data, for interactive or - augmented views.

    +

    When a media element is created with a mediagroup attribute, and when a media element's + mediagroup attribute is set, changed, or removed, the + user agent must run the following steps:

    -

    For example, a page showing a sports broadcast could include information about the current - score. Suppose a robotics competition was being streamed live. The image could be overlayed with - the scores, as follows:

    +
      -

      +

    1. Let m be the media element in question.

      2. -

      In order to make the score display render correctly whenever the user seeks to an arbitrary - point in the video, the metadata text track cues need to be as long as is appropriate for the - score. For example, in the frame above, there would be maybe one cue that lasts the length of the - match that gives the match number, one cue that lasts until the blue alliance's score changes, and - one cue that lasts until the red alliance's score changes. If the video is just a stream of the - live event, the time in the bottom right would presumably be automatically derived from the - current video time, rather than based on a cue. However, if the video was just the highlights, - then that might be given in cues also.

      +

    2. Let old controller be m's current media + controller, if it currently has one, and null otherwise.

      3. -

      The following shows what fragments of this could look like in a WebVTT file:

      +

    3. Let new controller be null.

      4. - 
      WEBVTT
+   
    4. Let m have no current media controller, if it currently
+   has one.
      5. 
 
-...
+   
    5. If m's mediagroup attribute
+   is being removed, then jump to the update controllers step below.
      6. 
 
-05:10:00.000 --> 05:12:15.000
-matchtype:qual
-matchnumber:37
+   
    6. 
 
-...
+    
      If there is another media element whose Document is the same as
+    m's Document (even if one or both of these elements are not
+    actually in the Document), and which
+    also has a mediagroup attribute, and whose mediagroup attribute has the same value as the new value of
+    m's mediagroup attribute, then
+    let controller be that media element's current media
+    controller.
      
 
-05:11:02.251 --> 05:11:17.198
-red:78
+    
      Otherwise, let controller be a newly created
+    MediaController.
      
 
-05:11:03.672 --> 05:11:54.198
-blue:66
+   
      7. 
 
-05:11:17.198 --> 05:11:25.912
-red:80
+   
    7. Let m's current media controller be controller.
      8. 
 
-05:11:25.912 --> 05:11:26.522
-red:83
+   
    8. Let new controller be m's current media
+   controller.
      9. 
 
-05:11:26.522 --> 05:11:26.982
-red:86
+   
    9. Bring the media element up to speed with its new media
+   controller.
      10. 
 
-05:11:26.982 --> 05:11:27.499
-red:89
+   
    10. Update controllers: If old
+   controller and new controller are the
+   same (whether both null or both the same controller) then abort
+   these steps.
      11. 
 
-...
      +

    11. If old controller is not null and still has one or more slaved + media elements, then report the controller state for old + controller.

      12. -

      The key here is to notice that the information is given in cues that span the length of time to - which the relevant event applies. If, instead, the scores were given as zero-length (or very - brief, nearly zero-length) cues when the score changes, for example saying "red+2" at - 05:11:17.198, "red+3" at 05:11:25.912, etc, problems arise: primarily, seeking is much harder to - implement, as the script has to walk the entire list of cues to make sure that no notifications - have been missed; but also, if the cues are short it's possible the script will never see that - they are active unless it listens to them specifically.

      +

    12. If new controller is not null, then report the controller + state for new controller.

      13. -

      When using cues in this manner, authors are encouraged to use the cuechange event to update the current annotations. (In - particular, using the timeupdate event would be less - appropriate as it would require doing work even when the cues haven't changed, and, more - importantly, would introduce a higher latency between when the metatata cues become active and - when the display is updated, since timeupdate events - are rate-limited.)

      +
    +

    The mediaGroup IDL attribute on media elements must reflect the mediagroup content attribute.

    +
    -
    User interface
    +
    -

    The controls attribute is a boolean - attribute. If present, it indicates that the author has not provided a scripted controller - and would like the user agent to provide its own set of controls.

    +

    Multiple media elements referencing the same media + resource will share a single network request. This can be used to efficiently play two + (video) tracks from the same media resource in two different places on the screen. + Used with the mediagroup attribute, these elements can + also be kept synchronised.

    -
    +

    In this example, a sign-languge interpreter track from a movie file is overlaid on the primary + video track of that same video file using two video elements, some CSS, and an + implicit MediaController:

    -

    If the attribute is present, or if scripting is - disabled for the media element, then the user agent should expose a user - interface to the user. This user interface should include features to begin playback, pause - playback, seek to an arbitrary position in the content (if the content supports arbitrary - seeking), change the volume, change the display of closed captions or embedded sign-language - tracks, select different audio tracks or turn on audio descriptions, and show the media content in - manners more suitable to the user (e.g. full-screen video or in an independent resizable window). - Other controls may also be made available.

    + 
    <article>
+ <style scoped>
+  div { margin: 1em auto; position: relative; width: 400px; height: 300px; }
+  video { position; absolute; bottom: 0; right: 0; }
+  video:first-child { width: 100%; height: 100%; }
+  video:last-child { width: 30%; }
+ </style>
+ <div>
+  <video src="movie.vid#track=Video&amp;track=English" autoplay controls mediagroup=movie></video>
+  <video src="movie.vid#track=sign" autoplay mediagroup=movie></video>
+ </div>
+</article>
    -

    If the media element has a current media controller, then the user - agent should expose audio tracks from all the slaved media elements (although - avoiding duplicates if the same media resource is being used several times). If a - media resource's audio track exposed in this way has no known name, and it is the - only audio track for a particular media element, the user agent should use the - element's title attribute, if any, as the name (or as part of the - name) of that track.

    +
    -

    Even when the attribute is absent, however, user agents may provide controls to affect playback - of the media resource (e.g. play, pause, seeking, and volume controls), but such features should - not interfere with the page's normal rendering. For example, such features could be exposed in the - media element's context menu. The user agent may implement this simply by exposing a user interface to the user as - described above (as if the controls attribute was - present).

    -

    If the user agent exposes a user interface to - the user by displaying controls over the media element, then the user agent - should suppress any user interaction events while the user agent is interacting with this - interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at - elements on the page.)

    + -

    Features such as fast-forward or rewind must be implemented by only changing the playbackRate attribute (and not the defaultPlaybackRate - attribute). Again, when a media element has a current media controller, - the attributes with those names on that MediaController object must be used; - otherwise, the attributes with those names on the media element itself must be used.

    -

    When a media element has a current media controller, seeking must be - implemented in terms of the currentTime - attribute on that MediaController object. Otherwise, the user agent must directly - seek to the requested position in the media - element's media timeline. For media resources where seeking to an arbitrary - position would be slow, user agents are encouraged to use the approximate-for-speed flag - when seeking in response to the user manipulating an approximate position interface such as a seek - bar.

    + +
    Timed text tracks
    -

    When a media element has a current media controller, user agents may - additionally provide the user with controls that directly manipulate an individual media - element without affecting the MediaController, but such features are - considered relatively advanced and unlikely to be useful to most users.

    +
    Text track model
    -

    The activation behavior of a media element that is exposing a user interface to the user must be - to run the following steps:

    +

    A media element can have a group of associated text + tracks, known as the media element's list of text tracks. The text tracks are sorted as follows:

    -
      +
        -

      1. If the media element has a current media controller, and that - current media controller is a restrained media controller, then invoke - the play() method of the - MediaController.

        2. +
      2. The text tracks corresponding to track element + children of the media element, in tree order.
        3. -

      3. Otherwise, if the media element has a current media controller, - and that current media controller is a paused media controller, then - invoke the unpause() method of the - MediaController.

        4. +
      4. Any text tracks added using the addTextTrack() method, in the order they were added, oldest + first.
        5. -

      5. Otherwise, if the media element has a current media controller, - then that current media controller is a playing media controller; - invoke the pause() method of the - MediaController.

        6. +
      6. Any media-resource-specific text + tracks (text tracks corresponding to data in the + media resource), in the order defined by the media resource's format + specification.
        7. -

      7. Otherwise, the media element has no current media controller; if - the media element's paused attribute is true, - then invoke the play() method on the media - element.

        8. +
      -

    1. Otherwise, the media element has no current media controller, - and the media element's paused attribute is - false; invoke the pause() method on the media - element.

      2. +

      A text track consists of:

      -
    +
    -

    For the purposes of listing chapters in the media resource, only text tracks in the media element's list of text tracks - that are showing and whose text track kind is - chapters should be used. Such tracks must be - interpreted according to the rules for constructing the chapter tree from a text - track. When seeking in response to a user maniplating a chapter selection interface, user - agents should not use the approximate-for-speed flag.

    +
    The kind of text track -

    The controls IDL attribute must - reflect the content attribute of the same name.

    +
    -
    +

    This decides how the track is handled by the user agent. The kind is represented by a string. + The possible strings are:

    -
    +
      +
    • subtitles +
    • captions +
    • descriptions +
    • chapters +
    • metadata +
    -
    +

    The kind of track can change dynamically, in the case of + a text track corresponding to a track element.

    -
    media . volume [ = value ]
    + + +
    A label
    -

    Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the - quietest and 1.0 the loudest.

    +

    This is a human-readable string intended to identify the track for the user.

    -

    Can be set, to change the volume.

    +

    The label of a track can change dynamically, in the + case of a text track corresponding to a track element.

    -

    Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

    +

    When a text track label is the empty string, the user agent should automatically + generate an appropriate label from the text track's other properties (e.g. the kind of text + track and the text track's language) for use in its user interface. This automatically-generated + label is not exposed in the API.

    -
    media . muted [ = value ]
    +
    An in-band metadata track dispatch type
    -

    Returns true if audio is muted, overriding the volume - attribute, and false if the volume attribute is being - honored.

    +

    This is a string extracted from the media resource specifically for in-band + metadata tracks to enable such tracks to be dispatched to different scripts in the document.

    -

    Can be set, to change whether the audio is muted or not.

    +

    For example, a traditional TV station broadcast streamed on the Web and + augmented with Web-specific interactive features could include text tracks with metadata for ad + targeting, trivia game data during game shows, player states during sports games, recipe + information during food programs, and so forth. As each program starts and ends, new tracks + might be added or removed from the stream, and as each one is added, the user agent could bind + them to dedicated script modules using the value of this attribute.

    + +

    Other than for in-band metadata text tracks, the in-band metadata track dispatch type is the empty string. How this + value is populated for different media formats is described in steps to expose a + media-resource-specific text track.

    -
    +
    A language -
    +
    -

    A media element has a playback volume, which is a fraction in the range 0.0 (silent) to 1.0 (loudest). - Initially, the volume should be 1.0, but user agents may remember the last set value across - sessions, on a per-site basis or otherwise, so the volume may start at other values.

    +

    This is a string (a BCP 47 language tag) representing the language of the text track's cues. +

    -

    The volume IDL attribute must return the - playback volume of any audio portions of the - media element. On setting, if the new value is in the range 0.0 to 1.0 inclusive, the - media element's playback volume must be - set to the new value. If the new value is outside the range 0.0 to 1.0 inclusive, then, on - setting, an IndexSizeError exception must be thrown instead.

    +

    The language of a text track can change dynamically, + in the case of a text track corresponding to a track element.

    -

    A media element can also be muted. If - anything is muting the element, then it is muted. (For example, when the direction of - playback is backwards, the element is muted.)

    +
    -

    The muted IDL attribute must return the value - to which it was last set. When a media element is created, if the element has a muted content attribute specified, then the muted IDL attribute should be set to true; otherwise, the user - agents may set the value to the user's preferred value (e.g. remembering the last set value across - sessions, on a per-site basis or otherwise). While the muted - IDL attribute is set to true, the media element must be muted.

    +
    A readiness state -

    Whenever either of the values that would be returned by the volume and muted IDL - attributes change, the user agent must queue a task to fire a simple - event named volumechange at the media - element.

    +
    -

    An element's effective media volume is determined as follows:

    +

    One of the following:

    -
      +
      -

    1. If the user has indicated that the user agent is to override the volume of the element, - then the element's effective media volume is the volume desired by the user. Abort - these steps.

      2. +
      Not loaded -

    2. If the element's audio output is muted, the - element's effective media volume is zero. Abort these steps.

      3. +
      -

    3. If the element has a current media controller and that - MediaController object's media controller mute override is true, the - element's effective media volume is zero. Abort these steps.

      4. +

      Indicates that the text track's cues have not been obtained.

      -

    4. Let volume be the playback - volume of the audio portions of the media element, in range 0.0 (silent) to - 1.0 (loudest).

      5. +
      -

    5. If the element has a current media controller, multiply volume by that MediaController object's media controller - volume multiplier. (The media controller volume multiplier is in the range - 0.0 to 1.0, so this can only reduce the value.)

      6. +
      Loading -

    6. The element's effective media volume is volume, - interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest - setting, values in between increasing in loudness. The range need not be linear. The loudest - setting may be lower than the system's loudest possible setting; for example the user could have - set a maximum volume.

      7. +
      -
    +

    Indicates that the text track is loading and there have been no fatal errors encountered so + far. Further cues might still be added to the track by the parser.

    - +
    -

    The muted content attribute on media elements is a boolean attribute that controls the - default state of the audio output of the media resource, potentially overriding user - preferences.

    +
    Loaded -
    +
    -

    The defaultMuted IDL attribute must - reflect the muted content attribute.

    +

    Indicates that the text track has been loaded with no fatal errors.

    - +
    -

    This attribute has no dynamic effect (it only controls the default state of the - element).

    +
    Failed to load -
    +
    -

    This video (an advertisement) autoplays, but to avoid annoying users, it does so without - sound, and allows the user to turn the sound on.

    +

    Indicates that the text track was enabled, but when the user agent attempted to obtain it, + this failed in some way (e.g. URL could not be resolved, network error, unknown text track format). Some or all of the cues are + likely missing and will not be obtained.

    - 
    <video src="adverts.cgi?kind=video" controls autoplay loop muted></video>
    +
    - + +

    The readiness state of a text + track changes dynamically as the track is obtained.

    + +
    A mode -
    Time ranges
    +
    -

    Objects implementing the TimeRanges interface - represent a list of ranges (periods) of time.

    +

    One of the following:

    - 
    interface TimeRanges {
-  readonly attribute unsigned long length;
-  double start(unsigned long index);
-  double end(unsigned long index);
-};
    +
    -
    +
    Disabled -
    media . length
    +
    + +

    Indicates that the text track is not active. Other than for the purposes of exposing the + track in the DOM, the user agent is ignoring the text track. No cues are active, no events are + fired, and the user agent will not attempt to obtain the track's cues.

    + +
    + +
    Hidden + +
    + +

    Indicates that the text track is active, but that the user agent is not actively displaying + the cues. If no attempt has yet been made to obtain the track's cues, the user agent will + perform such an attempt momentarily. The user agent is maintaining a list of which cues are + active, and events are being fired accordingly.

    + +
    + +
    Showing + +
    + +

    Indicates that the text track is active. If no attempt has yet been made to obtain the + track's cues, the user agent will perform such an attempt momentarily. The user agent is + maintaining a list of which cues are active, and events are being fired accordingly. In + addition, for text tracks whose kind is subtitles or captions, the cues are being overlaid on the video + as appropriate; for text tracks whose kind is descriptions, the user agent is making the + cues available to the user in a non-visual fashion; and for text tracks whose kind is chapters, the user agent is making available to + the user a mechanism by which the user can navigate to any point in the media + resource by selecting a cue.

    -
    +
    -

    Returns the number of ranges in the object.

    +
    -
    time = media . start(index)
    +
    A list of zero or more cues
    -

    Returns the time for the start of the range with the given index.

    +

    A list of text track cues, along with rules for + updating the text track rendering. For example, for WebVTT, the rules for updating + the display of WebVTT text tracks.

    -

    Throws an IndexSizeError exception if the index is out of range.

    +

    The list of cues of a text track can change + dynamically, either because the text track has not yet been loaded or is still loading, + or due to DOM manipulation.

    -
    time = media . end(index)
    + -
    +

    Each text track has a corresponding TextTrack object.

    -

    Returns the time for the end of the range with the given index.

    +
    -

    Throws an IndexSizeError exception if the index is out of range.

    +

    Each media element has a list of pending text tracks, which must + initially be empty, a blocked-on-parser flag, which must initially be false, and a + did-perform-automatic-track-selection flag, which must also initially be false.

    -
    +

    When the user agent is required to populate the list of pending text tracks of a + media element, the user agent must add to the element's list of pending text + tracks each text track in the element's list of text tracks whose + text track mode is not disabled and whose + text track readiness state is loading.

    - +

    Whenever a track element's parent node changes, the user agent must remove the + corresponding text track from any list of pending text tracks that it is + in.

    -
    +

    Whenever a text track's text track readiness state changes to either + loaded or failed to + load, the user agent must remove it from any list of pending text tracks that + it is in.

    -

    The length IDL attribute must return the - number of ranges represented by the object.

    +

    When a media element is created by an HTML parser or XML + parser, the user agent must set the element's blocked-on-parser flag to true. + When a media element is popped off the stack of open elements of an + HTML parser or XML parser, the user agent must honor user + preferences for automatic text track selection, populate the list of pending text + tracks, and set the element's blocked-on-parser flag to false.

    -

    The start(index) - method must return the position of the start of the indexth range represented - by the object, in seconds measured from the start of the timeline that the object covers.

    +

    The text tracks of a media element are ready when both the element's list of pending text + tracks is empty and the element's blocked-on-parser flag is false.

    -

    The end(index) method - must return the position of the end of the indexth range represented by the - object, in seconds measured from the start of the timeline that the object covers.

    +

    Each media element has a pending text track change notification flag, + which must initially be unset.

    -

    These methods must throw IndexSizeError exceptions if called with an index argument greater than or equal to the number of ranges represented by the - object.

    +

    Whenever a text track that is in a media element's list of text + tracks has its text track mode change value, the user agent must run the + following steps for the media element:

    -

    When a TimeRanges object is said to be a normalised TimeRanges - object, the ranges it represents must obey the following criteria:

    +
      -
        +

      • If the media element's pending text track change notification + flag is set, abort these steps.

        • -
      • The start of a range must be greater than the end of all earlier ranges.
        • +

      • Set the media element's pending text track change notification + flag.

        • -
      • The start of a range must be less than the end of that same range.
        • +
      • -
      +

      Queue a task that runs the following substeps:

      -

      In other words, the ranges in such an object are ordered, don't overlap, aren't empty, and - don't touch (adjacent ranges are folded into one bigger range).

      +
        -

        Ranges in a TimeRanges object must be inclusive.

        +

      1. Unset the media element's pending text track change notification + flag.

        2. -

        Thus, the end of a range would be equal to the start of a following adjacent - (touching but not overlapping) range. Similarly, a range covering a whole timeline anchored at - zero would have a start equal to zero and an end equal to the duration of the timeline.

        +

      2. Fire a simple event named change at + the media element's textTracks + attribute's TextTrackList object.

        3. -

        The timelines used by the objects returned by the buffered, seekable and - played IDL attributes of media - elements must be that element's media timeline.

        +
      -
    + +

  • If the media element's show poster flag is not set, run the + time marches on steps.

    • -
    The TrackEvent interface
    + - 
    [Constructor(DOMString type, optional TrackEventInit eventInitDict)]
-interface TrackEvent : Event {
-  readonly attribute (VideoTrack or AudioTrack or TextTrack) track;
-};
+  
    The task source for the tasks listed in this
+  section is the DOM manipulation task source.
    
 
-dictionary TrackEventInit : EventInit {
-  (VideoTrack or AudioTrack or TextTrack) track;
-};
    +
    -
    +

    A text track cue is the unit of time-sensitive data in a text track, + corresponding for instance for subtitles and captions to the text that appears at a particular + time and disappears at another time.

    -
    event . track
    +

    Each text track cue consists of:

    +
    + +
    An identifier
    +

    An arbitrary string.

    +
    -

    Returns the track object (TextTrack, AudioTrack, or - VideoTrack) to which the event relates.

    +
    A start time +
    +

    The time, in seconds and fractions of a second, that describes the beginning of the range of + the media data to which the cue applies.

    +
    +
    An end time +
    +

    The time, in seconds and fractions of a second, that describes the end of the range of the + media data to which the cue applies.

    -
    +
    A pause-on-exit flag +
    +

    A boolean indicating whether playback of the media resource is to pause when the + end of the range to which the cue applies is reached.

    +
    -
    +
    Some additional format-specific data
    +
    +

    Additional fields, as needed for the format. For example, WebVTT has a text track cue + writing direction and so forth.

    +
    -

    The track attribute must return the value - it was initialised to. When the object is created, this attribute must be initialised to null. It - represents the context information for the event.

    +
    The data of the cue +
    +

    The raw data of the cue, and rules for rendering the cue in isolation.

    +

    The precise nature of this data is defined by the format. For example, WebVTT uses text.

    +
    -
    +
    +

    The text track cue start time and text track cue end + time can be negative. (The current playback position can never be negative, + though, so cues entirely before time zero cannot be active.)

    +

    Each text track cue has a corresponding TextTrackCue object (or more + specifically, an object that inherits from TextTrackCue — for example, WebVTT + cues use the VTTCue interface). A text track cue's in-memory + representation can be dynamically changed through this TextTrackCue API.

    -
    Event summary
    +

    A text track cue is associated with rules for updating the text track + rendering, as defined by the specification for the specific kind of text track + cue. These rules are used specifically when the object representing the cue is added to a + TextTrack object using the addCue() + method.

    - +

    In addition, each text track cue has two pieces of dynamic information:

    -

    The following events fire on media elements as part of the - processing model described above:

    +
    - - - - - +

    This flag must be initially unset. The flag is used to ensure events are fired appropriately + when the cue becomes active or inactive, and to make sure the right cues are rendered.

    - + - - +
      -
    +

    If the new text track's kind is metadata, then set the text track in-band + metadata track dispatch type as follows, based on the type of the media + resource:

    - +
    The text track in-band metadata track dispatch type must be set to the value + of the CodecID element.
    - +
    Let the + first stsd box of the + first stbl box of the + first minf box of the + first mdia box of the + text track's trak box in the + first moov box + of the file be the stsd box, if any. -
    - + - +

  • Set the new text track's mode to the + mode consistent with the user's preferences and the requirements of the relevant specification + for the data.

    -
    • + - - +

    The text track readiness state is initially not loaded, and the text track mode is initially disabled.

    - - +

    When a text track corresponding to a track element is added to a + media element's list of text tracks, the user agent must queue a + task to run the following steps for the media element:

    - + - +

  • Perform automatic text track selection for chapters.

    • - - +
      -
    +

    If the user has expressed an interest in having a track from candidates + enabled based on its text track kind, text track language, and + text track label, then set its text track mode to showing.

    - +

    When a text track corresponding to a track element experiences any of + the following circumstances, the user agent must start the track processing + model for that text track and its track element: -

    + - +

  • If the text track's track element does not have a media + element as a parent, abort these steps.

    • - - +

  • ⌛ If the track element's parent is a media element then + let CORS mode be the state of the parent media element's crossorigin content attribute. Otherwise, let CORS mode be No CORS.

    • - +

    The tasks queued by the + fetching algorithm on the networking task source to + process the data as it is being fetched must determine the type of the resource. If the + type of the resource is not a supported text track format, the load will fail, as + described below. Otherwise, the resource's data must be passed to the appropriate parser (e.g. + the WebVTT parser) as it is received, with the text track list of cues being used for + that parser's output.

    -
    Event name - Interface - Fired when... - Preconditions +
    The active flag +
    -
    loadstart +

    The user agent must synchronously unset this flag whenever the text track cue is + removed from its text track's text track list of cues; whenever the + text track itself is removed from its media element's list of + text tracks or has its text track mode changed to disabled; and whenever the media element's readyState is changed back to HAVE_NOTHING. When the flag is unset in this way for one + or more cues in text tracks that were showing prior to the relevant incident, the user agent must, after having unset + the flag for all the affected cues, apply the rules for updating the text track + rendering of those text tracks. For example, for text tracks based on WebVTT, the rules for updating the display + of WebVTT text tracks.

    -     		Event +
    The display state +
    -
    		The user agent begins looking for media data, as part of the resource selection algorithm. +

    This is used as part of the rendering model, to keep cues in a consistent position. It must + initially be empty. Whenever the text track cue active flag is unset, the user + agent must empty the text track cue display state.

    -     		networkState equals NETWORK_LOADING + -
    progress +

    The text track cues of a media element's + text tracks are ordered relative to each other in the text + track cue order, which is determined as follows: first group the cues by their text track, with the groups being sorted in the same order + as their text tracks appear in the media element's + list of text tracks; then, within each group, cues must be sorted by their start + time, earliest first; then, any cues with the same + start time must be sorted by their end time, latest first; and finally, any cues with identical end + times must be sorted in the order they were last added to their respective text track + list of cues, oldest first (so e.g. for cues from a WebVTT file, that would initially be + the order in which the cues were listed in the file).

    -     		Event - The user agent is fetching media data. +
    Sourcing in-band text tracks
    -     		networkState equals NETWORK_LOADING +

    A media-resource-specific text track is a text track that corresponds + to data found in the media resource.

    -
    suspend +
    -
    		Event +

    Rules for processing and rendering such data are defined by the relevant specifications, e.g. + the specification of the video format if the media resource is a video.

    -     		The user agent is intentionally not currently fetching media data. +

    When a media resource contains data that the user agent recognises and supports as + being equivalent to a text track, the user agent runs the steps to expose a + media-resource-specific text track with the relevant data, as follows.

    -     		networkState equals NETWORK_IDLE + -
    abort +

  • Associate the relevant data with a new text track and its corresponding new + TextTrack object. The text track is a media-resource-specific + text track.

    • -     		Event +

  • Set the new text track's kind, label, and language + based on the semantics of the relevant data, as defined by the relevant specification. If there + is no label in that data, then the label must be set to the + empty string.

    • -     		The user agent stops fetching the media data before it is completely - downloaded, but not due to an error. +

  • Associate the text track list of cues with the rules for updating the + text track rendering appropriate for the format in question.

    -
    		• error is an object with the code MEDIA_ERR_ABORTED. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. +
  • -
    • error +
    -
    		Event +
    If the media resource is an Ogg file
    -     		An error occurs while fetching the media data. +
    The text track in-band metadata track dispatch type must be set to the value + of the Name header field.
    -     		error is an object with the code MEDIA_ERR_NETWORK or higher. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. +
    If the media resource is a WebM file
    -
    emptied +
    If the media resource is an MPEG-2 file
    -     		Event +
    Let stream type be the value of the "stream_type" field describing the + text track's type in the file's program map section, interpreted as an 8-bit unsigned integer. + Let length be the value of the "ES_info_length" field for the track in the + same part of the program map section, interpreted as an integer as defined by the MPEG-2 + specification. Let descriptor bytes be the length bytes + following the "ES_info_length" field. The text track in-band metadata track dispatch + type must be set to the concatenation of the stream type byte and + the zero or more descriptor bytes bytes, expressed in hexadecimal using + uppercase ASCII hex digits. -
    		A media element whose networkState - was previously not in the NETWORK_EMPTY state has - just switched to that state (either because of a fatal error during load that's about to be - reported, or because the load() method was invoked while - the resource selection algorithm was already - running). + - networkState is NETWORK_EMPTY; all the IDL attributes are in their - initial states. +
    If the media resource is an MPEG-4 file
    -
    stalled + If the file has no stsd box, or if the stsd box has neither a mett box nor a metx box, then the text track + in-band metadata track dispatch type must be set to the empty string. - Event + Otherwise, if the stsd box has a mett box then the text + track in-band metadata track dispatch type must be set to the concatenation of the + string "mett", a U+0020 SPACE character, and the value of the first mime_format field of the first mett box of the stsd + box, or the empty string if that field is absent in that box. - The user agent is trying to fetch media data, but data is unexpectedly not - forthcoming. + Otherwise, if the stsd box has no mett box but has a metx box then the text track in-band metadata track dispatch type + must be set to the concatenation of the string "metx", a U+0020 SPACE + character, and the value of the first namespace field of the first metx box of the stsd box, or the empty string if that field is absent in + that box. - networkState is NETWORK_LOADING. + -
    loadedmetadata + - Event + - The user agent has just determined the duration and dimensions of the media - resource and the text tracks are ready. +

  • Populate the new text track's list of + cues with the cues parsed so far, following the guidelines for exposing + cues, and begin updating it dynamically as necessary.

    • -     		readyState is newly equal to HAVE_METADATA or greater for the first time. +

  • Set the new text track's readiness + state to loaded.

    • -
    loadeddata +

    For instance, if there are no other active subtitles, and this is a forced + subtitle track (a subtitle track giving subtitles in the audio track's primary language, but + only for audio that is actually in another language), then those subtitles might be activated + here.

    -     		Event + - The user agent can render the media data at the current playback - position for the first time. +

  • Add the new text track to the media element's list of text + tracks.

    • -     		readyState newly increased to HAVE_CURRENT_DATA or greater for the first time. +

  • Fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses + the TrackEvent interface, with the track + attribute initialised to the text track's TextTrack object, at the + media element's textTracks attribute's + TextTrackList object.

    • -
    canplay + - Event + - The user agent can resume playback of the media data, but estimates that if - playback were to be started now, the media resource could not be rendered at the - current playback rate up to its end without having to stop for further buffering of content. + - readyState newly increased to HAVE_FUTURE_DATA or greater. -
    canplaythrough +
    -
    		Event +
    Sourcing out-of-band text tracks
    -     		The user agent estimates that if playback were to be started now, the media - resource could be rendered at the current playback rate all the way to its end without - having to stop for further buffering. +

    When a track element is created, it must be associated with a new text + track (with its value set as defined below) and its corresponding new + TextTrack object.

    -     		readyState is newly equal to HAVE_ENOUGH_DATA. +

    The text track kind is determined from the state of the element's kind attribute according to the following table; for a state given + in a cell of the first column, the kind is the string given + in the second column:

    + + + + + + + + + +
    State + String +
    Subtitles + subtitles +
    Captions + captions +
    Descriptions + descriptions
    Chapters + chapters +
    Metadata + metadata +
    -     		playing +

    The text track label is the element's track label.

    -     		Event +

    The text track language is the element's track language, if any, or + the empty string otherwise.

    -     		Playback is ready to start after having been paused or delayed due to lack of media - data. +

    As the kind, label, + and srclang attributes are set, changed, or removed, the + text track must update accordingly, as per the definitions above.

    -     		readyState is newly equal to or greater than - HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA. Even if this event fires, the - element might still not be potentially playing, e.g. if the element is - blocked on its media controller (e.g. because the current media - controller is paused, or another slaved media - element is stalled somehow, or because the media resource has no data - corresponding to the media controller position), or the element is paused - for user interaction or paused for in-band content. +

    Changes to the track URL are handled in the algorithm below.

    -
    waiting +

    The text track list of cues is initially empty. It is dynamically modified when + the referenced file is parsed. Associated with the list are the rules for updating the text + track rendering appropriate for the format in question; for WebVTT, this is the rules + for updating the display of WebVTT text tracks.

    -     		Event +

    When a track element's parent element changes and the new parent is a media + element, then the user agent must add the track element's corresponding + text track to the media element's list of text tracks, and + then queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and that uses + the TrackEvent interface, with the track + attribute initialised to the text track's TextTrack object, at the + media element's textTracks attribute's + TextTrackList object.

    -     		Playback has stopped because the next frame is not available, but the user agent expects - that frame to become available in due course. +

    When a track element's parent element changes and the old parent was a media + element, then the user agent must remove the track element's corresponding + text track from the media element's list of text tracks, + and then queue a task to fire a trusted event with the name removetrack, that does not bubble and is not cancelable, and that + uses the TrackEvent interface, with the track attribute initialised to the text track's + TextTrack object, at the media element's textTracks attribute's TextTrackList object.

    + -     		readyState is equal to or less than HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position - is not contained in any of the ranges in buffered. It - is possible for playback to stop for other reasons without paused being false, but those reasons do not fire this event - (and when those situations resolve, a separate playing - event is not fired either): e.g. the element is newly blocked on its media - controller, or playback ended, or playback - stopped due to errors, or the element has paused for user interaction - or paused for in-band content. +
    -
    seeking +
      -
    		Event +

  • If the element's blocked-on-parser flag is true, abort these steps.

    • -     		The seeking IDL attribute changed to true, and the user agent has started seeking to a new position. +

  • If the element's did-perform-automatic-track-selection flag is true, abort + these steps.

    • -     		+

  • Honor user preferences for automatic text track selection for this + element.

    • -
    seeked +

    When the user agent is required to honor user preferences for automatic text track + selection for a media element, the user agent must run the following steps:

    -     		Event +
      -
    		The seeking IDL attribute changed to false after the current playback position was changed. +

  • Perform automatic text track selection for subtitles and captions.

    • -     		+

  • Perform automatic text track selection for descriptions.

    • -
    ended +

  • If there are any text tracks in the media + element's list of text tracks whose text track kind is metadata that correspond to track + elements with a default attribute set whose text + track mode is set to disabled, then set the + text track mode of all such tracks to hidden

    • -     		Event +

  • Set the element's did-perform-automatic-track-selection flag to + true.

    • -     		Playback has stopped because the end of the media resource was reached. + - currentTime equals the end of the media - resource; ended is true. +

    When the steps above say to perform automatic text track selection for one or more + text track kinds, it means to run the following steps:

    -
    durationchange +

  • Let candidates be a list consisting of the text tracks in the media element's list of text tracks + whose text track kind is one of the kinds that were passed to the algorithm, if any, + in the order given in the list of text tracks.

    • -     		Event +

  • If candidates is empty, then abort these steps.

    • -     		The duration attribute has just been updated. +

  • If any of the text tracks in candidates have a text track mode set to showing, abort these steps.

    • -     		+
  • -
    • timeupdate +

    For example, the user could have set a browser preference to the effect of "I + want French captions whenever possible", or "If there is a subtitle track with 'Commentary' in + the title, enable it", or "If there are audio description tracks available, enable one, ideally + in Swiss German, but failing that in Standard Swiss German or Standard German".

    -     		Event +

    Otherwise, if there are any text tracks in candidates that correspond to track elements with a default attribute set whose text track mode is + set to disabled, then set the text track + mode of the first such track to showing.

    -     		The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. + - + -
    play +
      -
    		Event +
  • The track element is created.
    • -     		The element is no longer paused. Fired after the play() - method has returned, or when the autoplay attribute - has caused playback to begin. +
  • The text track has its text track mode changed.
    • -     		paused is newly false. +
  • The track element's parent element changes and the new parent is a media + element.
    • -
    pause +

    When a user agent is to start the track processing model for a + text track and its track element, it must run the following algorithm. + This algorithm interacts closely with the event loop mechanism; in particular, it has + a synchronous section (which is triggered as part of the event loop + algorithm). The steps in that section are marked with ⌛.

    -     		Event +
      -
    		The element has been paused. Fired after the pause() - method has returned. +

  • If another occurrence of this algorithm is already running for this text + track and its track element, abort these steps, letting that other algorithm + take care of this element.

    • -     		paused is newly true. +

  • If the text track's text track mode is not set to one of hidden or showing, abort + these steps.

    • -
    ratechange +

  • Run the remainder of these steps asynchronously, allowing whatever caused these steps to + run to continue.

    • -     		Event +

  • Top: Await a stable state. The synchronous section + consists of the following steps. (The steps in the synchronous section are marked + with ⌛.)

    • -     		Either the defaultPlaybackRate or the - playbackRate attribute has just been updated. +

  • ⌛ Set the text track readiness state to loading.

    • -     		+

  • ⌛ Let URL be the track URL of the + track element.

    • -
    resize +

  • End the synchronous section, continuing the remaining steps + asynchronously.

    • -     		Event +
  • -
    		• One or both of the videoWidth and videoHeight attributes have just been updated. +

    If URL is not the empty string, perform a potentially CORS-enabled + fetch of URL, with the mode being CORS mode, the origin being the origin of the + track element's Document, and the default origin behaviour set + to fail.

    -     		Media element is a video element; readyState is not HAVE_NOTHING +

    The resource obtained in this fashion, if any, contains the text track data. If any data is + obtained, it is by definition CORS-same-origin (cross-origin resources that are not + suitably CORS-enabled do not get this far).

    -
    volumechange +

    The appropriate parser will synchronously (during these networking task + source tasks) and incrementally (as each such task is + run with whatever data has been received from the network) update the text track list of + cues.

    -     		Event +

    This specification does not currently say whether or how to check the MIME + types of text tracks, or whether or how to perform file type sniffing using the actual file + data. Implementors differ in their intentions on this matter and it is therefore unclear what + the right solution is. In the absence of any requirement here, the HTTP specification's strict + requirement to follow the Content-Type header prevails ("Content-Type specifies the media type + of the underlying data." ... "If and only if the media type is not given by a Content-Type + field, the recipient MAY attempt to guess the media type via inspection of its content + and/or the name extension(s) of the URI used to identify the resource.").

    -     		Either the volume attribute or the muted attribute has changed. Fired after the relevant - attribute's setter has returned. +

    If the fetching algorithm fails for any reason (network error, + the server returns an error code, a cross-origin check fails, etc), or if URL is the empty string, then queue a task to first change the + text track readiness state to failed to + load and then fire a simple event named error at the track element. This task must use the DOM manipulation task source.

    -     		+

    If the fetching algorithm does not fail, but the + type of the resource is not a supported text track format, or the file was not successfully + processed (e.g. the format in question is an XML format and the file contained a well-formedness + error that the XML specification requires be detected and reported to the application), then the + task that is queued by the + networking task source in which the aforementioned problem is found must change the + text track readiness state to failed to + load and fire a simple event named error + at the track element.

    -
    +

    If the fetching algorithm does not fail, and the file was + successfully processed, then the final task that is queued by the networking task source, after it has + finished parsing the data, must change the text track readiness state to loaded, and fire a simple event named load at the track element.

    -

    The following events fire on MediaController objects:

    +

    If, while the fetching algorithm is active, either:

    - +
      -
    - +
  • the track URL changes so that it is no longer equal to URL, while the text track mode is set to hidden or showing; or
    • - - + - + - +
    -
    +
    -
    + - + attribute EventHandleronchange; + attribute EventHandleronaddtrack; + attribute EventHandleronremovetrack; +}; - +
    textTrack = media . textTracks . getTrackById( id )
    - + - - +

    The length attribute of a + TextTrackList object must return the number of text + tracks in the list represented by the TextTrackList object.

    - + - + attribute TextTrackModemode; - +
    -
    +
    textTrack . kind
    +
    -
    +

    Returns the text track label, if there is one, or the empty string otherwise + (indicating that a custom label probably needs to be generated from the other attributes of the + object if the object is exposed to the user).

    -
    Event name +
  • the text track mode changes to hidden + or showing, while the track URL is not + equal to URL
    • -     		Interface + - Fired when... +

    ...then the user agent must abort the fetching algorithm, + discarding any pending tasks generated by that algorithm (and + in particular, not adding any cues to the text track list of cues after the moment + the URL changed), and then queue a task that first changes the text track + readiness state to failed to load and + then fires a simple event named error at the track element. This task must use the DOM manipulation task source.

    -
    emptied +

  • Wait until the text track readiness state is no longer set to loading.

    • -     		Event +

  • Wait until the track URL is no longer equal to URL, at + the same time as the text track mode is set to hidden or showing.

    • -     		All the slaved media elements newly have readyState set to HAVE_NOTHING or greater, or there are no longer any - slaved media elements. +

  • Jump to the step labeled top.

    • -
    loadedmetadata +

    Whenever a track element has its src attribute + set, changed, or removed, the user agent must synchronously empty the element's text + track's text track list of cues. (This also causes the algorithm above to stop + adding cues from the resource being obtained using the previously given URL, if any.)

    -     		Event + - All the slaved media elements newly have readyState set to HAVE_METADATA or greater. -
    loadeddata +
    Guidelines for exposing cues in various formats as text track cues
    -     		Event +

    How a specific format's text track cues are to be interpreted for the purposes of processing by + an HTML user agent is defined by that format. In the absence of such a specification, this section + provides some constraints within which implementations can attempt to consistently expose such + formats.

    -     		All the slaved media elements newly have readyState set to HAVE_CURRENT_DATA or greater. +

    To support the text track model of HTML, each unit of timed data is converted to a + text track cue. Where the mapping of the format's features to the aspects of a + text track cue as defined in this specification are not defined, implementations must + ensure that the mapping is consistent with the definitions of the aspects of a text track + cue as defined above, as well as with the following constraints:

    -
    canplay +
    The text track cue identifier +
    +

    Should be set to the empty string if the format has no obvious analogue to a per-cue + identifier.

    +
    -     		Event +
    The text track cue pause-on-exit flag +
    +

    Should be set to false.

    +
    -     		All the slaved media elements newly have readyState set to HAVE_FUTURE_DATA or greater. + -
    canplaythrough - Event +
    Text track API
    -     		All the slaved media elements newly have readyState set to HAVE_ENOUGH_DATA or greater. + 
    interface TextTrackList : EventTarget {
+  readonly attribute unsigned long length;
+  getter TextTrack (unsigned long index);
+  TextTrack? getTrackById(DOMString id);
 
-
    playing +
    -
    		Event +
    media . textTracks . length
    +
    +

    Returns the number of text tracks associated with the media element (e.g. from track elements). This is the number of text tracks in the media element's list of text tracks.

    +
    -     		The MediaController is no longer a blocked media controller. +
    media . textTracks[ n ]
    +
    +

    Returns the TextTrack object representing the nth text track in the media element's list of text tracks.

    +
    -
    waiting +
    -
    		Event +

    Returns the TextTrack object with the given identifier, or null if no track has that identifier.

    -     		The MediaController is now a blocked media controller. + -
    ended +
    -
    		Event +

    A TextTrackList object represents a dynamically updating list of text tracks in a given order.

    -     		All the slaved media elements have newly ended playback; the - MediaController has reached the end of all the slaved media elements. +

    The textTracks attribute of media elements must return a TextTrackList object + representing the TextTrack objects of the text tracks + in the media element's list of text tracks, in the same order as in the + list of text tracks. The same object must be returned each time the attribute is + accessed.

    -
    durationchange +

    The supported property indices of a TextTrackList object at any + instant are the numbers from zero to the number of text tracks in + the list represented by the TextTrackList object minus one, if any. If there are no + text tracks in the list, there are no supported property + indices.

    -     		Event +

    To determine the value of an indexed property of a TextTrackList + object for a given index index, the user agent must return the indexth text track in the list represented by the + TextTrackList object.

    -     		The duration attribute has just been - updated. +

    The getTrackById(id) method must return the first TextTrack in the + TextTrackList object whose id IDL attribute + would return a value equal to the value of the id argument. When no tracks + match the given argument, the method must return null.

    -
    timeupdate +
    -     		Event + 
    enum TextTrackMode { "disabled",  "hidden",  "showing" };
+enum TextTrackKind { "subtitles",  "captions",  "descriptions",  "chapters",  "metadata" };
+interface TextTrack : EventTarget {
+  readonly attribute TextTrackKind kind;
+  readonly attribute DOMString label;
+  readonly attribute DOMString language;
 
-
    		The media controller position changed. + readonly attribute DOMString id; + readonly attribute DOMString inBandMetadataTrackDispatchType; -
    play + readonly attribute TextTrackCueList? cues; + readonly attribute TextTrackCueList? activeCues; - Event + void addCue(TextTrackCue cue); + void removeCue(TextTrackCue cue); - The paused attribute is newly false. + attribute EventHandler oncuechange; +}; -
    pause +
    textTrack = media . addTextTrack( kind [, label [, language ] ] )
    +
    -
    		Event +

    Creates and returns a new TextTrack object, which is also added to the + media element's list of text tracks.

    -     		The paused attribute is newly true. + -
    ratechange +

    Returns the text track kind string.

    -     		Event + - Either the defaultPlaybackRate - attribute or the playbackRate attribute - has just been updated. +
    textTrack . label
    +
    -
    volumechange + - Event +
    textTrack . language
    +
    +

    Returns the text track language string.

    +
    -     		Either the volume attribute or the muted attribute has just been updated. +
    textTrack . id
    +
    -
    +

    Returns the ID of the given track.

    +

    For in-band tracks, this is the ID that can be used with a fragment identifier if the format + supports the Media Fragments URI syntax, and that can be used with the getTrackById() method.

    -

    The following events fire on AudioTrackList, VideoTrackList, and - TextTrackList objects:

    +

    For TextTrack objects corresponding to track elements, this is the + ID of the track element.

    - + - - +
    textTrack . inBandMetadataTrackDispatchType
    +
    -
    - +

    Returns the text track mode, represented by a string from the following + list:

    - +
    textTrack . cues
    +
    +

    Returns the text track list of cues, as a TextTrackCueList object.

    +
    - +
    textTrack . addCue( cue )
    +
    +

    Adds the given cue to textTrack's text track list of cues.

    +
    -
    Event name +

    Returns the text track in-band metadata track dispatch type string.

    -     		Interface + - Fired when... +
    textTrack . mode [ = value ]
    +
    -
    change +
    +
    "disabled"
    +
    +

    The text track disabled mode.

    +
    +
    "hidden"
    +
    +

    The text track hidden mode.

    +
    +
    "showing"
    +
    +

    The text track showing mode.

    +
    +
    -     		Event +

    Can be set, to change the mode.

    -     		One or more tracks in the track list have been enabled or disabled. + -
    addtrack +
    textTrack . activeCues
    +
    -
    		TrackEvent +

    Returns the text track cues from the text track + list of cues that are currently active (i.e. that start before the current playback + position and end after it), as a TextTrackCueList object.

    -     		A track has been added to the track list. + -
    removetrack +
    textTrack . removeCue( cue )
    +
    +

    Removes the given cue from textTrack's text track list of cues.

    +
    -     		TrackEvent + - A track has been removed from the track list. +
    -
    +

    The addTextTrack(kind, label, language) method of media elements, when invoked, must run the following steps:

    +
      +
    1. -

      The following event fires on TextTrack objects and track elements:

      +

      Create a new TextTrack object.

      - + - - +
    2. -
      3. - +
    3. -
      4. Event name +

      Create a new text track corresponding to the new object, and set its text + track kind to kind, its text track label to label, its text track language to language, its + text track readiness state to the text track loaded state, its + text track mode to the text track hidden mode, and its text + track list of cues to an empty list.

      -       		Interface +

      Initially, the text track list of cues is not associated with any rules + for updating the text track rendering. When a text track cue is added to it, + the text track list of cues has its rules permanently set accordingly.

      -       		Fired when... + -
      cuechange +

      Add the new text track to the media element's list of text + tracks.

      -       		Event + - One or more cues in the track have become active or stopped being active. +
    4. -
      5. +

      Queue a task to fire a trusted event with the name addtrack, that does not bubble and is not cancelable, and + that uses the TrackEvent interface, with the track attribute initialised to the new text + track's TextTrack object, at the media element's textTracks attribute's TextTrackList + object.

      +
      5. -

      The following events fire on TextTrackCue objects:

      +
    5. - +

      Return the new TextTrack object.

      - - + - - +

      The label attribute must return the + text track label of the text track that the TextTrack + object represents.

      - +

      The mode attribute, on getting, must return + the string corresponding to the text track mode of the text track that + the TextTrack object represents, as defined by the following list:

      -
      Event name + - Interface +
      -       		Fired when... +

      The kind attribute must return the + text track kind of the text track that the TextTrack object + represents.

      -
      enter +

      The language attribute must return the + text track language of the text track that the TextTrack + object represents.

      -       		Event +

      The id attribute returns the track's + identifier, if it has one, or the empty string otherwise. For tracks that correspond to + track elements, the track's identifier is the value of the element's id attribute, if any. For in-band tracks, the track's identifier is + specified by the media resource. If the media resource is in a format + that supports the Media Fragments URI fragment identifier syntax, the identifier + returned for a particular track must be the same identifier that would enable the track if used as + the name of a track in the track dimension of such a fragment identifier.

      -       		The cue has become active. +

      The inBandMetadataTrackDispatchType + attribute must return the text track in-band metadata track dispatch type of the + text track that the TextTrack object represents.

      -
      exit +
      +
      "disabled"
      +
      The text track disabled mode.
      +
      "hidden"
      +
      The text track hidden mode.
      +
      "showing"
      +
      The text track showing mode.
      +
      -       		Event +

      On setting, if the new value isn't equal to what the attribute would currently return, the new + value must be processed as follows:

      -       		The cue has stopped being active. +
      -
      +
      If the new value is "disabled"
      +
      - -
      +

      Set the text track mode of the text track that the + TextTrack object represents to the text track disabled mode.

      -
      Security and privacy considerations
      +
      -

      The main security and privacy implications of the video and audio - elements come from the ability to embed media cross-origin. There are two directions that threats - can flow: from hostile content to a victim page, and from a hostile page to victim content.

      +
      If the new value is "hidden"
      -
      +
      -

      If a victim page embeds hostile content, the threat is that the content might contain scripted - code that attempts to interact with the Document that embeds the content. To avoid - this, user agents must ensure that there is no access from the content to the embedding page. In - the case of media content that uses DOM concepts, the embedded content must be treated as if it - was in its own unrelated top-level browsing context.

      +

      Set the text track mode of the text track that the + TextTrack object represents to the text track hidden mode.

      -

      For instance, if an SVG animation was embedded in a video element, - the user agent would not give it access to the DOM of the outer page. From the perspective of - scripts in the SVG resource, the SVG file would appear to be in a lone top-level browsing context - with no parent.

      +
      -
      +
      If the new value is "showing"
      -

      If a hostile page embeds victim content, the threat is that the embedding page could obtain - information from the content that it would not otherwise have access to. The API does expose some - information: the existence of the media, its type, its duration, its size, and the performance - characteristics of its host. Such information is already potentially problematic, but in practice - the same information can more or less be obtained using the img element, and so it - has been deemed acceptable.

      +
      -

      However, significantly more sensitive information could be obtained if the user agent further - exposes metadata within the content such as subtitles or chapter titles. Such information is - therefore only exposed if the video resource passes a CORS resource sharing check. - The crossorigin attribute allows authors to control - how this check is performed.

      +

      Set the text track mode of the text track that the + TextTrack object represents to the text track showing mode.

      -

      Without this restriction, an attacker could trick a user running within a - corporate network into visiting a site that attempts to load a video from a previously leaked - location on the corporation's intranet. If such a video included confidential plans for a new - product, then being able to read the subtitles would present a serious confidentiality breach.

      +
      - - +
    +

    If the text track mode of the text track that the + TextTrack object represents is not the text track disabled mode, then + the cues attribute must return a + live TextTrackCueList object that represents the subset of the + text track list of cues of the text track that the + TextTrack object represents whose end + times occur at or after the earliest possible position when the script + started, in text track cue order. Otherwise, it must return null. When an + object is returned, the same object must be returned each time.

    -
    Best practices for authors using media elements
    +

    The earliest possible position when the script started is whatever the + earliest possible position was the last time the event loop reached step + 1.

    - +

    If the text track mode of the text track that the + TextTrack object represents is not the text track disabled mode, then + the activeCues attribute must return a + live TextTrackCueList object that represents the subset of the + text track list of cues of the text track that the + TextTrack object represents whose active flag was set when the script + started, in text track cue order. Otherwise, it must return null. When an + object is returned, the same object must be returned each time.

    -

    Playing audio and video resources on small devices such as set-top boxes or mobile phones is - often constrained by limited hardware resources in the device. For example, a device might only - support three simultaneous videos. For this reason, it is a good practice to release resources - held by media elements when they are done playing, either by - being very careful about removing all references to the element and allowing it to be garbage - collected, or, even better, by removing the element's src - attribute and any source element descendants, and invoking the element's load() method.

    +

    A text track cue's active flag was set when the script started if its + text track cue active flag was set the last time the event loop reached + step 1.

    -

    Similarly, when the playback rate is not exactly 1.0, hardware, software, or format limitations - can cause video frames to be dropped and audio to be choppy or muted.

    +
    +

    The addCue(cue) method + of TextTrack objects, when invoked, must run the following steps:

    -
    +
      -
      Best practices for implementors of media elements
      +

    1. If the text track list of cues does not yet have any associated rules + for updating the text track rendering, then associate the text track list of + cues with the rules for updating the text track rendering appropriate to cue.

      - +

    2. If text track list of cues' associated rules for updating the text + track rendering are not the same rules for updating the text track rendering + as appropriate for cue, then throw an InvalidStateError + exception and abort these steps.

      -

      How accurately various aspects of the media element API are implemented is - considered a quality-of-implementation issue.

      +

    3. If the given cue is in a text track list of cues, then + remove cue from that text track list of cues.

      4. -

      For example, when implementing the buffered attribute, - how precise an implementation reports the ranges that have been buffered depends on how carefully - the user agent inspects the data. Since the API reports ranges as times, but the data is obtained - in byte streams, a user agent receiving a variable-bit-rate stream might only be able to determine - precise times by actually decoding all of the data. User agents aren't required to do this, - however; they can instead return estimates (e.g. based on the average bit rate seen so far) which - get revised as more information becomes available.

      +

    4. Add cue to the method's TextTrack object's text + track's text track list of cues.

      5. -

      As a general rule, user agents are urged to be conservative rather than optimistic. For - example, it would be bad to report that everything had been buffered when it had not.

      +
    -

    Another quality-of-implementation issue would be playing a video backwards when the codec is - designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and - the intervening frames only have deltas from the previous frame). User agents could do a poor job, - e.g. only showing key frames; however, better implementations would do more work and thus do a - better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and - then playing the frames backwards.

    +

    The removeCue(cue) + method of TextTrack objects, when invoked, must run the following steps:

    -

    Similarly, while implementations are allowed to drop buffered data at any time (there is no - requirement that a user agent keep all the media data obtained for the lifetime of the media - element), it is again a quality of implementation issue: user agents with sufficient resources to - keep all the data around are encouraged to do so, as this allows for a better user experience. For - example, if the user is watching a live stream, a user agent could allow the user only to view the - live video; however, a better user agent would buffer everything and allow the user to seek - through the earlier material, pause it, play it forwards and backwards, etc.

    +
      -

      When multiple tracks are synchronised with a MediaController, it is possible for - scripts to add and remove media elements from the MediaController's list of - slaved media elements, even while these tracks are playing. How smoothly the media - plays back in such situations is another quality-of-implementation issue.

      +

    1. If the given cue is not currently listed in the method's + TextTrack object's text track's text track list of cues, + then throw a NotFoundError exception and abort these steps.

      2. -
      +

    2. Remove cue from the method's TextTrack object's + text track's text track list of cues.

      3. -

      When a media element that is paused is removed from a document and not reinserted before the next time the event - loop reaches step 1, implementations that are resource constrained are encouraged to take - that opportunity to release all hardware resources (like video planes, networking resources, and - data buffers) used by the media element. (User agents still have to keep track of the - playback position and so forth, though, in case playback is later restarted.)

      +
    +
    +

    In this example, an audio element is used to play a specific sound-effect from a + sound file containing many sound effects. A cue is used to pause the audio, so that it ends + exactly at the end of the clip, even if the browser is busy running some script. If the page had + relied on script to pause the audio, then the start of the next clip might be heard if the + browser was not able to run the script at the exact time specified.

    -

    The map element

    + 
    var sfx = new Audio('sfx.wav');
+var sounds = sfx.addTextTrack('metadata');
 
-  
    
-   
    Categories:
    
-   
    Flow content.
    
-   
    Phrasing content.
    
-   
    Palpable content.
    
-   
    Contexts in which this element can be used:
    
-   
    Where phrasing content is expected.
    
-   
    Content model:
    
-   
    Transparent.
    
-   
    Content attributes:
    
-   
    Global attributes
    
-   
    name
    
-   
    DOM interface:
    
-   
    
-
    interface HTMLMapElement : HTMLElement {
-           attribute DOMString name;
-  readonly attribute HTMLCollection areas;
-  readonly attribute HTMLCollection images;
-};
    
-   
    
-  
    
+// add sounds we care about
+function addFX(start, end, name) {
+  var cue = new VTTCue(start, end, '');
+  cue.id = name;
+  cue.pauseOnExit = true;
+  sounds.addCue(cue);
+}
+addFX(12.783, 13.612, 'dog bark');
+addFX(13.612, 15.091, 'kitten mew'))
 
-  
    The map element, in conjunction with an img element and any
-  area element descendants, defines an image map. The element
-  represents its children.
    
+function playSound(id) {
+  sfx.currentTime = sounds.getCueById(id).startTime;
+  sfx.play();
+}
 
-  
    The name attribute gives the map a name so that
-  it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another map element in the same
-  document. If the id attribute is also specified, both attributes must
-  have the same value.
    
+// play a bark as soon as we can
+sfx.oncanplaythrough = function () {
+  playSound('dog bark');
+}
+// meow when the user tries to leave
+window.onbeforeunload = function () {
+  playSound('kitten mew');
+  return 'Are you sure you want to leave this awesome page?';
+}
    - -
    +
    -
    map . areas
    +
    -
    + 
    interface TextTrackCueList {
+  readonly attribute unsigned long length;
+  getter TextTrackCue (unsigned long index);
+  TextTrackCue? getCueById(DOMString id);
+};
    -

    Returns an HTMLCollection of the area elements in the - map.

    +
    +
    cuelist . length
    +
    +

    Returns the number of cues in the list.

    -
    map . images
    - +
    cuelist[index]
    +

    Returns the text track cue with index index in the list. The cues are sorted in text track cue order.

    +
    -

    Returns an HTMLCollection of the img and object - elements that use the map.

    - +
    cuelist . getCueById( id )
    +
    +

    Returns the first text track cue (in text track cue order) with text track cue identifier id.

    +

    Returns null if none of the cues have the given identifier or if the argument is the empty string.

    -

    The areas attribute must return an - HTMLCollection rooted at the map element, whose filter matches only - area elements.

    +

    A TextTrackCueList object represents a dynamically updating list of text track cues in a given order.

    -

    The images attribute must return an - HTMLCollection rooted at the Document node, whose filter matches only - img and object elements that are associated with this map - element according to the image map processing model.

    +

    The length attribute must return + the number of cues in the list represented by the + TextTrackCueList object.

    -

    The IDL attribute name must reflect - the content attribute of the same name.

    +

    The supported property indices of a TextTrackCueList object at any + instant are the numbers from zero to the number of cues in the + list represented by the TextTrackCueList object minus one, if any. If there are no + cues in the list, there are no supported property + indices.

    -
    - +

    To determine the value of an indexed property for a given index index, the user agent must return the indexth text track + cue in the list represented by the TextTrackCueList object.

    -
    +

    The getCueById(id) method, when called with an argument other than the empty string, + must return the first text track cue in the list represented by the + TextTrackCueList object whose text track cue identifier is id, if any, or null otherwise. If the argument is the empty string, then the method + must return null.

    -

    Image maps can be defined in conjunction with other content on the page, to ease maintenance. - This example is of a page with an image map at the top of the page and a corresponding set of - text links at the bottom.

    +
    - 
    <!DOCTYPE HTML>
-<TITLE>Babies™: Toys</TITLE>
-<HEADER>
- <H1>Toys</H1>
- <IMG SRC="/images/menu.gif"
-      ALT="Babies™ navigation menu. Select a department to go to its page."
-      USEMAP="#NAV">
-</HEADER>
- ...
-<FOOTER>
- <MAP NAME="NAV">
-  <P>
-   <A HREF="/clothes/">Clothes</A>
-   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
-   <A HREF="/toys/">Toys</A>
-   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
-   <A HREF="/food/">Food</A>
-   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
-   <A HREF="/books/">Books</A>
-   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
- </MAP>
-</FOOTER>
    +
    - + 
    interface TextTrackCue : EventTarget {
+  readonly attribute TextTrack? track;
 
+           attribute DOMString id;
+           attribute double startTime;
+           attribute double endTime;
+           attribute boolean pauseOnExit;
 
+           attribute EventHandler onenter;
+           attribute EventHandler onexit;
+};
    -

    The area element

    +
    -
    -
    Categories:
    -
    Flow content.
    -
    Phrasing content.
    -
    Contexts in which this element can be used:
    -
    Where phrasing content is expected, but only if there is a map element ancestor or a template element ancestor.
    -
    Content model:
    -
    Empty.
    -
    Content attributes:
    -
    Global attributes
    -
    alt
    -
    coords
    -
    shape
    -
    href
    -
    target
    -
    download
    -
    ping
    -
    rel
    -
    hreflang
    -
    type
    -
    DOM interface:
    +
    cue . track
    -
    interface HTMLAreaElement : HTMLElement {
-           attribute DOMString alt;
-           attribute DOMString coords;
-           attribute DOMString shape;
-           attribute DOMString target;
-           attribute DOMString download;
-  [PutForwards=value] attribute DOMSettableTokenList ping;
-           attribute DOMString rel;
-  readonly attribute DOMTokenList relList;
-           attribute DOMString hreflang;
-           attribute DOMString type;
-};
-HTMLAreaElement implements URLUtils;
    +

    Returns the TextTrack object to which this + text track cue belongs, if any, or null + otherwise.

    -
    - -

    The area element represents either a hyperlink with some text and a - corresponding area on an image map, or a dead area on an image map.

    - -

    An area element with a parent node must have a map element ancestor - or a template element ancestor.

    -

    If the area element has an href - attribute, then the area element represents a hyperlink. In this case, - the alt attribute must be present. It specifies the - text of the hyperlink. Its value must be text that, when presented with the texts specified for - the other hyperlinks of the image map, and with the alternative text of the image, - but without the image itself, provides the user with the same kind of choice as the hyperlink - would when used without its text but with its shape applied to the image. The alt attribute may be left blank if there is another area - element in the same image map that points to the same resource and has a non-blank - alt attribute.

    - -

    If the area element has no href - attribute, then the area represented by the element cannot be selected, and the alt attribute must be omitted.

    - -

    In both cases, the shape and coords attributes specify the area.

    - -

    The shape attribute is an enumerated - attribute. The following table lists the keywords defined for this attribute. The states - given in the first cell of the rows with keywords give the states to which those keywords map. - Some of the keywords are non-conforming, as noted in the last - column.

    +
    cue . id [ = value ]
    +
    +

    Returns the text track cue identifier.

    +

    Can be set.

    +
    - - - - - - - - - - - -
    State - Keywords - Notes -
    Circle state - circle - -
    circ - Non-conforming -
    Default state - default - -
    Polygon state - poly - -
    polygon - Non-conforming -
    Rectangle state - rect - -
    rectangle - Non-conforming -
    +
    cue . startTime [ = value ]
    +
    +

    Returns the text track cue start time, in seconds.

    +

    Can be set.

    +
    -

    The attribute may be omitted. The missing value default is the rectangle state.

    +
    cue . endTime [ = value ]
    +
    +

    Returns the text track cue end time, in seconds.

    +

    Can be set.

    +
    -

    The coords attribute must, if specified, - contain a valid list of integers. This attribute gives the coordinates for the shape - described by the shape attribute. The - processing for this attribute is described as part of the image map processing - model.

    +
    cue . pauseOnExit [ = value ]
    +
    +

    Returns true if the text track cue pause-on-exit flag is set, false otherwise.

    +

    Can be set.

    +
    - +
    -

    In the circle state, area elements must - have a coords attribute present, with three integers, the - last of which must be non-negative. The first integer must be the distance in CSS pixels from the - left edge of the image to the center of the circle, the second integer must be the distance in CSS - pixels from the top edge of the image to the center of the circle, and the third integer must be - the radius of the circle, again in CSS pixels.

    +
    -

    In the default state state, area - elements must not have a coords attribute. (The area is the - whole image.)

    +

    The track attribute, on getting, must + return the TextTrack object of the text track in whose list of cues the text track cue that the + TextTrackCue object represents finds itself, if any; or null otherwise.

    -

    In the polygon state, area elements must - have a coords attribute with at least six integers, and the - number of integers must be even. Each pair of integers must represent a coordinate given as the - distances from the left and the top of the image in CSS pixels respectively, and all the - coordinates together must represent the points of the polygon, in order.

    +

    The id attribute, on getting, must return + the text track cue identifier of the text track cue that the + TextTrackCue object represents. On setting, the text track cue + identifier must be set to the new value.

    -

    In the rectangle state, area elements must - have a coords attribute with exactly four integers, the - first of which must be less than the third, and the second of which must be less than the fourth. - The four points must represent, respectively, the distance from the left edge of the image to the - left side of the rectangle, the distance from the top edge to the top side, the distance from the - left edge to the right side, and the distance from the top edge to the bottom side, all in CSS - pixels.

    +

    The startTime attribute, on + getting, must return the text track cue start time of the text track cue + that the TextTrackCue object represents, in seconds. On setting, the text track + cue start time must be set to the new value, interpreted in seconds; then, if the + TextTrackCue object's text track cue is in a text track's + list of cues, and that text track is in + a media element's list of text tracks, and the media + element's show poster flag is not set, then run the time marches on steps for that media element.

    -
    +

    The endTime attribute, on getting, + must return the text track cue end time of the text track cue that the + TextTrackCue object represents, in seconds. On setting, the text track cue end + time must be set to the new value, interpreted in seconds; then, if the + TextTrackCue object's text track cue is in a text track's + list of cues, and that text track is in + a media element's list of text tracks, and the media + element's show poster flag is not set, then run the time marches on steps for that media element.

    -

    When user agents allow users to follow hyperlinks or - download hyperlinks created using the - area element, as described in the next section, the href, target, download, and ping - attributes decide how the link is followed. The rel, hreflang, and type - attributes may be used to indicate to the user the likely nature of the target resource before the - user follows the link.

    +

    The pauseOnExit attribute, on + getting, must return true if the text track cue pause-on-exit flag of the text + track cue that the TextTrackCue object represents is set; or false otherwise. + On setting, the text track cue pause-on-exit flag must be set if the new value is + true, and must be unset otherwise.

    -

    The target, download, ping, - rel, hreflang, and type - attributes must be omitted if the href attribute is not - present.

    -

    If the itemprop attribute is specified on an - area element, then the href attribute must - also be specified.

    +
    Text tracks describing chapters
    -
    +

    Chapters are segments of a media resource with a given title. Chapters can be + nested, in the same way that sections in a document outline can have subsections.

    -

    The activation behavior of area elements is to run the following - steps:

    +

    Each text track cue in a text track being used for describing + chapters has three key features: the text track cue start time, giving the start time + of the chapter, the text track cue end time, giving the end time of the chapter, and + the text track cue data giving the chapter title.

    -
      +
      -

    1. If the area element's Document is not fully active, - then abort these steps.

      2. +

      The rules for constructing the chapter tree from a text track are as follows. They + produce a potentially nested list of chapters, each of which have a start time, end time, title, + and a list of nested chapters. This algorithm discards cues that do not correctly nest within each + other, or that are out of order.

      -
    2. +
        -

        If the area element has a download - attribute and the algorithm is not allowed to show a popup, or the element's target attribute is present and applying the rules - for choosing a browsing context given a browsing context name, using the value of the - target attribute as the browsing context name, would - result in there not being a chosen browsing context, then run these substeps:

        +

      1. Let list be a copy of the list + of cues of the text track being processed.

        2. -
          +

        1. Remove from list any text track cue whose text + track cue end time is before its text track cue start time.

          2. -

        2. If there is an entry settings object, throw an - InvalidAccessError exception.

          3. +

        3. Let output be an empty list of chapters, where a chapter is a record + consisting of a start time, an end time, a title, and a (potentially empty) list of nested + chapters. For the purpose of this algorithm, each chapter also has a parent chapter.

          4. -

        4. Abort these steps without following the hyperlink.

          5. +

        5. Let current chapter be a stand-in chapter whose start time is negative + infinity, whose end time is positive infinity, and whose list of nested chapters is output. (This is just used to make the algorithm easier to describe.)

          6. -
        + +

      2. Loop: If list is empty, jump to the step labeled + end.

        3. - + +

      3. Let current cue be the first cue in list, and then + remove it from list.

        4. -

      4. Otherwise, the user agent must follow the - hyperlink or download the hyperlink created - by the area element, if any, and as determined by the download attribute and any expressed user - preference.

        5. +

      5. If current cue's text track cue start time is less than + the start time of current chapter, then return to the step labeled + loop.

        -
      +

    3. While current cue's text track cue start time is greater + than or equal to current chapter's end time, let current + chapter be current chapter's parent chapter.

      4. -

      The IDL attributes alt, coords, target, download, ping, rel, - hreflang, and type, each must reflect the respective - content attributes of the same name.

      +

    4. If current cue's text track cue end time is greater than + the end time of current chapter, then return to the step labeled + loop.

      -

      The IDL attribute shape must - reflect the shape content attribute.

      +
    5. -

      The IDL attribute relList must - reflect the rel content attribute.

      +

      Create a new chapter new chapter, whose start time is current cue's text track cue start time, whose end time is current cue's text track cue end time, whose title is current cue's text track cue data interpreted according to its + rules for rendering the cue in isolation, and whose list of nested chapters is + empty.

      -
      +

      For WebVTT, the rules for rendering the cue in isolation are the + rules for interpreting WebVTT cue text.

      -

      The area element also supports the URLUtils interface.

      +
      6. -

      When the element is created, and whenever the element's href content attribute is set, changed, or removed, the user - agent must invoke the element's URLUtils interface's set the input algorithm with the value of the href content attribute, if any, or the empty string otherwise, - as the given value.

      +

    6. Append new chapter to current chapter's list of + nested chapters, and let current chapter be new chapter's + parent.

      7. -

      The element's URLUtils interface's get the - base algorithm must simply return the element's base URL.

      +

    7. Let current chapter be new chapter.

      8. -

      The element's URLUtils interface's query - encoding is the document's character encoding.

      +

    8. Return to the step labeled loop.

      9. + -

      When the element's URLUtils interface invokes its update steps with a string value, the user - agent must set the element's href content attribute to - the string value.

      +

    9. End: Return output.

      10. + +
    +
    +

    The following snippet of a WebVTT file shows how nested chapters can be marked + up. The file describes three 50-minute chapters, "Astrophysics", "Computational Physics", and + "General Relativity". The first has three subchapters, the second has four, and the third has + two.

    -

    Image maps

    + 
    WEBVTT
 
-  
+00:00:00.000 --> 00:50:00.000
+Astrophysics
 
-  
    
+00:00:00.000 --> 00:10:00.000
+Introduction to Astrophysics
 
-  
    Authoring
    
+00:10:00.000 --> 00:45:00.000
+The Solar System
 
-  
    
+00:00:00.000 --> 00:10:00.000
+Coursework Description
 
-  
    An image map allows geometric areas on an image to be associated with hyperlinks.
    
+00:50:00.000 --> 01:40:00.000
+Computational Physics
 
-  
    An image, in the form of an img element or an object element
-  representing an image, may be associated with an image map (in the form of a map
-  element) by specifying a usemap attribute on
-  the img or object element. The usemap attribute, if specified, must be a valid
-  hash-name reference to a map element.
    
+00:50:00.000 --> 00:55:00.000
+Introduction to Programming
 
-  
    
+00:55:00.000 --> 01:30:00.000
+Data Structures
 
-   
    Consider an image that looks as follows:
    
+01:30:00.000 --> 01:35:00.000
+Answers to Last Exam
 
-   
    A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.
    
+01:35:00.000 --> 01:40:00.000
+Coursework Description
 
-   
    If we wanted just the coloured areas to be clickable, we could do it as follows:
    
+01:40:00.000 --> 02:30:00.000
+General Relativity
 
-   
    <p>
- Please select a shape:
- <img src="shapes.png" usemap="#shapes"
-      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
- <map name="shapes">
-  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
-  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
-  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
-  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
-  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
-        href="yellow.html" alt="Yellow star.">
- </map>
-</p>
    
+01:40:00.000 --> 02:00:00.000
+Tensor Algebra
+
+02:00:00.000 --> 02:30:00.000
+The General Relativistic Field Equations
    +
    -
    Processing model
    +
    Event handlers for objects of the text track APIs
    -

    If an img element or an object element representing an image has a - usemap attribute specified, user agents must process it - as follows:

    +

    The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL + attributes, by all objects implementing the TextTrackList interface:

    -
      + + + +
      Event handler Event handler event type +
      onchange change +
      onaddtrack addtrack +
      onremovetrack removetrack +
      -

    1. First, rules for parsing a hash-name reference to a map element - must be followed. This will return either an element (the map) or - null.

      2. +

      The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL + attributes, by all objects implementing the TextTrack interface:

      -

    2. If that returned null, then abort these steps. The image is not associated with an image - map after all.

      3. + + + +
      Event handler Event handler event type +
      oncuechange cuechange +
      -

    3. Otherwise, the user agent must collect all the area elements that are - descendants of the map. Let those be the areas.

      4. +

      The following are the event handlers that (and their corresponding event handler event types) must be supported, as event handler IDL + attributes, by all objects implementing the TextTrackCue interface:

      -
    + + + +
    Event handler Event handler event type +
    onenter enter +
    onexit exit +
    -

    Having obtained the list of area elements that form the image map (the areas), interactive user agents must process the list in one of two ways.

    +
    -

    If the user agent intends to show the text that the img element represents, then - it must use the following steps.

    -

    In user agents that do not support images, or that have images disabled, - object elements cannot represent images, and thus this section never applies (the - fallback content is shown instead). The following steps therefore only apply to - img elements.

    -
      +
      Best practices for metadata text tracks
      -

    1. Remove all the area elements in areas that have no href attribute.

      2. + -

    2. Remove all the area elements in areas that have no alt attribute, or whose alt - attribute's value is the empty string, if there is another area element in - areas with the same value in the href attribute and with a non-empty alt attribute.

      3. +

      Text tracks can be used for storing data relating to the media data, for interactive or + augmented views.

      -

    3. Each remaining area element in areas represents a - hyperlink. Those hyperlinks should all be made available to the user in a manner - associated with the text of the img.

      +

      For example, a page showing a sports broadcast could include information about the current + score. Suppose a robotics competition was being streamed live. The image could be overlayed with + the scores, as follows:

      -

      In this context, user agents may represent area and img elements - with no specified alt attributes, or whose alt - attributes are the empty string or some other non-visible text, in a user-agent-defined fashion - intended to indicate the lack of suitable author-provided text.

      4. +

      -

    +

    In order to make the score display render correctly whenever the user seeks to an arbitrary + point in the video, the metadata text track cues need to be as long as is appropriate for the + score. For example, in the frame above, there would be maybe one cue that lasts the length of the + match that gives the match number, one cue that lasts until the blue alliance's score changes, and + one cue that lasts until the red alliance's score changes. If the video is just a stream of the + live event, the time in the bottom right would presumably be automatically derived from the + current video time, rather than based on a cue. However, if the video was just the highlights, + then that might be given in cues also.

    -

    If the user agent intends to show the image and allow interaction with the image to select - hyperlinks, then the image must be associated with a set of layered shapes, taken from the - area elements in areas, in reverse tree order (so the last - specified area element in the map is the bottom-most shape, and - the first element in the map, in tree order, is the top-most shape).

    +

    The following shows what fragments of this could look like in a WebVTT file:

    -

    Each area element in areas must be processed as follows to - obtain a shape to layer onto the image:

    + 
    WEBVTT
 
-  
      
+...
 
-   
    1. Find the state that the element's shape attribute
-   represents.
      2. 
+05:10:00.000 --> 05:12:15.000
+matchtype:qual
+matchnumber:37
 
-   
    2. Use the rules for parsing a list of integers to parse the element's coords attribute, if it is present, and let the result be the
-   coords list. If the attribute is absent, let the coords
-   list be the empty list.
      3. 
+...
 
-   
    3. 
+05:11:02.251 --> 05:11:17.198
+red:78
 
-    
      If the number of items in the coords list is less than the minimum number
-    given for the area element's current state, as per the following table, then the
-    shape is empty; abort these steps.
      
+05:11:03.672 --> 05:11:54.198
+blue:66
 
-    
-     
-      
-       
-      
-       
-       
-       
-       
      State
-       Minimum number of items
-     
      Circle state
-       3
-      
      Default state
-       0
-      
      Polygon state
-       6
-      
      Rectangle state
-       4
-    
      
+05:11:17.198 --> 05:11:25.912
+red:80
 
-   
      4. 
+05:11:25.912 --> 05:11:26.522
+red:83
 
-   
    4. 
+05:11:26.522 --> 05:11:26.982
+red:86
 
-    
      Check for excess items in the coords list as per the entry in the
-    following list corresponding to the shape attribute's
-    state:
      
+05:11:26.982 --> 05:11:27.499
+red:89
 
-    
      
-     
      Circle state
      
-     
      Drop any items in the list beyond the third.
      
-     
      Default state
      
-     
      Drop all items in the list.
      
-     
      Polygon state
      
-     
      Drop the last item if there's an odd number of items.
      
-     
      Rectangle state
      
-     
      Drop any items in the list beyond the fourth.
      
-    
      
+...
    - +

    The key here is to notice that the information is given in cues that span the length of time to + which the relevant event applies. If, instead, the scores were given as zero-length (or very + brief, nearly zero-length) cues when the score changes, for example saying "red+2" at + 05:11:17.198, "red+3" at 05:11:25.912, etc, problems arise: primarily, seeking is much harder to + implement, as the script has to walk the entire list of cues to make sure that no notifications + have been missed; but also, if the cues are short it's possible the script will never see that + they are active unless it listens to them specifically.

    -

  • If the shape attribute represents the rectangle state, and the first number in the list is - numerically less than the third number in the list, then swap those two numbers around.

    • +

    When using cues in this manner, authors are encouraged to use the cuechange event to update the current annotations. (In + particular, using the timeupdate event would be less + appropriate as it would require doing work even when the cues haven't changed, and, more + importantly, would introduce a higher latency between when the metatata cues become active and + when the display is updated, since timeupdate events + are rate-limited.)

    -

  • If the shape attribute represents the rectangle state, and the second number in the list is - numerically less than the fourth number in the list, then swap those two numbers around.

    • -

  • If the shape attribute represents the circle state, and the third number in the list is less than - or equal to zero, then the shape is empty; abort these steps.

    • -

  • Now, the shape represented by the element is the one described for the entry in the list - below corresponding to the state of the shape attribute:

    +
    User interface
    -
    +

    The controls attribute is a boolean + attribute. If present, it indicates that the author has not provided a scripted controller + and would like the user agent to provide its own set of controls.

    -
    Circle state
    -
    +
    -

    Let x be the first number in coords, y be the second number, and r be the third number.

    +

    If the attribute is present, or if scripting is + disabled for the media element, then the user agent should expose a user + interface to the user. This user interface should include features to begin playback, pause + playback, seek to an arbitrary position in the content (if the content supports arbitrary + seeking), change the volume, change the display of closed captions or embedded sign-language + tracks, select different audio tracks or turn on audio descriptions, and show the media content in + manners more suitable to the user (e.g. full-screen video or in an independent resizable window). + Other controls may also be made available.

    -

    The shape is a circle whose center is x CSS pixels from the left edge - of the image and y CSS pixels from the top edge of the image, and whose - radius is r pixels.

    +

    If the media element has a current media controller, then the user + agent should expose audio tracks from all the slaved media elements (although + avoiding duplicates if the same media resource is being used several times). If a + media resource's audio track exposed in this way has no known name, and it is the + only audio track for a particular media element, the user agent should use the + element's title attribute, if any, as the name (or as part of the + name) of that track.

    -
    +

    Even when the attribute is absent, however, user agents may provide controls to affect playback + of the media resource (e.g. play, pause, seeking, and volume controls), but such features should + not interfere with the page's normal rendering. For example, such features could be exposed in the + media element's context menu. The user agent may implement this simply by exposing a user interface to the user as + described above (as if the controls attribute was + present).

    -
    Default state
    -
    +

    If the user agent exposes a user interface to + the user by displaying controls over the media element, then the user agent + should suppress any user interaction events while the user agent is interacting with this + interface. (For example, if the user clicks on a video's playback control, mousedown events and so forth would not simultaneously be fired at + elements on the page.)

    -

    The shape is a rectangle that exactly covers the entire image.

    +

    Where possible (specifically, for starting, stopping, pausing, and unpausing playback, for + seeking, for changing the rate of playback, for fast-forwarding or rewinding, for listing, + enabling, and disabling text tracks, and for muting or changing the volume of the audio), user + interface features exposed by the user agent must be implemented in terms of the DOM API described + above, so that, e.g., all the same events fire.

    + +

    When a media element has a current media controller, the user agent's + user interface for pausing and unpausing playback, for seeking, for changing the rate of playback, + for fast-forwarding or rewinding, and for muting or changing the volume of audio of the entire + group must be implemented in terms of the MediaController API exposed on that + current media controller. When a media element has a current media + controller, and all the slaved media elements of that + MediaController are paused, the user agent should also unpause all the slaved + media elements when the user invokes a user agent interface control for beginning + playback.

    + +

    The "play" function in the user agent's interface must set the playbackRate attribute to the value of the defaultPlaybackRate attribute before invoking the play() + method. When a media element has a current media controller, the + attributes and method with those names on that MediaController object must be used. + Otherwise, the attributes and method with those names on the media element itself + must be used.

    -
    +

    Features such as fast-forward or rewind must be implemented by only changing the playbackRate attribute (and not the defaultPlaybackRate + attribute). Again, when a media element has a current media controller, + the attributes with those names on that MediaController object must be used; + otherwise, the attributes with those names on the media element itself must be used.

    -
    Polygon state
    -
    +

    When a media element has a current media controller, seeking must be + implemented in terms of the currentTime + attribute on that MediaController object. Otherwise, the user agent must directly + seek to the requested position in the media + element's media timeline. For media resources where seeking to an arbitrary + position would be slow, user agents are encouraged to use the approximate-for-speed flag + when seeking in response to the user manipulating an approximate position interface such as a seek + bar.

    -

    Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0).

    +

    When a media element has a current media controller, user agents may + additionally provide the user with controls that directly manipulate an individual media + element without affecting the MediaController, but such features are + considered relatively advanced and unlikely to be useful to most users.

    -

    Let the coordinates be (xi, yi), - interpreted in CSS pixels measured from the top left of the image, for all integer values of - i from 0 to (N/2)-1, where N is the number of items in coords.

    +

    The activation behavior of a media element that is exposing a user interface to the user must be + to run the following steps:

    -

    The shape is a polygon whose vertices are given by the coordinates, and - whose interior is established using the even-odd rule.

    +
      - +

    1. If the media element has a current media controller, and that + current media controller is a restrained media controller, then invoke + the play() method of the + MediaController.

      2. -
    +

  • Otherwise, if the media element has a current media controller, + and that current media controller is a paused media controller, then + invoke the unpause() method of the + MediaController.

    • -
    Rectangle state
    +

  • Otherwise, if the media element has a current media controller, + then that current media controller is a playing media controller; + invoke the pause() method of the + MediaController.

    • -
    +

  • Otherwise, the media element has no current media controller; if + the media element's paused attribute is true, + then invoke the play() method on the media + element.

    • -

    Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number.

    +

  • Otherwise, the media element has no current media controller, + and the media element's paused attribute is + false; invoke the pause() method on the media + element.

    • -

    The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose - bottom right corner is given by the coordinate (x2, - y2), those coordinates being interpreted as CSS pixels - from the top left corner of the image.

    + -
    +

    For the purposes of listing chapters in the media resource, only text tracks in the media element's list of text tracks + that are showing and whose text track kind is + chapters should be used. Such tracks must be + interpreted according to the rules for constructing the chapter tree from a text + track. When seeking in response to a user maniplating a chapter selection interface, user + agents should not use the approximate-for-speed flag.

    -
    +

    The controls IDL attribute must + reflect the content attribute of the same name.

    -

    For historical reasons, the coordinates must be interpreted relative to the - displayed image after any stretching caused by the CSS 'width' and 'height' properties - (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the - aforementioned CSS properties).

    +
    -

    Browser zoom features and transforms applied using CSS or SVG do not affect the - coordinates.

    +
    • - +
    - +
    media . volume [ = value ]
    -

    Pointing device interaction with an image associated with a set of layered shapes per the above - algorithm must result in the relevant user interaction events being first fired to the top-most - shape covering the point that the pointing device indicated, if any, or to the image element - itself, if there is no shape covering that point. User agents may also allow individual - area elements representing hyperlinks to be selected - and activated (e.g. using a keyboard).

    +
    -

    Because a map element (and its area elements) can be - associated with multiple img and object elements, it is possible for an - area element to correspond to multiple focusable areas - of the document.

    +

    Returns the current playback volume, as a number in the range 0.0 to 1.0, where 0.0 is the + quietest and 1.0 the loudest.

    -

    Image maps are live; if the DOM is mutated, then the user agent must act as if it - had rerun the algorithms for image maps.

    +

    Can be set, to change the volume.

    - +

    Throws an IndexSizeError exception if the new value is not in the range 0.0 .. 1.0.

    +
    +
    media . muted [ = value ]
    -

    MathML

    +
    -

    The math element from the MathML namespace - falls into the embedded content, phrasing content, and flow - content categories for the purposes of the content models in this specification.

    +

    Returns true if audio is muted, overriding the volume + attribute, and false if the volume attribute is being + honored.

    -

    This specification refers to several specific MathML elements, in particular: - annotation-xml, - merror, - mi, - mn, - mo, - ms, and - mtext. -

    +

    Can be set, to change whether the audio is muted or not.

    -

    When the MathML annotation-xml element contains - elements from the HTML namespace, such elements must all be flow - content.

    +
    -

    When the MathML token elements (mi, mo, mn, ms, - and mtext) are descendants of HTML elements, they may contain - phrasing content elements from the HTML namespace.

    - +
    - +

    A media element has a playback volume, which is a fraction in the range 0.0 (silent) to 1.0 (loudest). + Initially, the volume should be 1.0, but user agents may remember the last set value across + sessions, on a per-site basis or otherwise, so the volume may start at other values.

    -

    User agents must handle text other than inter-element whitespace found in MathML - elements whose content models do not allow straight text by pretending for the purposes of MathML - content models, layout, and rendering that that text is actually wrapped in an mtext element in the MathML namespace. (Such text is not, - however, conforming.)

    +

    The volume IDL attribute must return the + playback volume of any audio portions of the + media element. On setting, if the new value is in the range 0.0 to 1.0 inclusive, the + media element's playback volume must be + set to the new value. If the new value is outside the range 0.0 to 1.0 inclusive, then, on + setting, an IndexSizeError exception must be thrown instead.

    -

    User agents must act as if any MathML element whose contents does not match the element's - content model was replaced, for the purposes of MathML layout and rendering, by an merror element in the MathML namespace containing some - appropriate error message.

    +

    A media element can also be muted. If + anything is muting the element, then it is muted. (For example, when the direction of + playback is backwards, the element is muted.)

    -

    To enable authors to use MathML tools that only accept MathML in its XML form, interactive HTML - user agents are encouraged to provide a way to export any MathML fragment as an XML - namespace-well-formed XML fragment.

    +

    The muted IDL attribute must return the value + to which it was last set. When a media element is created, if the element has a muted content attribute specified, then the muted IDL attribute should be set to true; otherwise, the user + agents may set the value to the user's preferred value (e.g. remembering the last set value across + sessions, on a per-site basis or otherwise). While the muted + IDL attribute is set to true, the media element must be muted.

    -
    +

    Whenever either of the values that would be returned by the volume and muted IDL + attributes change, the user agent must queue a task to fire a simple + event named volumechange at the media + element.

    -

    The semantics of MathML elements are defined by the MathML specification and other - applicable specifications.

    +

    An element's effective media volume is determined as follows:

    -
    +
      -

      Here is an example of the use of MathML in an HTML document:

      +

    1. If the user has indicated that the user agent is to override the volume of the element, + then the element's effective media volume is the volume desired by the user. Abort + these steps.

      2. - 
      <!DOCTYPE html>
-<html>
- <head>
-  <title>The quadratic formula</title>
- </head>
- <body>
-  <h1>The quadratic formula</h1>
-  <p>
-   <math>
-    <mi>x</mi>
-    <mo>=</mo>
-    <mfrac>
-     <mrow>
-      <mo form="prefix">−</mo> <mi>b</mi>
-      <mo>±</mo>
-      <msqrt>
-       <msup> <mi>b</mi> <mn>2</mn> </msup>
-       <mo>−</mo>
-       <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
-      </msqrt>
-     </mrow>
-     <mrow>
-      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
-     </mrow>
-    </mfrac>
-   </math>
-  </p>
- </body>
-</html>
      +

    2. If the element's audio output is muted, the + element's effective media volume is zero. Abort these steps.

      3. -
    +

  • If the element has a current media controller and that + MediaController object's media controller mute override is true, the + element's effective media volume is zero. Abort these steps.

    • + +

  • Let volume be the playback + volume of the audio portions of the media element, in range 0.0 (silent) to + 1.0 (loudest).

    • + +

  • If the element has a current media controller, multiply volume by that MediaController object's media controller + volume multiplier. (The media controller volume multiplier is in the range + 0.0 to 1.0, so this can only reduce the value.)

    • +

  • The element's effective media volume is volume, + interpreted relative to the range 0.0 to 1.0, with 0.0 being silent, and 1.0 being the loudest + setting, values in between increasing in loudness. The range need not be linear. The loudest + setting may be lower than the system's loudest possible setting; for example the user could have + set a maximum volume.

    • + -

    SVG

    + -

    The svg element from the SVG namespace falls into the - embedded content, phrasing content, and flow content - categories for the purposes of the content models in this specification.

    +

    The muted content attribute on media elements is a boolean attribute that controls the + default state of the audio output of the media resource, potentially overriding user + preferences.

    -

    To enable authors to use SVG tools that only accept SVG in its XML form, interactive HTML user - agents are encouraged to provide a way to export any SVG fragment as an XML namespace-well-formed - XML fragment.

    +

    The defaultMuted IDL attribute must + reflect the muted content attribute.

    -

    When the SVG foreignObject element contains elements from the HTML - namespace, such elements must all be flow content.

    - -

    The content model for title elements in the SVG namespace - inside HTML documents is phrasing content. (This further constrains the - requirements given in the SVG specification.)

    +

    This attribute has no dynamic effect (it only controls the default state of the + element).

    -

    The semantics of SVG elements are defined by the SVG specification and other applicable - specifications.

    +
    +

    This video (an advertisement) autoplays, but to avoid annoying users, it does so without + sound, and allows the user to turn the sound on.

    + 
    <video src="adverts.cgi?kind=video" controls autoplay loop muted></video>
    -

    Dimension attributes

    +
    -

    Author requirements: The width and height attributes on img, iframe, - embed, object, video, and, when their type attribute is in the Image Button state, input elements may be - specified to give the dimensions of the visual content of the element (the width and height - respectively, relative to the nominal direction of the output medium), in CSS pixels. The - attributes, if specified, must have values that are valid non-negative integers.

    -

    The specified dimensions given may differ from the dimensions specified in the resource itself, - since the resource may have a resolution that differs from the CSS pixel resolution. (On screens, - CSS pixels have a resolution of 96ppi, but in general the CSS pixel resolution depends on the - reading distance.) If both attributes are specified, then one of the following statements must be - true:

    -
      -
    • specified width - 0.5 ≤ - specified height * target ratio ≤ - specified width + 0.5
      • +
      Time ranges
      -
    • specified height - 0.5 ≤ - specified width / target ratio ≤ - specified height + 0.5
      • +

      Objects implementing the TimeRanges interface + represent a list of ranges (periods) of time.

      -
    • specified height = specified width = 0
      • + 
      interface TimeRanges {
+  readonly attribute unsigned long length;
+  double start(unsigned long index);
+  double end(unsigned long index);
+};
      -
    +
    -

    The target ratio is the ratio of the intrinsic width to the intrinsic - height in the resource. The specified width and specified - height are the values of the width and height attributes respectively.

    +
    media . length
    -

    The two attributes must be omitted if the resource in question does not have both an intrinsic - width and an intrinsic height.

    +
    -

    If the two attributes are both zero, it indicates that the element is not intended for the user - (e.g. it might be a part of a service to count page views).

    +

    Returns the number of ranges in the object.

    -

    The dimension attributes are not intended to be used to stretch the image.

    +
    -
    +
    time = media . start(index)
    -

    User agent requirements: User agents are expected to use these attributes as hints for the rendering.

    +
    -

    The width and height IDL attributes on the iframe, - embed, object, and video elements must reflect - the respective content attributes of the same name.

    +

    Returns the time for the start of the range with the given index.

    -

    For iframe, embed, and object the IDL - attributes are DOMString; for video the IDL attributes are unsigned long.

    +

    Throws an IndexSizeError exception if the index is out of range.

    -

    The corresponding IDL attributes for img and - input elements are defined in those respective elements' - sections, as they are slightly more specific to those elements' other behaviors.

    +
    -
    +
    time = media . end(index)
    +
    +

    Returns the time for the end of the range with the given index.

    - +

    Throws an IndexSizeError exception if the index is out of range.

    -

    Introduction

    +
    -

    Links are a conceptual construct, created by a, area, and - link elements, that represent a connection between - two resources, one of which is the current Document. There are two kinds of links in - HTML:

    +
    -
    +
    -
    Links to external resources
    +

    The length IDL attribute must return the + number of ranges represented by the object.

    -

    These are links to resources that are to be used to augment the current document, - generally automatically processed by the user agent.

    +

    The start(index) + method must return the position of the start of the indexth range represented + by the object, in seconds measured from the start of the timeline that the object covers.

    -
    Hyperlinks
    +

    The end(index) method + must return the position of the end of the indexth range represented by the + object, in seconds measured from the start of the timeline that the object covers.

    -

    These are links to other resources that are generally exposed to the user by the user - agent so that the user can cause the user agent to navigate to those resources, e.g. - to visit them in a browser or download them.

    +

    These methods must throw IndexSizeError exceptions if called with an index argument greater than or equal to the number of ranges represented by the + object.

    -
    +

    When a TimeRanges object is said to be a normalised TimeRanges + object, the ranges it represents must obey the following criteria:

    -

    For link elements with an href attribute and a - rel attribute, links must be created for the keywords of the - rel attribute, as defined for those keywords in the link types section.

    +
      -

      Similarly, for a and area elements with an href attribute and a rel attribute, links must be created for the keywords of the - rel attribute as defined for those keywords in the link types section. Unlike link elements, however, - a and area element with an href - attribute that either do not have a rel attribute, or - whose rel attribute has no keywords that are defined as - specifying hyperlinks, must also create a hyperlink. - This implied hyperlink has no special meaning (it has no link type) - beyond linking the element's document to the resource given by the element's href attribute.

      +
    • The start of a range must be greater than the end of all earlier ranges.
      • -

      A hyperlink can have one or more hyperlink - annotations that modify the processing semantics of that hyperlink.

      +
    • The start of a range must be less than the end of that same range.
      • +
    -

    Links created by a and area elements

    +

    In other words, the ranges in such an object are ordered, don't overlap, aren't empty, and + don't touch (adjacent ranges are folded into one bigger range).

    -

    The href attribute on a and - area elements must have a value that is a valid URL potentially surrounded by - spaces.

    +

    Ranges in a TimeRanges object must be inclusive.

    -

    The href attribute on a and - area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

    +

    Thus, the end of a range would be equal to the start of a following adjacent + (touching but not overlapping) range. Similarly, a range covering a whole timeline anchored at + zero would have a start equal to zero and an end equal to the duration of the timeline.

    -

    The target attribute, if present, must be - a valid browsing context name or keyword. It gives the name of the browsing - context that will be used. User agents use this name when - following hyperlinks.

    +

    The timelines used by the objects returned by the buffered, seekable and + played IDL attributes of media + elements must be that element's media timeline.

    -

    When an a or area element's activation behavior is - invoked, the user agent may allow the user to indicate a preference regarding whether the - hyperlink is to be used for navigation or whether the resource it - specifies is to be downloaded.

    + -

    In the absence of a user preference, the default should be navigation if the element has no - download attribute, and should be to download the - specified resource if it does.

    -

    Whether determined by the user's preferences or via the presence or absence of the attribute, - if the decision is to use the hyperlink for navigation then the user - agent must follow the hyperlink, and if the decision is - to use the hyperlink to download a resource, the user agent must download the hyperlink. These terms are defined in subsequent sections - below.

    +
    The TrackEvent interface
    -

    The download attribute, if present, - indicates that the author intends the hyperlink to be used for downloading a resource. The - attribute may have a value; the value, if any, specifies the default file name that the author - recommends for use in labeling the resource in a local file system. There are no restrictions on - allowed values, but authors are cautioned that most file systems have limitations with regard to - what punctuation is supported in file names, and user agents are likely to adjust file names - accordingly.

    + 
    [Constructor(DOMString type, optional TrackEventInit eventInitDict)]
+interface TrackEvent : Event {
+  readonly attribute (VideoTrack or AudioTrack or TextTrack) track;
+};
 
+dictionary TrackEventInit : EventInit {
+  (VideoTrack or AudioTrack or TextTrack) track;
+};
    -

    The ping attribute, if present, - gives the URLs of the resources that are interested in being notified if the user follows the - hyperlink. The value must be a set of space-separated tokens, each of which must be a - valid non-empty URL. The value is used by the user agent for - hyperlink auditing.

    +
    -

    The rel attribute on a and - area elements controls what kinds of links the elements create. The attribute's value - must be a set of space-separated tokens. The allowed keywords - and their meanings are defined below.

    +
    event . track
    -

    The rel attribute has no default value. If the - attribute is omitted or if none of the values in the attribute are recognised by the user agent, - then the document has no particular relationship with the destination resource other than there - being a hyperlink between the two.

    +
    -

    The hreflang attribute on - a and area elements that create hyperlinks, if present, gives the language of the linked resource. It is - purely advisory. The value must be a valid BCP 47 language tag. - User agents must not consider this attribute authoritative — upon - fetching the resource, user agents must use only language information associated with the resource - to determine its language, not metadata included in the link to the resource.

    +

    Returns the track object (TextTrack, AudioTrack, or + VideoTrack) to which the event relates.

    -

    The type attribute, if present, gives the - MIME type of the linked resource. It is purely advisory. The value must be a - valid MIME type. User agents must not consider the type attribute authoritative — upon fetching the - resource, user agents must not use metadata included in the link to the resource to determine its - type.

    +
    +
    -

    Following hyperlinks

    - -

    When a user follows a hyperlink created by an element - subject, the user agent must run the following steps:

    - -
      +

      The track attribute must return the value + it was initialised to. When the object is created, this attribute must be initialised to null. It + represents the context information for the event.

      -

    1. Let replace be false.

      2. +
    -

  • Let source be the browsing context that contains the - Document object with which subject in question is - associated.

    • -
  • -

    If the user indicated a specific browsing context when following the hyperlink, - or if the user agent is configured to follow hyperlinks by navigating a particular browsing - context, then let target be that browsing context.

    +
    Event summary
    -

    Otherwise, if subject is an a or area element - that has a target attribute, then let target be the browsing context that is chosen by applying the - rules for choosing a browsing context given a browsing context name, using the value of - the target attribute as the browsing context name. If - these rules result in the creation of a new browsing context, set replace to true.

    + -

    Otherwise, if the hyperlink is a sidebar - hyperlink, the user agent implements a feature that can be considered a secondary - browsing context, and the user agent intends to use this feature in this instance, let - target be such a secondary browsing context.

    +

    The following events fire on media elements as part of the + processing model described above:

    -

    Otherwise, if target is an a or area element - with no target attribute, but the - Document contains a base element with a target attribute, then let target be the - browsing context that is chosen by applying the rules for choosing a browsing - context given a browsing context name, using the value of the target attribute of the first such base element as - the browsing context name. If these rules result in the creation of a new browsing - context, set replace to true.

    + + + + + - + - + - + -

    Downloading resources

    + -
    + -

  • Otherwise, let URL be the resulting absolute - URL.

    • + -

    When a user agent is to handle a resource obtained from a fetch algorithm as - a download, it should provide the user with a way to save the resource for later use, if a - resource is successfully obtained; or otherwise should report any problems downloading the file to - the user.

    + + - -

  • If the resource has a Content-Disposition - header, that header specifies the attachment disposition type, and the - header includes file name information, then let filename have the value - specified by the header, and jump to the step labeled sanitize below.

    • + -

  • If the download was not initiated from a hyperlink created by an - a or area element, or if the element of the hyperlink from - which it was initiated did not have a download - attribute when the download was initiated, or if there was such an attribute but its value when - the download was initiated was the empty string, then jump to the step labeled no proposed - file name.

    • + - -
  • +
    • -

    Thus, it is in the user's interests that the user be somehow notified that the resource in - question comes from quite a different source, and to prevent confusion, any suggested file name - from the potentially hostile interface origin should be ignored.

    + -

    Adjust filename to be suitable for the local file system.

    + -

  • If named type is consistent with the user's preferences (e.g. because - the value of filename was determined by prompting the user), then return filename as the file name and abort these steps.

    • + + -

    This last step would make it impossible to download executables, which might not - be desirable. As always, implementors are forced to balance security and usability in this - matter.

    + -

    User agents should ignore any directory or path information provided by the resource itself, - its URL, and any download attribute, in - deciding where to store the resulting file in the user's file system.

    + -
    Hyperlink auditing
    + + -
    If both the address of the Document - object containing the hyperlink being audited and ping URL have the - same origin
    + -
    The request must include a Ping-To HTTP header with, as - its value, target URL. The request must neither include a Referer (sic) HTTP header nor include a Ping-From HTTP header.
    + -

    For example, a visual user agent could include the hostnames of the target ping - URLs along with the hyperlink's actual URL in a status bar or tooltip.

    + -
      +
    - + + + -

    To determine which link types apply to a link, a, or - area element, the element's rel attribute must be split on spaces. The resulting tokens are the link types - that apply to that element.

    +
    Event name + Interface + Fired when... + Preconditions -

    Otherwise, let target be the browsing context that subject itself is in.

    +
    loadstart -

  • Resolve the URL given by the href attribute of that element, relative to that - element.

    • +     		Event -
  • +
    		• The user agent begins looking for media data, as part of the resource selection algorithm. -

    If that is successful, let URL be the resulting absolute - URL.

    +     		networkState equals NETWORK_LOADING -

    Otherwise, if resolving the URL failed, the - user agent may report the error to the user in a user-agent-specific manner, may queue a - task to navigate the target - browsing context to an error page to report the error, or may ignore the error and - do nothing. In any case, the user agent must then abort these steps.

    +
    progress -

  • In the case of server-side image maps, append the hyperlink - suffix to URL.

    • +     		Event -
  • +
    		• The user agent is fetching media data. -

    Queue a task to navigate the target browsing context to URL. If replace is true, the navigation must be performed with replacement - enabled. The source browsing context must be source.

    +     		networkState equals NETWORK_LOADING - +
    suspend -

    The task source for the tasks mentioned above is the DOM manipulation task - source.

    +     		Event - + The user agent is intentionally not currently fetching media data. + networkState equals NETWORK_IDLE - +
    abort -

    In some cases, resources are intended for later use rather than immediate viewing. To indicate - that a resource is intended to be downloaded for use later, rather than immediately used, the - download attribute can be specified on the - a or area element that creates the hyperlink to that - resource.

    +     		Event -

    The attribute can furthermore be given a value, to specify the file name that user agents are - to use when storing the resource in a file system. This value can be overridden by the Content-Disposition HTTP header's filename parameters.

    +     		The user agent stops fetching the media data before it is completely + downloaded, but not due to an error. -

    In cross-origin situations, the download attribute - has to be combined with the Content-Disposition HTTP - header, specifically with the attachment disposition type, to avoid the user - being warned of possibly nefarious activity. (This is to protect users from being made to download - sensitive personal or confidential information without their full understanding.)

    +     		error is an object with the code MEDIA_ERR_ABORTED. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. -
    +
    error -

    When a user downloads a hyperlink created by an - element, the user agent must run the following steps:

    +     		Event -
      +
    		An error occurs while fetching the media data. -

  • Resolve the URL given by the href attribute of that element, relative to that - element.

    • +     		error is an object with the code MEDIA_ERR_NETWORK or higher. networkState equals either NETWORK_EMPTY or NETWORK_IDLE, depending on when the download was aborted. -

  • If resolving the URL fails, the user agent - may report the error to the user in a user-agent-specific manner, may - navigate to an error page to report the error, or may - ignore the error and do nothing. In either case, the user agent must abort these steps.

    +
    • emptied -

  • In the case of server-side image maps, append the hyperlink - suffix to URL.

    • +     		Event -

  • Return to whatever algorithm invoked these steps and continue - these steps asynchronously.

    • +     		A media element whose networkState + was previously not in the NETWORK_EMPTY state has + just switched to that state (either because of a fatal error during load that's about to be + reported, or because the load() method was invoked while + the resource selection algorithm was already + running). -

  • Fetch URL and handle the resulting resource - as a download.

    • +     		networkState is NETWORK_EMPTY; all the IDL attributes are in their + initial states. - +
    stalled -

    If the user agent needs a file name for a resource being handled as a download, it - should select one using the following algorithm.

    +     		Event -

    This algorithm is intended to mitigate security dangers involved in downloading - files from untrusted sites, and user agents are strongly urged to follow it.

    +     		The user agent is trying to fetch media data, but data is unexpectedly not + forthcoming. -
      +
    		networkState is NETWORK_LOADING. -

  • Let filename be the void value.

    • +
    loadedmetadata -

  • Let interface origin be the origin of the - Document in which the download or - navigate action resulting in the download was initiated, if any.

    • +     		Event -

  • Let resource origin be the origin of the URL of the - resource being downloaded, unless that URL's scheme - component is data, in which case let resource origin be - the same as the interface origin, if any.

    • +     		The user agent has just determined the duration and dimensions of the media + resource and the text tracks are ready. -

  • If there is no interface origin, then let trusted - operation be true. Otherwise, let trusted operation be true if resource origin is the same origin as interface - origin, and false otherwise.

    • +     		readyState is newly equal to HAVE_METADATA or greater for the first time. - -

  • If trusted operation is true and the resource has a Content-Disposition header and that header includes file - name information, then let filename have the value specified by the header, - and jump to the step labeled sanitize below.

    • +
    loadeddata -

  • Let proposed filename have the value of the download attribute of the element of the - hyperlink that initiated the download at the time the download was - initiated.

    • +     		Event - - - -

  • If trusted operation is true, let filename have - the value of proposed filename, and jump to the step labeled sanitize - below.

    • +     		The user agent can render the media data at the current playback + position for the first time. - -

  • If the resource has a Content-Disposition - header and that header specifies the attachment disposition type, let filename have the value of proposed filename, and jump to the - step labeled sanitize below.

    • +     		readyState newly increased to HAVE_CURRENT_DATA or greater for the first time. - -

  • No proposed file name: If trusted operation is true, or if the - user indicated a preference for having the resource in question downloaded, let filename have a value derived from the URL of the resource in a - user-agent-defined manner, and jump to the step labeled sanitize below.

    • +
    canplay -

    Act in a user-agent-defined manner to safeguard the user from a potentially hostile - cross-origin download. If the download is not to be aborted, then let filename be set to the user's preferred file name or to a file name selected by - the user agent, and jump to the step labeled sanitize below.

    +     		Event -
    +
    		The user agent can resume playback of the media data, but estimates that if + playback were to be started now, the media resource could not be rendered at the + current playback rate up to its end without having to stop for further buffering of content. -

    If the algorithm reaches this step, then a download was begun from a different origin than - the resource being downloaded, and the origin did not mark the file as suitable for - downloading, and the download was not initiated by the user. This could be because a download attribute was used to trigger the download, or - because the resource in question is not of a type that the user agent supports.

    +     		readyState newly increased to HAVE_FUTURE_DATA or greater. -

    This could be dangerous, because, for instance, a hostile server could be trying to get a - user to unknowingly download private information and then re-upload it to the hostile server, - by tricking the user into thinking the data is from the hostile server.

    +
    canplaythrough - + Event - + The user agent estimates that if playback were to be started now, the media + resource could be rendered at the current playback rate all the way to its end without + having to stop for further buffering. -

  • Sanitize: Optionally, allow the user to influence filename. For - example, a user agent could prompt the user for a file name, potentially providing the value of - filename as determined above as a default value.

    • +     		readyState is newly equal to HAVE_ENOUGH_DATA. -
  • +
    • playing -

    For example, this could involve removing characters that are not legal in - file names, or trimming leading and trailing whitespace.

    +     		Event - + Playback is ready to start after having been paused or delayed due to lack of media + data. -

  • If the platform conventions do not in any way use extensions to determine the types of file on the file system, - then return filename as the file name and abort these steps.

    • +     		readyState is newly equal to or greater than + HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than HAVE_FUTURE_DATA. Even if this event fires, the + element might still not be potentially playing, e.g. if the element is + blocked on its media controller (e.g. because the current media + controller is paused, or another slaved media + element is stalled somehow, or because the media resource has no data + corresponding to the media controller position), or the element is paused + for user interaction or paused for in-band content. -

  • Let claimed type be the type given by the resource's Content-Type metadata, if any is known. Let named - type be the type given by filename's extension, if any is known. For the purposes of this step, a - type is a mapping of a MIME type to an extension.

    • +
    waiting -

  • If claimed type and named type are the same type - (i.e. the type given by the resource's Content-Type metadata is - consistent with the type given by filename's extension), then return filename as the file - name and abort these steps.

    • +     		Event -
  • +
    		• Playback has stopped because the next frame is not available, but the user agent expects + that frame to become available in due course. -

    If the claimed type is known, then alter filename to - add an extension corresponding to claimed - type.

    +     		readyState is equal to or less than HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position + is not contained in any of the ranges in buffered. It + is possible for playback to stop for other reasons without paused being false, but those reasons do not fire this event + (and when those situations resolve, a separate playing + event is not fired either): e.g. the element is newly blocked on its media + controller, or playback ended, or playback + stopped due to errors, or the element has paused for user interaction + or paused for in-band content. -

    Otherwise, if named type is known to be potentially dangerous (e.g. it - will be treated by the platform conventions as a native executable, shell script, HTML - application, or executable-macro-capable document) then optionally alter filename to add a known-safe extension - (e.g. ".txt").

    +
    seeking - + Event -

  • Return filename as the file name.

    • +     		The seeking IDL attribute changed to true, and the user agent has started seeking to a new position. - + -

    For the purposes of this algorithm, a file extension - consists of any part of the file name that platform conventions dictate will be used for - identifying the type of the file. For example, many operating systems use the part of the file - name following the last dot (".") in the file name to determine the type of - the file, and from that the manner in which the file is to be opened or executed.

    +
    seeked - + Event + The seeking IDL attribute changed to false after the current playback position was changed. - + -
    +
    ended -

    If a hyperlink created by an a or area element has a - ping attribute, and the user follows the hyperlink, and - the value of the element's href attribute can be resolved, relative to the element, without failure, then the user - agent must take the ping attribute's value, split that string on spaces, resolve each resulting token relative to the element, and then each resulting absolute URL ping URL should - be fetched from the origin of the - Document containing the hyperlink (as described below). (Tokens that fail to resolve are ignored.) This may be done in parallel - with the primary request, and is independent of the result of that request.

    +     		Event -

    User agents should allow the user to adjust this behavior, for example in conjunction with a - setting that disables the sending of HTTP Referer (sic) - headers. Based on the user's preferences, UAs may either ignore the ping attribute altogether, or selectively ignore URLs in the - list (e.g. ignoring any third-party URLs).

    +     		Playback has stopped because the end of the media resource was reached. -

    For each ping URL that is an HTTP URL, the request must be performed using - the POST method, with an entity body with the MIME type text/ping - consisting of the four-character string "PING". All relevant cookie and - HTTP authentication headers must be included in the request. Which other headers are required - depends on the URLs involved, as follows. For the purposes of these requirements, target URL is the resulting absolute URL obtained from resolving the value of the element's href attribute.

    +     		currentTime equals the end of the media + resource; ended is true. -
    +
    durationchange -
    The request must include a Ping-From HTTP header with, - as its value, the address of the document containing - the hyperlink, and a Ping-To HTTP header with, as its value, - the target URL. The request must not include a Referer (sic) HTTP header.
    +     		Event -
    Otherwise, if the origins are different, but the document containing the hyperlink being - audited was not retrieved over an encrypted connection
    +     		The duration attribute has just been updated. -
    The request must include a Referer (sic) HTTP header with, - as its value, the address of the document containing - the hyperlink, a Ping-From HTTP header with the same value, - and a Ping-To HTTP header with, as its value, target URL.
    +     		-
    Otherwise, the origins are different and the document containing the hyperlink being audited - was retrieved over an encrypted connection
    +
    timeupdate - + Event -

    To save bandwidth, implementors might also wish to consider omitting optional - headers such as Accept from these requests.

    +     		The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously. -

    User agents must, unless otherwise specified by the user, honor the HTTP headers (including, in - particular, redirects and HTTP cookie headers), but must ignore any entity bodies returned in the - responses. User agents may close the connection prematurely once they start receiving an entity - body.

    +     		-

    When the ping attribute is present, user agents - should clearly indicate to the user that following the hyperlink will also cause secondary - requests to be sent in the background, possibly including listing the actual target URLs.

    +
    play - + Event -
    +
    		The element is no longer paused. Fired after the play() + method has returned, or when the autoplay attribute + has caused playback to begin. -

    The ping attribute is redundant with pre-existing - technologies like HTTP redirects and JavaScript in allowing Web pages to track which off-site - links are most popular or allowing advertisers to track click-through rates.

    +     		paused is newly false. -

    However, the ping attribute provides these advantages - to the user over those alternatives:

    +
    pause -
  • It allows the user to see the final target URL unobscured.
    • +     		Event -
  • It allows the UA to inform the user about the out-of-band notifications.
    • +     		The element has been paused. Fired after the pause() + method has returned. -
  • It allows the user to disable the notifications without losing the underlying link - functionality.
    • +     		paused is newly true. -
  • It allows the UA to optimise the use of available network bandwidth so that the target page - loads faster.
    • +
    ratechange -

    Thus, while it is possible to track users without this feature, authors are encouraged to use - the ping attribute so that the user agent can make the - user experience more transparent.

    +     		Event - + Either the defaultPlaybackRate or the + playbackRate attribute has just been updated. - + +
    resize -

    Link types

    +     		Event -

    The following table summarizes the link types that are defined by this specification. This - table is non-normative; the actual definitions for the link types are given in the next few - sections.

    +     		One or both of the videoWidth and videoHeight attributes have just been updated. -

    In this section, the term referenced document refers to the resource identified by the - element representing the link, and the term current document refers to the resource within - which the element representing the link finds itself.

    +     		Media element is a video element; readyState is not HAVE_NOTHING -
    +
    volumechange - + Event -

    Except where otherwise specified, a keyword must not be specified more than once per rel attribute.

    +     		Either the volume attribute or the muted attribute has changed. Fired after the relevant + attribute's setter has returned. -

    Link types are always ASCII case-insensitive, and must be - compared as such.

    +     		-

    Thus, rel="next" is the same as rel="NEXT".

    +
    + +

    The following events fire on MediaController objects:

    + - - - - - - - - - - + - - - - - + + - - - - - - - - - - - + - - - - - - - - - - - + - - - - - + - - - - - + - - - - - - - - - - - + - - - - - + - - - - - + - - - - - - - - - - - + - - - - - + - - - - - + - - - - - - - - - - - + -
    Link typeEffect on...Brief description
    linka and area
    Event name + + Interface + + Fired when... + +
    alternate HyperlinkHyperlinkGives alternate representations of the current document.
    emptied + + Event + + All the slaved media elements newly have readyState set to HAVE_NOTHING or greater, or there are no longer any + slaved media elements.
    authorHyperlinkHyperlinkGives a link to the author of the current document or article.
    bookmark not allowedHyperlinkGives the permalink for the nearest ancestor section.
    loadedmetadata + + Event - + All the slaved media elements newly have readyState set to HAVE_METADATA or greater. -
    externalnot allowedAnnotationIndicates that the referenced document is not part of the same site as the current document.
    helpHyperlinkHyperlinkProvides a link to context-sensitive help.
    loadeddata -
    icon External Resourcenot allowedImports an icon to represent the current document.
    Event -
    license HyperlinkHyperlinkIndicates that the main content of the current document is covered by the copyright license described by the referenced document.
    All the slaved media elements newly have readyState set to HAVE_CURRENT_DATA or greater.
    nextHyperlinkHyperlinkIndicates that the current document is a part of a series, and that the next document in the series is the referenced document.
    nofollow not allowedAnnotationIndicates that the current document's original author or publisher does not endorse the referenced document.
    canplay -
    noreferrernot allowedAnnotationRequires that the user agent not send an HTTP Referer (sic) header if the user follows the hyperlink.
    Event -
    pingbackExternal Resourcenot allowedGives the address of the pingback server that handles pingbacks to the current document.
    All the slaved media elements newly have readyState set to HAVE_FUTURE_DATA or greater.
    prefetchExternal ResourceExternal ResourceSpecifies that the target resource should be preemptively cached.
    prev HyperlinkHyperlinkIndicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
    canplaythrough -
    search HyperlinkHyperlinkGives a link to a resource that can be used to search through the current document and its related pages.
    Event -
    sidebar HyperlinkHyperlinkSpecifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).
    All the slaved media elements newly have readyState set to HAVE_ENOUGH_DATA or greater.
    stylesheet External Resourcenot allowedImports a stylesheet.
    tag not allowedHyperlinkGives a tag (identified by the given address) that applies to the current document.
    playing -
    +
    		• Event -
    +
    		The MediaController is no longer a blocked media controller. -

    Some of the types described below list synonyms for these values. These are to be handled as specified by user agents, but must not be used - in documents.

    +
    waiting - + Event + The MediaController is now a blocked media controller. -
    Link type "alternate"
    +
    ended -

    The meaning of this keyword depends on the values of the other attributes.

    +     		Event -
    +
    		All the slaved media elements have newly ended playback; the + MediaController has reached the end of all the slaved media elements. -
    If the element is a link element and the rel - attribute also contains the keyword stylesheet
    +
    durationchange -

    The alternate keyword modifies the meaning of the stylesheet keyword in the way described for that keyword. The - alternate keyword does not create a link of its own.

    +     		Event - + The duration attribute has just been + updated. +
    timeupdate -
    +
    		Event -

    The keyword creates a hyperlink referencing a syndication feed (though not - necessarily syndicating exactly the same content as the current page).

    +     		The media controller position changed. -
    +
    play -
    -

    The following link element gives the syndication - feed for the current page:

    - 
    <link rel="alternate" type="application/atom+xml" href="data.xml">
    -

    The following extract offers various different syndication - feeds:

    - 
    <p>You can access the planets database using Atom feeds:</p>
-<ul>
- <li><a href="recently-visited-planets.xml" rel="alternate" type="application/atom+xml">Recently Visited Planets</a></li>
- <li><a href="known-bad-planets.xml" rel="alternate" type="application/atom+xml">Known Bad Planets</a></li>
- <li><a href="unexplored-planets.xml" rel="alternate" type="application/atom+xml">Unexplored Planets</a></li>
-</ul>
    -
    +     		Event - + The paused attribute is newly false. - +
    pause -
    Otherwise
    +     		Event -
    +
    		The paused attribute is newly true. -

    The keyword creates a hyperlink referencing an alternate representation of the - current document.

    +
    ratechange -

    If the alternate keyword is used with the hreflang attribute, and that attribute's value differs - from the root element's language, it indicates that the referenced - document is a translation.

    +     		Event -

    If the alternate keyword is used with the type attribute, it indicates that the referenced document is - a reformulation of the current document in the specified format.

    +     		Either the defaultPlaybackRate + attribute or the playbackRate attribute + has just been updated. -

    The hreflang and type attributes can be combined when specified with the alternate keyword.

    +
    volumechange -

    For example, the following link is a French translation that uses the PDF format:

    +     		Event - 
    <link rel=alternate type=application/pdf hreflang=fr href=manual-fr>
    +     		Either the volume attribute or the muted attribute has just been updated. - +
    -

    This relationship is transitive — that is, if a document links to two other documents - with the link type "alternate", then, in addition to implying - that those documents are alternative representations of the first document, it is also implying - that those two documents are alternative representations of each other.

    -
    +

    The following events fire on AudioTrackList, VideoTrackList, and + TextTrackList objects:

    -
    • + + + + + -

    For link elements, the author keyword indicates - that the referenced document provides further information about the author for the page as a - whole.

    + - + -

    The bookmark keyword gives a permalink for the nearest - ancestor article element of the linking element in question, or of the section the linking element is most closely associated with, if - there are no ancestor article elements.

    +
    Event name -
    Link type "author"
    +     		Interface -

    The author keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

    +     		Fired when... -

    For a and area elements, the author - keyword indicates that the referenced document provides further information about the author of - the nearest article element ancestor of the element defining the hyperlink, if there - is one, or of the page as a whole, otherwise.

    +
    change -

    The "referenced document" can be, and often is, a mailto: URL giving the e-mail address of the author.

    +     		Event -
    +
    		One or more tracks in the track list have been enabled or disabled. -

    Synonyms: For historical reasons, user agents must also treat - link, a, and area elements that have a rev attribute with the value "made" as having the author keyword specified as a link relationship.

    +
    addtrack + TrackEvent -
    Link type "bookmark"
    +     		A track has been added to the track list. -

    The bookmark keyword may be used with a and - area elements. This keyword creates a hyperlink.

    +
    removetrack -
    +
    		TrackEvent -

    The following snippet has three permalinks. A user agent could determine which permalink - applies to which part of the spec by looking at where the permalinks are given.

    +     		A track has been removed from the track list. - 
     ...
- <body>
-  <h1>Example of permalinks</h1>
-  <div id="a">
-   <h2>First example</h2>
-   <p><a href="a.html" rel="bookmark">This permalink applies to
-   only the content from the first H2 to the second H2</a>. The DIV isn't
-   exactly that section, but it roughly corresponds to it.</p>
-  </div>
-  <h2>Second example</h2>
-  <article id="b">
-   <p><a href="b.html" rel="bookmark">This permalink applies to
-   the outer ARTICLE element</a> (which could be, e.g., a blog post).</p>
-   <article id="c">
-    <p><a href="c.html" rel="bookmark">This permalink applies to
-    the inner ARTICLE element</a> (which could be, e.g., a blog comment).</p>
-   </article>
-  </article>
- </body>
- ...
    +
    - -
    Link type "external"
    - +

    The following event fires on TextTrack objects and track elements:

    -

    The external keyword may be used with a and - area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the - implied hyperlink, if no other keywords create one).

    + -

    The external keyword indicates that the link is leading to a - document that is not part of the site that the current document forms a part of.

    + + + + -
    +
    Event name -
    Link type "help"
    +     		Interface -

    The help keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

    +     		Fired when... -

    For a and area elements, the help - keyword indicates that the referenced document provides further help information for the parent of - the element defining the hyperlink, and its children.

    +
    cuechange -

    In the following example, the form control has associated context-sensitive help. The user - agent could use this information, for example, displaying the referenced document if the user - presses the "Help" or "F1" key.

    +     		Event - 
     <p><label> Topic: <input name=topic> <a href="help/topic.html" rel="help">(Help)</a></label></p>
    +     		One or more cues in the track have become active or stopped being active. - +
    -

    For link elements, the help keyword indicates that - the referenced document provides help for the page as a whole.

    -

    For a and area elements, on some browsers, the help keyword causes the link to use a different cursor.

    +

    The following events fire on TextTrackCue objects:

    + -
    Link type "icon"
    + + -

    The icon keyword may be used with link elements. - This keyword creates an external resource link.

    + + -

    Icons could be auditory icons, visual icons, or other kinds of icons. If - multiple icons are provided, the user agent must select the most appropriate icon according to the - type, media, and sizes attributes. If there are multiple equally appropriate icons, - user agents must use the last one declared in tree order at the time that the user - agent collected the list of icons. If the user agent tries to use an icon but that icon is - determined, upon closer examination, to in fact be inappropriate (e.g. because it uses an - unsupported format), then the user agent must try the next-most-appropriate icon as determined by - the attributes.

    + - +
    Event name -
    +
    		Interface -

    The specified resource is an icon representing the page or site, and should be used by the user - agent when representing the page in the user interface.

    +     		Fired when... - +
    enter -
    +
    		Event -

    User agents are not required to update icons when the list of icons changes, but - are encouraged to do so.

    +     		The cue has become active. -

    There is no default type for resources given by the icon keyword. - However, for the purposes of determining the type of the - resource, user agents must expect the resource to be an image.

    +
    exit -

    The sizes attribute gives the sizes of icons - for visual media. Its value, if present, is merely advisory. User agents may use the value to - decide which icon(s) to use if multiple icons are available.

    +     		Event -

    If specified, the attribute must have a value that is an unordered set of unique - space-separated tokens which are ASCII case-insensitive. Each value must be - either an ASCII case-insensitive match for the string "any", or a value that consists of two valid non-negative integers that do not have a leading U+0030 DIGIT - ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN - CAPITAL LETTER X character.

    +     		The cue has stopped being active. -

    The keywords represent icon sizes in raw pixels (as opposed to CSS pixels).

    +
    -

    An icon that is 50 CSS pixels wide intended for displays with a device pixel - density of two device pixels per CSS pixel (2x, 192dpi) would have a width of 100 raw pixels. This - feature does not support indicating that a different resource is to be used for small - high-resolution icons vs large low-resolution icons (e.g. 50×50 2x vs 100×100 1x).

    +
    -

    To parse and process the attribute's value, the user agent must first split the attribute's value on spaces, and must then parse each resulting - keyword to determine what it represents.

    +
    Security and privacy considerations
    -
    +

    The main security and privacy implications of the video and audio + elements come from the ability to embed media cross-origin. There are two directions that threats + can flow: from hostile content to a victim page, and from a hostile page to victim content.

    -

    The any keyword represents that the - resource contains a scalable icon, e.g. as provided by an SVG image.

    +
    -
    +

    If a victim page embeds hostile content, the threat is that the content might contain scripted + code that attempts to interact with the Document that embeds the content. To avoid + this, user agents must ensure that there is no access from the content to the embedding page. In + the case of media content that uses DOM concepts, the embedded content must be treated as if it + was in its own unrelated top-level browsing context.

    -

    Other keywords must be further parsed as follows to determine what they represent:

    +

    For instance, if an SVG animation was embedded in a video element, + the user agent would not give it access to the DOM of the outer page. From the perspective of + scripts in the SVG resource, the SVG file would appear to be in a lone top-level browsing context + with no parent.

    -
      +
      -

    • If the keyword doesn't contain exactly one U+0078 LATIN SMALL LETTER X or U+0058 LATIN - CAPITAL LETTER X character, then this keyword doesn't represent anything. Abort these steps for - that keyword.

      • +

      If a hostile page embeds victim content, the threat is that the embedding page could obtain + information from the content that it would not otherwise have access to. The API does expose some + information: the existence of the media, its type, its duration, its size, and the performance + characteristics of its host. Such information is already potentially problematic, but in practice + the same information can more or less be obtained using the img element, and so it + has been deemed acceptable.

      -

    • Let width string be the string before the "x" or - "X".

      • +

      However, significantly more sensitive information could be obtained if the user agent further + exposes metadata within the content such as subtitles or chapter titles. Such information is + therefore only exposed if the video resource passes a CORS resource sharing check. + The crossorigin attribute allows authors to control + how this check is performed.

      -

    • Let height string be the string after the "x" or - "X".

      • +

      Without this restriction, an attacker could trick a user running within a + corporate network into visiting a site that attempts to load a video from a previously leaked + location on the corporation's intranet. If such a video included confidential plans for a new + product, then being able to read the subtitles would present a serious confidentiality breach.

      -

    • If either width string or height string start with - a U+0030 DIGIT ZERO (0) character or contain any characters other than ASCII digits, - then this keyword doesn't represent anything. Abort these steps for that keyword.

      • +
    + -

  • Apply the rules for parsing non-negative integers to width - string to obtain width.

    • -

  • Apply the rules for parsing non-negative integers to height - string to obtain height.

    • +
    Best practices for authors using media elements
    -

  • The keyword represents that the resource contains a bitmap icon with a width of width device pixels and a height of height device - pixels.

    • + - +

    Playing audio and video resources on small devices such as set-top boxes or mobile phones is + often constrained by limited hardware resources in the device. For example, a device might only + support three simultaneous videos. For this reason, it is a good practice to release resources + held by media elements when they are done playing, either by + being very careful about removing all references to the element and allowing it to be garbage + collected, or, even better, by removing the element's src + attribute and any source element descendants, and invoking the element's load() method.

    - +

    Similarly, when the playback rate is not exactly 1.0, hardware, software, or format limitations + can cause video frames to be dropped and audio to be choppy or muted.

    -

    The keywords specified on the sizes attribute must not - represent icon sizes that are not actually available in the linked resource.

    -

    In the absence of a link with the icon keyword, for - Documents obtained over HTTP or HTTPS, user agents may instead attempt to - fetch and use an icon with the absolute URL obtained by - resolving the URL "/favicon.ico" against the document's - address, as if the page had declared that icon using the icon - keyword.

    - -
    +
    Best practices for implementors of media elements
    -
    + -

    The following snippet shows the top part of an application with several icons.

    +

    How accurately various aspects of the media element API are implemented is + considered a quality-of-implementation issue.

    - 
    <!DOCTYPE HTML>
-<html>
- <head>
-  <title>lsForums — Inbox</title>
-  <link rel=icon href=favicon.png sizes="16x16" type="image/png">
-  <link rel=icon href=windows.ico sizes="32x32 48x48" type="image/vnd.microsoft.icon">
-  <link rel=icon href=mac.icns sizes="128x128 512x512 8192x8192 32768x32768">
-  <link rel=icon href=iphone.png sizes="57x57" type="image/png">
-  <link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
-  <link rel=stylesheet href=lsforums.css>
-  <script src=lsforums.js></script>
-  <meta name=application-name content="lsForums">
- </head>
- <body>
-  ...
    +

    For example, when implementing the buffered attribute, + how precise an implementation reports the ranges that have been buffered depends on how carefully + the user agent inspects the data. Since the API reports ranges as times, but the data is obtained + in byte streams, a user agent receiving a variable-bit-rate stream might only be able to determine + precise times by actually decoding all of the data. User agents aren't required to do this, + however; they can instead return estimates (e.g. based on the average bit rate seen so far) which + get revised as more information becomes available.

    -
    +

    As a general rule, user agents are urged to be conservative rather than optimistic. For + example, it would be bad to report that everything had been buffered when it had not.

    -

    For historical reasons, the icon keyword may be preceded by the - keyword "shortcut". If the "shortcut" keyword is - present, the rel attribute's entire value must be an - ASCII case-insensitive match for the string "shortcut icon" (with a single U+0020 SPACE character between the tokens and - no other space characters).

    +

    Another quality-of-implementation issue would be playing a video backwards when the codec is + designed only for forward playback (e.g. there aren't many key frames, and they are far apart, and + the intervening frames only have deltas from the previous frame). User agents could do a poor job, + e.g. only showing key frames; however, better implementations would do more work and thus do a + better job, e.g. actually decoding parts of the video forwards, storing the complete frames, and + then playing the frames backwards.

    +

    Similarly, while implementations are allowed to drop buffered data at any time (there is no + requirement that a user agent keep all the media data obtained for the lifetime of the media + element), it is again a quality of implementation issue: user agents with sufficient resources to + keep all the data around are encouraged to do so, as this allows for a better user experience. For + example, if the user is watching a live stream, a user agent could allow the user only to view the + live video; however, a better user agent would buffer everything and allow the user to seek + through the earlier material, pause it, play it forwards and backwards, etc.

    -
    Link type "license"
    +

    When multiple tracks are synchronised with a MediaController, it is possible for + scripts to add and remove media elements from the MediaController's list of + slaved media elements, even while these tracks are playing. How smoothly the media + plays back in such situations is another quality-of-implementation issue.

    -

    The license keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

    +
    -

    The license keyword indicates that the referenced document - provides the copyright license terms under which the main content of the current document is - provided.

    +

    When a media element that is paused is removed from a document and not reinserted before the next time the event + loop reaches step 1, implementations that are resource constrained are encouraged to take + that opportunity to release all hardware resources (like video planes, networking resources, and + data buffers) used by the media element. (User agents still have to keep track of the + playback position and so forth, though, in case playback is later restarted.)

    -

    This specification does not specify how to distinguish between the main content of a document - and content that is not deemed to be part of that main content. The distinction should be made - clear to the user.

    + -
    -

    Consider a photo sharing site. A page on that site might describe and show a photograph, and - the page might be marked up as follows:

    - 
    <!DOCTYPE HTML>
-<html>
- <head>
-  <title>Exampl Pictures: Kissat</title>
-  <link rel="stylesheet" href="/style/default">
- </head>
- <body>
-  <h1>Kissat</h1>
-  <nav>
-   <a href="../">Return to photo index</a>
-  </nav>
-  <figure>
-   <img src="/pix/39627052_fd8dcd98b5.jpg">
-   <figcaption>Kissat</figcaption>
-  </figure>
-  <p>One of them has six toes!</p>
-  <p><small><a rel="license" href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a></small></p>
-  <footer>
-   <a href="/">Home</a> | <a href="../">Photo index</a>
-   <p><small>© copyright 2009 Exampl Pictures. All Rights Reserved.</small></p>
-  </footer>
- </body>
-</html>
    +

    The map element

    -

    In this case the license applies to just the photo (the main - content of the document), not the whole document. In particular not the design of the page - itself, which is covered by the copyright given at the bottom of the document. This could be made - clearer in the styling (e.g. making the license link prominently positioned near the photograph, - while having the page copyright in light small text at the foot of the page.

    +
    +
    Categories:
    +
    Flow content.
    +
    Phrasing content.
    +
    Palpable content.
    +
    Contexts in which this element can be used:
    +
    Where phrasing content is expected.
    +
    Content model:
    +
    Transparent.
    +
    Content attributes:
    +
    Global attributes
    +
    name
    +
    DOM interface:
    +
    +
    interface HTMLMapElement : HTMLElement {
+           attribute DOMString name;
+  readonly attribute HTMLCollection areas;
+  readonly attribute HTMLCollection images;
+};
    +
    +
    -
    +

    The map element, in conjunction with an img element and any + area element descendants, defines an image map. The element + represents its children.

    -
    +

    The name attribute gives the map a name so that + it can be referenced. The attribute must be present and must have a non-empty value with no space characters. The value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another map element in the same + document. If the id attribute is also specified, both attributes must + have the same value.

    -

    Synonyms: For historical reasons, user agents must also treat the keyword - "copyright" like the license keyword.

    + +
    -
    +
    map . areas
    +
    -
    Link type "nofollow"
    +

    Returns an HTMLCollection of the area elements in the + map.

    -

    The nofollow keyword may be used with a and - area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the - implied hyperlink, if no other keywords create one).

    +
    -

    The nofollow keyword indicates that the link is not endorsed - by the original author or publisher of the page, or that the link to the referenced document was - included primarily because of a commercial relationship between people affiliated with the two - pages.

    +
    map . images
    +
    -
    Link type "noreferrer"
    +

    Returns an HTMLCollection of the img and object + elements that use the map.

    -

    The noreferrer keyword may be used with a and - area elements. This keyword does not create a hyperlink, but annotates any other hyperlinks created by the element (the - implied hyperlink, if no other keywords create one).

    +
    -

    It indicates that no referrer information is to be leaked when following the link.

    +
    -

    If a user agent follows a link defined by an a or area element that - has the noreferrer keyword, the user agent must not include a - Referer (sic) HTTP header (or equivalent for other protocols) in the - request.

    - -

    This keyword also causes the opener - attribute to remain null if the hyperlink creates a new browsing context.

    - -
    - - +

    The areas attribute must return an + HTMLCollection rooted at the map element, whose filter matches only + area elements.

    +

    The images attribute must return an + HTMLCollection rooted at the Document node, whose filter matches only + img and object elements that are associated with this map + element according to the image map processing model.

    -
    Link type "pingback"
    +

    The IDL attribute name must reflect + the content attribute of the same name.

    -

    The pingback keyword may be used with link - elements. This keyword creates an external resource - link.

    + + -

    For the semantics of the pingback keyword, see the Pingback - 1.0 specification.

    +
    +

    Image maps can be defined in conjunction with other content on the page, to ease maintenance. + This example is of a page with an image map at the top of the page and a corresponding set of + text links at the bottom.

    -
    Link type "prefetch"
    + 
    <!DOCTYPE HTML>
+<TITLE>Babies™: Toys</TITLE>
+<HEADER>
+ <H1>Toys</H1>
+ <IMG SRC="/images/menu.gif"
+      ALT="Babies™ navigation menu. Select a department to go to its page."
+      USEMAP="#NAV">
+</HEADER>
+ ...
+<FOOTER>
+ <MAP NAME="NAV">
+  <P>
+   <A HREF="/clothes/">Clothes</A>
+   <AREA ALT="Clothes" COORDS="0,0,100,50" HREF="/clothes/"> |
+   <A HREF="/toys/">Toys</A>
+   <AREA ALT="Toys" COORDS="100,0,200,50" HREF="/toys/"> |
+   <A HREF="/food/">Food</A>
+   <AREA ALT="Food" COORDS="200,0,300,50" HREF="/food/"> |
+   <A HREF="/books/">Books</A>
+   <AREA ALT="Books" COORDS="300,0,400,50" HREF="/books/">
+ </MAP>
+</FOOTER>
    -

    The prefetch keyword may be used with link, - a, and area elements. This keyword creates an external resource link.

    +
    -

    The prefetch keyword indicates that preemptively fetching and - caching the specified resource is likely to be beneficial, as it is highly likely that the user - will require this resource.

    -

    There is no default type for resources given by the prefetch - keyword.

    +

    The area element

    -
    Link type "search"
    +
    +
    Categories:
    +
    Flow content.
    +
    Phrasing content.
    +
    Contexts in which this element can be used:
    +
    Where phrasing content is expected, but only if there is a map element ancestor or a template element ancestor.
    +
    Content model:
    +
    Empty.
    +
    Content attributes:
    +
    Global attributes
    +
    alt
    +
    coords
    +
    shape
    +
    href
    +
    target
    +
    download
    +
    ping
    +
    rel
    +
    hreflang
    +
    type
    +
    DOM interface:
    +
    +
    interface HTMLAreaElement : HTMLElement {
+           attribute DOMString alt;
+           attribute DOMString coords;
+           attribute DOMString shape;
+           attribute DOMString target;
+           attribute DOMString download;
+  [PutForwards=value] attribute DOMSettableTokenList ping;
+           attribute DOMString rel;
+  readonly attribute DOMTokenList relList;
+           attribute DOMString hreflang;
+           attribute DOMString type;
+};
+HTMLAreaElement implements URLUtils;
    +
    +
    -

    The search keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

    +

    The area element represents either a hyperlink with some text and a + corresponding area on an image map, or a dead area on an image map.

    -

    The search keyword indicates that the referenced document - provides an interface specifically for searching the document and its related resources.

    +

    An area element with a parent node must have a map element ancestor + or a template element ancestor.

    -

    OpenSearch description documents can be used with link elements and - the search link type to enable user agents to autodiscover search - interfaces.

    +

    If the area element has an href + attribute, then the area element represents a hyperlink. In this case, + the alt attribute must be present. It specifies the + text of the hyperlink. Its value must be text that, when presented with the texts specified for + the other hyperlinks of the image map, and with the alternative text of the image, + but without the image itself, provides the user with the same kind of choice as the hyperlink + would when used without its text but with its shape applied to the image. The alt attribute may be left blank if there is another area + element in the same image map that points to the same resource and has a non-blank + alt attribute.

    +

    If the area element has no href + attribute, then the area represented by the element cannot be selected, and the alt attribute must be omitted.

    -
    Link type "sidebar"
    +

    In both cases, the shape and coords attributes specify the area.

    -

    The sidebar keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

    +

    The shape attribute is an enumerated + attribute. The following table lists the keywords defined for this attribute. The states + given in the first cell of the rows with keywords give the states to which those keywords map. + Some of the keywords are non-conforming, as noted in the last + column.

    -

    The sidebar keyword indicates that the referenced document, if - retrieved, is intended to be shown in a secondary browsing context (if possible), - instead of in the current browsing context.

    + + + + + + + + + + + +
    State + Keywords + Notes +
    Circle state + circle + +
    circ + Non-conforming +
    Default state + default + +
    Polygon state + poly + +
    polygon + Non-conforming +
    Rectangle state + rect + +
    rectangle + Non-conforming +
    -

    A hyperlink with the sidebar keyword specified is - a sidebar hyperlink.

    +

    The attribute may be omitted. The missing value default is the rectangle state.

    +

    The coords attribute must, if specified, + contain a valid list of integers. This attribute gives the coordinates for the shape + described by the shape attribute. The + processing for this attribute is described as part of the image map processing + model.

    - -
    Link type "stylesheet"
    + -

    The stylesheet keyword may be used with link - elements. This keyword creates an external resource - link that contributes to the styling processing model.

    +

    In the circle state, area elements must + have a coords attribute present, with three integers, the + last of which must be non-negative. The first integer must be the distance in CSS pixels from the + left edge of the image to the center of the circle, the second integer must be the distance in CSS + pixels from the top edge of the image to the center of the circle, and the third integer must be + the radius of the circle, again in CSS pixels.

    -

    The specified resource is a resource that describes how to present the document. Exactly how - the resource is to be processed depends on the actual type of the resource.

    +

    In the default state state, area + elements must not have a coords attribute. (The area is the + whole image.)

    -

    If the alternate keyword is also specified on the - link element, then the link is an alternative stylesheet; in this case, - the title attribute must be specified on the link - element, with a non-empty value.

    +

    In the polygon state, area elements must + have a coords attribute with at least six integers, and the + number of integers must be even. Each pair of integers must represent a coordinate given as the + distances from the left and the top of the image in CSS pixels respectively, and all the + coordinates together must represent the points of the polygon, in order.

    -

    The default type for resources given by the stylesheet - keyword is text/css.

    +

    In the rectangle state, area elements must + have a coords attribute with exactly four integers, the + first of which must be less than the third, and the second of which must be less than the fourth. + The four points must represent, respectively, the distance from the left edge of the image to the + left side of the rectangle, the distance from the top edge to the top side, the distance from the + left edge to the right side, and the distance from the top edge to the bottom side, all in CSS + pixels.

    -

    The appropriate times to obtain the resource are: +

    When user agents allow users to follow hyperlinks or + download hyperlinks created using the + area element, as described in the next section, the href, target, download, and ping + attributes decide how the link is followed. The rel, hreflang, and type + attributes may be used to indicate to the user the likely nature of the target resource before the + user follows the link.

    -
      +
    -

  • When the external resource link is created on a link element - that is already in a Document.

    • - +

    The target, download, ping, + rel, hreflang, and type + attributes must be omitted if the href attribute is not + present.

    -

  • When the external resource link's link element is inserted into a document.

    • +

    If the itemprop attribute is specified on an + area element, then the href attribute must + also be specified.

    -

  • When the href attribute of the link - element of an external resource link that is already in a - Document is changed.

    • - +
    -

  • When the crossorigin attribute of the - link element of an external resource - link that is already in a Document is set, changed, or - removed.

    • +

    The activation behavior of area elements is to run the following + steps:

    -

  • When the type attribute of the link - element of an external resource link that is already in a - Document is set or changed to a value that does not or no longer matches the - Content-Type metadata of the previous obtained external - resource, if any.

    • +
      -

    1. When the type attribute of the link - element of an external resource link that is already in a - Document but was previously not obtained due to the type attribute specifying an unsupported type is set, removed, or - changed.

      2. +

    2. If the area element's Document is not fully active, + then abort these steps.

      3. -

    3. When the external resource link changes from being an alternative stylesheet to not being one, or vice - versa.

      4. +
    4. - +

      If the area element has a download + attribute and the algorithm is not allowed to show a popup, or the element's target attribute is present and applying the rules + for choosing a browsing context given a browsing context name, using the value of the + target attribute as the browsing context name, would + result in there not being a chosen browsing context, then run these substeps:

      -

      Quirk: If the document has been set to quirks mode, has the - same origin as the URL of the external resource, - and the Content-Type metadata of the external resource is not a - supported style sheet type, the user agent must instead assume it to be text/css.

      +
        -

        Once a resource has been obtained, if its Content-Type metadata is text/css, the user - agent must run these steps:

        +

      1. If there is an entry settings object, throw an + InvalidAccessError exception.

        2. - - +

      2. Abort these steps without following the hyperlink.

        3. -
          +
        -

      3. Let element be the link element that created the - external resource link.

        4. + -

      4. If element has an associated CSS style sheet, remove the CSS style sheet in question.

        5. +

      5. Otherwise, the user agent must follow the + hyperlink or download the hyperlink created + by the area element, if any, and as determined by the download attribute and any expressed user + preference.

        6. -

      6. If element no longer creates an external resource link - that contributes to the styling processing model, or if, since the resource in question was obtained, it has become appropriate to obtain it again (meaning this algorithm is about to be - invoked again for a newly obtained resource), then abort these steps.

        7. +
      -
    5. +

      The IDL attributes alt, coords, target, download, ping, rel, + hreflang, and type, each must reflect the respective + content attributes of the same name.

      -

      Create a CSS style sheet with the following properties:

      +

      The IDL attribute shape must + reflect the shape content attribute.

      -
      +

      The IDL attribute relList must + reflect the rel content attribute.

      -
      type
      -

      text/css

      +
      -
      location
      -
      +

      The area element also supports the URLUtils interface.

      -

      The resulting absolute URL determined during the obtain algorithm.

      +

      When the element is created, and whenever the element's href content attribute is set, changed, or removed, the user + agent must invoke the element's URLUtils interface's set the input algorithm with the value of the href content attribute, if any, or the empty string otherwise, + as the given value.

      -

      This is before any redirects get applied.

      +

      The element's URLUtils interface's get the + base algorithm must simply return the element's base URL.

      -
      +

      The element's URLUtils interface's query + encoding is the document's character encoding.

      -
      owner node
      -

      element

      +

      When the element's URLUtils interface invokes its update steps with a string value, the user + agent must set the element's href content attribute to + the string value.

      -
      media
      +
    -
    -

    The media attribute of element.

    -

    This is a reference to the (possibly absent at this time) attribute, rather - than a copy of the attribute's current value. The CSSOM specification defines what happens - when the attribute is dynamically set, changed, or removed.

    +

    Image maps

    -
    + -
    title
    +
    -
    +
    Authoring
    -

    The title attribute of element.

    +
    -

    This is similarly a reference to the attribute, rather than a copy of the - attribute's current value.

    +

    An image map allows geometric areas on an image to be associated with hyperlinks.

    -
    • +

    An image, in the form of an img element or an object element + representing an image, may be associated with an image map (in the form of a map + element) by specifying a usemap attribute on + the img or object element. The usemap attribute, if specified, must be a valid + hash-name reference to a map element.

    + +
    -
    alternate flag
    -

    Set if the link is an alternative stylesheet; unset otherwise.

    +

    Consider an image that looks as follows:

    -
    origin-clean flag
    -

    Set if the resource is CORS-same-origin; unset otherwise.

    +

    A line with four shapes in it, equally spaced: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.

    -
    parent CSS style sheet
    -
    owner CSS rule
    -

    null

    +

    If we wanted just the coloured areas to be clickable, we could do it as follows:

    -
    disabled flag
    -

    Left at its default value.

    + 
    <p>
+ Please select a shape:
+ <img src="shapes.png" usemap="#shapes"
+      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
+ <map name="shapes">
+  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
+  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
+  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
+  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
+  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
+        href="yellow.html" alt="Yellow star.">
+ </map>
+</p>
    -
    CSS rules
    -

    Left uninitialized.

    +
    - +
    -

    The CSS environment encoding is the result of running the following steps:

    +
    Processing model
    -
      +

      If an img element or an object element representing an image has a + usemap attribute specified, user agents must process it + as follows:

      -

    1. If the element has a charset attribute, get an encoding from that attribute's value. If that - succeeds, return the resulting encoding and abort these steps.

      2. +
        -

      1. Otherwise, return the document's character encoding.

        2. +

      2. First, rules for parsing a hash-name reference to a map element + must be followed. This will return either an element (the map) or + null.

        3. -
      +

    2. If that returned null, then abort these steps. The image is not associated with an image + map after all.

      3. - +

    3. Otherwise, the user agent must collect all the area elements that are + descendants of the map. Let those be the areas.

    -
    - +

    Having obtained the list of area elements that form the image map (the areas), interactive user agents must process the list in one of two ways.

    +

    If the user agent intends to show the text that the img element represents, then + it must use the following steps.

    -
    Link type "tag"
    +

    In user agents that do not support images, or that have images disabled, + object elements cannot represent images, and thus this section never applies (the + fallback content is shown instead). The following steps therefore only apply to + img elements.

    -

    The tag keyword may be used with a and - area elements. This keyword creates a hyperlink.

    +
      -

      The tag keyword indicates that the tag that the - referenced document represents applies to the current document.

      +

    1. Remove all the area elements in areas that have no href attribute.

      2. -

      Since it indicates that the tag applies to the current document, it would - be inappropriate to use this keyword in the markup of a tag cloud, which - lists the popular tags across a set of pages.

      +

    2. Remove all the area elements in areas that have no alt attribute, or whose alt + attribute's value is the empty string, if there is another area element in + areas with the same value in the href attribute and with a non-empty alt attribute.

      3. -
      +

    3. Each remaining area element in areas represents a + hyperlink. Those hyperlinks should all be made available to the user in a manner + associated with the text of the img.

      -

      This document is about some gems, and so it is tagged with "http://en.wikipedia.org/wiki/Gemstone" to unambiguously categorise it as applying - to the "jewel" kind of gems, and not to, say, the towns in the US, the Ruby package format, or - the Swiss locomotive class:

      +

      In this context, user agents may represent area and img elements + with no specified alt attributes, or whose alt + attributes are the empty string or some other non-visible text, in a user-agent-defined fashion + intended to indicate the lack of suitable author-provided text.

      4. - 
      <!DOCTYPE HTML>
-<html>
- <head>
-  <title>My Precious</title>
- </head>
- <body>
-  <header><h1>My precious</h1> <p>Summer 2012</p></header>
-  <p>Recently I managed to dispose of a red gem that had been
-  bothering me. I now have a much nicer blue sapphire.</p>
-  <p>The red gem had been found in a bauxite stone while I was digging
-  out the office level, but nobody was willing to haul it away. The
-  same red gem stayed there for literally years.</p>
-  <footer>
-   Tags: <a rel=tag href="http://en.wikipedia.org/wiki/Gemstone">Gemstone</a>
-  </footer>
- </body>
-</html>
      +
    - +

    If the user agent intends to show the image and allow interaction with the image to select + hyperlinks, then the image must be associated with a set of layered shapes, taken from the + area elements in areas, in reverse tree order (so the last + specified area element in the map is the bottom-most shape, and + the first element in the map, in tree order, is the top-most shape).

    -
    +

    Each area element in areas must be processed as follows to + obtain a shape to layer onto the image:

    -

    In this document, there are two articles. The "tag" - link, however, applies to the whole page (and would do so wherever it was placed, including if it - was within the article elements).

    +
      - 
      <!DOCTYPE HTML>
-<html>
- <head>
-  <title>Gem 4/4</title>
- </head>
- <body>
-  <article>
-   <h1>801: Steinbock</h1>
-   <p>The number 801 Gem 4/4 electro-diesel has an ibex and was rebuilt in 2002.</p>
-  </article>
-  <article>
-   <h1>802: Murmeltier</h1>
-   <figure>
-    <img src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Trains_de_la_Bernina_en_hiver_2.jpg"
-         alt="The 802 was red with pantographs and tall vents on the side.">
-    <figcaption>The 802 in the 1980s, above Lago Bianco.</figcaption>
-   </figure>
-   <p>The number 802 Gem 4/4 electro-diesel has a marmot and was rebuilt in 2003.</p>
-  </article>
-  <p class="topic"><a rel=tag href="http://en.wikipedia.org/wiki/Rhaetian_Railway_Gem_4/4">Gem 4/4</a></p>
- </body>
-</html>
      +

    1. Find the state that the element's shape attribute + represents.

      2. -
    +

  • Use the rules for parsing a list of integers to parse the element's coords attribute, if it is present, and let the result be the + coords list. If the attribute is absent, let the coords + list be the empty list.

    • +
  • +

    If the number of items in the coords list is less than the minimum number + given for the area element's current state, as per the following table, then the + shape is empty; abort these steps.

    -
    Sequential link types
    + + + + + + + + +
    State + Minimum number of items +
    Circle state + 3 +
    Default state + 0 +
    Polygon state + 6 +
    Rectangle state + 4 +
    -

    Some documents form part of a sequence of documents.

    +
    • -

    A sequence of documents is one where each document can have a previous sibling and a - next sibling. A document with no previous sibling is the start of its sequence, a - document with no next sibling is the end of its sequence.

    +
  • -

    A document may be part of multiple sequences.

    +

    Check for excess items in the coords list as per the entry in the + following list corresponding to the shape attribute's + state:

    +
    +
    Circle state
    +
    Drop any items in the list beyond the third.
    +
    Default state
    +
    Drop all items in the list.
    +
    Polygon state
    +
    Drop the last item if there's an odd number of items.
    +
    Rectangle state
    +
    Drop any items in the list beyond the fourth.
    +
    -
    Link type "next"
    +
    • -

    The next keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

    +

  • If the shape attribute represents the rectangle state, and the first number in the list is + numerically less than the third number in the list, then swap those two numbers around.

    • -

    The next keyword indicates that the document is part of a - sequence, and that the link is leading to the document that is the next logical document in the - sequence.

    +

  • If the shape attribute represents the rectangle state, and the second number in the list is + numerically less than the fourth number in the list, then swap those two numbers around.

    • +

  • If the shape attribute represents the circle state, and the third number in the list is less than + or equal to zero, then the shape is empty; abort these steps.

    • -
    Link type "prev"
    +

  • Now, the shape represented by the element is the one described for the entry in the list + below corresponding to the state of the shape attribute:

    -

    The prev keyword may be used with link, - a, and area elements. This keyword creates a hyperlink.

    +
    -

    The prev keyword indicates that the document is part of a - sequence, and that the link is leading to the document that is the previous logical document in - the sequence.

    +
    Circle state
    +
    -
    +

    Let x be the first number in coords, y be the second number, and r be the third number.

    -

    Synonyms: For historical reasons, user agents must also treat the keyword - "previous" like the prev keyword.

    +

    The shape is a circle whose center is x CSS pixels from the left edge + of the image and y CSS pixels from the top edge of the image, and whose + radius is r pixels.

    -
    +
    +
    Default state
    +
    -
    Other link types
    +

    The shape is a rectangle that exactly covers the entire image.

    -

    Extensions to the predefined set of link types may be - registered in the microformats - wiki existing-rel-values page.

    +
    -

    Anyone is free to edit the microformats wiki existing-rel-values page at - any time to add a type. Extension types must be specified with the following information:

    +
    Polygon state
    +
    -
    +

    Let xi be the (2i)th entry in coords, and yi be the (2i+1)th entry in coords (the first entry in coords being the one with index 0).

    -
    Keyword
    +

    Let the coordinates be (xi, yi), + interpreted in CSS pixels measured from the top left of the image, for all integer values of + i from 0 to (N/2)-1, where N is the number of items in coords.

    -
    +

    The shape is a polygon whose vertices are given by the coordinates, and + whose interior is established using the even-odd rule.

    -

    The actual value being defined. The value should not be confusingly similar to any other - defined value (e.g. differing only in case).

    + -

    If the value contains a U+003A COLON character (:), it must also be an absolute - URL.

    +
    -
    +
    Rectangle state
    +
    -
    Effect on... link
    +

    Let x1 be the first number in coords, y1 be the second number, x2 be the third number, and y2 be the fourth number.

    -
    +

    The shape is a rectangle whose top-left corner is given by the coordinate (x1, y1) and whose + bottom right corner is given by the coordinate (x2, + y2), those coordinates being interpreted as CSS pixels + from the top left corner of the image.

    -

    One of the following:

    +
    -
    +
    -
    Not allowed
    +

    For historical reasons, the coordinates must be interpreted relative to the + displayed image after any stretching caused by the CSS 'width' and 'height' properties + (or, for non-CSS browsers, the image element's width and height attributes — CSS browsers map those attributes to the + aforementioned CSS properties).

    -
    The keyword must not be specified on link elements.
    +

    Browser zoom features and transforms applied using CSS or SVG do not affect the + coordinates.

    -
    Hyperlink
    +
    • -
    The keyword may be specified on a link element; it creates a - hyperlink.
    + -
    External Resource
    +

    Pointing device interaction with an image associated with a set of layered shapes per the above + algorithm must result in the relevant user interaction events being first fired to the top-most + shape covering the point that the pointing device indicated, if any, or to the image element + itself, if there is no shape covering that point. User agents may also allow individual + area elements representing hyperlinks to be selected + and activated (e.g. using a keyboard).

    -
    The keyword may be specified on a link element; it creates an external - resource link.
    +

    Because a map element (and its area elements) can be + associated with multiple img and object elements, it is possible for an + area element to correspond to multiple focusable areas + of the document.

    - +

    Image maps are live; if the DOM is mutated, then the user agent must act as if it + had rerun the algorithms for image maps.

    -
    • + -
    Effect on... a and area
    -
    +

    MathML

    -

    One of the following:

    +

    The math element from the MathML namespace + falls into the embedded content, phrasing content, and flow + content categories for the purposes of the content models in this specification.

    -
    +

    This specification refers to several specific MathML elements, in particular: + annotation-xml, + merror, + mi, + mn, + mo, + ms, and + mtext. +

    -
    Not allowed
    +

    When the MathML annotation-xml element contains + elements from the HTML namespace, such elements must all be flow + content.

    -
    The keyword must not be specified on a and area elements.
    +

    When the MathML token elements (mi, mo, mn, ms, + and mtext) are descendants of HTML elements, they may contain + phrasing content elements from the HTML namespace.

    + -
    Hyperlink
    +
    -
    The keyword may be specified on a and area elements; it creates a - hyperlink.
    + -
    External Resource
    +

    User agents must handle text other than inter-element whitespace found in MathML + elements whose content models do not allow straight text by pretending for the purposes of MathML + content models, layout, and rendering that that text is actually wrapped in an mtext element in the MathML namespace. (Such text is not, + however, conforming.)

    -
    The keyword may be specified on a and area elements; it creates - an external resource link.
    +

    User agents must act as if any MathML element whose contents does not match the element's + content model was replaced, for the purposes of MathML layout and rendering, by an merror element in the MathML namespace containing some + appropriate error message.

    -
    Hyperlink Annotation
    +

    To enable authors to use MathML tools that only accept MathML in its XML form, interactive HTML + user agents are encouraged to provide a way to export any MathML fragment as an XML + namespace-well-formed XML fragment.

    -
    The keyword may be specified on a and area elements; it annotates other hyperlinks - created by the element.
    +
    -
    +

    The semantics of MathML elements are defined by the MathML specification and other + applicable specifications.

    -
    +
    +

    Here is an example of the use of MathML in an HTML document:

    -
    Brief description
    + 
    <!DOCTYPE html>
+<html>
+ <head>
+  <title>The quadratic formula</title>
+ </head>
+ <body>
+  <h1>The quadratic formula</h1>
+  <p>
+   <math>
+    <mi>x</mi>
+    <mo>=</mo>
+    <mfrac>
+     <mrow>
+      <mo form="prefix">−</mo> <mi>b</mi>
+      <mo>±</mo>
+      <msqrt>
+       <msup> <mi>b</mi> <mn>2</mn> </msup>
+       <mo>−</mo>
+       <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
+      </msqrt>
+     </mrow>
+     <mrow>
+      <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
+     </mrow>
+    </mfrac>
+   </math>
+  </p>
+ </body>
+</html>
    -

    A short non-normative description of what the keyword's meaning is.

    +
    -
    Specification
    -

    A link to a more detailed description of the keyword's semantics and requirements. It - could be another page on the Wiki, or a link to an external page.

    +

    SVG

    +

    The svg element from the SVG namespace falls into the + embedded content, phrasing content, and flow content + categories for the purposes of the content models in this specification.

    -
    Synonyms
    +
    -

    A list of other keyword values that have exactly the same processing requirements. Authors - should not use the values defined to be synonyms, they are only intended to allow user agents to - support legacy content. Anyone may remove synonyms that are not used in practice; only names that - need to be processed as synonyms for compatibility with legacy content are to be registered in - this way.

    +

    To enable authors to use SVG tools that only accept SVG in its XML form, interactive HTML user + agents are encouraged to provide a way to export any SVG fragment as an XML namespace-well-formed + XML fragment.

    +
    -
    Status
    +

    When the SVG foreignObject element contains elements from the HTML + namespace, such elements must all be flow content.

    -
    +

    The content model for title elements in the SVG namespace + inside HTML documents is phrasing content. (This further constrains the + requirements given in the SVG specification.)

    -

    One of the following:

    +

    The semantics of SVG elements are defined by the SVG specification and other applicable + specifications.

    -
    -
    Proposed
    -
    The keyword has not received wide peer review and approval. Someone has proposed it and is, - or soon will be, using it.
    +

    Dimension attributes

    -
    Ratified
    +

    Author requirements: The width and height attributes on img, iframe, + embed, object, video, and, when their type attribute is in the Image Button state, input elements may be + specified to give the dimensions of the visual content of the element (the width and height + respectively, relative to the nominal direction of the output medium), in CSS pixels. The + attributes, if specified, must have values that are valid non-negative integers.

    -
    The keyword has received wide peer review and approval. It has a specification that - unambiguously defines how to handle pages that use the keyword, including when they use it in - incorrect ways.
    +

    The specified dimensions given may differ from the dimensions specified in the resource itself, + since the resource may have a resolution that differs from the CSS pixel resolution. (On screens, + CSS pixels have a resolution of 96ppi, but in general the CSS pixel resolution depends on the + reading distance.) If both attributes are specified, then one of the following statements must be + true:

    -
    Discontinued
    +
      -
      The keyword has received wide peer review and it has been found wanting. Existing pages are - using this keyword, but new pages should avoid it. The "brief description" and "specification" - entries will give details of what authors should use instead, if anything.
      +
    • specified width - 0.5 ≤ + specified height * target ratio ≤ + specified width + 0.5
      • -
    +
  • specified height - 0.5 ≤ + specified width / target ratio ≤ + specified height + 0.5
    • -

    If a keyword is found to be redundant with existing values, it should be removed and listed - as a synonym for the existing value.

    +
  • specified height = specified width = 0
    • -

    If a keyword is registered in the "proposed" state for a period of a month or more without - being used or specified, then it may be removed from the registry.

    + -

    If a keyword is added with the "proposed" status and found to be redundant with existing - values, it should be removed and listed as a synonym for the existing value. If a keyword is - added with the "proposed" status and found to be harmful, then it should be changed to - "discontinued" status.

    +

    The target ratio is the ratio of the intrinsic width to the intrinsic + height in the resource. The specified width and specified + height are the values of the width and height attributes respectively.

    -

    Anyone can change the status at any time, but should only do so in accordance with the - definitions above.

    +

    The two attributes must be omitted if the resource in question does not have both an intrinsic + width and an intrinsic height.

    -
    +

    If the two attributes are both zero, it indicates that the element is not intended for the user + (e.g. it might be a part of a service to count page views).

    - +

    The dimension attributes are not intended to be used to stretch the image.

    -

    Conformance checkers must use the information given on the microformats wiki - existing-rel-values page to establish if a value is allowed or not: values defined in this - specification or marked as "proposed" or "ratified" must be accepted when used on the elements for - which they apply as described in the "Effect on..." field, whereas values marked as "discontinued" - or not listed in either this specification or on the aforementioned page must be rejected as - invalid. Conformance checkers may cache this information (e.g. for performance reasons or to avoid - the use of unreliable network connectivity).

    +

    User agent requirements: User agents are expected to use these attributes as hints for the rendering.

    -

    When an author uses a new type not defined by either this specification or the Wiki page, - conformance checkers should offer to add the value to the Wiki, with the details described above, - with the "proposed" status.

    +

    The width and height IDL attributes on the iframe, + embed, object, and video elements must reflect + the respective content attributes of the same name.

    -
    +

    For iframe, embed, and object the IDL + attributes are DOMString; for video the IDL attributes are unsigned long.

    -

    Types defined as extensions in the microformats - wiki existing-rel-values page with the status "proposed" or "ratified" may be used with the - rel attribute on link, a, and area - elements in accordance to the "Effect on..." field.

    +

    The corresponding IDL attributes for img and + input elements are defined in those respective elements' + sections, as they are slightly more specific to those elements' other behaviors.

    + -

    Tabular data

    +

    Tabular data

    The table element

    @@ -39590,7 +39586,7 @@ the cell that corresponds to the values of the two dice. -

    Forms

    +

    Forms

    Introduction

    @@ -57148,7 +57144,7 @@ dictionary RelatedEventInit : EventInit { -

    Scripting

    +

    Scripting

    Scripts allow authors to add interactivity to their documents.

    @@ -66757,7 +66753,7 @@ Demos: -

    Microdata

    +

    Microdata

    -

    User interaction

    +

    User interaction

    The hidden attribute

    @@ -75798,7 +75794,7 @@ dictionary DragEventInit : MouseEventInit { -

    Loading Web pages

    +

    Loading Web pages

    @@ -83246,7 +83242,7 @@ interface NavigatorOnLine { -

    Web application APIs

    +

    Web application APIs

    Scripting

    @@ -88595,7 +88591,7 @@ loadMySprites().then(runDemo); -

    Communication

    +

    Communication

    The MessageEvent interfaces

    @@ -91907,7 +91903,7 @@ function showLogout() { -

    Web workers

    +

    Web workers

    Introduction

    @@ -93306,7 +93302,7 @@ interface SharedWorker : EventTarget {

    APIs available to workers

    [Exposed=Worker]
-partial interface WorkerGlobalScope {
+partial interface WorkerGlobalScope { // not obsolete
   void importScripts(DOMString... urls);
   readonly attribute WorkerNavigator navigator;
 };
@@ -93436,7 +93432,7 @@ interface WorkerLocation { };
 
 
 
-  
    Web storage
    
+  
    Web storage
    
 
   
    Introduction
    
 
@@ -94029,7 +94025,7 @@ dictionary StorageEventInit : EventInit {
 
 
 
-  
    The HTML syntax
    
+  
    The HTML syntax
    
 
   
    This section only describes the rules for resources labeled with an HTML
   MIME type. Rules for XML resources are discussed in the section below entitled "The
@@ -104594,7 +104590,7 @@ document.body.appendChild(text);
   definitions of the characters listed above.
    
 
 
-  
    The XHTML syntax
    
+  
    The XHTML syntax
    
 
   
    This section only describes the rules for XML resources. Rules for
   text/html resources are discussed in the section above entitled "The HTML
@@ -104926,7 +104922,7 @@ document.body.appendChild(text);
 
   
    
 
-  
    Rendering
    
+  
    Rendering
    
 
   
    User agents are not required to present HTML documents in any particular way. However, this
   section provides a set of suggestions for rendering HTML documents that, if followed, are likely
@@ -106200,8 +106196,8 @@ legend {
   element itself, and is expected to be centered in the video element.
    
 
   
    Any subtitles or captions are expected to be overlayed directly on top of their
-  video element, as defined by the relevant rendering rules; for WebVTT,
-  those are the rules for updating the display of WebVTT text tracks. 
    
+  video element, as defined by the relevant rendering rules; for WebVTT, those are the
+  rules for updating the display of WebVTT text tracks. 
    
 
   
    When the user agent starts exposing a user
   interface for a video element, the user agent should run the rules for
@@ -106210,8 +106206,8 @@ legend {
   data-x="text track showing">showing and whose text track kind is one of subtitles or captions (e.g., for text
-  tracks based on WebVTT, the rules for updating the display of WebVTT
-  text tracks). 
    
+  tracks based on WebVTT, the rules for updating the display of WebVTT text
+  tracks). 
    
 
   
    Resizing video and canvas elements does not interrupt
   video playback or clear the canvas.
    
@@ -107640,7 +107636,7 @@ if (s = prompt('What is your name?')) {
 
 
 
-  
    Obsolete features
    
+  
    Obsolete features
    
 
   
    Obsolete but conforming features
    
 
@@ -109293,7 +109289,7 @@ if (s = prompt('What is your name?')) {
 
 
 
-  
    IANA considerations
    
+  
    IANA considerations
    
 
   
 
@@ -109988,7 +109984,7 @@ if (s = prompt('What is your name?')) {
   
 
 
-  
    Index
    
+  
    Index
    
 
   
    
 
@@ -114348,7 +114344,7 @@ INSERT INTERFACES HERE
 
 
 
-  
    References
    
+  
    References
    
 
   
    All references are normative unless marked "Non-normative".
    
 
@@ -114947,7 +114943,7 @@ INSERT INTERFACES HERE
   
 
 
-  
    Acknowledgments
     
+  
    Acknowledgements
     
 
   
    Thanks to Tim Berners-Lee for inventing HTML, without which none of this would exist.