تنزيل mediaelement plugins - تنزيل رمز المصدر mediaelement plugins

mediaelement plugins

فلاش كود المصدر

5.0.0

تنزيل

MediaElement.js الإضافات

يحتوي هذا المستودع على ملحقات مكون من وسائل الإعلام.

المؤلف (المؤلفون): جون داير https://j.hn/ ورافائيل ميراندا https://github.com/rafa8626
الموقع الإلكتروني: https://www.mediaelementjs.com
الترخيص: معهد ماساتشوستس للتكنولوجيا
المساهمين: جميع المساهمين

جدول المحتويات

تثبيت
إرشادات للمساهمة
- node.js
- الاتفاقيات العامة
- قالب لإنشاء ميزة
- قالب للترجمات
- كلمة على 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 " >

إرشادات للمساهمة

node.js

قم بتنزيله على https://nodejs.org/ واتبع الخطوات لتثبيته ، أو تثبيت node.js مع npm .

بمجرد التثبيت ، في موجه الأوامر ، اكتب npm install ، والذي سيقوم بتنزيل جميع الأدوات اللازمة.

الاتفاقيات العامة

حجم علامة التبويب هو 8 للمسافة البادئة.
قم دائمًا بإجراء تغييرات على الملفات في /src/ directory ، وليس في /dist/ directory. هذا مع الغرض الوحيد من تسهيل عملية دمج (وأبعد من ذلك ، التجميع) ، ومساعدة الناس على رؤية التغييرات بسهولة أكبر.
استخدم اتفاقيات JSDOC لتوثيق الرمز. هذا يسهل مساهمات المطورين الآخرين ويضمن المزيد من الجودة في المنتج.
قبل دفع أي تغييرات ، قم بتشغيل npm run eslint لضمان جودة الرمز.
يجب وضع ملف الميزة داخل مجلد يطابق اسمه ، وكذلك أي عناصر SVG/CSS المطلوبة (أي ، loop/loop.js ).
update package.json بأمر تحت تكوين script للتأكد من تجميعه وتجميعه بشكل صحيح. لمزيد من المرجع ، راجع الملف.
تأكد من إنشاء ملف docs/FEATURE_NAME.md يصف الغرض ، واجهة برمجة التطبيقات ، وما إلى ذلك ، وإضافة الاسم مع رابط إلى المستند الخاص به في ملف README للحفاظ على تحديث الوثائق.
لا تعيد اختراع العجلة : استخدم الأدوات المساعدة التي توفرها MediaElement لمعالجة DOM/AJAX/etc. تحقق من هذا الرابط لمزيد من التفاصيل.
يمكنك أيضًا تضمين CSS داخل مجلد الميزة ، ومطابقة اسم ملف JS وإضافة أنماط CSS لـ "Legacy" و Bem Naming Convention.
إذا كان استخدام أيقونة ، يجب أن يكون حجمه 20x20px ، لذلك يطابق جميع أبعاد الرموز.

. 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