For an web app, basically an art project, I want do a thing.
A fixed set of 8 24-hours-long videos are to be viewed simultaneously. 7 of them in thumbnail size, and one as almost-fullscreen. The user is able to switch out the fullscreen video for another. After 24 hours, they loop around.
Each video is in sync with the time of the day and cannot be skipped, so that if you're visiting the website on 10:09:08, all the videos should start as well on 10:09:08. So no pausing or seeking.
Due to the massive size the video files would have, I am not sure which way would be a good one to approach this project. Just puting them in a <video> tag will not be a good user experience due to loading times, I assume.
Fast reactivity of the switching action is key; switching without delay or as little as possible loading time. The quality of the 7 small videos can be reduced, but the big one should be primarely as good as possible. Additionally, it should be mobile and desktop friendly.
What kind of services do i need - is google cloud storage smart for these video files?
Adaptive Streaming by DASH.js seems to be a good solution for all Desktops, but its not made for mobile browsers. Is there a ready-made solution around? Should I just use a service for that (throwing a bit money around is an option)? Or can the youtube API, or even plain youtube iframes handle something like this? This would feel like a terrible hack.
Thank you very very much for any input!
HLS format is what you should use - the browser will just load the actual files on demand that you need. Specifically, it lets you specify timestamps in the m3u8 files as timestamps, so seeking should be easier. HLS also breaks up the actual video segments into smaller chunks, and you can store in S3 / cloud storage. hls.js is an option for external library that works desktop + mobile, though being able to combine video on page instead of going auto-fullscreen may dependent on mobile device. What I think you should do for thumbnails is create 1 video that has those streams tiled, then use elements to arrange those streams on the screen. You can then load the different large video streams on demand (also HLS - could even be different levels in the same m3u8 if you want to be fancy).