Integration & Setup Options

Steps

Include PN Player resources in your website head tag

<script async src="https://cdn.pnplayer.com/index-B6OnkU.js" type="module"></script>
<link href="https://cdn.pnplayer.com/index-DN2akQ.css" rel="stylesheet" />

Create an element

In html body create reference element for player to load

<div id="pnplayer">
  <div id="pn-player"></div>
</div>

Initialize player on the element

<script>
  const playerInstance = window.pnplayer("pn-player", {
            sources: [
              { 
                title: "Video title",
                src: "Video HLS Url",
                textTracks: [],
              }
            ]
        });
</script>

This loads video player on the pn-player element.

Setup Options

These are the options for configuring the layout and playback behavior of a player.

object[]

required

Show properties

string

required

Video title

string

required

Video HLS URL

object[]

Show properties

string

required

URL of the track file (VTT/SRT)

string

required

Track kind (e.g. subtitles, captions, chapters)

string

required

Language code (e.g. en-US)

string

default:"vtt"

Track file format (e.g. vtt, srt)

boolean

default:"false"

Whether this track is enabled by default

object

Show properties

number

Time (in seconds) when the Skip Intro button should start appearing during playback

number

Time (in seconds) where the player will seek to when the Skip Intro button is clicked

string

Text displayed on the Skip Intro button

object[]

Show properties

string

required

Button text

string

required

Redirect URL for button

boolean

default:"false"

Open URL in a new tab

object

Show properties

object

Show properties

object[]

Show properties

string

required

Font display name

string

Font family value

string

URL to the font file, e.g., https://fonts.cdnfonts.com/s/107551/BRCobane-Regular-BF654d96a1718fa.woff

string

default:"playlist"

Playback mode: “playlist” — auto-plays all videos in sources; “multiple” — sources are multiple language/audio versions of the same video

string

Source of the video being played (e.g. PN Platform, Desktop)

string

Unique identifier of the user

string

Unique identifier for your integration ( you can find in dashboard)

Getting started

Features

Player

Guides

Analytics

Integration & Setup Options

Steps

Setup Options

​Steps

​Setup Options

Steps

Setup Options