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

📖 [Story videos] Add video documentation for Google cache #35609

Merged
merged 7 commits into from
Sep 3, 2021
Merged

📖 [Story videos] Add video documentation for Google cache #35609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d0d9bf4
Add video documentation
mszylkowski Aug 10, 2021
003ea63
More detail
mszylkowski Aug 10, 2021
086cc81
Added section on amp-story
mszylkowski Aug 10, 2021
a1fe4f9
Update extensions/amp-story/amp-story.md
mszylkowski Aug 11, 2021
5e0f903
Updating documentation with approved language
mszylkowski Aug 12, 2021
86e1e28
Simplify amp-story.md
mszylkowski Sep 3, 2021
dfaa52a
Merge branch 'main' of github.com:ampproject/amphtml into videocache_…
mszylkowski Sep 3, 2021
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
14 changes: 14 additions & 0 deletions extensions/amp-story/amp-story.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,20 @@ This same image can be used for both mobile portrait and landscape desktop using
<amp-img src="cat.jpg" alt="..." object-position="75% 40%"></amp-img>
```

##### Optimize `amp-video` by using a free Google hosted video cache on origin documents

The `<amp-video>` element on stories supports the Google video cache to be used on origin documents through the attribute `cache="google"`. The video cache will fetch and store the video contents periodically, reducing serving costs for videos, and generating transcodes with different quality settings that adapt the bitrate to the network conditions.

Use 720p videos or higher to take advantage of all the video transcodes and adaptive bitrate algorithms.

Example:

```html
<amp-video layout="fill" poster="img.png" cache="google">
<source src="video.mp4" type="video/mp4">
</amp-video>
```

##### `data-text-background-color`

The `data-text-background-color` attribute highlights the text of the element with a specified color. To highlight the entire block, add this attribute directly to the text element. To only highlight the text, add the attribute and text to an inner <span>. Note that works anywhere inside an `<amp-story-page>`, not just in `<amp-story-grid-layer>`.
Expand Down
7 changes: 7 additions & 0 deletions extensions/amp-video/0.1/amp-video.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,13 @@ Indicates the album/collection the video was taken from, specified as a string.

Indicates the name/title of the video, specified as a string. If not provided, the Media Session API helper uses either the `aria-label` attribute or falls back to the page's title.

[filter formats="stories"]

#### cache
mszylkowski marked this conversation as resolved.
Show resolved Hide resolved

Indicates the Google video cache should store and serve the video by adding `cache="google"`. The video cache will fetch and store the video contents periodically, reducing serving costs for videos, and generating transcodes with different quality settings that adapt the bitrate to the network conditions.
mszylkowski marked this conversation as resolved.
Show resolved Hide resolved
[/filter]

## Analytics

`amp-video` supports analytics out of the box. See [video analytics](../../amp-analytics/amp-video-analytics.md) for more information.
Expand Down