## Overview
The Playback Video Player allows operators to review recorded video from a publishing point using a dedicated playback interface.
It combines a standard video player with a powerful timeline navigator, enabling users to locate recordings by time, scrub through available segments, and step precisely through footage (by second, by frame, or by recording segment).
Playback is typically used to:
- Investigate incidents after they occur
- Validate recordings over a selected time range
- Step frame-by-frame for detailed review
- Jump quickly between recording segments (files)
![[z_img/d9cf9d5b5599acb811ac2f36ed148220_MD5.jpg]]
<div class="page-break" style="page-break-before: always;"></div>
## Functionality
### Stream Selection
When the player is opened without a preselected source:
- A Stream dropdown is shown at the top
- The list is populated from configured publishing points
- Selecting a stream initializes playback context and enables loading
When the player is opened with a specific SourceId (e.g., from a tile):
- The dropdown is hidden
- The player automatically targets the requested source and can auto-load immediately
### Video Playback Area
The central video area displays:
- A Playback header with the currently loaded recording file name
- A `<video>` element that plays the selected recording segment
- A time range label showing:
- Start and end timestamps in the client’s local timezone
- Playback duration
If no segment is loaded, the player displays a guidance/error message (for example: “Select a stream, choose a time range, then click Load.”).
### Timeline Navigator
The timeline provides a visual representation of recordings within the currently visible time window.
#### Recording Segments
- Each available recording file appears as a segment block
- Clicking a segment immediately loads it for playback
- Segment tooltip includes:
- File name
- Start/end timestamps (client-local)
- Duration
#### Cursor and Time Picker
- A centered cursor indicates the current navigation time
- Clicking the cursor label opens a date/time picker
- The picker supports second-level precision (step="1")
- Clicking Go to time recenters the window on the chosen moment
#### Pan and Scroll Navigation
The timeline supports fast navigation:
- Mouse wheel scroll pans the visible time window
- Click-and-drag pans left/right across time
- The player can automatically load additional index data as you pan toward the edges (lazy loading)
### Playback Transport Controls
The control bar provides precise playback operations.
#### Play / Pause
- Play Forward / Pause (▶️ / ⏸)
- Play Backward / Pause (◀️ / ⏸)
Backward playback is implemented as stepwise reverse seeking and is useful for quick rewind review.
#### Segment Navigation
- Previous segment (|◀)
- Next segment (▶︎|)
- Automatically advances to the next segment when a recording ends (if available)
#### Frame and Time Stepping
- Prev frame (◀|)
- Next frame (|▶︎)
- -1 second
- +1 second
These controls stop any active forward/backward playback to avoid conflicting playback states.
#### Playback Speed
A speed dropdown controls playback rate:
- 0.25×, 0.5×, 1×, 1.5×, 2×, 4×
### Zoom Controls (Timeline Scale)
The timeline zoom adjusts the visible time span from minutes to days.
- Zoom slider changes the timeline scale using predefined steps
- Zoom buttons (− / +) allow quick adjustments
- A span label shows the current visible range (e.g., 10 min, 4 h, 2 d)
Zoom is applied around the cursor/center time to keep navigation intuitive.
### Range Picker and Load
A range picker allows explicit loading of recordings between two times:
- From (local time)
- To (local time)
- Load triggers indexing and segment discovery for the selected range
The system:
- Converts client-local time into UTC internally
- Loads recording index data for the relevant days
- Filters out index entries whose files do not exist on disk
- Initializes the timeline window to the requested range
If the range is invalid (To ≤ From), the player shows an error and does not load.
![[z_img/3bc98f6f6ac12c15107490a287b060c3_MD5.jpg]]
## Workflow
A typical playback workflow:
1. Select a stream (if not preselected)
2. Choose a From / To time range
3. Click Load to retrieve available recordings
4. Use the timeline to identify the relevant segment
5. Click a segment to start playback
6. Use transport controls to:
- Play forward/backward
- Step by second or frame
- Jump between segments
7. Zoom and pan the timeline to expand the investigation window
8. Use the cursor time picker to jump directly to a known timestamp
## Setup and Verification – Example
### Example: Load and Review a Recording Around an Incident Time
1. Open the Playback Video Player
- Open playback from a tile, or open the player directly and choose a stream
2. Select Stream (if required)
- Choose a publishing point from the Stream dropdown
3. Load a Time Range
- Set:
- From → incident time − 10 minutes
- To → incident time + 10 minutes
- Click Load
4. Verify Timeline Segments
- Confirm recording blocks appear in the timeline
- Hover a segment to verify correct timestamps and duration
5. Start Playback
- Click a segment to load it
- Press Play Forward
6. Precision Review
- Use +1s / -1s and frame step buttons to inspect key moments
- Increase speed to 2× or 4× for fast scanning
7. Segment Transition
- Let a recording reach the end
- Verify the player advances to the next segment automatically (if present)
This confirms that indexing, time conversion, timeline navigation, and playback controls are functioning correctly.
## Note: Timezone Handling
Playback timestamps are displayed in the client’s local timezone for operator clarity.
Internally, the system converts between local time and UTC to align recordings consistently across servers and clients.
<div class="page-break" style="page-break-before: always;"></div>