如何优雅的使用MuiPlayer编写出一款精美可操作的视频播放控件，带防挂机或弹题功能，适合网课等相关业务场景
葛威
Tips:这篇文章编写的初衷是为了让更多的人知道MuiPlayer这款精美的框架，以及更方便的投入到使用MuiPlayer中来，并无其他用意，也没有对MuiPlayer的官方文档进行更改， 如果MuiPlayer或大家觉得这篇文章的出现不合时宜，请联系我删除，如果在使用中有什么疑问，欢迎大家留言讨论。如果觉得本篇文档存在不对的地方，欢迎大家留言指正，谢谢~~
本篇的使用介绍是在开发时编写的，内容过于粗糙，不喜勿喷。需要了解Vue和Video的原理及事件
介绍
1、MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。
2、播放器的设计兼容了在 PC、Mobile 端运行，提供了 “移动端” 以及 “PC端” 两类扩展插件，因此你也可应用于在 Android、Ios 的 Webview 中使用。
3、如果你的应用是运行在 html5 plus (opens new window)环境中，那么你使用该播放插件将会默认得到更多原生 api 的支持，例如播放控制设备音量、全屏时横竖屏播放、沉浸式播放等。你也可以使用原生与网页交互的方式来控制视频以及设备功能，MuiPlayer 提供了所有事件触发的回调函数，你需要在这里作一些自己的控制。
特点
MuiPlayer 帮助我们解决了日常 H5 Video 应用开发中的常见的一些大量问题：
1、各浏览器平台播放 ui 不能统一
2、ui 扩展之间以及状态处理容易产生冲突
3、在不同环境下（android、ios、pc）针对 h5 video api 可能触发事件的时机尽不相同
4、媒体格式存在各种兼容问题，muiplayer 处理了大多数在不同环境下播放的兼容问题
5、重复踩踏在开发 h5 video 过程中的一些坑，我们提供了一套完好的解决方案，让开发者少走一些弯路
文档
具体介绍请前往 官方文档 查阅，这里就不介绍了
废话不多说，上干货~~~~~
子组件的创建
一、引用MuiPlayer
import './mui-player.min.css'
import MuiPlayer from './mui-player.min'
import MuiPlayerDesktopPlugin from './mui-player-desktop-plugin.min'
相关资源去官网下载即可>>>传送门
二、创建模板结构
<template>
<div>
<div id="mui-player">
<div slot="nextMedia">
<svg t="1584686776454" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1682" width="23" height="23">
<path
d="M783.14692466 563.21664097L240.85307534 879.55472126c-39.1656664 24.10194914-90.38230866-6.02548665-90.38230865-51.21664226v-632.676158c0-45.19115433 51.21664097-75.31859011 90.38230865-51.21664226l542.29384932 316.33808029c39.1656664 21.08920518 39.1656664 81.34407804 0 102.43328194z"
p-id="1683" fill="#ffffff"></path>
<path
d="M873.52923331 734.94302767c0 42.17841036-39.1656664 78.33133408-90.38230865 78.33133407s-90.38230866-36.15292371-90.38230735-78.33133407V289.05697233c0-42.17841036 39.1656664-78.33133408 90.38230735-78.33133407s90.38230866 36.15292371 90.38230865 78.33133407v445.88605534z"
p-id="1684" fill="#ffffff"></path>
</svg>
</div>
//防挂机或弹题功能
<div @click.stop @dblclick.stop >
<slot></slot>
</div>
</div>
</div>
</template>
<slot></slot> : 插槽，便于接收父级组件发送过来内容
三、Javascript 代码
在export的外层先var一个变量，方便接收实例
var mp;
1、props：
{
src: {
type: String,
default: ''
},
poster: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
autoplay: {
type: Boolean,
default: false,
},
muted: {
type: Boolean,
default: false
}
}
2、mounted：
mp = new MuiPlayer({
container: '#mui-player',
title: this.title,
src: this.src,
poster: this.poster,
autoplay: this.autoplay,
muted: this.muted,
lang: 'zh-cn',
volume: 0.6,
themeColor: '#55c612',
custom: {
footerControls: [{
slot: 'nextMedia', // 对应定义的 slot 值
position: 'left', // 显示的位置，可选 left、right
tooltip: '下一集', // 鼠标悬浮在控件上显示的文字提示
oftenShow: false, // 是否常显示。
click: function(e) { // 按钮点击事件回调
console.info(e)
mp.showToast('next media button click...');
},
style: {}, // 自定义添加控件样式
}],
},
plugins: [
typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({
pictureInPicture: false,
contextmenu: [{ // 右键菜单组配置
name: 'muiplayer',
context: 'MuiPlayer',
show: false,
},
{
name: 'copyPlayUrl',
context: '复制视频链接test',
zIndex: 0,
show: true,
click: function(close) {
console.info('复制视频链接')
}
}
],
customSetting: [{
functions: '循环播放',
name: 'loopPlay',
show: false
},
{
functions: '播放速度',
name: 'playbackRate',
show: false
}
],
}) : {}
]
})
mp.getControls().forEach(function(value, index) { //遍历video上所有控件
if (value.id == "picture-in-picture" || value.id == "pagefull-switch")
value.remove(); //删除画中画和网页内全屏控件
})
this.$emit("mpVideo", mp.video())
四、讲解代码
* @property {Object} new MuiPlayer(option) 实例化MuiPlayer插件
* @property {String} src 视频源地址
* @property {String} poster 封面路径
* @property {String} title 视频的标题
* @property {Boolean} autoplay 是否自动播放,默认false
* @property {Boolean} muted 是否静音
* @property {Boolean} lang 显示语言种类
* @value zh-cn 中文简体
* @property {Number} volume 默认音量
* @value 0-1 音量范围
* @property {String} themeColor 自定义进度条颜色
* *****************************************************
* @property {Object} custom 自定义控件
* @value {Array} headControls 自定义播放器头部按钮组，参数接受一个配置数组，最大可配置对象为5个
* @value slot 对应定义的 slot 值
* @event click 按钮点击事件回调
* @value style 自定义添加控件样式
* @value {Array} footerControls 自定义播放器底部控件组，参数接受一个配置数组，最大可配置对象为5个，
* @value slot 对应定义的 slot 值
* @value position 显示的位置，可选 left、right
* @value tooltip 鼠标悬浮在控件上显示的文字提示
* @value oftenShow 是否常显示。默认为false，在 mobile 环境下竖屏状态下隐藏，pc环境判下视频容器小于500px时隐藏
* @value click 按钮点击事件回调
* @value style 自定义添加控件样式
* @value {Array} rightSidebar 自定义播放器右侧弹出栏，参数接受一个配置数组，最大可配置对象为5个
* @value slot 对应定义的 slot 值
* @value width 侧栏宽度 {string | number}
* *****************************************************
* @property {Object} plugins 添加播放扩展插件
* @property {Object} new MuiPlayerDesktopPlugin(option...) 实例化MuiPlayerDesktopPlugin
* @property {Array} customSetting 自定义设置组 默认[{functions:'循环播放',name:'loopPlay'},{functions:'播放速度',name:'playbackRate'}]
* @value functions 组名称
* @value name 组标识名。如该名称与默认配置组中某个名称相同，那么将重写默认配置组菜单
* @value model 组选择模式，可选 switch | select 默认select
* @value selected 是否选中当前选择项 默认false
* @value show 是否显示 默认true
* @value zIndex 组显示层级，zIndex越大该组排列顺序越靠前 默认0
* @value childConfig 子设置组配置，配置参数同父级设置组参数 默认[]
* @value onToggle 组选项点击后的回调函数，接收三个参数可供处理动作：
* 1、data：当前选择配置项
* 2、selected： 函数，必须手动调用该函数来选择项目
* 3、back： 函数，调用该函数触发返回父级设置组，参数可接收一个毫秒单位的数字表示延迟返回
* @property {Array} contextmenu 自定义右键菜单 默认[{name:'shortcuts',context:'快捷键'},{name:'muiplayer',context:'MuiPlayer'}]
* @value name 菜单标识名，如该名称与右击菜单组中某个名称相同，那么将重写默认菜单组
* @value context 右击菜单名称
* @value zIndex 组显示层级，zIndex越大该组排列顺序越靠前
* @value show 是否显示
* @value click 点击后回调函数。【close：函数，主动调用函数可关闭右击菜单】默认callback(close)
* @property {Object} thumbnails 缩略图配置 默认{}
* @property {Number} fullScaling 全屏时控件大小缩放比，取值 >= 1 默认1.2
* @property {Boolean} leaveHiddenControls 鼠标指针移出播放器时是否隐藏控件 默认false
* *****************************************************
* @event {Funtion()} click.stop 阻止冒泡事件，防止`单`击模态窗单击事件透传到video
* @event {Function()} dblclick.stop 阻止冒泡事件，防止`双`击模态窗单击事件透传到video
* @event {Function()} getControls 如需隐藏默认的播放、全屏操作控件，可通过 getControls() 方法获取所有控件，然后可自定义行为的 DOM 操作
* @example new MuiPlayer(option...)
父组件的调用
使用子组件的插槽传输内容
<template>
<view class="content">
<mui-Player :src="mySrc":title="myTitle":poster="myPoster" @mpVideo="mpVideo">
<div class="topicModel" v-if="showTopic">
<div class="topicModel-content">
<span @click="clickMe">我是视频中的弹窗，点击我触发事件</span>
</div>
</div>
</mui-Player>
</view>
</template>
javascript代码片段
data() {
return {
mySrc: "", //播放路径
myTitle: '', //视频左上角标题
myPoster: '', //视频封面
showTopic: false //默认不展示弹题模态窗
}
},
onLoad() {
_this = this;
setTimeout(function() { //模拟3秒后弹出模态窗，实际开发中应该是随机时间弹出
_this.showTopic = true; //展示答题模态窗
setTimeout(function(){ //弹出模态窗后做一个延迟效果，暂停播放
_video.pause();
}, 500)
}, 3000)
},
methods: {
clickMe() {
console.log("点到我了");
_this.showTopic = false; //关闭答题模态窗
},
mpVideo(video){
_video = video; //吐出Video原生媒体实例，其他特殊功能可以使用Video来添加原生事件，例如禁用滚动条、禁用快进快退功能等等
}
}
css代码片段【sass】
.content{
width: 500px;
height: 300px;
margin: 300px auto;
}
@keyframes fadeIn{
0%{
opacity:0;
transform: scale(1.2);
}
100%{
opacity: 1;
transform: scale(1);
}
}
.topicModel{
padding: 0 10px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
animation: fadeIn 0.4s;
&-content{
width: 60%;
height: 60%;
background-color: #FFFFFF;
}
}
结束语
这款框架非常优秀，它还集成了弹幕等扩展功能，如果您想要大厂那些视频控件还不想花钱的话，可以试试这款MuiPlayer ，超级赞~~~
最后，欢迎大家指正讨论！！！
类似资料：