Preloading many HTML5 videos at the same time - "waiting for available socket" -


i have grid of videos users able play. along lines of list of youtube videos embedded following:

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

at point, start see following chrome:

waiting available socket...

i believe due issues outlined here: chrome hangs after amount of data transfered - waiting available socket

however i'm not sure solution is, given user may seeing 10s or 100s of "previews" scroll through media.

one thing thinking load preload='none' initially, , change videos on preload='metadata' few @ time until metadata has been loaded, wanted ask community before embarking on such smelly endeavor.

as ux - videos in small thumbnails, around 30 of "above fold" @ given time.

as offbeatmammal says usual approach type of video grid or list load poster images rather videos , load video when user clicks or hovers.

you can have separate preview video on hover , full video on click, if server solution supports this.

some pages have 'main' video accompanied many thumbnails, , main video preloaded, , others have thumbnails.

you can pretty make solution complex (or smelly, excellent term, btw!) want or need - example might have alogorithm monitor , predict particular users behaviour , if watch first 2 , 3 on page, preload these speed experience.

as aside, on pages single main video , many thumbnails, video preload efficient , not overhead, streamed video when enough start can downloaded, thumbnails can quite large overhead, or @ least target optimisation. see sites limit number of thumbnails reduce data transfer volumes , have sort of 'click more' or scroll mechanism allow user request more.


Comments

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -