在前端开发中，音频和视频播放是常见的功能之一。而 MediaElement.js 是一个高度可定制的 HTML5 媒体播放器，支持多种格式和浏览器，并提供了丰富的 API 和事件接口，使得可以轻松地自定义播放器的各种配置和交互。
本文将介绍如何使用 npm 包 mediaelement 来实现音频和视频的播放功能，并讲解一些常用的 API 和事件接口。
安装
首先，在你的项目中安装 mediaelement：
npm install mediaelement
然后，引入 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="/node_modules/mediaelement/build/mediaelementplayer.css"> <script src="/node_modules/mediaelement/build/mediaelement-and-player.js"></script>
初始化
要使用 MediaElement.js 播放器，需要创建一个 HTML 元素作为播放器容器，并传递一些配置选项。下面是一个基本的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ---------------------------------------------------------------
-------
------
------ ------------- -------- -------------- ----------- -------------
------- ------------------ -----------------
------- ------------------- ------------------
--------
------- ---------------------------------------------------------------------------
--------
--- ------ - --- ------------------------------- -
-- ----
---
---------
-------
-------在上面的示例中，使用 <video> 元素作为播放器容器，并传递了一些配置选项给 MediaElementPlayer 构造函数。其中，#my-video 参数是指定播放器容器的 CSS 选择器。
配置选项
以下是常用的一些配置选项：
features: 指定要显示的控件，如"playpause, progress, current, duration, tracks, volume, fullscreen"等。alwaysShowControls: 是否始终显示控件，默认为false。startVolume: 初始音量大小，取值范围为0至1。loop: 是否循环播放，默认为false。autoplay: 是否自动播放，默认为false。preload: 预加载方式，可选值有"none","metadata","auto"，默认为"none"。
更多配置选项可以在 文档 中查看。
API 和事件接口
除了常见的播放、暂停、快进等操作外，MediaElement.js 还提供了丰富的 API 和事件接口，使得我们可以更灵活地控制媒体播放器的行为。
API
play(): 播放媒体。pause(): 暂停媒体。load(): 加载媒体。setSrc(url): 设置媒体 URL。setPoster(url): 设置封面图片 URL。setCurrentTime(time): 设置当前播放时间，单位为秒。setVolume(volume): 设置音量大小（0 到 1）。setMuted(mute): 设置是否静音。enterFullScreen(): 进入全屏模式。exitFullScreen(): 退出全屏模式。
事件接口
play: 播放事件。pause: 暂停事件。ended: 播放结束事件。timeupdate: 播放进度更新事件。volumechange: 音量变化事件。fullscreenchange: 全屏状态变化事件。
例如，下面的示例代码演示了
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32800
