MediaElement.js 插件

本仓库包含为MediaElementJS构建的插件。

作者: John Dyer https://j.hn/ 和 Rafael Miranda https://github.com/rafa8626
网站: https://www.mediaelementjs.com
许可证: MIT
贡献者: 所有贡献者

安装

从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>
<!-- 从`build/lang`文件夹包含任何语言 -->
<script src="/path/to/dist/speed/speed.min.js"></script>
<!-- 插件的翻译文件（包括播放器上可用的所有语言）-->
<script src="/path/to/dist/speed/speed-i18n.js"></script>
<script>
    var player = new MediaElementPlayer('playerId', {
        defaultSpeed: 0.75,
        // 其他配置元素
    });
</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/ 下载并按步骤安装，或者使用npm安装node.js。

安装完成后，在命令提示符中输入npm install，这将下载所有必要的工具。

通用约定

缩进使用8个空格的制表符。
始终对/src/目录中的文件进行更改，绝不对/dist/目录进行更改。这是为了方便合并（以及后续的编译）操作，并帮助人们更容易看到变更。
使用JSDoc约定来记录代码。这有助于其他开发者的贡献，并确保产品的更高质量。
在推送任何更改之前，运行npm run eslint以确保代码质量。
功能文件必须放在与其名称匹配的文件夹内，以及所需的任何SVG/CSS元素（例如，loop/loop.js）。
更新package.json，在script配置下添加命令，以确保正确打包和编译。更多参考，请查看该文件。
确保创建一个docs/FEATURE_NAME.md文件，描述其目的、API等，并在README文件中添加名称及其文档链接，以保持文档的最新状态。
不要重复造轮子：使用MediaElement提供的DOM操作/AJAX等实用工具。查看此链接了解更多详情。
你也可以在功能文件夹内包含CSS，文件名与功能JS文件匹配，并为"legacy"和BEM命名约定添加CSS样式。
如果使用图标，其大小必须为20x20px，以匹配所有其他图标的尺寸。

.mejs__[feature_name], .mejs-[feature_name] {
    // 所有你的样式
}

功能创建模板

'use strict';

/**
 * [功能名称]
 *
 * [描述]
 */

// 如果插件需要翻译，请按以下格式放置英语翻译：
// mejs.i18n.en["mejs.id1"] = "字符串1";
// mejs.i18n.en["mejs.id2"] = "字符串2";

// 功能配置
Object.assign(mejs.MepDefaults, {
    // 任何可由最终用户配置的变量都属于此处。
    // 通过检查API和配置文件确保其唯一性。
    // 为每个变量添加关于其性质的注释。
});


Object.assign(MediaElementPlayer.prototype, {

    // 公共变量（也按照JSDoc规范进行文档化）

    /**
     * 功能构造函数。
     *
     * 始终必须以`build`为前缀，后跟将在MepDefaults.features列表中使用的名称
     * @param {MediaElementPlayer} player
     * @param {HTMLElement} controls
     * @param {HTMLElement} layers
     * @param {HTMLElement} media
     */
    build[feature_name] (player, controls, layers, media) {
        // 这允许我们访问已设置的选项和其他有用元素。
        // 如果计划在进一步操作中重用这些变量，
        // 将变量添加到对象中是个好主意。
        const t = this;

        // 所有必需的代码都在这里保持私有性；
        // 否则，你可以创建更多方法或在此作用域之外
        // 添加变量
    },

    // 可选地，每个功能可以通过设置`clean`方法来销毁

    /**
     * 功能析构函数。
     *
     * 始终必须以`clean`为前缀，后跟在MepDefaults.features列表中使用的名称
     * @param {MediaElementPlayer} player
     * @param {HTMLElement} controls
     * @param {HTMLElement} layers
     * @param {HTMLElement} media
     */
    clean[feature_name] (player, controls, layers, media) {}

    // 其他可选的公共方法（全部按照JSDoc规范进行文档化）
});

翻译模板

如果可翻译字符串是插件的一部分，你需要创建一个格式如下的[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"] = "";
}
// 以及其他语言

注意：MediaElementPlayer集成的语言越多，这个模板就会变得越大。

另外，如果你要向MediaElementPlayer添加新语言，你需要按照上面模板中描述的方式将其添加到所有现有的i18n文件中。