《開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一個開源的 html5 視頻播放器插件——MuiPlayer。
MuiPlayer 是一個開源的HTML5視頻播放插件，其默認配置了精美可操作的的播放控件，涉及了常用的播放場景，例如全屏播放、播放快進、循環播放、音量調節等功能。支持 mp4、m3u8、flv 等多種媒體格式播放，解決大部分兼容問題，同時適應在PC、手機端播放。
特點
- 各瀏覽器平臺播放 ui 不能統一
- ui 擴展之間以及狀態處理容易產生沖突
- 在不同環境下（Android、IOS、pc）針對 h5 video api 可能觸發事件的時機盡不相同
- 媒體格式存在各種兼容問題，muiplayer 處理了大多數在不同環境下播放的兼容問題
- 具有豐富的參數可以自定義播放器實例，通過輕松的配置即可完成自定義場景的視頻播放
快速開始
- 安裝
使用 npm 安裝：
npm i mui-player --save
使用 yarn 安裝：
yarn add mui-player
- 使用
1 使用 script 標簽引入：
<!-- 引入基礎樣式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>
<!-- 引入基礎腳本 mui-player.min.js -->
<script type="text/JAVAscript" src="js/mui-player.min.js"></script>
<!-- 指定播放器容器 -->
<div id="mui-player"></div>
或者使用模塊管理器引入：
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
2 定義播放器容器
<div id="mui-player"></div>
3 初始化構建播放器
// 初始化 MuiPlayer 插件，MuiPlayer 方法傳遞一個對象，該對象包括所有插件的配置
var mp = new MuiPlayer({
container:'#mui-player',
title:'標題',
src:'./static/media/media.mp4',
})
以上就能為初始化構建一個具有默認配置控件的視頻播放器。
更多API基礎配置：
https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE
效果演示
- 基礎效果
- 直播模式
- 播放字幕
- 播放彈幕
- 多窗口播放
更多內容大家可自行前往閱讀。
開源地址：https://gitee.com/muiplayer/hello-muiplayer
