HTML5 video player: what you get free and what you have to build
The native HTML5 <video> element plays MP4 and WebM, gives you the browser’s own controls, and costs nothing. What it does not give you is a consistent look across browsers, a chapter menu, adaptive HLS playback in every browser, retention analytics, lead capture or branding — those are the reasons people replace it with a player library or a hosted player.
The native element, done properly
<video controls playsinline preload="metadata" poster="/poster.webp"
style="width:100%;aspect-ratio:16/9">
<source src="/media/tour.mp4" type="video/mp4">
<track kind="captions" src="/media/tour.en.vtt" srclang="en" label="English" default>
</video>playsinlinestops iOS taking over the screen.preload="metadata"fetches enough to show duration without pulling the file.posteris a still, not a decoration: it decides your play rate.<track>gives you captions with no JavaScript at all.
For a documentation clip, that markup is genuinely enough. Stop here if it is.
What you do not get
| Need | Native <video> |
|---|---|
| Identical controls across browsers | No — each browser draws its own |
| Chapter markers and menu | No |
| Adaptive streaming (HLS) | Safari yes, others need a JS player |
| Retention curve, play counts | No |
| In-video CTA or email form | No |
| Branding, watermark, accent colour | Only by rebuilding the control bar |
| Sticky miniplayer, PIP UI | PIP via the browser only |
Three routes from here
- Style the native element. Cheapest. Custom controls over a hidden native bar is a weekend of work and then a long tail of edge cases (fullscreen on iOS, keyboard focus, captions styling).
- A player library. Video.js, Plyr, Vidstack and friends handle the control bar and plugins. You still own hosting, transcoding, thumbnails, analytics and CTAs.
- A hosted player. The file, the delivery, the player, the analytics and the marketing layer arrive together, embedded with one line. You give up direct control of the internals.
The honest decision rule
If the video is incidental to the page, use the native element. If the video is the page's job — a demo, a sales asset, a course — the measurement and the CTA layer are the point, and building them is a project, not a task. That is what Videokr's player is: a branded player over hosted delivery, with the retention curve and lead capture already wired in.
Frequently asked questions
Can the native HTML5 player play HLS?
Safari can play .m3u8 natively; Chrome and Firefox need a JavaScript player such as hls.js or a hosted player that includes it.
Is a player library enough?
For look and controls, yes. It does not host, transcode, deliver or measure the video — those remain yours.