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.
Unreliable video playback in web story
See original GitHub issueDescription
I came back to a web story I have not viewed for a few weeks (https://extra-ordinary-web-stories.web.app/ep1/). Each page is a video clip, nothing more. Many of the pages came up as white (no video shown). On the console I see messages such as
Failed to load resource: net::ERR_CACHE_OPERATION_NOT_SUPPORTED
If I right click on URL to the mp4 file and open in a new tab, it plays fine (no problems). After a while of going forwards and back and doing page reloads the videos start working. I then go forward a few pages fine, then the errors come back again. Not sure why, hard to repeat reliably.
Reproduction Steps
https://extra-ordinary-web-stories.web.app/ep1/
But it seems to be a caching issue - it does not reliably fail for me. An incognito window seemed to be more reliable than a normal browser tab, so maybe its some service worker cache or similar half timed out? (Video gone, but it thinks it still in cache??)
Relevant Logs
Failed to load resource: net::ERR_CACHE_OPERATION_NOT_SUPPORTED
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
/ep1/ep1-10-050.mp4:1 Failed to load resource: net::ERR_CACHE_OPERATION_NOT_SUPPORTED
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
/ep1/ep1-10-070.mp4:1 Failed to load resource: net::ERR_CACHE_OPERATION_NOT_SUPPORTED
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
/ep1/ep1-10-090.mp4:1 Failed to load resource: net::ERR_CACHE_OPERATION_NOT_SUPPORTED
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
log.js:295 [video-manager] This video is too short for `video-percentage-played`. Reports may be innacurate. For best results, use videos over 5 seconds long. <amp-video width="868" height="1462" layout="fill" autoplay noaudio class="i-amphtml-element i-amphtml-layout-fill i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout" i-amphtml-layout="fill" preload="auto">…</amp-video>
Gb @ log.js:295
Browser(s) Affected
Chrome
OS(s) Affected
Windows (I have not tested others - chrome on iPad seems okay)
Device(s) Affected
Desktop PC with Windows 10 and Chrome is where I tested mainly
AMP Version Affected
No response
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:13 (4 by maintainers)
Top Results From Across the Web
Web story ”Video failed to play” - WordPress.org
hi! i am having another issue with the stories, in the backend, it is showing all fine, view mode all the videos are...
Read more >Reliability in Media transports | WebRTC by Dr Alex
Story of partial reliability and RTP. ... If you suffer from packet loss, you would get choppy or stuttering video playback.
Read more >How Do You Fix Facebook Videos Not Playing Issue?
If Facebook videos cannot play, that would be annoying. But don't worry, this article will help you to fix the Facebook videos not...
Read more >Completely Unreliable | thealternateclassroom
Her Story is undoubtedly an unconventional video game, especially compared to the mainstream market of commercial games; there are no points to ...
Read more >Unreliable Narrator / Video Games - TV Tropes
This narrator describes both the player's actions and the story beats. One side quest plays with this trope by having the player character...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Ah! There is a chrome bug that might be the problem. Multiple concurrent requests too the same URL specifying byte ranges fails at times. That does not describe the iPad problem, but does explain the Windows Chrome problem which is still occurring. https://bugs.chromium.org/p/chromium/issues/detail?id=770694
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.