Skip to content

Latest commit

 

History

History
125 lines (96 loc) · 6.39 KB

amp-video.md

File metadata and controls

125 lines (96 loc) · 6.39 KB
Raw

amp-video

Description A replacement for the HTML5 video tag; only to be used for direct HTML5 video file embeds.
Availability Stable
Examples amp-video.html
everything.amp.html

Behavior

The amp-video component loads the video resource specified by its src attribute lazily, at a time determined by the runtime. It can be controlled much the same way as a standard HTML5 video tag.

The amp-video component HTML accepts up to three unique types of HTML nodes as children - source tags, a placeholder for before the video starts, and a fallback if the browser doesn’t support HTML5 video.

source tag children can be used in the same way as the standard video tag, to specify different source files to play.

One or zero immediate child nodes can have the placeholder attribute. If present, this node and its children form a placeholder that will display instead of the video. A click or tap anywhere inside of the amp-video container will replace the placeholder with the video itself.

One or zero immediate child nodes can have the fallback attribute. If present, this node and its children form the content that will be displayed if HTML5 video is not supported on the user’s browser.

For example:

<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
    poster="myvideo-poster.jpg">
  <div fallback>
    <p>Your browser doesn’t support HTML5 video</p>
  </div>
  <source type="video/mp4" src="foo.mp4">
  <source type="video/webm" src="foo.webm">
</amp-video>

Attributes

src

Required if no children are present. Must be HTTPS.

poster

The image for the frame to be displayed before video playback has started. By default the first frame is displayed.

autoplay

The autoplay attribute allows the author to specify when - if ever - the animated image will autoplay.

The presence of the attribute alone implies that the animated image will always autoplay. The author may specify values to limit when the animations will autoplay. Allowable values are desktop, tablet, or mobile, with multiple values separated by a space. The runtime makes a best-guess approximation to the device type to apply this value.

controls

Similar to the video tag controls attribute - if present, the browser offers controls to allow the user to control video playback.

loop

If present, will automatically loop the video back to the start upon reaching the end.

muted

If present, will mute the audio by default.

Validation errors

The following lists validation errors specific to the amp-video tag (see also amp-video in the AMP validator specification):

Validation Error Description
The tag 'example1' may only appear as a descendant of tag 'example2'. Did you mean 'example3'? Error thrown if your AMP document uses video instead of amp-video. Error message: The tag video may only appear as a descendant of tag noscript. Did you mean amp-video?.
Missing URL for attribute 'example1' in tag 'example2'. Error thrown when src attribute is missing its URL.
Malformed URL 'example3' for attribute 'example1' in tag 'example2'. Error thrown when src attribute's URL is invalid.
Invalid URL protocol 'example3:' for attribute 'example1' in tag 'example2'. Error thrown src attribute's URL is http; https protocol required.
The implied layout 'example1' is not supported by tag 'example2'. Error thrown when implied layout is set to CONTAINER; this layout type isn't supported.
The specified layout 'example1' is not supported by tag 'example2'. Error thrown when specified layout is set to CONTAINER; this layout type isn't supported.
The property 'example1' in attribute 'example2' in tag 'example3' is set to 'example4', which is invalid. Error thrown when invalid value is given for attributes height or width. For example, height=auto triggers this error for all supported layout types, with the exception of NODISPLAY.