Guides
Login
Start typing to search…

Install FastPix player

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.

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 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 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 "@fastpix/fp-player";

Example:

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.


Installation via CDN

Step 1: Get the CDN link

Use the following script tag for fastpix-player:

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

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


PLEASE NOTE

The current version of FastPix Player is v1.0.3


Step 2: Include the CDN link in your HTML

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


<!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 src="https://cdn.jsdelivr.net/npm/@fastpix/fp-player@latest/dist/player.js"></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.


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.



Changelog

All notable changes to the FastPix Player is documented below.


Current version

v1.0.3

  • Fixed the spritesheet issue.

Previous versions

v1.0.2

Beta Feature: Chromecast Integration

  • Initial Chromecast Support (Beta): Added foundational support for Google Chromecast. This includes:
    • Chromecast session detection and management.
    • Remote playback toggling with fallback to local player.
    • Volume and mute sync between player and Chromecast.
    • Session cleanup on load and playback resume logic.

v1.0.1

Enhancements & Bug Fixes:

  • PIP Control Removed in Firefox Mobile: Fixed an issue where the Picture-in-Picture (PIP) control was displayed on Firefox mobile browsers when it shouldn't be.
  • Subtitle Menu UI Fixes:
    • Fixed an issue where the subtitle menu was cropped, and scrolling was unavailable for videos with over 10 subtitles.
    • Ensured that if multiple subtitles exist, the list is scrollable and properly displayed in the UI.
  • Subtitle Overlay Fix: Resolved an issue where, after turning off subtitles, the background overlay remained visible instead of disappearing.
  • Data Metrics Integration: Added Quality of Experience (QoE) scoring in the FastPix dashboard, allowing users to monitor streaming quality.
  • Enable Cache Busting (Beta): Introduced an experimental cache-busting feature to ensure that when tracks are added dynamically, the player checks for an updated manifest.

v1.0.0

Initial Release:

  • Playback: Introduced basic video playback functionality.
  • Signed Playback: Enabled secure signed playback options.
  • Stream Types: Added support for various stream types.
  • Responsiveness: Ensured responsive design for different devices.
  • Error Handling: Implemented robust error handling mechanisms.
  • Customizability: Provided extensive customization options for users.
  • Keyboard Accessibility Controls: Added keyboard shortcuts for better accessibility.
  • Lazy Loading: Implemented lazy loading for improved performance.
  • Chapters: Enabled chapter functionality for video navigation.
  • Script Support for Video Events:: Added support for listening to video events via scripts.
  • Poster customizations: Allowed customization of video posters.
  • Thumbnail Customization: Enabled custom thumbnails for videos.
  • Forward and Rewind Playback Customizations:: Provided options for customizable forward and rewind playback.
  • Playback Rates: Allowed adjustment of playback rates.
  • Styling Options: Added various styling options for UI elements.
  • Volume Management: Implemented advanced volume control features.
  • Subtitle Switching: Enabled switching between available subtitles.
  • Audio Track Switching:: Allowed switching between different audio tracks.
  • Thumbnail Hover Previews: Introduced thumbnail previews on hover.
  • Customizing Time Display: Allowed customization of time display formats.
  • Start Time: Implemented functionality to set a specific start time for playback.
  • Placeholder: Added placeholder support for loading states.
  • offline/online control: Provided control mechanisms for offline/online scenarios.
  • Title Display: Implemented title display options for videos.
  • Overriding Default Behaviors: Allowed users to override default player behaviors.

Updated about 1 month ago