Getting Started

This page covers loading FlexPlyr, mounting your first player, and calling its methods once it is ready.

Prerequisites

• A modern browser that supports ES2022 private fields (#field) and CSS :has()
• Network access to cdn.jsdelivr.net, fonts.googleapis.com, www.youtube.com, and player.vimeo.com (see Runtime Dependencies)
• Browser-only: the module touches document and navigator as soon as it loads

Installation

jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@2.2.9/dist/FlexPlyr.js"></script>

The global FPlyr is available once the script loads.

npm

npm i @pardnchiu/flexplyr

import { FPlyr } from "@pardnchiu/flexplyr/dist/FlexPlyr.esm.js";

main in package.json points to dist/FlexPlyr.js (a non-module build that sets window.FPlyr); import dist/FlexPlyr.esm.js for the named export.

Your First Player

Pass the id of an existing element and one media source. The player turns that element into the .FPlyr container, which fills its parent, so the parent needs a height.

<div style="height: 240px"><div id="player"></div></div>
<script>
  const player = new FPlyr({
    id: "player",
    video: "https://cdn.pixabay.com/video/2023/11/28/191159-889246512_tiny.mp4",
    when: {
      ready: () => setTimeout(() => console.log("ready, paused:", player.isPaused())),
    },
  });
</script>

Call Methods After ready

when.ready fires before the player sets its internal source flags (src/js/model/player.js:395), so calling isPaused(), isMuted(), or play() synchronously inside ready returns undefined or does nothing. Defer the call to the next task (for example with setTimeout) to get correct results; see Lifecycle Events.

Next Steps

• Media Sources: switch to YouTube, Vimeo, or audio
• Panel Themes and Panel Controls: change the look and the buttons
• Configuration: every constructor option