[amp-story-player] Videos on the first page of a story often fail to load

[fraserb99]

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

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

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.