{"id":18861648,"url":"https://github.com/pardnchiu/FlexPlyr","last_synced_at":"2025-04-14T13:31:36.154Z","repository":{"id":133389555,"uuid":"594154234","full_name":"pardnchiu/FlexPlyr","owner":"pardnchiu","description":"FlexPlyr is a modular player that supports YouTube, Vimeo, as well as local video and audio files. It allows customization of control button types, arrangement, and optional panel styles.","archived":false,"fork":false,"pushed_at":"2025-02-02T22:01:37.000Z","size":966,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T22:04:50.611Z","etag":null,"topics":["audio-player","chiuchingwei","javascript-library","media-player","pardnchiu","pardnio","pardnltd","vanilla-javascript","video-player","vimeo-player","youtube-player"],"latest_commit_sha":null,"homepage":"https://flexplyr.pardn.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pardnchiu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-27T18:19:01.000Z","updated_at":"2025-02-04T06:21:40.000Z","dependencies_parsed_at":"2024-12-17T04:35:56.877Z","dependency_job_id":"28e0d678-dd9d-4076-b750-ab4823c07d8d","html_url":"https://github.com/pardnchiu/FlexPlyr","commit_stats":null,"previous_names":["pardnchiu/pdytplayer-js","pardnchiu/pdplayerkit","pardnchiu/flexplyr"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FFlexPlyr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FFlexPlyr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FFlexPlyr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pardnchiu%2FFlexPlyr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pardnchiu","download_url":"https://codeload.github.com/pardnchiu/FlexPlyr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248881984,"owners_count":21176950,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio-player","chiuchingwei","javascript-library","media-player","pardnchiu","pardnio","pardnltd","vanilla-javascript","video-player","vimeo-player","youtube-player"],"created_at":"2024-11-08T04:30:39.778Z","updated_at":"2025-04-14T13:31:36.143Z","avatar_url":"https://github.com/pardnchiu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://flexplyr.pardn.io/static/image/logo.png\" width=80\u003e\n\n# FlexPlyr: Modular Media Player\n\n\u003e [!NOTE]\n\u003e (Previously known as PDPlayerKit, renamed to FlexPlyr starting from version `2.2.4`)\n\n\u003e  A modular Media Player built with pure JavaScript, Supports HTML5, YouTube, Vimeo with flexible themes and a complete control panel.\n\n![tag](https://img.shields.io/badge/tag-JavaScript%20Library-bb4444) \n![size](https://img.shields.io/github/size/pardnchiu/FlexPlyr/dist%2FFlexPlyr.js)\u003cbr\u003e\n[![npm](https://img.shields.io/npm/v/@pardnchiu/flexplyr)](https://www.npmjs.com/package/@pardnchiu/flexplyr)\n[![download](https://img.shields.io/npm/dm/@pardnchiu/flexplyr)](https://www.npmjs.com/package/@pardnchiu/flexplyr)\n[![jsdeliver](https://img.shields.io/jsdelivr/npm/hm/@pardnchiu/flexplyr)](https://www.jsdelivr.com/package/npm/@pardnchiu/flexplyr)\u003cbr\u003e\n[![](https://img.shields.io/badge/查閱-中文版本-ffffff)](https://github.com/pardnchiu/FlexPlyr/blob/main/README.zh.md)\n\n## Features\n\n### Multimedia Playback\n- Supports multiple formats: Play **HTML5 video/audio**, **YouTube**, and **Vimeo**.\n- Compatible with desktop and mobile devices, with `playsinline` and **fullscreen mode** toggle support.\n\n### Highly Customizable Control Panel\n- Customizable buttons: **Playback speed adjustment**, **volume control**, **progress bar**, etc.\n- Multiple built-in themes (e.g., Minimal, Classic, Retro, Simple) for flexible selection.\n\n### Lightweight and Dependency-Free\n- Built on **native APIs** and **YouTube/Vimeo APIs**, no extra libraries required.\n- Completely removes dependency on **PDRenderKit**, reducing coupling and enhancing usability.\n- Lightweight with a file size of only a few KB, ensuring smooth performance even on mobile devices.\n\n### Comprehensive Event Listening\n- Supports a wide range of events (e.g., ready, playing, pause, end) for seamless extension.\n\n### Intuitive Control Buttons\n- Uses [Google Icons](https://fonts.google.com/icons) for button visuals, modern and adaptable to different themes.\n\n## Documentation\n\n- Website: [flexplyr.pardn.io](https://flexplyr.pardn.io)\n\n## Installation\n\n### Install via npm\n```Shell\nnpm i @pardnchiu/flexplyr\n```\n\n### Include via CDN\n\n#### UMD Version\n```html\n\u003c!-- Version 2.2.4 and above --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@[VERSION]/dist/FlexPlyr.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Version 2.2.3 and below --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/pdplayerkit@[VERSION]/dist/PDPlayerKit.js\"\u003e\u003c/script\u003e\n```\n\n#### ES Module Version\n```javascript\n// Version 2.2.4 and above\nimport { FPlyr } from \"https://cdn.jsdelivr.net/npm/@pardnchiu/flexplyr@[VERSION]/dist/FlexPlyr.esm.js\";\n\n// Version 2.2.3 and below\nimport { player } from \"https://cdn.jsdelivr.net/npm/pdplayerkit@[VERSION]/dist/PDPlayerKit.module.js\";\n```\n\n## How to use\n\n### Initialize `FPlyr`\n```Javascript\n// Version 2.2.4 and above\n// Unified: FPlyr\n\n// Version 2.2.3 and below\n// IIFE: PDPlayer\n// ESM: player\n\nconst dom = new FPlyr({\n    // Optional: Specify the element to replace with the player (element ID)\n    // If not specified, manually append dom.body to the view\n    // id: \"element ID\",\n\n    // Required: Media source configuration, choose one of the options below\n    video: \"[video source]\",\n    // audio: \"[audio source]\",\n    // vimeo: \"[Vimeo ID]\",\n    // youtube: \"[YouTube ID]\"\n\n    // Optional: Playback settings\n    option: {   \n        // Whether to show the slider, default is true\n        showThumb: true,\n\n        // Control panel style, e.g., \"minimal\" or \"classic\"\n        panelType: \"[style choice]\",\n\n        // Control panel buttons, choose functions to display\n        panel: [\n            \"play\", \"progress\", \"time\", \"timeMini\", \n            \"volume\", \"volumeMini\", \"rate\", \"full\"\n        ],\n        // Default volume level\n        volume: 100,\n        // Default mute setting\n        mute: false\n    },\n\n    // Optional: Event listeners to monitor specific events during playback\n    when: {\n        ready: function () {\n            console.log(\"Player is ready\");\n        },\n        playing: function () {\n            console.log(\"Playing\");\n        },\n        pause: function () {\n            console.log(\"Paused\");\n        },\n        end: function () {\n            console.log(\"Playback ended\");\n        },\n        destroyed: function () {\n            console.log(\"Player removed\");\n        }\n    }\n});\n\n// If no element is specified, manually append the player to the DOM\n(...).appendChild(dom.body);\n\n// Remove the component\n// dom.destroy();\n```\n\n## License\n\nThis source code project is licensed under the [MIT](https://github.com/pardnchiu/FlexPlyr/blob/main/LICENSE) license.\n\n## Creator\n\n\u003cimg src=\"https://avatars.githubusercontent.com/u/25631760\" align=\"left\" width=\"96\" height=\"96\" style=\"margin-right: 0.5rem;\"\u003e\n\n\u003ch4 style=\"padding-top: 0\"\u003e邱敬幃 Pardn Chiu\u003c/h4\u003e\n\n\u003ca href=\"mailto:dev@pardn.io\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://pardn.io/image/email.svg\" width=\"48\" height=\"48\"\u003e\n\u003c/a\u003e \u003ca href=\"https://linkedin.com/in/pardnchiu\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://pardn.io/image/linkedin.svg\" width=\"48\" height=\"48\"\u003e\n\u003c/a\u003e\n\n***\n\n©️ 2023 [邱敬幃 Pardn Chiu](https://pardn.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpardnchiu%2FFlexPlyr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpardnchiu%2FFlexPlyr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpardnchiu%2FFlexPlyr/lists"}