HTML5 视频播放插件-MuiPlayer

技术文档

优点：

多格式支持

支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。

丰富的可配置API

MuiPlayer 具有丰富的参数可以自定义播放器实例，通过轻松的配置即可完成自定义场景的视频播放。

简约的设计风格

播放器设计风格轻松而简约，可自定义配置播放器的主题样式。在PC、手机端独立还拥有一套美观的功能控件设计。

安装

// npm 安装npm i mui-player --save// yarn 安装yarn add mui-player

使用

1.引入

// 引入import \'mui-player/dist/mui-player.min.css\'import MuiPlayer from \'mui-player\'

2.定义播放器容器：

3、初始化构建播放器：

// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置var mp = new MuiPlayer({ container:\'#mui-player\', title:\'标题\', src:\'./static/media/media.mp4\',})

4.以上就能为初始化构建一个具有默认配置控件的视频播放器

主要配置

从这里开始，初始化构建播放器实例：

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

属性名

类型

默认值

说明

container

String/Element

required

指定播放器容器

src

String

required

视频播放的资源地址

title

String

标题

autoplay

Boolean

false

是否自动播放

preload

String

auto

视频是否预加载，可选值 none | metadata | auto。如果 autoplay=true，则忽略该属性。

loop

Boolean

false

是否循环播放

width

String/Number

auto

初始化播放器宽度

height

String/Number

225px

初始化播放器高度

lang

String

navigator.language

播放器界面语言，可选 en | zh-cn | zh-tw

volume

Number

初始化设置视频音量，取值 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

播放发生错误

destory

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

获取所有播放器控件，返回一个数组

destory

销毁视频播放器

sendError

event

主动发送错误报告

移动端扩展

简介：

MuiPlayer 提供了一套样式统一，可观且响应式的移动端皮肤插件，该插件增强了播放器在移动端的可操纵能力，包含可触屏控制进度、音量，锁定播放，主菜单配置切换播放速率、循环播放等。该扩展插件处理了大部分手机端播放的兼容性问题，如播放事件触发的时机冲突，浏览器全屏等等，以及兼容了包括 iPhone、Android 等各种机型。如果您的应用是运行在 html5 plus(opens new window)环境中，那么使用该播放插件将会默认得到更多原生 api 的支持，例如播放控制设备音量、全屏时横竖屏播放、沉浸式播放等。你也可以使用原生与网页交互的方式来控制视频以及设备功能，MuiPlayer 提供了所有事件触发的回调函数。查看在 uni-app 中的使用。

开始使用：

1.安装

// npm 安装npm i mui-player-mobile-plugin --save// yarn 安装yarn add mui-player-mobile-plugin

2.引入

// 引入 mui-player-mobile-plugin.js，插件需要在初始化播放器之前加载：import mui-player-mobile-plugin from \'mui-player-mobile-plugin\'

3.使用

// 在主配置项 plugins 中传入：var mp = new MuiPlayer({ container:\'#mui-player\', src:\'../media/media.mp4\', ... plugins:[ new MuiPlayerMobilePlugin({ showMenuButton:true, ... }) ]});

4.配置选项

属性名

类型

默认值

说明

showMenuButton

Boolean

true

是否加载默认的主菜单
Tag：只有在手机横屏状态有效

showLock

Boolean

true

是否显示播放锁定按钮
Tag：只有在手机横屏状态有效

showBattery

Boolean

auto

是否显示时间电量，默认为 auto。如果window.navigator.getBattery 对象无效那么不显示，反之显示。

pageGetsture

Boolean

true

非全屏状态是否开启触屏控制手势

defaultLuminance

Number

指定默认播放器的亮度，取值范围为 0 至 1，默认为 1。如果在 html5+ 环境下，该参数设置无效，将会默认获取当前系统亮度
Tag：当 hotKeyConfig[\'luminanceHandle\'] != fals 时配置有效

forwardRate

Number

0.1

触屏滑动控制视频的进退速率，有效取值 0.1 至 1

hotKeyConfig

Object

{}

热键配置

hotKeyConfig.processHandle

Boolean

true

是否开启左右触屏滑动控制进度

hotKeyConfig.volumeHandle

Boolean

true

是否开启上下触屏滑动控制音量，默认为播放器右半屏，如果设置 luminanceHandle = false，那么将全屏触发

hotKeyConfig.luminanceHandle

Boolean

false

是否开启上下触屏滑动控制亮度，默认为播放器左半屏，如果设置 volumeHandle = false，那么将全屏触发

defaultMenuConfig

Object

{}

默认侧栏主菜单配置

defaultMenuConfig.showFillSwitch

Boolean

true

是否显示铺满全屏切换按钮

defaultMenuConfig.showLoopSwitch

Boolean

true

是否显示循环播放切换按钮，直播模式下该参数无效

defaultMenuConfig.showSpeedSwitch

Boolean

true

是否允许切换播放速度，直播模式下该参数无效

defaultMenuConfig.showShare

Array

[]

显示分享的类型，如果该值的长度为零或者为空则不显示分享入口。参数接受 1 | 2 | 3 | 4。
1：微信、2：朋友圈、3：QQ、4：复制链接

thumbnails

Object

缩略图配置，参考

5.动作事件监听

// mui-player-mobile-plugin 提供特定的行为事件，你必须通过添加该事件来处理指定的动作：// 插件音量调节,需要通过此事件监听来实现mp.on(\'volume-change\',function(e) { mp.video().volume = e.size;});

事件名

类型

函数返回

说明

volume-change

EventHandle

{ size }

音量调节时触发

luminance-change

EventHandle

{ size }

亮度调节时触发

EventHandle

{ type }

默认侧栏主菜单 - 分享按钮点击时触发

收费：

我在使用这个播放器的时候，这个扩展插件还是免费的，后面随着版本更新，作者逐渐把之前免费的版本删除，并更换了收费的专业版,我当时使用的旧版本移动端扩展依赖现已上传到网盘。网盘地址:AnyShare://智慧城市及中台BU/智慧城市-应用研发/转测版本/智慧城市/智慧城市APP/美丽武清/Muiplayer移动端扩展依赖/mui-player-mobile-plugin.min.js

MediaSource 支持

mui-player.js 默认配合了 hls(opens new window)、flv(opens new window)流媒体库，引用库文件即可播放指定的流媒体资源。同时你也可以配和其他 mse 库使用，通过 customKernel 配置对象来自定义编解码媒体，例如播放 mpd 文件配合 dash.js

使用 hls.js 或者 flv.js

1.安装

npm install hls.js --savenpm install flv.js --save

2.引入

import Hls from \'hls.js\'import Flv from \'flv.js\'

配置

在配置对象中添加 parse 声明指定视频编解码库

// 示例 hls 配置var mp = new MuiPlayer({ container:document.getElementById(\"mui-player\"), src:\'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8\', ... parse:{ type:\'hls\', loader:Hls, config:{ // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning debug:false, }, },});

// 示例 flv 配置var mp = new MuiPlayer({ container:document.getElementById(\"mui-player\"), src:\'https://flvplayer.js.org/assets/video/weathering-with-you.flv\', ... parse:{ type:\'flv\', loader:Flv, // flv config to：https://github.com/Bilibili/flv.js/blob/HEAD/docs/api.md#flvjscreateplayer config:{ cors:true }, },});

自定义播放器控件

MuiPlayer 本身设计了一套可观的组件，与此同时播放器还提供了扩展控件的能力，通过配置 custom 自定义编写显示界面的元素，自定义扩展视频容器头、底部按钮组。

配置选项

属性名

传参

示例

说明

custom

自定义控件配置

custom.headControls

[ ... ]

参考

自定义播放器头部按钮组，参数接受一个数组，最大可配置对象为5个

custom.footerControls

[ ... ]

参考

自定义播放器底部按钮组，参数接受一个数组，最大可配置对象为5个

custom.rightSidebar

[ ... ]

参考

自定义弹出右侧栏窗口，参数接受一个数组，最大可配置对象为5个

说明

你必须要为自定义的控件元素的父级声明一个 slot 属性值，所定义 slot 属性的所有子节点是作为显示控件的所有内容，使用 template 标签那么定义内容将不会直接显示在页面，你也可以使用一个 div 做为包装控件的容器。

示例一：自定义播放器头按钮

var mp = new MuiPlayer({ container:\'#mui-player\', src:\'../media/media.mp4\', ... custom:{ headControls:[ { slot:\'castScreen\', // 对应定义的 slot 值 click:function(e) { // 按钮点击事件回调  console.log(\'cast screen button click...\'); }, style:{}, // 自定义添加控件样式 } ] }});

示例二：自定义播放器底部按钮

var mp = new MuiPlayer({ container:\'#mui-player\', src:\'../media/media.mp4\', ... custom:{ footerControls:[ {  slot:\'nextMedia\', // 对应定义的 slot 值  position:\'left\', // 显示的位置，可选 left、right  tooltip:\'下一集\', // 鼠标悬浮在控件上显示的文字提示  oftenShow:false, // 是否常显示。默认为false，在 mobile 环境下竖屏状态下隐藏，pc环境判下视频容器小于500px时隐藏  click:function(e) { // 按钮点击事件回调 console.log(\'next media button click...\');  },  style:{}, // 自定义添加控件样式 }, ], }});

示例三：自定义右侧栏弹出窗口

  蓝光1080P
 超清
 高清
 标清

var mp = new MuiPlayer({ container:\'#mui-player\', src:\'../media/media.mp4\', ... custom:{ rightSidebar:[ {slot:\'HD\', // 对应定义的 slot 值width:\'200px\' // 侧栏宽度，string | number } ], }});function on_hd() { mp.toggleControls(); //清晰度切换 mp.reloadUrl(url); mp.showToast(\'清晰度切换成功！\');};

其他问题

内联播放和同层播放的问题？

- 内联播放：在IOS某些手机浏览器中，当视频播放时会自动进入全屏播放状态，通过设置 playsline，webkit-playsline 这两个属性可以阻止播放时自动全屏。
- 同层播放：同层播放主要是处理视频在全屏播放时的播放形态。在某些浏览器，如微信、QQ浏览器当视频全屏时会调用浏览器内置的播放器组件来播放视频，为了让视频上显示我们自定义的元素，腾讯浏览提出了这个概念，参见：https://x5.tencent.com/docs/video.html(opens new window)，但是不少浏览器还是存在视频播放时会劫持html5 video 标签的问题，这是浏览器来决定的。

视频无法全屏？

- 如播放器是被嵌入 Iframe 中，那么为 iframe 标签添加属性 allowfullscreen 属性来允许激活全屏模式。你应该添加的属性有 allowfullscreen、webkitallowfullscreen、mozallowfullscreen

如何向播放器追加更多自定义 HTML 元素？

- 参见自定义播放器控件。如果已有无法满足需要，可以手动编写 HTML 节点，然后将节点追加到播放器容器中。

如何重写、隐藏播放器默认的控件？

- 如需隐藏默认的播放、全屏操作控件，可通过 getControls() 方法获取所有控件，然后可自定义行为的 DOM 操作

视频自动播放存在的问题？

- 部分浏览器禁止了视频自动播放。在 IOS Safari 以往的策越中，视频添加了 autoplay 属性并不会触发自动播放，需要用户的一个手势才能触发视频的播放。苹果添加这一限制方面是为了节省用户造成的高额流量以及节省电量，但是在 IOS 10 Safari 视频播放策越中则放宽了这个限制。参见：https://webkit.org/blog/6784/new-video-policies-for-ios/(opens new window)
- 解决方案：

- - 1. 静音自动播放：配置播放器静音，并 autoplay 即可自动播放
  - 2. 有声自动播放：此方法需要客户端同学配合. 安卓同学了解下: webView.getSettings().setMediaPlaybackRequiresUserGesture(false)这句话,具体可以问我们的刘建同学

如何监听更多原生Video 事件？

- MuiPlayer 支持所有原生 Video 事件，可以通过 mp.video() 获取媒体实例来添加原生事件。媒体相关的事件 API 可参见：

- - https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events(opens new window)
  - https://www.w3school.com.cn/tags/tag_video.asp(opens new window)
  - https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp(opens new window)

视频如何添加记忆播放功能？

- MuiPlayer 默认不处理记忆播放，如需可手动时记录指定媒体的播放位置，待媒体加载成功时设置 video currentTime。

流媒体视频无法正常播放？

- 默认在移动端上是支持 m3u8、flv 视频播放的，在 PC 端播放流媒体视频请参考：MediaSource支持

播放m3u8视频,销毁播放器后仍不断请求？

- 原解决方案是,通过在播放器源码里找到传入的 HLS 对象,在播放器销毁事件里一并把 HLS 一起销毁解决
- 现最新版本播放器作者已经修复此问题,不过我没有用到最新版本,所以同学们大可一试

移动端播放器没有音量控制按钮？

- 可以通过播放器文档里提供的自定义播放器控件来增加自己需要的控件

HTML5 视频播放插件-MuiPlayer

优点：

多格式支持

丰富的可配置API

简约的设计风格

安装

使用

主要配置

自定义配置

播放事件监听

播放器接口

移动端扩展

简介：

开始使用：

1.安装

2.引入

3.使用

4.配置选项

5.动作事件监听

收费：

MediaSource 支持

使用 hls.js 或者 flv.js

1.安装

2.引入

配置

自定义播放器控件

配置选项

说明

示例一：自定义播放器头按钮

示例二：自定义播放器底部按钮

示例三：自定义右侧栏弹出窗口

其他问题

内联播放和同层播放的问题？

视频无法全屏？

如何向播放器追加更多自定义 HTML 元素？

如何重写、隐藏播放器默认的控件？

视频自动播放存在的问题？

如何监听更多原生Video 事件？

视频如何添加记忆播放功能？

流媒体视频无法正常播放？

播放m3u8视频,销毁播放器后仍不断请求？

移动端播放器没有音量控制按钮？

相关问题

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载