What it looks like
It looks like the player of a major video platform, with rounded corners. Before playback, it shows a frame from the opening and a round button in the center. Along the bottom, a dark strip holds the progress bar, with an indigo to cyan gradient and small dots at each chapter, plus the play, volume, time, chapter name, speed, captions and fullscreen controls. Hovering the bar brings up a thumbnail of that frame with its time and chapter. During playback, the controls fade out after a few seconds of stillness and come back when the mouse moves.
You may be looking for this if you asked for something like
- a nice video player that shows a thumbnail when I hover the bar
- a company video with chapters and captions on my site
- a player like the big video platforms have, with keyboard shortcuts
- video controls that hide by themselves during playback
- an accessible player with captions and speed for an online course
- a product demo video at the top of the sales page
Also known as
- video player
- custom video player
- video controls
- chapters video player
- thumbnail preview
- accessible video player
When to use
- A company video or brand manifesto on the home page
- A product demo with chapters to jump straight to each feature
- Lessons and courses that need speed control, captions and shortcuts
- A prototype for a video product before the final files exist
When to avoid
- When you need to play your own video file without adapting the component
- Decorative background videos, where full controls are overkill
How to ask your AI
Create a custom video player in Vue with a progress bar, hover thumbnail previews, chapters, captions, speed, volume and fullscreen. I want keyboard shortcuts, controls that work with screen readers and controls that stay visible for people who prefer reduced motion.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Matinê
Does Matinê play my own video file?
Not directly. Matinê ships with a 45-second demo film drawn frame by frame on a canvas, in five scenes, with a synthesized soundtrack that starts after the first click. To play your own video, ask your AI to adapt the component to a video element, keeping the bar, chapters, captions and shortcuts.
Which keyboard shortcuts does Matinê support?
Matinê responds to Space or K to play and pause, left and right arrows to move 5 seconds, up and down arrows for volume, F for fullscreen, M for mute and C for captions. The progress bar also accepts Home and End and announces time and chapter to screen readers.
Does Matinê respect reduced motion settings?
Yes, where the interface is concerned. With reduced motion turned on, Matinê stops hiding the controls during playback and removes the button transitions. The film only moves after someone presses play, so nothing animates on its own when the page opens.
