引入

使用 npm 安装

npm i @wenzi7777/mplayer@latest

或直接使用 cdn 引入

<script src="https://cdn.jsdelivr.net/npm/@wenzi7777/mplayer@latest/dist/mplayer.bundle.min.js"></script>

初始化播放器

  • 当MPlayer被以任何方式挂载到window对象上时，就可以使用MPlayer类来创建一个播放器实例。
  • MPlayer类构造器接受两个参数，第一个参数是播放器将被挂载到的元素，第二个参数是播放器参数，均为必选参数。

MPlayer构造函数参数表：

序号参数说明是否必选
0element播放器将会被挂载到的元素是
1options播放器参数是

让我们初始化一个最简单的播放器吧！

  • 准备容器
<div id="mplayer"></div>
  • 引入MPlayer

如果你使用模块管理器

import MPlayer from '@wenzi7777/mplayer';
const mplayer = new MPlayer(element, options);

或者直接使用cdn

<script src="https://cdn.jsdelivr.net/npm/@wenzi7777/mplayer@latest/dist/mplayer.bundle.min.js"></script>
  • 创建播放器对象
<script>
    let options = {
        videos: [
            {
                title: 'video title',
                src: 'video src'
            }
        ]
    }
    const mplayer = new MPlayer(document.querySelector('#mplayer'), options)
</script>

播放器参数

MPlayer的构造器接受一个名为options的对象，您可以在其中定义值来个性化播放器。

名称默认值可选值类型描述是否必选
langen_USzh_CN, zh_TW, en_USString播放器语言否
playerModenormalnormal, liveString播放器模式否
autoplayfalsetrue, falseBoolean是否自动播放视频，请注意自动播放会在某些配置下的浏览器被禁用否
hintsfalse请在'参数详情'页面查看详细信息Object播放器'提示'功能否
spotlightfalse请在'参数详情'页面查看详细信息Object播放器'聚光灯'功能否
theme#39c5bb任意的Hex色值String可选任意的Hex色值来更换播放器主题色，注意不支持rgb或者rgba色值否
tools默认启用所有支持的工具请参照'参数详情'页面Array播放器工具否
hotkeytruetrue, falseBoolean是否启用热键否
preloadtruetrue, falseBoolean是否预加载否
volume1任意属于的数值Number播放器音量大小否
playbackRares.25至2以.25划分一级的所有播放倍速请参照'参数详情'来设定此值Array可选的播放倍速否
index0任意数值Number播放器第一个播放的视频在videos数组中的下标否
infoPanel所有支持的信息请参照'参数详情'页面Array播放器信息要展示的内容否
contextMenu两个选项，一个是指向本站的地址，一个是播放器信息请参照'参数详情'来自定义指令Array播放器右键菜单否
videos无请参照'参数详情'页面的提示自行构建这个数组Array播放器的视频列表是

参数详情

lang

播放器语言，目前MPlayer支持【简体中文】、【正體字】、【English】。 请在源文件**translation.js**查看可用的翻译或者添加你想要的翻译。

可选值释义
zh_CN简体中文
zh_TW正體字
en_USEnglish(USA)

playerMode

播放器模式，目前MPlayer仅支持normal模式

可选值释义
normal普通播放器
live直播模式（暂未支持）

autoplay

是否自动播放

请注意，某些浏览器由于安全策略或者其他原因，特别是移动端浏览器均不支持开启自动播放。

可选值释义
true开启自动播放
false关闭自动播放

hints

MPlayer提供的'提示'功能，默认为关闭。 开启提示后，可以在指定的时间段内，在MPlayer上展示内容。

默认值

{
    "enabled": false
}

使用示例

hints = {
  "enabled": true, // 标记为启用提示
  "elements": [ // 元素列表
      {
          "start": 10, // 开始展示的时间（秒）
            "end": 20, // 结束展示的时间（秒）
            "html": `<h1>TEST HINT</h1>` // 展示内容，您可以使用position定位元素
      }
  ]
}
hints示例图片

spotlight

MPlayer提供的'聚光灯'功能，默认为关闭。 开启后，可以提供类似于Youtube的环境光功能。

默认值

{
    "enabled": false,
    "backgroundColor": "#FFFFFF"
}

使用示例

spotlight = {
  "enabled": true, // 标记为启用提示
  "backgroundColor": "#FFFFFF" // 您网页背景主色，仅支持Hex色值
}
spotlight示例图片

theme

播放器主题色

更改此项会改变播放器的主题颜色，请注意，仅支持Hex色值（#39c5bb），并不支持rgb/rgba色值

tools

MPlayer视频控制器的组件，您可以自行决定使用哪些组件。

默认值（全选）

['timeline', 'playPause', 'volumeControl', 'durationViewer', 'screenshot', 'playerSettings', 'enablePlaylist', 'subtitles', 'miniPlayer', 'theaterMode', 'fullscreen']

使用示例

['timeline', 'playPause', 'durationViewer','fullscreen']
// 现在仅启用：进度条、开始/暂停、进度时间、全屏/退出全屏
组件名释义
timeline进度条
playPause播放/暂停
volumeControl音量控制
durationViewer进度数字
screenshot截图
playerSettings播放器设定
enablePlaylist上一个/下一个/播放列表
subtitles字幕控制
miniPlayer小窗口播放（画中画模式）
theaterMode观影模式
fullscreen全屏幕/退出全屏幕

组件图像解释 组件图像注解

hotkey

是否开启热键

键释义
空格/k开始/暂停播放
f全屏/退出全屏
t进入/退出观影模式
i进入/退出迷你播放器
m静音/解除静音
方向左/j后退5秒
方向右/l前进5秒

preload

是否启用预加载

volume

预先设置播放器音量，最大是1，最小是0

playbackRates

要让使用者选择的倍率列表。

默认值

[.25, .5, .75, 1, 1.25, 1.5, 1.75, 2]

您可以按照需要，自定增加或减少，最大值16，最小值0。

index

播放器首选播放视频的下标

默认值

0

若您的videos值的视频对象大于1个，则可以指定index值，让mplayer首选播放您选择的视频。

infoPanel

播放器信息配置列表，您可以按照需求，自定义播放器信息内要展示的内容。

默认值

['basicVideoInfo', 'playerFPS', 'videoURL', 'connectionStatus', 'date', 'playerInfo']
值释义
basicVideoInfo基本视频信息
playerFPS播放器帧率
videoURL视频地址
connectionStatus缓存健康
date日期
playerInfoMPlayer版本信息
infoPanel

contextMenu

播放器右键菜单，可以支持自定义。

默认值

[
            { // 此项为访问MPlayer官方网站的连接
                title: 'MPlayer',
                targetFunction: 'openLink',
                params: `https://mplayer.1205.moe/`
            },
            { // 此项为打开/关闭播放器信息的选项
                title: 'PlayerCN Info',
                targetFunction: 'toggleInfoPanel'
            }
        ]

参数定义 如果您想新增选项，请遵循以下参数定义，并按照给出的模版新增您的选项到contextMenu数组中

模版

{
  "title": "title", // 链接标题
  "targetFunction": "function", // 连接点击后调用的目标函数名称
  "params": "test, test" // 连接点击后调用的目标函数所需要的参数，若无参可省略
}
值释义是否必选
title链接标题是
targetFunction目标函数(请在api详情内查看可用的选项)否
params参数否

videos

必选参数，如果不提供则无法初始化MPlayer

最小化格式

[
    {
        title: '视频标题', // 必须提供视频标题
        src: '视频地址' // 必须提供视频链接
    }
]

若想支持进度条预览图，则须按照顺序，提供images属性

[
    {
        title: '视频标题', // 必须提供视频标题
        src: '视频地址', // 必须提供视频链接
        images: ['preview01.png', 'preview02.png'] // 进度条会按照数量自动适配预览图
    }
]
预览图

MPlayer支持webvtt字幕 若想支持字幕，则须提供tracks属性。

[
    {
        title: '视频标题', // 必须提供视频标题
        src: '视频地址', // 必须提供视频链接
        images: ['preview01.png', 'preview02.png'], // 进度条会按照数量自动适配预览图
        tracks: [
                    {
                        srclang: 'en', // 字幕语言
                        src: './en_US.vtt', // 地址
                        label: "English(USA)",  // 显示给用户的选项名
                        kind: "captions" // 一般为captions
                    }
                    ]
    }
]

若想提供了多于一个字幕，则可以进行字幕切换

[
    {
        title: '视频标题', // 必须提供视频标题
        src: '视频地址', // 必须提供视频链接
        images: ['preview01.png', 'preview02.png'], // 进度条会按照数量自动适配预览图
        tracks: [
                    {
                        srclang: 'en', // 字幕语言
                        src: './en_US.vtt', // 地址
                        label: "English(USA)",  // 显示给用户的选项名
                        kind: "captions" // 一般为captions
                    },
                    {
                        srclang: 'zh',
                        src: './zh_CN.vtt',
                        label: "中文(中国)",
                        kind: "captions"
                    }
                    ]
    }
]
字幕切换