MuiPlayer-简约设计风格的优秀开源弹幕H5播放器

MuiPlayer简介

MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。播放器的设计兼容了在 PC、Mobile 端运行，提供了 “移动端” 以及 “PC端” 两类扩展插件，因此你也可应用于在 Android、Ios 的 Webview 中使用。如果你的应用是运行在 HTML5 plus (opens new window)环境中，那么你使用该播放插件将会默认得到更多原生 api 的支持，例如播放控制设备音量、全屏时横竖屏播放、沉浸式播放等。你也可以使用原生与网页交互的方式来控制视频以及设备功能，Muiplayer 提供了所有事件触发的回调函数，你需要在这里作一些自己的控制。Muiplayer 致力于提供完备的 HTML5 视频开发解决方案，欢迎您引用该播放器作为网站的视媒体播放，在此之前您表示同意接受一下条款：此开源项目所有代码基于 GPL 许可协议，您默认遵守许可协议中约定的义务。您默认接受我们以及您所使用 MuiPlayer 所在的业务的相关内容放置在本官网展示。

MuiPlayer特性：

多格式支持

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

丰富的可配置API

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

简约的设计风格

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

MuiPlayer-Demo

Demo HTML

<!-- 引入基础样式文件 mui-player.min.CSS -->
<link rel="stylesheet" type="text/CSS" href="css/mui-player.min.css"/>

<!-- 引入基础脚本 mui-player.min.js --><script type="text/JavaScript" src="js/mui-player.min.js"></script>

<!-- 指定播放器容器 -->
<div id="mui-player"></div>

Demo JS

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

MuiPlayer参数

自定义设置播放器控件，样式：

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

    themeColor:'#55c612', // 自定义主题颜色
    ...
});

MuiPlayer控制

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

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

// 显示一个消息提示mp.showToast('提示...');

MuiPlayer监听

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

var mp = new MuiPlayer(option);
    // 监听播放器已创建完成
    
mp.on('ready',function(event) {
    console.log(event);
});

//MuiPlayer 支持所有原生 Video 事件，可以通过 mp.video() 获取媒体实例来添加原生事件。
mp.on('ready', function(event) {
    let v = mp.video();
    v.addEventListener("play", function(e) {
        console.log('play now...');
    });
    v.addEventListener("pause", function(e) {
        console.log('pause now...');
    });
});

PC 端扩展

mui-player-desktop-plugin.js 是播放器扩展插件，该扩展插件增强了播放器在pc端应用场景的使用，提供了包括鼠标以及键盘对播放器的控制能力，设置组，音量调节，视频缩略图配置等功能组件。

在页面引入 mui-player-desktop-plugin.js，插件需要在初始化播放器之前加载

<!-- 使用 script 标签引入 -->
<script type="text/JavaScript" src="js/mui-player-desktop-plugin.min.js"></script>

在主配置项 plugins 中传入

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

    plugins:[
        new MuiPlayerDesktopPlugin({
            customSetting, // 设置组配置
            contextmenu, // 右键菜单组配置
            thumbnails,  // 缩略图配置
        })
    ]
});

配置选项

扩展插件可配置API

您可以自定义配置设置组以此来满足需要添加的菜单，设置菜单支持两种选择模式，分别是开关模式（switch）和选择模式（select）。

播放器默认设置组包括循环播放以及播放速度的切换，在直播模式（live）下不支持。通过配置 customSetting Option 可自定义设置组，配置举例说明：

customSetting.js

export default [
	{
		functions:'清晰度',
		model:'select',
		show:true,
		zIndex:0,
		childConfig:[
			{functions:'蓝光1080P'},
			{functions:'超清'},
			{functions:'高清',selected:true},
			{functions:'标清'},
		],
		onToggle:function(data,selected,back) {
            // Action
        }
	},]

自定义右键菜单

new MuiPlayerDesktopPlugin({
    contextmenu:[
        {
            name:'copyPlayUrl',
            context:'复制视频链接',
            zIndex:0,
            show:true,
            click:function(close) {
                // Action...
            }
        },
    ],})

PC 端扩展【专业版】

PC 端扩展组件，该扩展新增了播放器在桌面端更多的功能性支持，包含弹幕输入、广告悬浮窗、视频水印、小窗口播放、进度位提示点和视频截图等。插件使用原生 Js 的编写，因此在编写功能接口在代码上并未产生冗余从而导致体积包的增大。扩展插件通常是保持最新的版本，在使用该插件之前请更新到 mui-player 主文件到最新版本。

在页面引入 mui-player-desktop-plugin.js，插件需要在初始化播放器之前加载：

<!-- 使用标签引入 “专业版” 扩展组件 -->
<script type="text/javascript" src="js/mui-player-desktop-plugin.min.js"></script>

在主配置项 plugins 中传入：

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
    
    plugins:[
        new MuiPlayerDesktopPlugin({
            key: '配置您插件密文',
            ...
        })
    ]
});

#配置选项 Plus

示例创建一个弹幕输入组件：

new MuiPlayerDesktopPlugin({
    key: '配置您插件密文',
    danmakuComponent:{
        open: true, // 是否开启弹幕组件
        growSize: 0.65, // 组件占据容器的宽度比例，取值范围：0 - 1
        buttonText: '发送',
        onSend(text, cleanText) { // 监听文本发送内容的函数回调
            // axtion
        },
    }
})

移动端扩展【专业版】

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

在页面引入 mui-player-mobile-plugin.js，插件需要在初始化播放器之前加载：

<!-- 使用 script 标签引入 -->
<script type="text/javascript" src="js/mui-player-mobile-plugin.min.js"></script>

在主配置项 plugins 中传入：

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
    
    plugins:[
        new MuiPlayerMobilePlugin({
            showMenuButton:true,
            ...
        })
    ]
});

配置选项

扩展插件可配置 API：

动作事件监听

mui-player-mobile-plugin 提供特定的行为事件，你必须通过添加该事件来处理指定的动作：

// 音量调节时触发
mp.on('volume-change',function(e) {
    mp.video().volume = e.size;
});

MuiPlayer字幕

提示

视频字幕使用的是 html5 track 标签，目前只支持使用 webvtt 格式的字幕文件。

你可以配置一个或者多个 vtt 文件，从而可以选择不同的语言。当存在 vtt 字幕时， mui-player-desktop-plugin.js 会默认读取 track 配置添加设置菜单，前提是浏览器支持 webvtt 文档格式。

查看 webvtt supported (opens new window)。从 这里 (opens new window)您可以学习到 webvtt 的知识。

API

#配置示例

在初始化配置字幕传递 subtitle 对象，接收 tracks 以及 styles 配置

var mp = new MuiPlayer({
    container:'#mui-player',
    src:'../media/media.mp4',
    ...
    
    subtitle{
        tracks:[
            {
    			kind:'subtitles',
				src:'./static/subtitle/sintel-en.vtt',
				label:'英语',
				srclang:'en',
				default:true,
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-de.vtt',
				label:'德语',
				srclang:'de',
            },
            {
				kind:'subtitles',
				src:'./static/subtitle/sintel-es.vtt',
				label:'西班牙语',
				srclang:'es',
            }
        ],
        styles:{ // 字幕默认样式
			color:'#FFFFFF',
			background:'transparent',
			textShadow:'0px 0px 1px #000000',
		},
    }});

MuiPlayer下载