An interactive component for Gradio to compare two videos side-by-side with a draggable slider.
## Features
- **Side-by-Side Comparison**: Display two videos in the same component, perfect for showing "before and after" results.
- **Interactive Slider**: A draggable vertical slider allows users to intuitively compare the two videos.
- **Synchronized Playback**: Clicking on the component plays or pauses both videos simultaneously, keeping them in sync.
- **Input and Output**: Use it as an input field for users to upload two videos, or as an output to display results from your function.
- **Standard Video Controls**: Includes autoplay, looping properties, mute/unmute, fullscreen toggle, and a download button.
- **Flexible Loading**: Load videos from local file paths or remote URLs directly into the component.
## Installation
```bash
pip install gradio_videoslider
```
## Usage
```python
import gradio as gr
from gradio_videoslider import VideoSlider
import os
# --- 1. DEFINE THE PATHS TO YOUR LOCAL VIDEOS ---
#
# IMPORTANT: Replace the values below with the paths to YOUR video files.
#
# Option A: Relative Path (if the video is in the same folder as this app.py)
# video_path_1 = "video_before.mp4"
# video_path_2 = "video_after.mp4"
#
# Option B: Absolute Path (the full path to the file on your computer)
# Example for Windows:
# video_path_1 = "C:\\Users\\YourName\\Videos\\my_video_1.mp4"
#
# Example for Linux/macOS:
# video_path_1 = "/home/yourname/videos/my_video_1.mp4"
# Set your file paths here:
video_path_1 = "examples/SampleVideo 720x480.mp4"
video_path_2 = "examples/SampleVideo 1280x720.mp4"
# --- 2. FUNCTION FOR THE UPLOAD EXAMPLE ---
def process_uploaded_videos(video_inputs):
"""This function handles the uploaded videos."""
print("Received videos from upload:", video_inputs)
return video_inputs
# --- 3. GRADIO INTERFACE ---
with gr.Blocks() as demo:
gr.Markdown("# Video Slider Component Usage Examples")
gr.Markdown("💻 Component GitHub Code")
with gr.Tabs():
# --- TAB 1: UPLOAD EXAMPLE ---
with gr.TabItem("1. Compare via Upload"):
gr.Markdown("## Upload two videos to compare them side-by-side.")
video_slider_input = VideoSlider(label="Your Videos", height=400, width=700, video_mode="upload")
video_slider_output = VideoSlider(
label="Video comparision",
interactive=False,
autoplay=True,
video_mode="preview",
show_download_button=False,
loop=True,
height=400,
width=700
)
submit_btn = gr.Button("Submit")
submit_btn.click(
fn=process_uploaded_videos,
inputs=[video_slider_input],
outputs=[video_slider_output]
)
# --- TAB 2: LOCAL FILE EXAMPLE ---
with gr.TabItem("2. Compare Local Files"):
gr.Markdown("## Example with videos pre-loaded from your local disk.")
# This is the key part: we pass a tuple of your local file paths to the `value` parameter.
VideoSlider(
label="Video comparision",
value=(video_path_1, video_path_2),
interactive=False,
show_download_button=False,
autoplay=True,
video_mode="preview",
loop=True,
height=400,
width=700
)
# A check to give a helpful error message if files are not found.
if not os.path.exists(video_path_1) or not os.path.exists(video_path_2):
print("---")
print(f"WARNING: Could not find one or both video files.")
print(f"Please make sure these paths are correct in your app.py file:")
print(f" - '{os.path.abspath(video_path_1)}'")
print(f" - '{os.path.abspath(video_path_2)}'")
print("---")
if __name__ == '__main__':
demo.launch(debug=True)
```
## `VideoSlider`
### Initialization
| name | type | default | description |
|---|---|---|---|
value |
```python typing.Union[ typing.Tuple[str | pathlib.Path, str | pathlib.Path], typing.Callable, NoneType, ][ typing.Tuple[str | pathlib.Path, str | pathlib.Path][ str | pathlib.Path, str | pathlib.Path ], Callable, None, ] ``` | None |
A tuple of two video file paths or URLs to display initially. Can also be a callable. |
height |
```python int | None ``` | None |
The height of the component container in pixels. |
width |
```python int | None ``` | None |
The width of the component container in pixels. |
label |
```python str | None ``` | None |
The label for this component that appears above it. |
every |
```python float | None ``` | None |
If `value` is a callable, run the function 'every' seconds while the client connection is open. |
show_label |
```python bool | None ``` | None |
If False, the label is not displayed. |
container |
```python bool ``` | True |
If False, the component will not be wrapped in a container. |
scale |
```python int | None ``` | None |
An integer that defines the component's relative size in a layout. |
min_width |
```python int ``` | 160 |
The minimum width of the component in pixels. |
interactive |
```python bool | None ``` | None |
If True, the component is in input mode (upload). If False, it's in display-only mode. |
visible |
```python bool ``` | True |
If False, the component is not rendered. |
elem_id |
```python str | None ``` | None |
An optional string that is assigned as the id of the component in the HTML. |
elem_classes |
```python typing.Union[typing.List[str], str, NoneType][ typing.List[str][str], str, None ] ``` | None |
An optional list of strings that are assigned as the classes of the component in the HTML. |
position |
```python int ``` | 50 |
The initial horizontal position of the slider, from 0 (left) to 100 (right). |
show_download_button |
```python bool ``` | True |
If True, a download button is shown for the second video. |
show_mute_button |
```python bool ``` | True |
If True, a mute/unmute button is shown. |
show_fullscreen_button |
```python bool ``` | True |
If True, a fullscreen button is shown. |
video_mode |
```python "upload" | "preview" ``` | "preview" |
The mode of the component, either "upload" or "preview". |
autoplay |
```python bool ``` | False |
If True, videos will start playing automatically on load (muted). |
loop |
```python bool ``` | False |
If True, videos will loop when they finish playing. |