如何优雅的使用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 ，超级赞~~~
最后，欢迎大家指正讨论！！！