Segmented Video Player

Description

The Segmented Video Player is a tool that allows users to view vertical or ultra-wide videos on a standard 16:9 monitor by dividing the video into multiple segments. This segmentation enables easy switching between segments during playback, allowing users to focus on specific areas of the video in a larger view, whether they’re viewing code, error logs, or other development tools.

Goals

Create a tool that displays vertical or ultra-wide videos effectively on a 16:9 monitor by segmenting the view.
Provide quick, real-time switching between video segments during playback for detailed inspection of specific sections.
Support customizable segment counts for both vertical and ultra-wide videos, catering to various use cases.

Challenges

Maintaining smooth transitions between segments while the video plays to avoid disrupting the viewing experience.
Designing an intuitive interface for segment control and playback, ensuring easy keyboard and mouse navigation.
Supporting consistent sizing across segments, ensuring each segment displays correctly without misalignment.

Resolutions

Implemented responsive controls, including keyboard shortcuts, to quickly switch segments, pause/play, and show/hide controls for a streamlined experience.
Developed a straightforward menu that allows users to select video orientation and segment count, ensuring compatibility with vertical and ultra-wide formats.
Enforced uniform segment sizing, ensuring accurate segment display and enhancing the player’s usability for collaborative and review purposes.
Tech

HTML
CSS
JavaScript
Node.js
webpack