Thumbnail instability

FAQ Video
#1

Hi

So I am using private videos which are embedded in a Vue.js component. On instantiation I make a request for the video (using the PHP SDK API) and set the html property to the assets.iframe. It works well although there is a bit of a loading period.

As this is actually CMS content - I am actually storing a special element ‘’ which contains the a thumbnail img. ‘’ is the component signature.

<cv-video class="col-md-8" video-id="vi2oOwxxphzSP4E9Hqkokcjc" aspect-ratio="0.5" video-title="All about TAG"><img style="width: 474px;" src="https://cdn.api.video/vod/vi2oOwxxphzSP4E9Hqkokcjc/token/4ef5a502-86e1-40cb-b8aa-0230aa7f4bfb/thumbnail.jpg" width="760" height="267" /></cv-video>

As this is a private video, the token expires and the thumbnail link breaks. This is a shame. I can see in the roadmap there are plans to provide a public thumbnail for private videos - this would be a very good thing in my case. I won’t effect a page where the Vue component is instantiated as it gets a fresh token each time but when I look at the raw (un initiated ) element in the edit form it will have a reference to the thumbnail url (with a token) that was created when I injected it into the form.

I am currently thinking about how I can work around. Any ideas very welcome

Richard

#2

Hi Richard,

As long as no request is made to api.video with the tokenized url - the private video/thumbnail token should be fine. I’m wondering if that when you create the CMS element, is there a ‘sanity check’ that the CMS makes to ensure that the src is valid? - and that ‘ping’ causes the private video url to be expended.

Is there a way - when you create the CMS element <cv-video> - to NOT ping api.video for the url? Or to create the CMS element with a dummy url - and then replace the one-use url in after it does its validation?

Another approach might be to “burn the token” on purpose to grab the X-Token-Session header read here for more details. Then you can insert that in all the requests for the private video, and it will work.

Doug

#3

Hi Richard, my (very very very simple :wink: solution was to grab & store the thumbnail locally. That prevents the (loading)issues as you mentioned.

2 Likes
#4

Hi Doug

Thanks so much for the prompt reply. Requesting the player works really well. I basically do what you suggest in the referenced post. So a ( Vue component) in a page loads and goes to the API, gets the video (with a new token) and loads the iframe (player)- all great.

But consider this - a page editor will select a video and insert it into the page (see my original post). At this point the thumbnail is fine and just works - because the token is still fresh and I can see the thumbnail (which lets editors see which video they have embedded).

Now some time later an editor wants to edit that page. The thumbnail that I have hard coded into the CMS will not work.

So there seems to me to be two solutions the first is as Rutger suggests below - copy the thumb and store it locally and use that. Or to run a routine on an ‘edit page’ load that looks for any and gets them via API and sets (or refreshes) the src for the thumbnail images.

Neither of these are ideal but I think that the first solution of local storage is probably best at present. I saw that you have public thumbnails for private videos on your roadmap - here is one really good user case for that feature.

Merry Xmas

Richard

1 Like