Video poster

A video poster is an image that is displayed while a video is loading.

Syntax

Authoring format Syntax and example
XDITA

<video-poster>

<video height="300px" width="400px" loop="false"
                muted="false">
  <desc>Video about the Sensei Sushi promise.</desc>
  <fallback>
    <image href="video-not-available.png">
      <alt>This video cannot be displayed.</alt>
    </image>
  </fallback>
  <video-poster href="sensei-video.jpg"/>
  <media-source href="sensei-video.mp4"/>
  <media-source href="sensei-video.ogg"/>
  <media-source href="sensei-video.webm"/>
  <media-track srclang="en" href="sensei-video.vtt"/> 
</video>
HDITA

@poster on <video>

<video height="300" width="400" 
         title="Video about the Sensei Sushi promise" controls 
         poster="sensei-video.jpg">
  <source src="sensei-video.mp4"/>
  <source src="sensei-video.ogg"/>
  <source src="sensei-video.webm"/> 
  <track srclang="en" src="sensei-video.vtt"/>
  <img src="video-not-available.png" alt="This video cannot be displayed."/>
</video>
MDITA

There is no specific support in the MDITA core profile. If needed, use an HDITA snippet.

Usage information

The video poster component is modeled on the @poster attribute that can be specified on the HTML5 <video> element.

Attributes

The available attributes vary based on the authoring format:

XDITA
The following attributes are available on this element: link relationship attributes, localization attributes, universal attributes, and @keyref.
HDITA
The following attributes are available on this element: link relationship attributes, localization attributes, universal attributes, and @keyref.
MDITA
For the MDITA core profile, the equivalent of the XDITA @keyref attribute is supported. For the MDITA extended profile, attributes can be specified by using the HDITA representation.

Examples

This section is non-normative.

Example 1. XDITA example

The following example demonstrates the use of video poster in an XDITA topic.

Example needed
Example 2. HDITA example

The following example demonstrates the use of video-poster in an HDITA topic.

Example needed