<!-- 1. Add the PN Player script -->
<script
  async
  src="https://cdn.pnplayer.com/index.js"
  type="module"
></script>
<link href="https://cdn.pnplayer.com/index.css" rel="stylesheet" />

<!-- 2. Add a container element -->
<div id="my-player"></div>

<!-- 3. Initialize the player -->
<script>
  window.addEventListener("load", () => {
    pnplayer("my-player", {
      sources: [
        {
          title: "My Video",
          src: "https://stream.pnplayer.com/your-video/playlist.m3u8",
          poster: "https://stream.pnplayer.com/poster.jpg",
        },
      ],
    });
  });
</script>