---
title: createPlayer
description: Factory function that creates a player instance with typed store, mixins, and controller for HTML custom elements
---

import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import Demo from "@/components/docs/demos/Demo.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import StyleCase from "@/components/docs/StyleCase.astro";
import BasicUsageDemoHtml from "@/components/docs/demos/html-create-player/html/css/BasicUsage.astro";
import basicUsageHtml from "@/components/docs/demos/html-create-player/html/css/BasicUsage.html?raw";
import basicUsageHtmlCss from "@/components/docs/demos/html-create-player/html/css/BasicUsage.css?raw";
import basicUsageHtmlTs from "@/components/docs/demos/html-create-player/html/css/BasicUsage.ts?raw";

`createPlayer` is the entry point for setting up a Video.js player with HTML custom elements. It accepts a configuration object with a `features` array and returns a typed <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink>, `context`, `ProviderMixin`, `ContainerMixin`, and a `create` store factory.

```ts title="player.ts"
import { createPlayer, MediaElement, selectPlayback } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { ProviderMixin, ContainerMixin, PlayerController, context } = createPlayer({
  features: videoFeatures,
});

// Provider element: owns the store, provides context to descendants
class VideoPlayer extends ProviderMixin(MediaElement) {}
customElements.define('video-player', VideoPlayer);

// Control element with selector
class PlayButton extends MediaElement {
  #playback = new PlayerController(this, context, selectPlayback);
}
```

`PlayerController`, `ProviderMixin`, and `ContainerMixin` are intended for controller hosts and custom-element composition. Keep wiring minimal in utility examples, and build concrete elements where needed.

Use split elements (recommended for reusable skins/layouts):

```ts title="player.ts"
import { createPlayer, MediaElement } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });

class PlayerRoot extends ProviderMixin(MediaElement) {}
class PlayerRegion extends ContainerMixin(MediaElement) {}
```

Use a single composed element when the same element should both own the store and attach media:

```ts title="player.ts"
import { createPlayer, MediaElement } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { ProviderMixin, ContainerMixin } = createPlayer({ features: videoFeatures });

class ComposedPlayer extends ProviderMixin(ContainerMixin(MediaElement)) {}
```

## Examples

### Basic Usage

<StyleCase styles={["css"]}>
  <Demo files={[
    { title: "index.html", code: basicUsageHtml, lang: "html" },
    { title: "index.css", code: basicUsageHtmlCss, lang: "css" },
    { title: "index.ts", code: basicUsageHtmlTs, lang: "ts" },
  ]}>
    <BasicUsageDemoHtml />
  </Demo>
</StyleCase>

<UtilReference util="createPlayer" slug="html-create-player" />
