Video
Introduction
Video
widget in Supervisely is a custom player designed for displaying videos and annotations frame-by-frame. It allows to play, pause, rewind, and fast-forward videos, as well as move through them frame by frame. It is a powerful tool for visualizing and analyzing video data with annotations.
Function signature
Video(video_id=None, widget_id=None)

Parameters
video_id
int
Video
ID
widget_id
str
ID of the widget
video_id
Determines Video
ID, used in Video
widget.
type: int
default value: None
widget_id
ID of the widget.
type: str
default value: None
Methods and attributes
video_id(id: int)
Get video_id
property.
loading(value: bool)
Get or set loading
property to Video
widget.
set_video(id: int)
Set video in Video
widget by ID.
set_current_frame(value: int)
Set video player to given frame.
get_current_frame()
Get current video player frame.
get_frames_count()
Return number of frames in video.
@play_clicked
Decodator function is handled when video start to play.
@pause_clicked
Decodator function is handled when video stopped.
@frame_change_started
Decodator function is handled when a frame index is being changed.
@frame_change_finished
Decodator function is handled when there was no change in frame index for the last second.
Mini App Example
You can find this example in our Github repository:
ui-widgets-demos/media/004_video/src/main.py
Import libraries
import os
from random import randint
import supervisely as sly
from dotenv import load_dotenv
from supervisely.app.widgets import Button, Card, Container, Video
Init API client
First, we load environment variables with credentials and init API for communicating with Supervisely Instance:
load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))
api = sly.Api()
Get Video ID from environment variables
video_id = int(os.environ["modal.state.slyVideoId"])
Get VideoInfo
from server
VideoInfo
from servervideo_info = api.video.get_info_by_id(id=video_id)
Initialize Video
widget we will use in UI
Video
widget we will use in UIvideo = Video(video_id=video_id)
Initialize buttons to control widget
button_random_frame = Button(text="Random", icon="zmdi zmdi-tv")
button_loading = Button(text="Loading", icon="zmdi zmdi-refresh")
buttons_container = Container(
widgets=[button_random_frame, button_loading], direction="horizontal",)
Create app layout
Prepare a layout for app using Card
widget with the content
parameter and place widget that we've just created in the Container
widget.
card = Card(
title="Video",
content=Container(widgets=[video, buttons_container]),
)
layout = Container(widgets=[card])
Create app using layout
Create an app object with layout parameter.
app = sly.Application(layout=layout)
Handle button clicks
Use the decorator as shown below to handle button click. We have 6 buttons: to play video, to stop video, to change video frame, to stop change video frame, to set random frame, to download video.
@button_random_frame.click
def set_random_frame():
video.set_current_frame(randint(0, video_info.frames_count - 1))
@button_loading.click
def video_loading():
if video.loading:
video.loading = False
else:
video.loading = True
print(f"Loading: {video.loading}")

Last updated
Was this helpful?