> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://fastpix.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://fastpix.com/docs/_mcp/server.

# Install the FastPix web player

> Learn to install FastPix video player and SDKs into your applications

Learn to install FastPix video player and SDKs into your applications

This guide outlines how to set up FastPix Player, with the JavaScript SDK that integrates seamless video playback into your development projects. Choose between two installation methods — **NPM** (Node Package Manager) for package-based installations or **CDN** (Content Delivery Network) for quicker embedding in web applications.

You can also [use the GitHub repository](https://github.com/FastPix/web-player-component) for FastPix web player.

It contains the source code, documentation, and examples to help you get started with integrating FastPix Player into your projects. Whether you're a developer looking to customize the player or simply want to understand how it works, the repository is a valuable resource for all things related to FastPix web player.

\


## Choose installation method: NPM vs. CDN

### NPM (Node Package Manager)

Ideal for complex applications with multiple dependencies. NPM offers version control and automatic updates. This method requires a setup process, but it provides greater control over your project's dependencies.

\


### CDN (Content Delivery Network)

Perfect for quick integration and faster loading times. CDN is suitable for simpler applications but offers less control over versioning and updates.

\


## Prerequisites

### Node.js (required for npm installation)

If you choose to install FastPix Player via NPM, you need Node.js installed on your system. Node.js allows you to manage project dependencies through the command line.

To install Node.js:

* Visit the official [Node.js website](https://nodejs.org/).
* Download the appropriate installer for your operating system.
* Follow the installation steps as provided.

\


### Command line or terminal

You will need a command line or terminal to interact with Node.js (if using NPM) or to navigate through your project's file structure. Most operating systems include a built-in command line or terminal application. If you need assistance accessing it, a quick web search can provide guidance.

\


## Installation via CDN

### Step 1: Get the CDN link

Use the following script tag for `fastpix-player`:

```html
<script defer src="https://cdn.jsdelivr.net/npm/@fastpix/fp-player@latest"></script> 
```

You can replace `@latest` with the specific version you wish to use.

\


## Step 2: Include the CDN link in your HTML

Add the CDN script link to your HTML file’s `<head>` section:

\


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastPix Player</title>
   <script defer src="https://cdn.jsdelivr.net/npm/@fastpix/fp-player@latest"></script>  
</head>
<body>
    <fastpix-player playback-id="PLAYBACK_ID" stream-type="on-demand"></fastpix-player>
</body>
</html>
```

\


With the CDN link in place, whenever a web page loads, `fastpix-player` will be loaded automatically and ready to use, enabling seamless video playback.

\


> **PLEASE NOTE**
>
> Replace `{PLAYBACK_ID}` with the media `playbackId` that you received from the API response or from your dashboard after uploading your media.

\


## Installation with NPM

### Step 1: Open your command line or terminal

Open your terminal (Command Prompt on Windows, Terminal on macOS/Linux).

* **On Windows:** Press **Win** + **R**, type cmd, and press Enter.
* **On macOS:** Press **Cmd** + **Space**, type Terminal, and press Enter.
* **On Linux:** Press **Ctrl** + **Alt** + **T**.

### Step 2: Initialize your project (if not already initialized)

1. Navigate to your project’s root directory:

   `cd path/to/your/project `
2. Initialize your project (if not already set up) with NPM:

   `npm init`

\


### Step 3: Install FastPix Player

To install the player, use the command below. If you want to use any particular version of the player, you can do so by adding `@fastpix-player-version` in the command and substituting `<fastpix-player-version>` with the desired version number (available versions are listed on the official NPM documentation):

**`NPM`**

```Text NPM
npm install @fastpix/fp-player 
```

This command will add `@fastpix/fp-player` and its dependencies to your project (package.json).

### Step 4: Verify your installation

Once the installation is complete, `@fastpix/fp-player` will be located in the `node_modules` directory of your project. This confirms a successful installation.

### Step 5: Import fp-player into your project

In your JavaScript file, import the player using the following syntax:

**`import`**

```shell import
import "@fastpix/fp-player";
```

**Example**:

```jsx
import "@fastpix/fp-player";


const app = () => {
 
  return (
   <fastpix-player playback-id="PLAYBACK_ID" stream-type="on-demand"></fastpix-player>
  )
  
}

export default app
```

> **PLEASE NOTE**
>
> Replace `{PLAYBACK_ID}` with the media `playbackId` that you received from the API response or from your dashboard after uploading your media.

\


## Your player is ready to use

By following these steps, you would have successfully installed `fastpix-player` using either NPM or CDN. Whether you chose the flexibility of NPM or the speed of CDN, you are now ready to integrate high-quality video playback into your project.

\


## Web player guides

Explore what you can do with the Web player after installing it.

**Getting started**

* [Play uploaded videos](/docs/web-player/play-uploaded-videos)
* [Handle playback errors](/docs/web-player/handle-playback-errors)

**Playback**

* [Autoplay, loop, and mute](/docs/web-player/autoplay-loop-and-mute)
* [Control playback speed](/docs/web-player/control-playback-speed)
* [Set the volume preference](/docs/web-player/set-the-volume-preference)
* [Control playback resolution](/docs/web-player/control-playback-resolution)
* [Playback in HLS player](/docs/web-player/playback-in-hls-player)
* [Set the playback start point](/docs/web-player/set-the-playback-start-point)
* [Set the seek duration](/docs/web-player/set-the-seek-duration)
* [Manage audio and subtitles](/docs/web-player/manage-audio-and-subtitles)
* [Add seek preview thumbnails](/docs/web-player/add-seek-preview-thumbnails)
* [Add chapters to the video timeline](/docs/web-player/add-chapters-to-the-video-timeline)
* [Listen to player events](/docs/web-player/listen-to-player-events)
* [Cast to Chromecast (Beta)](/docs/web-player/cast-to-chromecast)

**Player UI**

* [Adjust player layout and UI](/docs/web-player/adjust-player-layout-and-ui)
* [Set the branding color](/docs/web-player/set-the-branding-color)
* [Set the aspect ratio](/docs/web-player/set-the-aspect-ratio)
* [Set the controls backdrop color](/docs/web-player/set-the-controls-backdrop-color)
* [Show or hide player controls](/docs/web-player/show-or-hide-player-controls)
* [Display a title on the video](/docs/web-player/display-a-title-on-the-video)

**Advanced features**

* [Use keyboard shortcuts](/docs/web-player/use-keyboard-shortcuts)
* [Customize thumbnails and posters](/docs/web-player/customize-thumbnails-and-posters)
* [Configure preload and CORS settings](/docs/web-player/configure-preload-and-cors-settings)
* [Set a custom domain](/docs/web-player/set-a-custom-domain)
* [Secure video playback](/docs/web-player/secure-video-playback)
* [Play DRM-protected content](/docs/web-player/play-drm-protected-content)
* [Enable lazy loading](/docs/web-player/enable-lazy-loading)
* [Monitor video data](/docs/web-player/monitor-video-data)
* [Add shoppable video overlays](/docs/web-player/add-shoppable-video-overlays)

**Examples**

* [Build a custom track switcher UI](/docs/web-player/build-a-custom-track-switcher-ui)
* [Build a custom quality selector](/docs/web-player/build-a-custom-quality-selector)
* [Build a shorts feed with React](/docs/web-player/build-a-shorts-feed-with-react)