介绍
medi 是一款用于在浏览器端管理多媒体资源的轻量级 JavaScript 库。这个库支持多个标签视频和音频播放，并且提供了一系列有用的控制事件。它可以很容易地扩展，支持自定义 UI 和插件，使你可以创建完全定制的播放器。medi 还支持自动播放，全屏等功能，是一个完美的解决方案，用于在 Web 开发中轻松集成多媒体。
安装
你可以使用 npm 安装 medi：
npm install --save medi
使用
基本用法
<div id="player-container"></div>
import medi from 'medi';
const media = medi('#player-container');
media.load({
src: 'video.mp4',
type: 'video'
});API
medi 的 API 非常简单，这里让我们了解常见的一些 API：
load：加载媒体资源。
media.load({
src: 'video.mp4',
type: 'video'
});unload：卸载当前媒体资源。
media.unload();
play：播放当前媒体。
media.play();
pause：暂停当前媒体。
media.pause();
seek：跳转至某个时间点。
media.seek(10); // 以秒为单位
setVolume：设置音量。
media.setVolume(0.5);
mute：设置静音。
media.mute();
unmute：取消静音。
media.unmute();
setPlaybackRate：设置播放速度。
media.setPlaybackRate(1.5);
getCurrentTime：获取当前时间。
const currentTime = media.getCurrentTime();
除了常用 API 之外，medi 还支持很多其他 API，例如 setSource、setPoster、toggleFullscreen 等等。
事件
medi 支持很多事件，这里让我们了解一下常见的一些事件：
canplay
可以开始播放后触发。这个事件通常用来更新用户界面中的时间表。
media.on('canplay', () => {
console.log('Can start playing media');
});play
当媒体开始播放时触发。这个事件通常用来更新用户界面中的播放按钮状态。
media.on('play', () => {
console.log('Media is playing');
});pause
当媒体暂停播放时触发。这个事件通常用来更新用户界面中的播放按钮状态。
media.on('pause', () => {
console.log('Media is paused');
});除此之外，medi 还支持其他事件，例如 timeupdate、ended、volumechange 等等。
示例
-- -------------------- ---- -------
------
------
-------
------
---- ----------------------------
------- --------------
------ ---- ---- -------
----- ----- - --------------------------
------------
---- ------------
----- -------
---
---------------- -- -- -
------------------ -- ----------
---
---------
-------
-------结论
用 medi 管理你的多媒体在 Web 开发中变得轻而易举。从现在开始，你可以轻松集成轮播图、影片库等等在内的多媒体资源。medi 简单易用，相信你一定会喜欢它！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580581e8991b448d528a
