How can i find the video with different resolution details

Question

How can I find a video with different resolution which are contains in video file.

Actually i am working on a react app to create a multiresolution video player it will take the video from the user.Now i am facing the issue to find a video with resolution details.(I can't use any liberary).

Answer 1

If you're trying to create a multi-resolution video player or recorder, you can achieve this using RecordRTC to capture videos at different resolutions directly from HTML elements such as <div> or <canvas>. This approach is flexible and allows you to record a video in multiple resolutions without needing to depend on the embedded resolutions within the video file itself. Here's how you can do it:

Solution

Use Canvas or HTML Elements:
You can draw your video frames onto a <canvas>. Adjust the size of the canvas to match the desired resolution, whether it's 720p, 1080p, or 4K.

Record with RecordRTC:
By using RecordRTC, you can capture the canvas output at the resolution you specify, which gives you full control over the video recording process.

How It Works:
First, you render your video content inside a canvas element, and then you can dynamically adjust the size of the canvas to match the target resolution.

Once the video is being drawn on the canvas, you can record the content using RecordRTC, ensuring that the resolution of the recording matches the canvas dimensions. Example: You can refer to this demo RecordRTC Example for HTML Elements by Muaz Khan, which shows how to record HTML elements, including divs and canvas, using RecordRTC.

This solution is particularly useful because it allows you to record videos at the resolution you want, independent of the source video’s original resolution. You can also convert and scale videos within a and export them at the desired resolution.

This way, you avoid the limitations of embedded video resolutions and can control both preview and recording output as needed.