The controls you reach for
Play, pause, adjust the volume or seek to another moment. Fullscreen is here too.
PLAY / SEEK / SOUND VIDO · OPEN-SOURCE HTML5 VIDEO PLAYEROPEN SOURCE / PRESS PLAY
LET'SPLAY
Your favorite frame.
Ready when you are.
Use Vido to share a favorite video on your website, or show something you made.
Watch in your browser. Nothing to install.
01 / THE SCREENING ROOM
Try a clip for yourself.
This is the Vido player. Try seeking, adjusting the volume or pausing wherever you like.
Getting the player ready
V I D O / 2.000:00
Sample: Hatsune Miku — SenbonzakuraOriginal demo · BV19t41187z2
Credits & license Focus the player: Space to play or pause. Arrow keys adjust the focused timeline.
SMALL PLAYER. BIG PLAY ENERGY.Familiar controls.
Familiar controls.
At your own pace.
Add your work to a homepage or a demo to a project page, with the playback controls you already know.
A little faster. A little slower.
Switch from 0.5× to 2× in the player settings. Take another look at that one move.
0.5× — 2×A screen of your own
Add a container and initialize the player with your video, size and poster. You can change the progress color too.
YOUR VIDEO. YOUR PAGE.02 / MAKE IT PERSONAL
A little personality, frame by frame.
Keep it simple, or add a happy little face and soft bands of color. Preview your style here, then try it in the player.
Style preview · give it a little drag58%
Make it yours
Pick a little face to follow your film.
Processed locally. Your choices stay in this browser.
03 / MAKE IT YOURS
Next screening: your website.
Download Vido 2.0’s dist files, load the stylesheet and player, then add your video and avatar.
player.js
const player = new vido({ el: '#screen', src: './your-film.mp4', poster: './your-poster.jpg', lang: 'zh', muted: true, avatar: './your-avatar.svg'}); // When the view unmounts:// player.destroy();A few things to know
Vido 2.0 is rewritten in TypeScript, with no Vue or React runtime dependency. Use it directly on a web page, or mount and destroy it inside your framework.
Formats depend on your browser. There is no bundled HLS engine or quality switcher. Picture-in-picture requires browser support; captions use WebVTT files. Scene shortcuts, local files and room lighting are website demo tools.
Read the API and compatibility notes