mediaelement plugins
5.0.0
Dieses Repository enthält Plugins, die für Medienelementjs erstellt wurden.
ES6 für Funktionen2.3.0 VersionIm Rahmen der kontinuierlichen Verbesserungen des Spielers haben wir beschlossen, die Unterstützung für IE9 und IE10 vollständig zu senken, da der Marktanteil dieser Browser zusammen 0,4%beträgt, so https://caniuse.com/usage-table.
Diese Änderung ist für MediaElement und MediaElement Plugins -Repositorys vorgesehen.
Laden Sie das Paket von https://github.com/mediaelement/mediaelement-plugins herunter und verweisen Sie auf die von dist benötigten Plugins, und fügen Sie jede Konfiguration hinzu, die sich mit dem Plugin bezieht.
Oder Sie können eine CDN verwenden; Überprüfen Sie https://cdnjs.com/libraries/mediaelement-plugins.
Wenn Sie beispielsweise das Speed -Plugin installieren möchten, machen Sie Folgendes:
< script src =" /path/to/mediaelement-and-player.min.js " > </ script >
<!-- Include any languages from `build/lang` folder -->
< script src =" /path/to/dist/speed/speed.min.js " > </ script >
<!-- Translation file for plugin (includes ALL languages available on player)-->
< script src =" /path/to/dist/speed/speed-i18n.js " > </ script >
< script >
var player = new MediaElementPlayer ( 'playerId' , {
defaultSpeed : 0.75 ,
// other configuration elements
} ) ;
</ script >Einige von ihnen enthalten CSS -Stile, also platzieren Sie sie nach dem Hauptplayer -Stylesheet:
< link rel =" stylesheet " href =" /path/to/mediaelementplayer.min.css " >
< link rel =" stylesheet " href =" /path/to/dist/speed/speed.min.css " > Laden Sie es unter https://nodejs.org/ herunter und befolgen Sie die Schritte zum Installieren oder installieren Sie node.js mit npm .
Geben Sie nach der Installation bei der Eingabeaufforderung npm install ein, wodurch alle erforderlichen Tools heruntergeladen werden.
/src/ Verzeichnis vor und niemals in /dist/ Verzeichnis. Dies ist mit dem alleinigen Zweck, den Zusammenschluss (und weiter den Zusammenstellungsbetrieb) zu erleichtern und Menschen zu helfen, Änderungen leichter zu sehen.npm run eslint aus, um die Codequalität zu gewährleisten.loop/loop.js ).package.json mit einem Befehl unter der script , um sicherzustellen, dass er ordnungsgemäß gebündelt und zusammengestellt wird. Weitere Informationen finden Sie in der Datei.docs/FEATURE_NAME.md erstellen, in der der Zweck, die API usw. beschrieben wird, und fügen Sie den Namen mit einem Link zu seinem Dokument in der README Datei hinzu, um die Dokumentation auf dem neuesten Stand zu halten.MediaElement für DOM -Manipulation/Ajax/usw. bietet. Weitere Informationen finden Sie in diesem Link.. mejs__ [ feature_name ] , . mejs- [ feature_name ] {
// all your styles
} 'use strict' ;
/**
* [Name of feature]
*
* [Description]
*/
// If plugin needs translations, put here English one in this format:
// mejs.i18n.en["mejs.id1"] = "String 1";
// mejs.i18n.en["mejs.id2"] = "String 2";
// Feature configuration
Object . assign ( mejs . MepDefaults , {
// Any variable that can be configured by the end user belongs here.
// Make sure is unique by checking API and Configuration file.
// Add comments about the nature of each of these variables.
} ) ;
Object . assign ( MediaElementPlayer . prototype , {
// Public variables (also documented according to JSDoc specifications)
/**
* Feature constructor.
*
* Always has to be prefixed with `build` and the name that will be used in MepDefaults.features list
* @param {MediaElementPlayer} player
* @param {HTMLElement} controls
* @param {HTMLElement} layers
* @param {HTMLElement} media
*/
build [ feature_name ] ( player , controls , layers , media ) {
// This allows us to access options and other useful elements already set.
// Adding variables to the object is a good idea if you plan to reuse
// those variables in further operations.
const t = this ;
// All code required inside here to keep it private;
// otherwise, you can create more methods or add variables
// outside of this scope
} ,
// Optionally, each feature can be destroyed setting a `clean` method
/**
* Feature destructor.
*
* Always has to be prefixed with `clean` and the name that was used in MepDefaults.features list
* @param {MediaElementPlayer} player
* @param {HTMLElement} controls
* @param {HTMLElement} layers
* @param {HTMLElement} media
*/
clean [ feature_name ] ( player , controls , layers , media ) { }
// Other optional public methods (all documented according to JSDoc specifications)
} ) ; Wenn übersetzbare Zeichenfolgen Teil des Plugins sind, müssen Sie mit diesem Format eine [feature_name]-i18n.js -Datei erstellen:
'use strict' ;
if ( mejs . i18n . ca !== undefined ) {
mejs . i18n . ca [ "mejs.id1" ] = "" ;
}
if ( mejs . i18n . cs !== undefined ) {
mejs . i18n . cs [ "mejs.id1" ] = "" ;
}
// And the rest of the languages HINWEIS : Je mehr Sprachen im MediaElementPlayer integriert sind, desto größer wird diese Vorlage.
Wenn Sie dem MediaElementPlayer eine neue Sprache hinzufügen, müssen Sie sie in allen vorhandenen i18n -Dateien auf die gleiche Weise hinzufügen, die in der obigen Vorlage beschrieben wird.
ES6 für Funktionen Alle Funktionen werden mit den Spezifikationen Ecmascript 2015 geschrieben.
Siehe src/ Verzeichnis und überprüfen Sie, wie die Dateien geschrieben wurden, um die Kompatibilität zu gewährleisten.
Hinweis : Die for...of Schleife hätte verwendet werden können, aber um sie zu bündeln und die Größe der gebündelten Dateien zu verringern, wird dringend empfohlen, deren Verwendung zu vermeiden .
Änderungen beim Change -Protokoll verfügbar
