Docs - PlayerJS - Create HTML5 player for your website (2025)

Squarespace integration

How to integrate a player into Squarespace

Custom list in the settings menu

How to create your own options list in the player menu

Related videos

How to show recommended videos at the end of playback

Bandwidth and bitrate

How to show the average throughput for HLS and DASH in the player

Toolbar control via API

How to change the display mode of the control panel through the API

Lightweight integration

The player will be created only after clicking on the poster

Clicking on the player

How to catch all clicks on the player

Playlist progress

How to track the progress of the entire playlist

Interface for visually impaired

Support of the screen readers for blind and visually impaired people

Outside subtitles

How to display subtitles outside the player

Enlarged buttons on full screen

How to scale the interface in full screen mode

Round progress bar

How to set up a round shaped timeline in the player

Video 360°

How to show spherical video in the player

End credits skip button

How to show an element a few seconds before the end of playback

Disabling rewind

How to disable timeline rewind in the player

Player in a view area

How to create a player only in a view area

Loop

How to loop a playback

Custom buffering icon

How to display custom text or graphic instead of a buffering icon

Playing a specific playlist file

How to specify the desired playlist file in the link of the page

Remove all buttons

How to remove all player buttons

Color variables

How to easily change the color of player elements without PlayerJS builder

External elements

How to show external elements

Credits skip button

How to make a credits (summary, trailer) skip button

Video colour settings

How to change the contrast, brightness, and saturation of a video in the player

Vertical video

How to build a player for vertical video

Player stretch button

How to change the size of the player with your button

Repeating segments

How to set up a playback segment to repeat

UI elements visibility.

Hide or show player UI elements based on a condition.

Reboot on freezes

How to restart the player when it freezes or a playback error occurs

Domain restrictions

How to prevent the player from being used on certain domains

ID3 tags

How to read MP3 metadata (ID3 tags)

Custom labels

How to show custom labels in the player

Playlist generator on PHP

Script for automatic generation of playlists by folders

Advanced tooltip

How to add a complex formatting to your tooltips

Age limit

How to create warning labels and set up an age verification

React.js

Example of the player integration in React.js

DASH video format

How to play mpd streams

Playlist autoplay

How to set up automatic playback of a playlist

Dynamic links

How to pass playback sources to the player dynamically

Vue.js

Example of player integrating for Vue.js

Playback tracking

How to track playback time via the API

Ad blocking bypass

How to replace an advertisement link on the fly in case of blocking

Combined settings menu

How to combine settings in one window

Custom switch

How make a custom switch for any of the settings item

Promo videos

How to show promo or intro video clips

Context menu

How to configure the right-click context menu

Comparison of players

How to compare the settings of two players

Displaying keystrokes

How to display key compbinations pressed on the keyboard

Quizzes and polls

How to set up custom survey in the player

Geographic restrictions

How to set up restrictions based on geolocation

Ads geotargeting

How to set up geotargeting for advertising

Custom picture for an error handler

How to display a special video or image in case of a playback error

Live countdown

How to set up a countdown to the start of a live broadcast

Swipe rewind

How to enable swipe rewind

Variables in advertising links

How to use placeholders for custom variables in ad links

Limit ads based on domain

How to enable or disable ads on certain domains

DASH subtitles

How to show the embedded DASH subtitles

Sleep timer

How to stop playback at a specific time

Dropdown playlist

How to implement a playlist as a drop-down list

Managing ads via code

How to change ads outside PlayerJS builder

Toolbar under and outside the video

How to prevent player toolbar from overlapping the video.

Player interface localization

How to change the language of the player interface

Advertising timeouts

How to set timeouts for loading and displaying ads

Video scale

How to customize the video zoom buttons in the player

How to rename quality options

Custom names for quality options in HLS & DASH

Custom VAST XML

How to compile your own XML code for VAST advertising

Watermarks

How to show transparent labels for content protection

AdBlock check

How to determine if ads are being blocked

Adaptive audio playlist height

How to avoid scrolling in a playlist

Subtitle translation

How to split the subtitles into words to display the translation

Cloud hosting for video players

How to use the player without hosting its file.

HLS subtitles

How to display an embedded HLS subtitles and captions

Fullscreen in landscape mode

Automatic fullscreen in landscape mode

Title template

How to format a titles using templates

Floating player

How to have the player position fixed when scrolling

Parallel subtitles

How to show multiple subtitles together

Remove ads for a short content

How to avoid showing advertising in a short videos

Effects

How to adjust video effects (blur, monochrome, etc.)

Fonts

How to manage fonts in the player and utilise Google Fonts

Advertisement breaks

How to set pauses between ad impressions

Custom quality switch buttons

How to make a separate button to switch quality HD or HQ

Formatting playlists

How to build a custom playlist layout (including pictures)

Playlist memorization

How to remember which files in a playlist was already played

Pause button

How to show the pause button in the center of the player on hover

Ad queue logic

How the advertising queue works

Debug mode

How to view player logs in browser console

Copying player design

How to copy the design of one player to another

Sound channels

How to separate the left and right channel in the player

Marking up a content

What are the ways to mark up content inside the player

AirPlay

How to set up AirPlay support

Content markup outside of the player

How to make a table of contents based on time points

DVR

How to show DVR live broadcasts

HLS video format

How to play m3u8 streams

Chromecast

How to set up Chromecast support in the player

RTMP playback

HTML5 players cannot play RTMP streams

Outside playlist

How to move the playlist in the outer container

Download button

How to add a download button

Responsive interface

Changing interface for the different player sizes

Floating player (PiP)

Picture-in-picture mode for Webkit based browsers

Protecting content with the link variables

How to use custom variables in a content links

Getting started

How to create your first player in the PlayerJS Builder

Player copy

How to copy your player to another account

Playback speed

How to set a playback speed selection

Transparent background

How to make the player background transparent

Radio

How to show info from radio metadata

Play on hover

How to launch the player on hover

Background video

How to use the player as a page background

Custom background for the toolbar

Horizontally repeated bitmap for the toolbar background

Playing Vimeo

How to play video from a popular video hosting

Positioning of the UI elements

How to place an interface element at the desired location

Access password

How to set a password to access the player content

How to limit playback time

The player can cut a part of the content anywhere on the timeline.

Custom ID for the player elements

How to assign an ID to any button to control it from outside of the player.

Second stream

How to play two video/audio streams simultaneously in one player

Saving playback position

How to memorize playback position for returning users

YouTube playback

How to play video from the most popular video hosting

How to track the visibility of the player

The player can monitor its visibility on the page

Hotkeys and gestures

Keyboard shortcuts and gesture settings for touchscreens

Native controls on mobile platforms

Switching to the system UI on mobile platforms

Muted autoplay

What to do if browser prohibits autoplay with sound

Mid-roll ads

How to schedule mid-roll ad breaks

Playback errors

Understanding the playback errors.

Limitation of advertising

How to set the desired amount of ads

Sound volume

How to control sound volume

Text labels

How to show your text labels in the player

Custom drop-down lists on the toolbar

How to make a separate dropdown list of options for any setting

Ad skip button

How to set the timing of the ad skip button

Settings window

How the selection of quality, subtitles, etc. is displayed

Shuffle mode

How to set up a random play in the playlist

Player on HTTPS domains

Specifics of content downloading on secure domains

What to do if video ads don't work

How to use a browser console to learn the cause of ad failures

Poster

How to pass a poster in the player code

How to change the design of the player on the fly

Dynamic way to update player design via API

Commands and requests JS API

How to control the player via JavaScript and request data

Privacy policy

PlayerJS privacy policy

How to embed the player in an iframe

How to integrate the player in a separate iframe page

Fallback sources

How to switch playback to a spare link in case of an error

Terms of Service

Formal contract between user and PlayerJS service

Audio Tracks

How to switch audio tracks

Combining multiple players into one

A way to place several different players on the same page

Thumbnails

How to show frames of the video when hovering over the timeline

Google Analytics

How to collect statistics of various player events

Custom buttons and elements

How to create your own buttons and labels in the player

Search in playlist

Searching for files in playlist via the player interface or API

Embed code and social sharing

How to share the player code or link in messengers and social networks

Subtitles

How to play subtitles in the player

Screenshots

How to take screenshots of videos using the player

WordPress plugin

How to embed the player to your WP website

Cross-domain policy

Features of loading files from different domains

Playlists

How to create a JSON playlist

JS API events

How to catch video player events via JavaScript

Player integration

How to embed the player to your web site

Codecs support

What video and audio codecs does the player support

Autoplay

How to set up autoplay

Player size

How to set the desired player size and adaptability

Quality selector

How to set up a choice of quality options in the player