Web player

Install the FastPix web player

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

Use the following script tag for fastpix-player:

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


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


1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>FastPix Player</title>
7   <script defer src="https://cdn.jsdelivr.net/npm/@fastpix/fp-player@latest"></script>  
8</head>
9<body>
10    <fastpix-player playback-id="PLAYBACK_ID" stream-type="on-demand"></fastpix-player>
11</body>
12</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
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
$import "@fastpix/fp-player";

Example:

1import "@fastpix/fp-player";
2
3
4import { PageSchema } from "../../../../components/PageSchema";
5
6<PageSchema
7  headline={"Web Video Player SDK: Install | FastPix"}
8  description={"Install the web video player with the FastPix Web player SDK. Step-by-step guide with runnable JavaScript code and adaptive HLS playback for your app right now."}
9  url={"https://fastpix.com/docs/web-player/install-the-fastpix-web-player"}
10  breadcrumb={["Video Player", "Web player", "Install the FastPix web player"]}
11/>
12
13const app = () => {
14 
15  return (
16   <fastpix-player playback-id="PLAYBACK_ID" stream-type="on-demand"></fastpix-player>
17  )
18  
19}
20
21export 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

Playback

Player UI

Advanced features

Examples