question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support `amp-story-captions` for `amp-audio`

See original GitHub issue

Description

In our Web Stories editor we want to leverage amp-video to play audio files, so that we can display captions for them.

To achieve that, we basically use amp-video like this (simplified):

<amp-video layout="nodisplay" autoplay captions-id="caption-el">
  <source src="https://example.com/audio.mp3" type="audio/mpeg" />
  <track src="https://example.com/track.vtt" />
</amp-video>

This works great and the audio plays fine and the captions are displayed correctly.

However, we do get a validator warning that the video requires a poster image:

The mandatory attribute 'poster' is missing in tag 'amp-video

I think in such a case — the video being hidden and only playing audio — the poster requirement could be lifted

Alternatives Considered

Two alternatives I could think of:

  1. Add amp-story-captions support to amp-audio and let AMP render a <video> for the audio element in the background
  2. Just provide the URL to some dummy poster image (accessibility concerns?)

Additional Context

No response

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
gmajouletcommented, Feb 22, 2022

We’re actually not 100% sure about video caching for audio files, but have been looking into it as of next week. If it doesn’t work we’ll fix it very soon.

1reaction
newmuiscommented, Jan 24, 2022
  1. The real answer is to use <amp-audio> and <amp-story-captions>, as you imply. I’m a bit surprised that <amp-story-captions> does not support <amp-audio> already; @gmajoulet do you have a sense of what more is required to support it?
  2. Given that you need to use <amp-video>, I think it may actually still be valid to require a poster in this case. The <amp-video> tag will be visible to end users (so that the captions show up), and until the audio source and/or captions have loaded, end users will be looking at a blank HTML element. If the component is meant to introduce visuals, we need some kind of placeholder content to show until that visual is ready to be displayed. If the creator (or a tool, on behalf of the creator) can be certain that the visual is not needed, then I think your second workaround is probably best in the interim.
Read more comments on GitHub >

github_iconTop Results From Across the Web

Documentation: <amp-audio> - amp.dev
AMP audio extension issues analytics events during their lifecycle. These events can be reported through the analytics configuration using audio-* triggers. ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found