0

I have a grid of videos that users will be able to play. Something along the lines of a list of youtube videos embedded with the following: 

<video data-bind="attr: {src: mediaPath}" preload="metadata"></video>

At a certain point, I start to see the following from Chrome:

Waiting for available socket...

I believe this is due to the issues outlined here: Chrome hangs after certain amount of data transfered - waiting for available socket

However I'm not sure what the solution is, given that the user may be seeing 10s or 100s of "previews" as they scroll through their media.

One thing I was thinking would be to load as preload='none' initially, and then just change videos over to preload='metadata' a few at a time until all metadata has been loaded, but I wanted to ask the community before embarking on such a smelly endeavor.

As for the UX - the videos are in very small thumbnails, around 30 of which are "above the fold" at any given time.

SB2055
  • 12,272
  • 32
  • 97
  • 202
  • IIRC most browsers have a limit of the number of connections they can have (total, and per domain) so you might want to set the preload:none as default then change to preload:metadata on a rolling script where completion of one triggers the next video (maybe running four in parallel and focussing on content that's scrolled into view that still has preload:none) *or* you could just load the poster images and only process more data if the user interacts with a video... (eg hovers for more than .5s over the thumbnail then grab the metadata) – Offbeatmammal Jul 28 '17 at 00:17

1 Answers1

1

As Offbeatmammal says the usual approach for this type of video grid or list is to load the poster images rather than the videos and then load the video when the user clicks or hovers.

You can also have a separate preview video on hover and the full video on click, if your server solution supports this.

Some pages will have a 'main' video accompanied with many thumbnails, and the main video will often be preloaded, and the others will just have thumbnails.

You can pretty much make the solution as complex (or smelly, excellent term, BTW!) as you want or need - for example you might have some alogorithm to monitor and predict a particular users behaviour and if they always watch the first 2 and 3 on a page, preload these to speed up their experience.

As an aside, on pages with a single main video and many thumbnails, the video preload is often fairly efficient and not too much overhead, especially with a streamed video when just enough to start it can be downloaded, but the thumbnails can be quite a large overhead, or at least a good target for optimisation. You will often see sites limit the number of thumbnails to reduce the data transfer volumes and have some sort of 'click for more' or scroll mechanism to allow the user to request more.

Mick
  • 24,231
  • 1
  • 54
  • 120
  • I'm using `preload='metadata'` - not loading the whole video. The problem is with the metadata itself. Would you just progressively swap from `none` to `metadata` using some script? – SB2055 Jul 28 '17 at 13:31
  • Yes that sounds fine. Its worth being aware that the preload attribute is a guidance for browsers - they don't have to follow it in theory and different ones may handle it differently. The header box or Metadata on videos can be quite big as you've probably discovered. – Mick Jul 28 '17 at 13:40