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.

sources

object[]

required

Show properties

title

string

required

Video title

src

string

required

Video HLS URL

textTracks

object[]

Show properties

src

string

required

URL of the track file (VTT/SRT)

kind

string

required

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

language

string

required

Language code (e.g. en-US)

type

string

default:"vtt"

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

default

boolean

default:"false"

Whether this track is enabled by default

skipIntro

object

Show properties

start

number

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

end

number

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

label

string

Text displayed on the Skip Intro button

customButtons

object[]

Show properties

label

string

required

Button text

link

string

required

Redirect URL for button

openInNewTab

boolean

default:"false"

Open URL in a new tab

layout

object

Show properties

captionStyles

object

Show properties

fonts

object[]

Show properties

label

string

required

Font display name

value

string

Font family value

url

string

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

playMode

string

default:"playlist"

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

source

string

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

userId

string

Unique identifier of the user

key

string

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

AI Transcribe Controls & Events

​Steps

​Setup Options

Steps

Setup Options