Lädt...


🔧 FlexPlyr: Modular Media Player


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Previously known as PDPlayerKit, renamed to FlexPlyr starting from version 2.2.4
A modular Media Player built with pure JavaScript, Supports HTML5, YouTube, Vimeo with flexible themes and a complete control panel.

Features

Multimedia Playback

  • Supports multiple formats: Play HTML5 video/audio, YouTube, and Vimeo.
  • Compatible with desktop and mobile devices, with playsinline and fullscreen mode toggle support.

Highly Customizable Control Panel

  • Customizable buttons: Playback speed adjustment, volume control, progress bar, etc.
  • Multiple built-in themes (e.g., Minimal, Classic, Retro, Simple) for flexible selection.

Lightweight and Dependency-Free

  • Built on native APIs and YouTube/Vimeo APIs, no extra libraries required.
  • Completely removes dependency on PDRenderKit, reducing coupling and enhancing usability.
  • Lightweight with a file size of only a few KB, ensuring smooth performance even on mobile devices.

Comprehensive Event Listening

  • Supports a wide range of events (e.g., ready, playing, pause, end) for seamless extension.

Intuitive Control Buttons

  • Uses Google Icons for button visuals, modern and adaptable to different themes.

Documentation

Installation

Install via npm

npm i @pardnchiu/flexplyr

Include via CDN

Import the FlexPlyr library

<!-- Version 2.2.4 and above -->
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@[VERSION]/dist/FlexPlyr.js"></script>

<!-- Version 2.2.3 and below -->
<script src="https://cdn.jsdelivr.net/npm/pdplayerkit@[VERSION]/dist/PDPlayerKit.js"></script>

Module version

// Version 2.2.4 and above
import { FPlyr } from "https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@[VERSION]/dist/FlexPlyr.esm.js";

// Version 2.2.3 and below
import { player } from "https://cdn.jsdelivr.net/npm/pdplayerkit@[VERSION]/dist/PDPlayerKit.module.js";

How to use

Initialize FPlyr

// Version 2.2.4 and above
// Unified: FPlyr

// Version 2.2.3 and below
// IIFE: PDPlayer
// ESM: player

const dom = new FPlyr({
    // Optional: Specify the element to replace with the player (element ID)
    // If not specified, manually append dom.body to the view
    // id: "element ID",

    // Required: Media source configuration, choose one of the options below
    video: "[video source]",
    // audio: "[audio source]",
    // vimeo: "[Vimeo ID]",
    // youtube: "[YouTube ID]"

    // Optional: Playback settings
    option: {   
        // Whether to show the slider, default is true
        showThumb: true,

        // Control panel style, e.g., "minimal" or "classic"
        panelType: "[style choice]",

        // Control panel buttons, choose functions to display
        panel: [
            "play", "progress", "time", "timeMini", 
            "volume", "volumeMini", "rate", "full"
        ],
        // Default volume level
        volume: 100,
        // Default mute setting
        mute: false
    },

    // Optional: Event listeners to monitor specific events during playback
    when: {
        ready: function () {
            console.log("Player is ready");
        },
        playing: function () {
            console.log("Playing");
        },
        pause: function () {
            console.log("Paused");
        },
        end: function () {
            console.log("Playback ended");
        },
        destroyed: function () {
            console.log("Player removed");
        }
    }
});

// If no element is specified, manually append the player to the DOM
(...).appendChild(dom.body);

// Remove the component
// dom.destroy();

License

Similar to MIT License but provides obfuscated code only:

  • Same as MIT: Free to use, modify and redistribute, including commercial use
  • Main difference: Provides obfuscated code by default, source code available for purchase
  • License terms: Must retain original copyright notice (same as MIT)

For detailed terms and conditions, please see the Software Usage Agreement.

Creator

邱敬幃

©️ 2023 邱敬幃 Pardn Chiu

...

🔧 FlexPlyr: Modular Media Player


📈 58.36 Punkte
🔧 Programmierung

🔧 FlexPlyr: 模組化多風格播放器


📈 34.69 Punkte
🔧 Programmierung

🔧 Modular CMS: How to use CMS in your modular content strategy


📈 25.73 Punkte
🔧 Programmierung

🔧 MODULAR APPLICATION OR MODULAR MONOLITH TEMPLATE: UNIFYING MICROSERVICES IN A SINGLE REPOSITORY


📈 25.73 Punkte
🔧 Programmierung

📰 How To Install Smplayer Media Player In Ubuntu – A Best Media Player For Linux


📈 21.62 Punkte
📰 Alle Kategorien

🕵️ Medium CVE-2019-5621: Abbs software audio media player project Abbs software audio media player


📈 21.62 Punkte
🕵️ Sicherheitslücken

🍏 Elmedia Player: a Powerful Media Player for your Mac


📈 17 Punkte
🍏 iOS / Mac OS

📰 VLC Media Player - Umfassender Audio- & Video-Player


📈 17 Punkte
📰 IT Security Nachrichten

🍏 Elmedia Player 8.11 - Multi-format media player, Pro version available.


📈 17 Punkte
🍏 iOS / Mac OS

💾 VLC Media Player 2.2.2 - Umfassender Audio- & Video-Player


📈 17 Punkte
💾 Downloads

💾 Konkurren für den VLC Player: So gut ist der Media Player Classic


📈 17 Punkte
💾 Downloads

📰 VLC Media Player 2.2.2 - Umfassender Audio- & Video-Player


📈 17 Punkte
📰 IT Security Nachrichten

💾 Alternative zum VLC Player: So gut ist der Media Player Classic


📈 17 Punkte
💾 Downloads

📰 How to Install MPV Player (MPV Media Player) In Ubuntu


📈 17 Punkte
📰 Alle Kategorien

💾 Die beste Alternative zum VLC Player: Das hat der Media Player Classic drauf


📈 17 Punkte
💾 Downloads

📰 Starke Konkurrenz für den VLC Player: So gut ist der Media Player Classic


📈 17 Punkte
📰 IT Nachrichten

💾 Konkurrenz für den VLC Player: So gut ist der Media Player Classic


📈 17 Punkte
💾 Downloads

💾 VLC Media Player - Umfassender Audio- & Video-Player


📈 17 Punkte
💾 Downloads

📰 Media Player: VLC-Player 3.0.8 bringt viele Neuerungen


📈 17 Punkte
📰 IT Nachrichten

🕵️ Microsoft Outlook 2002 Windows Media Player player.launchurl cross site scripting


📈 17 Punkte
🕵️ Sicherheitslücken

💾 VLC Media Player - Umfassender Audio- & Video-Player


📈 17 Punkte
💾 Downloads

📰 VLC Media Player - Umfassender Audio- & Video-Player


📈 17 Punkte
📰 IT Security Nachrichten

💾 VLC Media Player 2.2.2 - Umfassender Audio- & Video-Player


📈 17 Punkte
💾 Downloads

📰 VLC Media Player 2.2.2 - Umfassender Audio- & Video-Player


📈 17 Punkte
📰 IT Security Nachrichten

🍏 VLC Media Player 3.0.20 - Popular multimedia player.


📈 17 Punkte
🍏 iOS / Mac OS

💾 VLC Media Player - Umfassender Audio- & Video-Player


📈 17 Punkte
💾 Downloads

🔧 Introducing Compose Multiplatform Media Player: Your Go-To Solution for Seamless Media Playback


📈 15.43 Punkte
🔧 Programmierung

🕵️ Microsoft Media Player 9.x Hosted Media Content memory corruption


📈 15.43 Punkte
🕵️ Sicherheitslücken

🕵️ VideoLAN VLC Media Player 0.8.6h on Windows WAV Media File numeric error


📈 15.43 Punkte
🕵️ Sicherheitslücken

🕵️ Microsoft Windows Media Player up to 7.1 Media Device Manager privilege escalation


📈 15.43 Punkte
🕵️ Sicherheitslücken

matomo