# API

提示

mui-player.js 创建了播放器基本使用的控件,包括定义在播放器上的进度条,开始/暂停/全屏切换按钮以及播放器头低部控件。它处理了视频播放以及兼容问题等。

为了让代码具有较好的模块分离,我们针对性的对移动端和PC端开发出一套适用的插件,开箱即用,在你阅读过这里时就可以选择使用这两类 扩展插件

mui-player-desktop-plugin.js

mui-player-mobile.plugin.js

mui-player.js 是创建播放器的核心库,查看可配置的 api 以及它提供对外的接口:

# 主要配置

从这里开始,初始化构建播放器实例:

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
});
属性名 类型 默认值 说明
container String/Element required 指定播放器容器
src String required 视频播放的资源地址
title String 标题
autoplay Boolean false 是否自动播放,关于 autoplay 属性设置问题请参考
preload String auto 视频是否预加载,可选值 none | metadata | auto。如果 autoplay=true,则忽略该属性。
loop Boolean false 是否循环播放
muted Boolean false 是否静音播放
width String/Number auto 初始化播放器宽度
height String/Number 225px 初始化播放器高度
lang String navigator.language 播放器界面语言,可选 en | zh-cn | zh-tw
volume Number 1 初始化设置视频音量,取值 0 - 1
autoFit Boolean true 播放器容器是否自适应视频高度
poster String 视频封面的资源地址
live Boolean false 是否开启直播模式,直播模式默认菜单配置不允许控制播放速度以及循环播放
initFullFixed Boolean false 初始化是否网页全屏播放
autoOrientaion Boolean true 全屏时否自动切换方向,在 html5+ (opens new window) 中全屏时会自动旋转屏幕,部分手机浏览器全屏时自动旋转方向。
Tag:ios 全屏切换时稍有差异,全屏模式时调用系统全屏播放。
dragSpotShape String circular 设置进度条拖动点的形状,可选 circula | square
objectFit String contain 视频大小与 video 容器的表现形式。可选 contain | cover
#
videoAttribute Array [] 此属性为添加更多 H5 Video 标签的属性,参数为接受每个 key value 键值对象,注意如果该数组中属性值在已有设置中存在,那么会覆盖。

如需配置声明启用同层播放,那么配置如下:videoAttribute:[
{attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
{attrKey:'playsinline',attrValue:'playsinline'},
{attrKey:'x5-video-player-type',attrValue:'h5-page'},
]
#
subtitle Object {} 添加视频字幕。目前只支持 webvtt 字幕格式,请参考视频字幕
parse Object {} 添加视频解码插件。请参考:解码播放
plugins Object {} 添加播放扩展插件,请参考:移动端扩展 PC端扩展

# 自定义配置

自定义设置播放器控件,样式:

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',

    themeColor:'#55c612', // 自定义主题颜色
    ...
});
属性名 类型 默认值 说明
themeColor String #1e98d4 主题颜色
showMiniProgress Boolean true 是否显示底部迷你进度条,当视图操纵控件隐藏时显示。当配置项 live=true 时无效。
pageHead Boolean true 非全屏模式下,是否显示播放器头部操作控件
# custom Object 自定义播放器控件。请参考: 自定义播放器控件
custom.headControls Array 自定义播放器头部按钮组,参数接受一个配置数组,最大可配置对象为5个,参考
custom.footerControls Array 自定义播放器底部控件组,参数接受一个配置数组,最大可配置对象为5个,参考
custom.rightSidebar 自定义播放器右侧弹出栏,参数接受一个配置数组,最大可配置对象为5个,参考

# 播放事件监听

MuiPlayer 管理了部分的播放事件,可通过添加对指定事件的监听来处理适当需要的动作。示例:

var mp = new MuiPlayer(option);
    
// 监听播放器已创建完成
mp.on('ready',function(event) {
    console.log(event);
});
事件名 类型 函数返回 说明
back EventHandle 返回按钮点击时触发,
Tag:仅在非全屏模式下触发
duration-change EventHandle {duration} 当视频时长已更改时触发,只有当时长大于1时发生,单位为秒(s)
seek-progress EventHandle {percentage} 当用户在视频寻址时触发
fullscreen-change EventHandle {direction,fullscreen} 当视频进入或者退出全屏时触发。初始播放器器时默认触发一次该事件
direction:表示当前播放的方向,在手机端适用
fullscreen:表示当前在 pc 环境是否为全屏状态播放,只有在 pc 环境返回该属性
controls-toggle EventHandle {show} controls 控件状态变化时触发
error EventHandle native event 播放发生错误
destroy EventHandle 视频销毁事件
ready EventHandle 播放器已创建完成

# 播放器接口

MuiPlayer 对外提供了部分接口,该接口实现了播放器内置的函数,示例:

// 初始化播放器配置
var mp = new MuiPlayer(option);

// 显示一个消息提示
mp.showToast('提示...');
方法名 传参 必填 说明
toggleControls true | false - 主动 隐藏/显示 播放器 controls。参数可传递一个布尔值用可强制显示或隐藏
showToast String | Object - 弹出消息提示,参考接收一个字符或串或者对象
Ojbect = { message='', duration=1500, style={} }
duration 默认等于1500,单位毫秒
video - - 返回当前实例的原生video元素
reloadUrl Video src - 指定一个视频地址重新加载资源,不传参则默认重新加载
showRightSidebar Slot name 弹出自定义右侧栏窗口,参考
showLoading - - 显示视频缓冲 loading
hideLoading - - 隐藏视频缓冲 loading
openFullScreen - 开启全屏播放
closeFullScreen - 关闭全屏播放
getControls - 获取所有播放器控件,返回一个数组
destroy - - 销毁视频播放器
sendError event 主动发送错误报告