---
title: "Tv PLay — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Qasid Hussain · Buttons. Dynamic Video Switcher"
canonical: "https://framer.elliotli.dev/component/tv-play"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Tv PLay

# Tv PLay

Dynamic Video Switcher

[View on Framer](https://framer.com/marketplace/components/tv-play/?via=elliot-li)

![Tv PLay preview image 1](https://framer.elliotli.dev/og/component/tv-play/97bd42f88c0e8847/1600x1200.jpg)

## Summary

Dynamic Video Switcher

## Description

### Dynamic Video Switcher

**Seamless State-Based Video Transitions for Framer.** Create high-impact interactive storytelling by swapping video sources based on user action. Transition from a "Preview Loop" to "Full Content" or switch perspectives with a single click. Perfect for product demos, case studies, and immersive brand experiences.

### What is Dynamic Video Switcher?

The Dynamic Video Switcher is a high-performance logic component that manages multiple video states within a single frame. It eliminates the clunky "white flash" or loading lag usually associated with changing video sources. By pre-fetching assets and managing playback triggers, it allows you to create complex, multi-stage video interactions that feel like a custom-coded application.

### Core Features

-   **Instant Source Swapping:** Switch between multiple video URLs or uploaded files without refreshing the component.
    
-   **Seamless Playback Continuity:** Options to start the second video at the exact timestamp where the first one stopped.
    
-   **Smart Pre-loading:** Background buffering for the "target" video to ensure the transition is instant upon clicking.
    
-   **Logic-Based Triggers:** Set specific rules for what happens after the first video plays (Loop, Switch, or Pause).
    

### Controls inside Framer Presets & Master Controls

-   **Interaction Mode** (Click to Switch, Play to End then Switch, Hover to Preview)
    
-   **Transition Style** (Instant Cut, Cross-fade, or Morph)
    
-   **Auto-Resume** (Toggle whether the new video plays automatically)
    

### Visual Customization

-   **Crossfade Duration:** Fine-tune the millisecond overlap between Video A and Video B.
    
-   **Overlay Masks:** Maintain a consistent branding overlay or "Play" icon across different video sources.
    
-   **Poster Image Sync:** Custom thumbnail management for each video state.
    
-   **Border & Radius:** Apply global styling that persists regardless of the video being displayed.
    

### Styling & Behavior

-   **End-State Logic:** Choose if the final video loops or triggers a secondary UI change (like showing a "Buy Now" button).
    
-   **Mute Management:** Global volume controls or individual "Mute on Start" settings for each clip.
    
-   **Event Hooks:** Trigger Framer animations or CMS updates the moment the video changes.
    
-   **Responsive Scaling:** Maintain aspect ratio (16:9, 9:16, or Custom) across all device breakpoints.
    

### Best Use Cases

-   **Interactive Product Tours:** Click a feature hotspot to swap the background video to a specific product demonstration.
    
-   **"Wait for It" Reveals:** Play a teaser loop that transforms into a full cinematic trailer once the user engages.
    
-   **Before/After Showcases:** Toggle between two synchronized videos to show a "Before and After" comparison in real-time.
    
-   **Dynamic Testimonials:** Start with a silent ambient clip of a client and switch to their full video testimonial upon interaction.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5815

## Details

- **Author**: Qasid Hussain
- **Price**: $10.00
- **Published**: 2026-05-15
- **Updated**: 2026-06-07
- **Added**: 2026-05-03
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow