I want to produce a one-page web platform which plays a single video. Users need to be able to ‘zoom’ in on that video without compromising the image quality on the screen. Performance is also a priority (we want the platform to run smoothly on most devices).
Intuition (borrowed from this old question: How can I zoom into video and switch streaming of videos in the same HTML5 player?):
Play the whole video at a standard quality. Crop the video into 1/4ths (see below image for example) and 1/8ths at higher qualities. If user zooms in then ‘switch’ the stream to the higher quality zoomed in video (1/4 or 1/8).
I believe this can be done using HTML5/CSS3 (as the old top answer in the linked question indicates).
My question: the idea stated above is involved and not very fluid (zoom restricted to premade partitions), is there a more efficient/better way to do this using available tools: HTML5, CSS and/or Javascript?