Skip to content
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

Jump to bottom

amp-ima-video: Markdown README for project #9336

Merged
7 commits merged into from
May 29, 2017
Merged

amp-ima-video: Markdown README for project #9336

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6d9e049
Added README for amp-ima-video.
shawnbuso May 15, 2017
ee99d92
Fixed closing tag.
shawnbuso May 15, 2017
d3ece29
Updated to resolve comments.
shawnbuso May 16, 2017
efd7b27
Updated to address missed comments
shawnbuso May 16, 2017
9ebc88a
Updated to resolve comments.
shawnbuso May 22, 2017
0de0211
Fix comma -> period.
shawnbuso May 23, 2017
243bb97
Merge branch 'master' into readme
shawnbuso May 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 0 additions & 3 deletions extensions/amp-ima-video/0.1/validator-amp-ima-video.protoascii
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,7 @@ tags: { # <amp-ima-video>
attr_lists: "extended-amp-global"
spec_url: "https://www.ampproject.org/docs/reference/components/amp-ima-video"
amp_layout: {
supported_layouts: FILL
supported_layouts: FIXED
supported_layouts: FIXED_HEIGHT
supported_layouts: NODISPLAY
supported_layouts: RESPONSIVE
}
}
88 changes: 88 additions & 0 deletions extensions/amp-ima-video/amp-ima-video.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!---
Copyright 2017 The AMP HTML Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS-IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

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

<table>
<tr>
<td width="40%"><strong>Description</strong></td>
<td>Embeds a video player for instream video ads that are integrated with
the
<a href="https://developers.google.com/interactive-media-ads/docs/sdks/html5/">IMA SDK</a>
</td>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Please add period.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

</tr>
<tr>
<td width="40%"><strong>Availability</strong></td>
<td>Experimental</td>
</tr>
<tr>
<td width="40%"><strong>Required Script</strong></td>
<td><code>&lt;script async custom-element="amp-ima-video" src="https://cdn.ampproject.org/v0/amp-ima-video-0.1.js">&lt;/script></code></td>
</tr>
<tr>
<td class="col-fourty"><strong><a href="https://www.ampproject.org/docs/guides/responsive/control_layout.html">Supported Layouts</a></strong></td>
<td>fixed, responsive</td>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the validator, this component supports: fill, fixed, fixed-height, nodisplay, responsive.

Please correct the list of supported layouts.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I missed that in the validator - I tested the others and they don't work, so I removed them from the validator.

</tr>
<tr>
<td width="40%"><strong>Examples</strong></td>
<td>None</td>
</tr>
</table>

## Overview

You can use the `amp-ima-video` component to embed an <a
href="https://developers.google.com/interactive-media-ads/docs/sdks/html5/">IMA
SDK</a>enabled video player. To embed a video, provide a source URL for your
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: please add space before "enabled"

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, please start "To embed" on a new line, that is, as a new paragraph.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.

content video (`data-src`) and an ad tag (`data-tag`), which is a URL to a
VAST-compliant ad response (for examples, see
[IMA Sample Tags](https://developers.google.com/interactive-media-ads/docs/sdks/html5/tags)).

**Example: Embedding a video**

```html
<amp-ima-video
width=640 height=360 layout="responsive"
data-src="https://s0.2mdn.net/4253510/google_ddm_animation_480P.mp4"
data-tag="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator="
data-poster="path/to/poster.png">
</amp-ima-video>
```

## Attributes

**data-src** (required)

The URL of your video content.

**data-tag** (required)

The URL for your VAST ad document.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add:

common attributes

This element includes common attributes extended to AMP components.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about the data-poster tag that you have in your sample? Should that be listed as an attribute, like the following:

data-poster (optional)

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

**data-poster** (optional)

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

**common attributes**

This element includes
[common attributes](https://www.ampproject.org/docs/reference/common_attributes)
extended to AMP components
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: please add period

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.


## Validation

See [amp-ima-video rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-ima-video/0.1/validator-amp-ima-video.protoascii) in the AMP validator specification.