Skip to content

Copy edit #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dgash wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Copy edit #31

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions builtins/amp-video.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,25 +14,26 @@ See the License for the specific language governing permissions and
limitations under the License.
-->

### <a name="amp-video"></a> `amp-video`
## <a name="amp-video"></a> `amp-video`

A replacement for the HTML5 `video` tag. Like all embedded external resources in a AMP file, the video is lazily loaded only when the `amp-video` element is in or near the viewport.
A replacement for the HTML5 `video` tag. Like all embedded external resources in an AMP file, the video is "lazily" loaded only when the `amp-video` element is in or near the viewport.

The `amp-video` component is only to be used for direct HTML5 video file embeds.

#### Behavior
### 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 loads the video resource specified by its `src` attribute 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.
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.
- `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 `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 the `amp-video` container replaces 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.
- One or zero immediate child nodes can have the `fallback` attribute. If present, this node and its children form the content that is displayed if HTML5 video is not supported in the user’s browser.

For example:

```html
<amp-video width=400 height=300 src="https://yourhost.com/videos/myvideo.mp4"
poster="myvideo-poster.jpg">
Expand All @@ -44,31 +45,30 @@ For example:
</amp-video>
```

#### Attributes
### Attributes

**src**

Required if no <source> children are present. Must be HTTPS.
Required if no `<source>` 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.
The image for the frame to be displayed before video playback has started. The first frame is displayed by default.

**autoplay**

The `autoplay` attribute allows the author to specify when - if ever - the animated image will 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.
The presence of the attribute alone implies that the animated image always autoplays. The author may specify values to limit when the animations 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.
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.
If present, automatically loops the video back to the start upon reaching the end.

**muted**

If present, will mute the audio by default.
If present, mutes the audio by default.