FlexPlyr: مدیا پلیر مدولار – انجمن DEV

Summarize this content to 400 words in Persian Lang

قبلاً با نام PDPlayerKit شناخته می شد که از نسخه به FlexPlyr تغییر نام داد 2.2.4یک مدیا پلیر ماژولار ساخته شده با جاوا اسکریپت خالص، از HTML5، YouTube، Vimeo با تم های انعطاف پذیر و کنترل پنل کامل پشتیبانی می کند.

ویژگی ها

پخش چند رسانه ای

پشتیبانی از فرمت های مختلف: پخش ویدئو/صوتی HTML5، یوتیوب، و Vimeo.
سازگار با دسکتاپ و دستگاه های تلفن همراه، با playsinline و حالت تمام صفحه پشتیبانی را تغییر دهید

کنترل پنل بسیار قابل تنظیم

دکمه های قابل تنظیم: تنظیم سرعت پخش، کنترل صدا، نوار پیشرفتو غیره
چندین تم داخلی (به عنوان مثال، مینیمال، کلاسیک، یکپارچهسازی با سیستمعامل، ساده) برای انتخاب انعطاف پذیر.

سبک وزن و بدون وابستگی

ساخته شده بر روی API های بومی و APIهای YouTube/Vimeo، نیازی به کتابخانه اضافی نیست.
به طور کامل وابستگی را از بین می برد PDRenderKit، کاهش اتصال و افزایش قابلیت استفاده.
سبک وزن با حجم فایل تنها چند کیلوبایت، عملکردی روان را حتی در دستگاه های تلفن همراه تضمین می کند.

گوش دادن به رویداد جامع

از طیف گسترده ای از رویدادها (به عنوان مثال، آماده، پخش، مکث، پایان) برای توسعه یکپارچه پشتیبانی می کند.

دکمه های کنترل بصری

از آیکون‌های Google برای تصاویر بصری دکمه‌ها، مدرن و سازگار با تم‌های مختلف استفاده می‌کند.

مستندات

نصب و راه اندازی

از طریق npm نصب کنید

npm i @pardnchiu/flexplyr

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

شامل از طریق CDN

وارد کنید FlexPlyr کتابخانه

src=]]>”https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@[VERSION]/dist/FlexPlyr.js”>

src=]]>”https://cdn.jsdelivr.net/npm/pdplayerkit@[VERSION]/dist/PDPlayerKit.js”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نسخه ماژول

// 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”;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نحوه استفاده

مقدار دهی اولیه کنید 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: “”,
// audio: “”,
// 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();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مجوز

مشابه مجوز MIT اما فقط کد مبهم را ارائه می دهد:

مشابه MIT: رایگان برای استفاده، تغییر و توزیع مجدد، از جمله استفاده تجاری
تفاوت اصلی: کد مبهم را به طور پیش فرض ارائه می دهد، کد منبع برای خرید در دسترس است
شرایط مجوز: باید اعلامیه حق چاپ اصلی را حفظ کند (همانند MIT)

برای اطلاع از شرایط و ضوابط دقیق، لطفاً به توافقنامه استفاده از نرم افزار مراجعه کنید.

خالق

کیو جینگوان

©️ 2023 پردن چیو

npm i @pardnchiu/flexplyr

"https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@[VERSION]/dist/FlexPlyr.js">


"https://cdn.jsdelivr.net/npm/pdplayerkit@[VERSION]/dist/PDPlayerKit.js">

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

// 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: "",
    // audio: "",
    // 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();