# 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.

- Section: Guides (https://videokr.com/guides)
- Page: https://videokr.com/guides/html5-video-player
- Last updated: 2026-08-18

## The native element, done properly

```html
<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>
```

- `playsinline` stops iOS taking over the screen.
- `preload="metadata"` fetches enough to show duration without pulling the file.
- `poster` is 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

1. **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).
2. **A player library.** Video.js, Plyr, Vidstack and friends handle the control bar and plugins. You still own hosting, transcoding, thumbnails, analytics and CTAs.
3. **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](/docs/player) is: a branded player over hosted delivery, with the retention curve and lead capture already wired in.

## FAQ

### 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.

## Related

- [Custom video player branding without building one](https://videokr.com/guides/custom-video-player)
- [Player, skins and branding](https://videokr.com/docs/player)
- [How to embed a video on a website](https://videokr.com/guides/embed-video-on-website)
- [Video hosting for WordPress: the practical guide](https://videokr.com/guides/video-hosting-for-wordpress)

---
Videokr — Videokr is hosted video for marketing sites: upload or link a video, brand the player, capture emails inside it, embed it anywhere and read second-by-second retention. Free tier forever, $69 lifetime, or metered plans.
Plans: https://videokr.com/#pricing · Full reference: https://videokr.com/llms-full.txt