mediaelement plugins
5.0.0
ที่เก็บนี้มีปลั๊กอินที่สร้างขึ้นสำหรับ mediaElementJs
ES6 สำหรับคุณสมบัติ2.3.0ในฐานะที่เป็นส่วนหนึ่งของการปรับปรุงอย่างต่อเนื่องผู้เล่นเราได้ตัดสินใจที่จะลดการสนับสนุนอย่างสมบูรณ์สำหรับ IE9 และ IE10 เนื่องจากส่วนแบ่งการตลาดของเบราว์เซอร์เหล่านั้นเข้าด้วยกันคือ 0.4%ตาม https://caniuse.com/usage-table
การเปลี่ยนแปลงนี้มีไว้สำหรับที่เก็บปลั๊กอิน 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/ และทำตามขั้นตอนในการติดตั้งหรือติดตั้ง node.js ด้วย npm
เมื่อติดตั้งแล้วที่พรอมต์คำสั่งพิมพ์ npm install ซึ่งจะดาวน์โหลดเครื่องมือที่จำเป็นทั้งหมด
/src/ ไดเรกทอรี เสมอ และ ไม่เคยอยู่ ใน /dist/ ไดเรกทอรี นี่คือจุดประสงค์เพียงอย่างเดียวในการอำนวยความสะดวกในการรวม (และไกลออกไปการรวบรวม) และช่วยให้ผู้คนเห็นการเปลี่ยนแปลงได้ง่ายขึ้นnpm run eslint เพื่อให้แน่ใจว่าคุณภาพของรหัสloop/loop.js )package.json พร้อมคำสั่งภายใต้การกำหนดค่า script เพื่อให้แน่ใจว่าจะรวมและรวบรวมอย่างถูกต้อง สำหรับการอ้างอิงเพิ่มเติมตรวจสอบไฟล์docs/FEATURE_NAME.md อธิบายวัตถุประสงค์ API ฯลฯ และเพิ่มชื่อด้วยลิงก์ไปยังเอกสารในไฟล์ 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/ Directory และตรวจสอบว่าไฟล์ถูกเขียนเพื่อให้แน่ใจว่าเข้ากันได้อย่างไร
หมายเหตุ : for...of ลูปสามารถใช้งานได้ แต่เพื่อรวมกลุ่มและลดขนาดของไฟล์ที่รวมอยู่ ขอแนะนำอย่างยิ่งเพื่อหลีกเลี่ยง การใช้งาน
การเปลี่ยนแปลงที่มีอยู่ที่บันทึกการเปลี่ยนแปลง
