{"id":13907601,"url":"https://github.com/mediaelement/mediaelement-plugins","last_synced_at":"2026-01-30T14:12:11.192Z","repository":{"id":16278866,"uuid":"79658102","full_name":"mediaelement/mediaelement-plugins","owner":"mediaelement","description":"Plugins for the main mediaelement project ","archived":false,"fork":false,"pushed_at":"2024-09-12T09:56:38.000Z","size":1450,"stargazers_count":413,"open_issues_count":88,"forks_count":139,"subscribers_count":26,"default_branch":"master","last_synced_at":"2025-07-06T00:51:29.606Z","etag":null,"topics":["audio","dash","flash","hls","html5-video","html5-video-player","video"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mediaelement.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"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":"2017-01-21T16:39:26.000Z","updated_at":"2025-07-02T17:39:51.000Z","dependencies_parsed_at":"2024-06-18T13:55:07.357Z","dependency_job_id":"5d7edec8-700e-4f46-8d5d-54fdbc06a8a7","html_url":"https://github.com/mediaelement/mediaelement-plugins","commit_stats":{"total_commits":365,"total_committers":44,"mean_commits":8.295454545454545,"dds":0.5397260273972603,"last_synced_commit":"87cf0e1ca59f6d1c61bf2e53a879c6e81019eb2c"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/mediaelement/mediaelement-plugins","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mediaelement%2Fmediaelement-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mediaelement%2Fmediaelement-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mediaelement%2Fmediaelement-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mediaelement%2Fmediaelement-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mediaelement","download_url":"https://codeload.github.com/mediaelement/mediaelement-plugins/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mediaelement%2Fmediaelement-plugins/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265710532,"owners_count":23815373,"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","dash","flash","hls","html5-video","html5-video-player","video"],"created_at":"2024-08-06T23:02:01.108Z","updated_at":"2026-01-30T14:12:11.151Z","avatar_url":"https://github.com/mediaelement.png","language":"JavaScript","funding_links":[],"categories":["HarmonyOS","JavaScript"],"sub_categories":["Windows Manager"],"readme":"# ![MediaElementJS](https://cloud.githubusercontent.com/assets/910829/22357262/e6cf32b4-e404-11e6-876b-59afa009f65c.png)\n\n# MediaElement.js Plugins\n\n[![CDNJS](https://img.shields.io/cdnjs/v/mediaelement-plugins.svg)](https://cdnjs.com/libraries/mediaelement-plugins)\n\nThis repository contains plugins built for MediaElementJS.\n\n* Author(s): John Dyer [https://j.hn/](https://j.hn/) and Rafael Miranda [https://github.com/rafa8626](https://github.com/rafa8626)\n* Website: [https://www.mediaelementjs.com](https://www.mediaelementjs.com)\n* License: [MIT](https://johndyer.mit-license.org/)\n* Contributors: [all contributors](https://github.com/johndyer/mediaelement-plugins/graphs/contributors)\n\n# Table of Contents\n\n* [Installation](#installation)\n* [Guidelines to Contribute](#guidelines)\n    * [Node.js](#nodejs)\n    * [General Conventions](#conventions)\n    * [Template to create a Feature](#template)\n    * [Template for Translations](#translations)\n    * [A word on `ES6` for Features](#es6)\n* [Available plugins](#plugins)\n\n## * IMPORTANT CHANGES on `2.3.0` version\n\nAs part of the continuous improvements the player, we have decided to drop completely support for IE9 and IE10, since market share of those browsers together is 0.4%, according to https://caniuse.com/usage-table.\n \nThis change is for `MediaElement` and `MediaElement Plugins` repositories. \n\n\u003ca id=\"installation\"\u003e\u003c/a\u003e\n# Installation\n\nDownload the package from https://github.com/mediaelement/mediaelement-plugins, and reference any plugins you need from `dist` folder and add any configuration related to the plugin.\n\nOr you can use a CDN; check https://cdnjs.com/libraries/mediaelement-plugins.\n\nFor example, if you want to install `Speed` plugin do the following:\n```html\n\u003cscript src=\"/path/to/mediaelement-and-player.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Include any languages from `build/lang` folder --\u003e\n\u003cscript src=\"/path/to/dist/speed/speed.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Translation file for plugin (includes ALL languages available on player)--\u003e\n\u003cscript src=\"/path/to/dist/speed/speed-i18n.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    var player = new MediaElementPlayer('playerId', {\n        defaultSpeed: 0.75,\n        // other configuration elements\n    });\n\u003c/script\u003e\n```\n\nSome of them will contain CSS styles so place them after the main player stylesheet:\n```html\n\u003clink rel=\"stylesheet\" href=\"/path/to/mediaelementplayer.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"/path/to/dist/speed/speed.min.css\"\u003e\n```\n\n\u003ca id=\"guidelines\"\u003e\u003c/a\u003e\n# Guidelines to Contribute\n\n\u003ca id=\"nodejs\"\u003e\u003c/a\u003e\n## Node.js\n\nDownload it at https://nodejs.org/ and follow the steps to install it, or install `node.js` with `npm`.\n\nOnce installed, at the command prompt, type `npm install`, which will download all the necessary tools.\n\n\u003ca id=\"conventions\"\u003e\u003c/a\u003e\n## General Conventions\n\n* Tab size is **8** for indentation.\n* **ALWAYS** make changes to the files in the `/src/` directory, and **NEVER** in `/dist/` directory. This is with the sole purpose of facilitating the merging (and further, the compiling) operation, and help people to see changes more easily.\n* Use [JSDoc](https://jsdoc.app/) conventions to document code. This facilitates the contributions of other developers and ensures more quality in the product.\n* **BEFORE PUSHING** any changes, run `npm run eslint` to ensure code quality.\n* The file for the feature must be placed inside a folder matching its name, as well as any SVG/CSS elements needed (i.e, `loop/loop.js`).\n* Update `package.json` with a command under the `script` configuration to make sure it will be bundled and compiled properly. For more reference, [review the file](package.json).\n* Make sure you also create a `docs/FEATURE_NAME.md` file describing its purpose, API, etc., and add the name with a link to its document in the `README` file to keep documentation up-to-date.\n* **DO NOT REINVENT THE WHEEL**: Use the utilities that `MediaElement` provides for DOM manipulation/AJAX/etc. Check [this link](https://github.com/mediaelement/mediaelement/blob/master/docs/utils.md) for more details.\n* You can also include CSS inside the feature folder, matching the name of the feature JS file and adding CSS styles for \"legacy\" and BEM naming convention.\n* If using an icon, its size **MUST** be **20x20px**, so it matches all the rest of the icons' dimensions.\n```css\n.mejs__[feature_name], .mejs-[feature_name] {\n    // all your styles\n}\n```\n\n\u003ca id=\"template\"\u003e\u003c/a\u003e\n## Template to create a Feature\n```javascript\n'use strict';\n\n/**\n * [Name of feature]\n *\n * [Description]\n */\n\n// If plugin needs translations, put here English one in this format:\n// mejs.i18n.en[\"mejs.id1\"] = \"String 1\";\n// mejs.i18n.en[\"mejs.id2\"] = \"String 2\";\n\n// Feature configuration\nObject.assign(mejs.MepDefaults, {\n    // Any variable that can be configured by the end user belongs here.\n    // Make sure is unique by checking API and Configuration file.\n    // Add comments about the nature of each of these variables.\n});\n\n\nObject.assign(MediaElementPlayer.prototype, {\n\n    // Public variables (also documented according to JSDoc specifications)\n\n    /**\n     * Feature constructor.\n     *\n     * Always has to be prefixed with `build` and the name that will be used in MepDefaults.features list\n     * @param {MediaElementPlayer} player\n     * @param {HTMLElement} controls\n     * @param {HTMLElement} layers\n     * @param {HTMLElement} media\n     */\n    build[feature_name] (player, controls, layers, media) {\n        // This allows us to access options and other useful elements already set.\n        // Adding variables to the object is a good idea if you plan to reuse\n        // those variables in further operations.\n        const t = this;\n\n        // All code required inside here to keep it private;\n        // otherwise, you can create more methods or add variables\n        // outside of this scope\n    },\n\n    // Optionally, each feature can be destroyed setting a `clean` method\n\n    /**\n     * Feature destructor.\n     *\n     * Always has to be prefixed with `clean` and the name that was used in MepDefaults.features list\n     * @param {MediaElementPlayer} player\n     * @param {HTMLElement} controls\n     * @param {HTMLElement} layers\n     * @param {HTMLElement} media\n     */\n    clean[feature_name] (player, controls, layers, media) {}\n\n    // Other optional public methods (all documented according to JSDoc specifications)\n});\n```\n\u003ca id=\"translations\"\u003e\u003c/a\u003e\n## Template for Translations\n\nIf translatable strings are part of the plugin, you will need to create a `[feature_name]-i18n.js` file with this format:\n```javascript\n'use strict';\n\nif (mejs.i18n.ca !== undefined) {\n        mejs.i18n.ca[\"mejs.id1\"] = \"\";\n}\nif (mejs.i18n.cs !== undefined) {\n        mejs.i18n.cs[\"mejs.id1\"] = \"\";\n}\n// And the rest of the languages\n```\n**NOTE**: The more languages are integrated on `MediaElementPlayer`, the bigger this template will become.\n\nAlso, if you are adding a new language to `MediaElementPlayer`, you will need to add it in all the existing `i18n` files in the same way described in the template above.\n\n\u003ca id=\"es6\"\u003e\u003c/a\u003e\n### A word on `ES6` for Features\n\nAll the features are written using `Ecmascript 2015` specifications.\n\nSee`src/` directory, and check how the files were written to ensure compatibility.\n\n**Note**: the `for...of` loop could have been used, but in order to bundle them and reduce the size of the bundled files, it is **strongly recommended to avoid** its use.\n\n\u003ca id=\"plugins\"\u003e\u003c/a\u003e\n## Available plugins\n\n* [A11y](docs/a11y.md) - compatible with MediaElementJS 5.x\n* [Ads](docs/ads.md)\n* [AirPlay](docs/airplay.md)\n* [Chromecast](docs/chromecast.md)\n* [Context Menu](docs/context-menu.md)\n* [Facebook Pixel](docs/facebook-pixel.md)\n* [Google Analytics](docs/google-analytics.md)\n* [Google Tag Manager](docs/google-tag-manager.md)\n* [Jump Forward](docs/jump-forward.md)\n* [Loop](docs/loop.md)\n* [Markers](docs/markers.md)\n* [Markers Rolls](docs/markersrolls.md)\n* [Playlist](docs/playlist.md)\n* [Postroll](docs/postroll.md)\n* [Preview](docs/preview.md)\n* [Quality](docs/quality.md) - compatible with MediaElementJS 4.x\n* [Skip Back](docs/skip-back.md)\n* [Source Chooser](docs/source-chooser.md)\n* [Speed](docs/speed.md)\n* [Stop](docs/stop.md)\n* [Snapshot](docs/snapshot.md)\n* [VAST/VPAID](docs/ads-vast.md)\n* [VRView](docs/vrview.md)\n\n# Changelog\n\nChanges available at [Change Log](changelog.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmediaelement%2Fmediaelement-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmediaelement%2Fmediaelement-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmediaelement%2Fmediaelement-plugins/lists"}