mediaelement plugins
5.0.0
このリポジトリには、MediaElementJS用に構築されたプラグインが含まれています。
ES6の単語2.3.0バージョンの重要な変更https://caniuse.com/usage-tableによると、これらのブラウザーの市場シェアは0.4％であるため、プレーヤーの継続的な改善の一環として、IE9とIE10のサポートを完全にドロップすることを決定しました。
この変更は、 MediaElementおよびMediaElement Pluginsリポジトリのためのものです。
https://github.com/mediaelement/mediaelement-pluginsからパッケージをダウンロードし、 distフォルダーから必要なプラグインを参照して、プラグインに関連する構成を追加します。
または、CDNを使用できます。 https://cdnjs.com/libraries/mediaelement-pluginsを確認してください。
たとえば、 Speedプラグインをインストールする場合は、次のことを行います。
< 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 >それらのいくつかにはCSSスタイルが含まれているので、メインプレーヤーのスタイルシートの後に配置します。
< link rel =" stylesheet " href =" /path/to/mediaelementplayer.min.css " >
< link rel =" stylesheet " href =" /path/to/dist/speed/speed.min.css " > https://nodejs.org/にダウンロードし、手順に従ってインストールするか、 npmにnode.jsをインストールします。
インストールしたら、コマンドプロンプトで、必要なすべてのツールをダウンロードするnpm installと入力します。
/src/ディレクトリ内のファイルに常に変更を加え、 /dist/ディレクトリにはありません。これは、マージ（そしてさらに、コンパイル）操作を促進する唯一の目的であり、人々がより簡単に変化を見るのを助けることです。npm run eslint 、コードの品質を確保します。loop/loop.jsます。script構成の下にあるコマンドを使用してpackage.json更新して、バンドルされて適切にコンパイルされるようにします。詳細については、ファイルを確認してください。docs/FEATURE_NAME.mdファイルを作成し、 READMEファイルのドキュメントへのリンク付きの名前を追加して、ドキュメントを最新の状態に保つようにしてください。MediaElement DOM操作/Ajax/などに提供するユーティリティを使用します。詳細については、このリンクを確認してください。. 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)
} ) ; 翻訳可能な文字列がプラグインの一部である場合、この形式で[feature_name]-i18n.jsファイルを作成する必要があります。
'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注： MediaElementPlayerに統合される言語が増えれば、このテンプレートが大きくなります。
また、 MediaElementPlayerに新しい言語を追加する場合は、上記のテンプレートで説明したのと同じ方法で、既存のすべてのi18nファイルに追加する必要があります。
ES6の単語すべての機能は、 Ecmascript 2015仕様を使用して記述されています。
src/ディレクトリを参照し、互換性を確保するためにファイルの書き込み方法を確認してください。
注：ループfor...of使用できたはずですが、それらをバンドルしてバンドルされたファイルのサイズを縮小するためには、その使用を避けることを強くお勧めします。
変更ログで利用可能な変更
