HTML5 Video Zoom

I was woundering how it would be possible to zoom a HTML5 video since zooming is an almost ubiquitous feature in web shops. In particular zoom makes sense for videos, because visual details may otherwise stay hidden in the background. Especially high quality videos with high resolution (HD) are often downscaled in its size so that even regular objects like text become hardly readable. This is especially the case on small display devices like mobile phones.

Mediasite video player has a similar feature, but it is realized by simple CSS transition of an video that is displayed smaller then its size. One could say its a fake zoom.

Much better results can be achieved with the small library of panzoom. With a few lines of code zoom can be applied to the HTML video element.

However, you can take look at a demo that I have just separated from Vi-Two. Its all work in progress, but the source code is available at github for a few months now.

Screenshot of the video zoom feature of the framework vi-two. Beside that the playback speed is adjustable to the users needs.

Leave a Reply

Your email address will not be published. Required fields are marked *