Single channel playback with keyboard/mouse/touch gesture channel switching

• Channel switching via arrow keys or swipe

• Configurable default channel

• Camera map feature (circular/semicircular layout)

• Automatic pause on channel switch with restoration of previous playback state

• Channel switch loop option

Simultaneous playback of multiple channels

• Layouts: 2x2, 1x2, 1x3, 2x1, 3x1

• Smart Crop feature (maintains 16:9 aspect ratio in non-2x2 layouts)

• Channel selection for each cell

Side-by-side or overlay simultaneous playback of two videos

• Select two videos via Compare-Dual button for side-by-side comparison playback

• Simultaneous channel switching for both videos

• Synchronized play/pause control

Side-by-side or overlay simultaneous playback of two videos

• Select two videos via Compare-Overlay button for overlapping comparison playback

• Simultaneous channel switching for both videos

• Synchronized play/pause control

• Overlay video opacity adjustment feature (0% ~ 100%) for more effective video comparison

When a new video is detected, it automatically plays and repeats playback until a new video is detected.

• Monitors today's date directory

• Automatically plays when new video is detected

• Configurable check interval (1 second ~ 60 seconds)

• Option to play in separate window

• Playback mode selection (Interactive/MultiView)

Feature to draw on videos

• Available in Interactive mode, MultiView mode, Interactive Dual mode, and Interactive Overlay mode

• Drawing tools: Pen, Line, Rectangle, Ellipse, Polygon

• Line width adjustment (1px ~ 20px)

• Color selection (8 presets + custom color)

• Undo/Redo (Ctrl+Z / Ctrl+Y)

• Clear all functionality

• Drawing panel show/hide toggle

• Draw directly on video for analysis and annotation

• Displays a marker at the current playback position

• Measures time difference between markers

• Button background changes to red when activated

• Video directory path setting

• Detailed settings for each playback mode

• Multi-language Support. : English, Korean and Japanese

The Contents page is the main page for playing videos. You can view the video list and play videos in various modes.

Open

Open

Main Buttons

• Dashboard Button: Navigate to the dashboard page. You can check performance monitoring and system status.

• Compare-Overlay Button: Activates a mode to select two videos for Interactive Overlay mode. Checkboxes appear in the video list to select two videos.

• Compare-Dual Button: Activates a mode to select two videos for Interactive Dual mode. Checkboxes appear in the video list to select two videos.

• Auto-Play Button: Activates automatic video detection and playback. Monitors today's date directory and automatically plays when a new video is detected.

• Settings Button: Navigate to the settings page. You can manage all application settings.

Filters

• Date Selection Filter Filters the video list by a specific date. When you select a date, only videos from that date are displayed.

• Title Filter : Filters the video list by a specific title. The title options are automatically extracted from video directory names (excluding the first 6 digits and hyphen). Select a title from the dropdown to show only videos with that title. The filter options are dynamically updated when the video list is refreshed.

Video List

Open

• The video list from the directory specified in settings is automatically displayed

• You can filter videos using the date filter and title filter

• You can play videos by clicking the thumbnail or using the icon buttons (Interactive/MultiView) on the right end

• Each video card displays the video title and making date (date and time)

Playback Modes

• Interactive Mode: Single channel playback and channel switching with keyboard/touch gestures

• MultiView Mode: Play multiple channels simultaneously (2x2, 1x2, 1x3, etc.)

• Interactive Dual Mode: Compare two videos side by side (Select 2 videos using Compare-Dual button, then play)

• Interactive Overlay Mode: Compare two videos overlapping (Select 2 videos using Compare-Overlay button, then play)Interactive Mode: Single channel playback and channel switching with keyboard/touch gestures

How to Use Compare Mode

• Compare-Dual Usage:

  • Click the Compare-Dual button in the top header to activate compare mode

  • When checkboxes appear in the video list, select two videos you want to compare using the checkboxes

  • When two videos are selected, they automatically play in Interactive Dual mode (side-by-side)

  • In the playback screen, you can compare the two videos side by side and control them simultaneously

• Compare-Overlay Usage:

  • Click the Compare-Overlay button in the top header to activate compare mode

  • When checkboxes appear in the video list, select two videos you want to compare using the checkboxes

  • The first selected video becomes the background video, and the second selected video becomes the overlay video

  • When two videos are selected, they automatically play in Interactive Overlay mode (overlapping)

  • In the playback screen, you can compare the two videos overlapping and control them simultaneously

Auto-Play Feature

• Clicking the Auto-Play button monitors today's date directory

• When a new video is detected, it automatically plays

• It repeats playback until a new video is detected

In the playback mode screen, you can play and control selected videos in various modes.

The top of the playback screen displays information about the currently playing video and control buttons.

• Video Title and Date/Time: The video title (display name) and making date/time are displayed in two lines on the left. The title is shown on the first line, and the date/time (YYYY-MM-DD HH:MM:SS) is shown on the second line in smaller text

• Hide/Show Video Info:

  • Collapse Button: Click the collapse button on the left side of the video information area to hide it

  • Expand Button: When the video information area is hidden, an expand button appears in the top-left corner. Click the expand button to show the video information area again

  • Auto Collapse: When the browser window height (window.innerHeight) is 500px or less, the video information area automatically collapses and the expand button is displayed. This also applies when the browser size changes or the screen orientation changes

  • Utility Button Group: When the video information area auto-collapses, the utility button group containing the Drawing Mode button is also hidden

• Mode Switch Button:

  • Switch to MultiView Button: Displayed in Interactive mode, clicking switches to MultiView mode

  • Switch to Interactive Button: Displayed in MultiView mode, clicking switches to Interactive mode

• Home Button: Returns to the main home screen

In the playback mode screen, you can play and control selected videos in various modes.

Open

Open

• Play/Pause: Click anywhere on the screen to toggle play/pause. Frame movement pauses playback even if it was playing (control buttons take priority)

• Zoom: Mouse wheel to zoom in/out (1.0x ~ 4.0x). On trackpad, you can zoom using pinch gesture with two fingers.

• Panning (Screen Movement): Right mouse button drag to move screen when zoomed in. On trackpad, use two-finger drag to pan when zoomed in.

• Drag Gestures: Drag on the video area (excluding control areas) to navigate channels/frames

  • Up/Down Drag (Channel Navigation): Drag up for channel+1, drag down for channel-1. Continuous channel switching while holding drag (at channel switch interval from settings > interactive). Reversing drag direction switches channels in the new direction

  • Left/Right Drag (Frame Navigation): Drag left for frame-1, drag right for frame+1. Continuous frame movement while holding drag. Reversing drag direction moves frames in the new direction. Frame movement pauses playback even if it was playing

    • Frame movement speed based on drag distance: < 200px: ±1, 200~400px: ±2, 400~600px: ±3, > 600px: ±4

• Camera Map: Click a circle (point) on the camera map to switch to that channel

• Navigation Buttons: Use buttons at bottom right of screen

• Utility Buttons: Use buttons at bottom left of screen (Drawing Mode, Stopwatch)

• Playback Control Bar: Use buttons on bottom control bar

• Play/Pause: Tap anywhere on the screen to toggle play/pause. Frame movement pauses playback even if it was playing (control buttons take priority)

• Drag Gestures: Drag on the video area (excluding control areas) to navigate channels/frames

  • Up/Down Drag (Channel Navigation): Drag up for channel+1, drag down for channel-1. Continuous channel switching while holding drag (at channel switch interval from settings > interactive). Reversing drag direction switches channels in the new direction

  • Left/Right Drag (Frame Navigation): Drag left for frame-1, drag right for frame+1. Continuous frame movement while holding drag. Reversing drag direction moves frames in the new direction. Frame movement pauses playback even if it was playing

    • Frame movement speed based on drag distance: < 200px: ±1, 200~400px: ±2, 400~600px: ±3, > 600px: ±4

• Zoom: Pinch zoom (spread/pinch with two fingers) - 1.0x ~ 4.0x

• Panning (Screen Movement): Drag with two fingers to move screen when zoomed in

• Camera Map: Tap a circle (point) on the camera map to switch to that channel

• Navigation Buttons: Use buttons at bottom right of screen

• Utility Buttons: Use buttons at bottom left of screen (Drawing Mode, Stopwatch)

• Playback Control Bar: Use buttons on bottom control bar

Buttons displayed at the bottom right of the screen

• Left Channel : Switch to the left channel (camera) video

• Right Channel : Switch to the right channel (camera) video

• Previous Frame : Navigate to previous frame

• Next Frame : Navigate to next frame

Buttons displayed at bottom left of screen

• Drawing Mode Button: Activates drawing tools to draw on the video

• Stopwatch Button: Displays a marker at the current playback position and measures the time difference. When activated, the button background changes to red

• / Play/Pause: Toggle play/pause

• / Loop : Toggle loop playback

• / Playback Rate: Adjust playback rate (0.25x ~ 2.0x)

• / Fullscreen: Toggle full screen mode

A mode that plays multiple channels simultaneously. You can specify the layout and channels to display in each cell in settings.

Open

Keyboard Controls

See Player Guide | Keyboard ControlsPreview

Mouse Controls

See Player Guide | Mouse ControlsPreview

Touch Gestures (Mobile/Tablet)

See Player Guide | Touch GesturesPreview

Navigation Buttons

See Player Guide | navigation buttonsPreview

Playback Controls

See Player Guide | playback controlsPreview

A mode that plays two videos side by side for comparison. It automatically starts after selecting two videos using the Compare Mode button on the main home screen.

Open

Keyboard Controls

See Player Guide | Keyboard ControlsPreview

Mouse Controls

See Player Guide | Mouse ControlsPreview

Touch Gestures (Mobile/Tablet)

See Player Guide | Touch GesturesPreview

Navigation Buttons

See Player Guide | navigation buttonsPreview

Playback Controls

See Player Guide | playback controlsPreview

A mode that plays two videos overlapped. You can display an overlay video on top of a background video with transparency adjustment. It automatically starts after selecting two videos using the Overlay Mode button on the main home screen.

Open

Overlay Control PanelOverlay Control Panel

The compact overlay control panel displayed on the left side of the screen allows you to adjust transparency:

• Vertical Opacity Slider: A vertical slider that adjusts the opacity of the overlay video from 0% to 100%

  • Top End (0%): Background video 100% visible, overlay video completely transparent (0%)

  • Middle (50%): Background video 50% visible, overlay video 50% visible

  • Bottom End (100%): Background video completely hidden (0%), overlay video 100% visible

• Video Name Labels:

  • Top Label: Overlay video name is displayed in blue

  • Bottom Label: Background video name is displayed in red

  • Video names are displayed excluding the first 7 characters (date format)

• Slider Colors:

  • The slider track has a gradient from top (blue) to bottom (red)

  • The slider thumb (control handle) color displays as a mix of red and blue based on the current position

  • Closer to the top displays more red (background video), closer to the bottom displays more blue (overlay video)

Keyboard Controls

See Player Guide | Keyboard ControlsPreview

Mouse Controls

See Player Guide | Mouse ControlsPreview

Touch Gestures (Mobile/Tablet)

See Player Guide | Touch GesturesPreview

Navigation Buttons

See Player Guide | navigation buttonsPreview

Playback Controls

See Player Guide | playback controlsPreview

Auto-Play mode automatically detects and plays new videos. It runs in a separate window and checks for new videos at the interval specified in settings.

• Automatic Video Detection: Checks for new videos in today's date directory at the configured interval (default: 2 seconds)

• Automatic Playback: Automatically plays detected new videos

• Playback/Navigation Controls Hidden: In Auto-Play mode, playback control bar and navigation buttons are not displayed

  • Manual controls such as play/pause and channel switching are not available

  • Videos play automatically and switch automatically when new videos are detected

• No Video Message: If there are no videos for today's date, a message "Today's date directory not found" is displayed in the center of the screen

• Mode Selection: If multiple playback modes are configured in Settings, you can select a mode when clicking the Auto-Play button

• Separate Window Execution: When "Open in Separate Window" option is enabled, each mode can be opened in a separate browser window

Open

• Drawing Mode Button: Click the Drawing Mode button in Interactive mode or MultiView mode to display drawing tools

• When Drawing Mode is activated, the button's background color changes to red to indicate the current drawing mode state

• You can draw on the video

• Tools: Pen, Line, Rectangle, Ellipse, Polygon

• You can adjust line width and color

Stopwatch mode is a feature that marks a specific point in a playing video and measures the time difference from that point.

• Stopwatch Button: Located to the right of the Drawing Mode button in the utility button group

• Activation Method:

  • Click the stopwatch button or press Ctrl + S (Mac: Cmd + S) to display a marker at the current playback position

  • When stopwatch mode is activated, the button's background color changes to red to indicate the current stopwatch mode state

• Marker Display:

  • A green triangle marker is displayed above the seekbar to indicate the start point

  • Clicking the triangle marker moves the seekbar thumb to that position and moves the video to the point where the marker was set

  • When the marker is clicked, the time difference display resets to 00:00.00

• Time Difference Display:

  • The time difference is displayed in real-time to the right of the stopwatch button (e.g., 00:05.23)

  • The time difference shows a `-` sign only when negative, and displays without a sign when positive

  • Every time the seekbar thumb moves, the time difference from the marker point is automatically updated

• Deactivation: Click the stopwatch button again or press Ctrl + S (Mac: Cmd + S) again to remove the marker and time display, ending stopwatch mode

• All Playback Modes Supported: Available in all modes: Interactive, MultiView, Interactive Dual, and Interactive Overlay

You can manage all application settings on the Settings page.

Open

• Title: Set application title (max 20 characters)

• Video Directory Path: Specify the parent directory containing video directories (required)

• Video List Update Interval: Video list auto-update interval (1, 2, 5, 10, 30, or 60 seconds)

• Video List Sort: Sort criteria (filename/creation date) and sort order (ascending/descending)

• Camera (Channel) Count: Total number of cameras/channels (1 ~ 100, default: 24)

• Thumbnail Click Mode: Playback mode selection when clicking thumbnail (Interactive/Multi view/Use buttons only)

• Language: Select the display language for the application (English, 한국어, 日本語)

Open

• Default Channel: Default channel index (1 to Camera Count) for Interactive, Interactive Dual, and Interactive Overlay modes

• Camera Map: Camera map display method (None/Circular/Semicircular/Rectangular)

  • None: Do not display camera map