mediaelement plugins
5.0.0
Ce référentiel contient des plugins conçus pour MediaElementJS.
ES6 pour les fonctionnalités2.3.0Dans le cadre des améliorations continues du joueur, nous avons décidé de supprimer complètement le support pour IE9 et IE10, car la part de marché de ces navigateurs ensemble est de 0,4%, selon https://caniuse.com/usage-table.
Cette modification concerne les référentiels des plugins MediaElement et MediaElement Plugins .
Téléchargez le package à partir de https://github.com/mediaelement/mediaelement-plugins, et référez tous les plugins dont vous avez besoin dans le dossier dist et ajoutez toute configuration liée au plugin.
Ou vous pouvez utiliser un CDN; Vérifiez https://cdnjs.com/libraries/mediaelement-plugins.
Par exemple, si vous souhaitez installer le plugin Speed , faites ce qui suit:
< 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 >Certains d'entre eux contiendront les styles CSS, alors placez-les après la feuille de style du joueur principal:
< link rel =" stylesheet " href =" /path/to/mediaelementplayer.min.css " >
< link rel =" stylesheet " href =" /path/to/dist/speed/speed.min.css " > Téléchargez-le sur https://nodejs.org/ et suivez les étapes pour l'installer, ou installez node.js avec npm .
Une fois installé, à l'invite de commande, tapez npm install , qui téléchargera tous les outils nécessaires.
/src/ et jamais dans /dist/ répertoire. Ceci est dans le seul but de faciliter l'opération de fusion (et plus loin, de compilation) et d'aider les gens à voir les changements plus facilement.npm run eslint pour assurer la qualité du code.loop/loop.js ).package.json avec une commande sous la configuration script pour vous assurer qu'elle sera regroupée et compilée correctement. Pour plus de référence, révisez le fichier.docs/FEATURE_NAME.md décrivant son objectif, API, etc., et ajoutez le nom avec un lien vers son document dans le fichier README pour maintenir la documentation à jour.MediaElement prévoit pour la manipulation DOM / AJAX / etc. Vérifiez ce lien pour plus de détails.. 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)
} ) ; Si les chaînes traduisibles font partie du plugin, vous devrez créer un fichier [feature_name]-i18n.js avec ce format:
'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 Remarque : Plus les langues sont intégrées sur MediaElementPlayer , plus ce modèle deviendra grand.
De plus, si vous ajoutez une nouvelle langue à MediaElementPlayer , vous devrez l'ajouter dans tous les fichiers i18n existants de la même manière décrite dans le modèle ci-dessus.
ES6 pour les fonctionnalités Toutes les fonctionnalités sont écrites à l'aide des spécifications Ecmascript 2015 .
Voir src/ Directory et vérifiez comment les fichiers ont été écrits pour assurer la compatibilité.
Remarque : le for...of boucle aurait pu être utilisé, mais pour les regrouper et réduire la taille des fichiers groupés, il est fortement recommandé d'éviter son utilisation.
Modifications disponibles au journal de modification
