'Video not found' error (uploaded via TUS on Vue/Nuxt)

Type

Video

What is the error message?

GET https://customer-.cloudflarestream.com//metadata/playerEnhancementInfo.json 404 (Not Found) sdk-iframe-integration.fla9.latest.js

What is the issue you’re encountering

I’m using the Nuxt framework and trying to load a video from an iframe via Nuxt’s state management system, Pinia. The video is saved to CF, and a stream reference is created. I then add this to my front-end via CF’s iframe code, the video flashes briefly, and then disappears and I get the ‘Video not found’ error in the browser and GET error in the JS console. When I re-mount the component, by clicking to another page and then back, the video loads perfectly so I assume there’s no issue with the video reference or the iframe code itself.

What steps have you taken to resolve the issue?

Tried to update the key to the component after it’s loaded, to force-reload after the video is loaded. This didn’t work.

What are the steps to reproduce the issue?

Upload a video - see above

Screenshot of the error

@tech22 does the video ever become playable? Can you share a video ID we can inspect?

Thanks a bunch kkipp. Yes, the videos do become playable, but only when the user refreshes the component, ie. the Video not found error is shown when the video is posted after the API responds with the video reference etc. However, when the component is refreshed, ie. after clicking on another page and then back (it’s a SSR rendered app), the video works. The videos also load without a hitch when I preload them via the same iframe and video references… Sorry but I’m not sure if this post is public, would prefer to keep site details private/unsearchable. Can I pm you? It’s past midnight here in Melb and will be asleep soon so may be best to continue this tomorrow

Sure, no worries! Okay, I don’t think we need the video id — videos are not playable immediately after upload. We will likely improve the player to better handle this case (showing a message about encoding progress, and then loading the video when it’s able to play), but in the meantime the way to handle this is for your application to monitor the encoding progress and only display the player when it’s ready.

There are a couple ways your application could be aware of the video status:

  1. Use the API to query the video details
  2. Use webhooks to be notified when a video is ready to stream
1 Like

Thanks for your help Kkipp! Solved :herb:

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.