Skip to main content

​
Steps

1

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" />
2

Create an element

In html body create reference element for player to load
<div id="pnplayer">
  <div id="pn-player"></div>
</div>
3

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
​
layout
object
​
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)