ampproject / ampproject/amphtml
[amp-story-player] Videos on the first page of a story often fail to load
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
When opening a story with an `amp-video` element on the first page, the video sometimes fails to load and the story does not start playing. This seems to happen most often when the `show()` method is called to open the story (e.g. to open a story from a carousel), but it also sometimes occurs when navigating between stories in the player. Sometimes the poster image will load but the video won't start playing, and sometimes neither the poster or the video will load.
It looks like this is caused by a layout race condition. A `CANCELLED` error is logged by error-reporting.js but the actual error message is `Error: layoutComplete race`
### Reproduction Steps
1. Go to https://000615502.deployed.codepen.website
2. Disable your browser caching (it still occurs when caching is enabled but more consistently with it disabled)
3. Click on one of the story cards to open the story. Reload and repeat until it occurs - it occurs more often if the card is clicked soon after the page loads
https://www.loom.com/share/dab0114af0fa418b91c3ca49d4c3268b
### Relevant Logs
```shell
error-reporting.js:206 CANCELLED
Xf @ error-reporting.js:206
Promise.catch (async)
h @ resources-impl.js:1333
bk.setState @ finite-state-machine.js:53
g.doPass @ resources-impl.js:643
(anonymous) @ resources-impl.js:120
mh.Fc @ pass.js:93
qg @ pass.js:39
(anonymous) @ timer-impl.js:64
Promise.then (async)
g.delay @ timer-impl.js:59
mh.schedule @ pass.js:78
g.schedulePass @ resources-impl.js:508
(anonymous) @ resources-impl.js:442
Promise.then (async)
hk @ resources-impl.js:441
gk @ resources-impl.js:369
g.upgraded @ resources-impl.js:486
Tg.b.vd @ custom-element.js:415
Tg.b.cg @ custom-element.js:1323
Tg.b.Zc @ custom-element.js:1246
Tg.b.upgrade @ custom-element.js:375
$g @ custom-element-registry.js:97
Yg @ custom-element-registry.js:40
Um @ extensions-impl.js:390
Tm @ extensions-impl.js:378
(anonymous) @ extensions-impl.js:340
g.addDocFactory @ extensions-impl.js:445
g.addElement @ extensions-impl.js:339
f @ amp-video.js:1048
g.registerExtension @ extensions-impl.js:162
(anonymous) @ runtime.js:176
Promise.then (async)
(anonymous) @ runtime.js:172
yg @ chunk.js:190
ug.lf @ chunk.js:409
(anonymous) @ chunk.js:465
Promise.then (async)
Bg @ chunk.js:464
ug.Ba @ chunk.js:483
(anonymous) @ chunk.js:435
Promise.then (async)
ug.lf @ chunk.js:424
(anonymous) @ chunk.js:465
Promise.then (async)
Bg @ chunk.js:464
ug.Ba @ chunk.js:483
(anonymous) @ chunk.js:435
Promise.then (async)
ug.lf @ chunk.js:424
(anonymous) @ chunk.js:465
Promise.then (async)
Bg @ chunk.js:464
ug.Ba @ chunk.js:483
(anonymous) @ chunk.js:336
g.fire @ observable.js:62
g.ze @ ampdoc-impl.js:625
g.overrideVisibilityState @ ampdoc-impl.js:560
vl @ viewer-impl.js:535
g.receiveMessage @ viewer-impl.js:695
(anonymous) @ amp-viewer-integration.js:199
tb @ messaging.js:416
n.Ia @ messaging.js:303
(anonymous) @ messaging.js:67
```
### Browser(s) Affected
_No response_
### OS(s) Affected
_No response_
### Device(s) Affected
_No response_
### AMP Version Affected
_No response_
Contributor guide
Research direction
Reproduce the failure with the linked CodePen, especially when opening a story soon after page load with caching disabled. Start by tracing the reported `layoutComplete race` through `error-reporting.js`, `resources-impl.js`, and `amp-video.js`. Done means the first-page poster and video load reliably and the story starts playing when opened with `show()` or reached from another story.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100