How can I zoom into video and switch streaming of videos in the same HTML5 player?

Question

I have video that will be divided into 4 videos.

First the player will stream a lower resolution of the original video, then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.

How can I make that using VideoJS or any other video player ?

Answer 1

After searching, this is the answer ...

For zooming into the video, you can follow this tutorial: Zooming and rotating for video in HTML5 and CSS3

For switch streaming of videos in the same player, you can make that by changing the source on html5 video tag and make some calculations to know where the user zoomed in and hence change the source video.

Answer 2

As there is no response yet let me analyse the problem. This is by no means meant as a full answer, but other people will probably be able to answer parts of the problem:

First the player will stream a lower resolution of the original video,

This means you will need to create/use a video stream. There are plenty of plugins you can use for videostreaming, and depends on what you want. You can consider writing it yourself using for example C#'s System.IO objects and transforming the video in bytes(And putting it back together) The resolution would be easiest reached by just having a seperate video file for this step of the proces. (a lower resolution one used for streaming only)

then the user can zoom into the video to see more details, I need the player to stream one of the 4 videos - that's higher in resolution- based on where the user zoomed in.

So you need to trigger a zoom effect. This means you would need to detect zoom. This would be possible with Javascript in a webbrowser, if you want a browser based application. When that zoom is triggered you can retrieve what position the mouse is on the screen/in the div or on some sort of overlay. Depending on this position you could show another stream.

How can I make that using VideoJS or any other video player ?

Basically these steps above is how i would start looking into this specific case. Considering your VideoJS as a suggestion i assume this is browser based. This would probably mean using Javascript libraries, maybe combined with a server side language.

Thats as far as i can go. Maybe someone can pick up specific parts of the thing i wrote and help you a step further.

Have a nice day!