借鉴DPlayer的设计思路，通过对模块的重构优化保留最纯粹的视频播放能力，适用于对视频播放器要求极致加载性能的使用场景。整个播放器模块结构清晰简单，对于有自定义需求的用户可以很方便进行二次开发定制自己的专属播放器！

使用方式

播放器包以umd模块形式提供，因此可以通过全局引入window.MicroPlayer的方使用也可以通过import操作导入模块使用，下面以import导入模块方式进行演示

导入播放器

import MicroPlayer from 'micro-player'

import '~node_modules/micro-player/dist/index.min.css'

// 注册解码器
MicroPlayer.registerExtension('hls', 'http://cdn.jsdelivr.net/npm/[email protected]/dist/hls.min.js')

const player = new MicroPlayer(document.getElementById('#app'), {
	live: false,
	autoplay: false,
	controls: true,
	durationFormat: 'remain',
	poster: 'https://img0.baidu.com/it/u=3443610860,3904946242&fm=253&fmt=auto&app=138&f=JPEG?w=1069&h=800',
	src: 'http://vjs.zencdn.net/v/oceans.mp4'
})

player.on('fullscreenchange', detail => {
	console.log(detail)
})

player.$on('canplay', evt => {
	console.log(evt)
})

player.play()

参数

| 参数 | 必填 | 默认值 | 类型 | 描述 | | :--------------: | :--: | :----: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | | src | N | - | string | {url: string; type?: string; label?: string; size?: number;} | {url: string; type?: string; label?: string; size?: number;}[] | string[] | 视频源信息，url 为视频链接；type 为文件 mime 类型；label 为要显示的视频源名称；size 为对应视频源文件的总尺寸大小，单位字节； | | defaultQuality | N | 0 | number | 多视频源场景下默认源索引 | | autoplay | N | false | boolean | muted | play | any | 自动播放设置 | | loop | N | false | boolean | 循环播放设置 | | muted | N | true | boolean | 禁音设置 | | preload | N | none | auto | metadata | none | 预加载设置 | | poster | N | - | string | 视频封面 | | controls | N | true | boolean | 是否显示底部控制栏 | | title | N | - | string | 全屏播放时显示的视频标题栏 | | mutex | N | true | boolean | 排他性，如果设置为 true 当前视频播放会自动暂停页面中其他视频的播放 | | live | N | false | boolean | 是否为直播，如果是直播的话不显播放进度条示 | | durationFormat | N | total | remain | total | 视频播放时间显示格式 | | enableChangeRate | N | true | boolean | 是否允许设置播放速率 | | aspectRatio | N | 16/9 | number|string | 以宽度/高度的比例设置播放器高度（播放器宽度为容器宽度），支持写入16/9或是1.7777778两种方式进行设置 |

静态属性

| 属性名 | 只读 | 类型 | 描述 | | :-------: | :--: | :----------------------: | :---------------------: | | version | Y | string | 当前版本 | | instances | Y | Record<string, Player> | 设置了mutex的播放器实例 |

静态方法

| 方法名 | 参数 | 返回值 | 描述 | | :---------------: | :---------------------------------------: | :-----------------------------------------------------------------------------------: | :--: | | registerExtension | name（解码器名称），src（解码器链接） | 播放器内置了flv/hls/dash/webtorrent的解码器，但是为了系统的稳定建议用户自己提供加码器 |

实例属性

| 属性名 | 只读 | 类型 | 描述 | | :------------: | :--: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ---------------------------------------------------------------------------------------------------- | | src | N | string | {url: string; type?: string; label?: string; size?: number;} | {url: string; type?: string; label?: string; size?: number;}[] &124; string[] | 查询/设置视频源 | | poster | N | string | 查询/设置封面图片 | | videoWidth | Y | number | 视频宽度 | | videoHeight | Y | number | 视频高度 | | currentTime | N | number | 查询/设置当前播放进度时长 | | duration | Y | number | 视频总时长 | | currentQuality | Y | number | 查询/设置多视频源当前视频索引位置 | | rate | N | number | 读取/设置播放速率，需传入预设播放速率[0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3]的索引，传入其他的值无效 | | muted | N | boolean | 查询/设置禁音状态 | | paused | Y | boolean | 查询视频是否处于暂停状态 | | isFullscreen | Y | boolean | 当前是否全屏 |

实例方法

快捷方法

将几个调用频率比较高的方法直接在播放器实例上进行暴露方便外部进行调用，其他的方法可以通过对应的模块调用

| 方法名 | 参数 | 返回值 | 描述 | | :---------------: | :----------------------------------------------------: | :----: | :----------------: | | play | - | - | 播放视频 | | pause | - | - | 暂停播放 | | requestFullscreen | - | - | 切换全屏 | | exitFullscreen | - | - | 取消全屏 | | destroy | - | - | 销毁播放器实例 | | on | name(事件名),callback(回调函数),once(只调用一次) | - | 绑定自定义事件监听 | | $on | name(事件名),callback(回调函数),once(只调用一次) | - | 绑定原生事件监听 |

事件

事件分为自定义事件与原生事件，原生事件指的是 video 元素在视频播放的各个生命周期抛出的相关事件，业务方可以监听这些事件做更精细化的操作。自定义事件是基于原生事件以及一些交互操作封装的事件逻辑，一般使用自定义事件就可以满足大多数的业务场景，部分自定义事件和原生事件重名但是返回参数不同。

自定义事件

| 事件名称 | 回调参数 | 描述 | | :--------------: | :---------------------------: | :-------------------------: | | ready | {id: 0} | 播放器初始化完成 | | play | - | 视频开始播放 | | pause | - | 视频暂停播放 | | seek | - | 通过点击拖拽进度条快进/快退 | | mutechange | {muted: false} | 禁音状态变化时触发 | | fullscreenchange | {fullscreen: true} | 全屏状态切换时触发 | | durationchange | {duration: 999} | 视频时长变化 | | qualitychange | {quality: 1, success: true} | 切换视频源是触发 | | fluencychange | {waiting: false} | 视频是否在加载缓冲 | | error | {message: ''} | 视频播放错误时触发 |

原生事件

由video元素直接触发的事件，包含的事件详情可以在MDN上进行查阅

enum NativeEvent {
	CANPLAY = 'canplay',
	CANPLAYTHROUGH = 'canplaythrough',
	COMPLETE = 'complete',
	DURATIONCHANGE = 'durationchange',
	EMPTIED = 'emptied',
	ENDED = 'ended',
	ERROR = 'error',
	LOADEDDATA = 'loadeddata',
	LOADEDMETADATA = 'loadedmetadata',
	LOADSTART = 'loadstart',
	PAUSE = 'pause',
	PLAY = 'play',
	PLAYING = 'playing',
	PROGRESS = 'progress',
	RATECHANGE = 'ratechange',
	SEEKED = 'seeked',
	SEEKING = 'seeking',
	STALLED = 'stalled',
	SUSPEND = 'suspend',
	TIMEUPDATE = 'timeupdate',
	VOLUMECHANGE = 'volumechange',
	WAITING = 'waiting',
	MOZAUDIOAVAILABLE = 'mozaudioavailable'
}

开发

1. Node 版本要求 18.x.x

2. 在项目目录下执行npm run dev后直接用浏览器打开demo目录下的的文件即可看到实际执行的效果，代码修改后刷新页面即可