Dynamic Flip Screen:

Build a Dynamic Flip Screen that allows users to crop video content dynamically. This involves integrating a video player, overlaying a cropper layer with multiple aspect ratios, and providing a dynamic preview of the cropped segment.

Live: https://dynamic-flip-screen.netlify.app/

Screen Recording: https://www.awesomescreenshot.com/video/33338061?key=e3b5aa8489cc285437ccb858236bedb8

Features:

1. Video Player Integration:

   • Static Media Content: A video player to display static media content (use a 16:9 aspect ratio media file)
   • Playback Controls: Video player supports play, pause, and seek.
   • Playback Rate Control: Allow users to control playback speed (0.5x, 1x, 1.5x, 2x).
   • Volume Control: Provides volume control options.

2. Cropper Layer:

   • Overlay: Overlays a cropper layer on top of the video player.
   • Aspect Ratios: Supports multiple aspect ratios: 9:18, 9:16, 4:3, 3:4, 1:1, 4:5.
   • Movable and Resizable: The cropper is movable and resizable within the video player.
   • Constraints: Ensures the cropper stays within the video player's dimensions.

3. Dynamic Preview:

   • Real-Time Update: Displays a dynamic preview of the cropped segment.
   • Aspect Ratio Matching: The preview matches the cropper's aspect ratio.
   • Synchronisation: Ensures real-time updates with negligible delay between the video player and the preview.

4. Functionality:

   • Coordinates Recording: Records the cropper's coordinates, time elapsed, volume, and playback rate at multiple points in time.
     • Example JSON:

   [
     {
       "timeStamp": 0,
       "coordinates": [0, 0, 31.640625, 100],
       "volume": 0.5,
       "playbackRate": 1.0
     },
     {
       "timeStamp": 5,
       "coordinates": [10, 10, 41.640625, 110],
       "volume": 0.5,
       "playbackRate": 1.0
     }
   ]

   • Download JSON: CTA to download this JSON data on clicking "Generate Preview".
   • Negligible Delay: Ensures no or negligible delay between the preview and the actual video for a seamless experience.