mediaelement plugins
5.0.0
이 저장소에는 MediaElementJS 용 플러그인이 포함되어 있습니다.
ES6 에 대한 단어2.3.0 버전의 중요한 변경https://caniuse.com/usage-table에 따르면 플레이어의 지속적인 개선 사항의 일환으로 플레이어가 IE9 및 IE10에 대한 완전히 지원을 중단하기로 결정했습니다.
이 변경은 MediaElement 및 MediaElement Plugins 저장소를위한 것입니다.
https://github.com/mediaelement/mediaelement-plugins에서 패키지를 다운로드하고 dist Folder에서 필요한 플러그인을 참조하고 플러그인과 관련된 구성을 추가하십시오.
또는 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/ directory의 파일을 항상 변경하고 /dist/ directory에 없습니다 . 이는 병합 (그리고 더 큰 컴파일) 작업을 용이하게하는 목적으로 유일한 목적으로 사람들이 더 쉽게 변화를 볼 수 있도록 도와줍니다.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)
} ) ; Translatable Strings가 플러그인의 일부인 경우이 형식으로 [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 Loop은 사용될 수 있었지만, 번들로 묶고 번들 파일의 크기를 줄이려면 사용을 피하는 것이 좋습니다 .
변경 로그에서 사용할 수 있습니다
