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

Changes from 2 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
74 changes: 74 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,74 @@
<!---
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>A video player with an integration of the
Copy link

Choose a reason for hiding this comment

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

Rewrite as:

Embeds a video player for instream video ads that are integrated with the IMA SDK.

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

<a href="https://developers.google.com/interactive-media-ads/docs/sdks/html5/">IMA SDK</a>
for instream video ads.</td>
</tr>
<tr>
<td width="40%"><strong>Availability</strong></td>
<td>Experiment</td>
Copy link

Choose a reason for hiding this comment

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

Please change "Experiment" to "Experimental"

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>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 IMA SDK enabled video
Copy link

Choose a reason for hiding this comment

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

  • Add link to the IMA SDK
  • Rewrite the second sentence (and make it as a paragraph) with these minor tweaks:

To embed a video, provide a source URL for your 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).

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

player. Provide a source URL for your content video and an ad tag, which is a
URL to a VAST-compliant ad response (see examples
[here](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"
Copy link

Choose a reason for hiding this comment

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

Sample needs a closing bracket (e.g. <)

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

</amp-ima-video>
```

## Attributes

**data-src** (required)

The URL of your content video.
Copy link

Choose a reason for hiding this comment

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

Either: "The URL of your interactive media ad." or "The URL of your video content."

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-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

## 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.