FlowCraft Video Player
Play the sample showreel, drag along the progress bar, change the volume or go full screen. When it ends, the player invites the viewer to ask for a quote. This demo runs the same app.js that comes with the paid player.
Sample video. The 27-second showreel and its music are placeholders made for this demo. You swap in your own video file, and nothing you enter here is saved or sent.
Try it
- Press play. Click the big button, or click the player and press Space.
- Scrub the timeline. Click or drag the bar; a bubble shows the time. ← → jump 5 seconds.
- Watch to the end. The end screen offers a replay and a button that jumps to the quote form.
0:00 / 0:27
Your own controls on top of the browser's video
The player uses the browser's built-in <video> element and hides its default controls. app.js draws its own and keeps them in sync, with every step explained in comments.
- The video reports, the controls followPlay, pause, time and volume changes all come from the video's own events, so the controls never get out of step.
- Click or drag to seekWhere you point on the bar ÷ the bar's width = how far into the video. Halfway along a 27-second video is 13.5 seconds.
- Keyboard and screen readersSpace/K, arrow keys, M, F and 0–9 work when the player has focus. The bar is announced as a slider with the current time.
Lead context: when a viewer asks for a quote, the form sends their email with the video's title and how much of it they watched, for example watchedPercent: 100.
<figure data-video-player
data-title="Project Showreel">
…
<video data-video
poster="assets/video/poster.jpg">
<source src="assets/video/showreel.mp4"
type="video/mp4">
</video>src at your own MP4 (H.264 video with AAC audio plays in every modern browser) and poster at a still image. Several players can sit on one page, each with its own title.What the full version includes
Delivered as a ZIP download through Payhip.
-
index.htmlPlayer, control bar, end screen and quote form, styled with Tailwind CSS -
app.jsPlay, seek, volume, full screen, keyboard shortcuts and the quote form, heavily commented -
style.cssAuto-hiding controls, progress bar hover and volume slider styling -
assets/video/The sample showreel (MP4 and WebM) and poster image, plusREADME.txtand an optional.htaccess
Requirements
- Your own video file. An MP4 with H.264 video and AAC audio, hosted with your site or on any file host that serves it directly.
- Any web host, or none. The player also runs when
index.htmlis opened directly from your computer. - A form endpoint to receive leads (optional). Any service that accepts a JSON
POST, for example Formspree, Make or Zapier. Until you add one, the quote form sends nothing and says so. - An internet connection for visitors. Tailwind CSS loads from its public CDN. No npm install or build step. YouTube and Vimeo links are not supported; the player needs a direct video file.
Get the Video Player
Start with the free static shell to check the layout, or get the full version with the working player you just tried.
Free
Free Static HTML Shell
The player's layout: poster, control bar, end screen and quote form, so you can review the design and markup in your own project.
- Complete visual layout with the sample poster
- Sample structure and markup
- Does not include the player or form logic
Opens the free download on Payhip.
Full version
Full Video Player — $67
The working player you just tried, ready for your own video.
- Custom play/pause, draggable progress bar, volume and full screen
- Keyboard shortcuts and screen-reader labels
- End screen and quote form send each viewer's email, the video title and how much they watched to your form service
- No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript
Checkout and download are handled by Payhip.
Back to the FlowCraft catalogue to see the other components.