開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個開源的 HTML5 視頻播放器插件——MuiPlayer。

MuiPlayer 是一個開源的HTML5視頻播放插件，其默認(rèn)配置了精美可操作的的播放控件，涉及了常用的播放場景，例如全屏播放、播放快進(jìn)、循環(huán)播放、音量調(diào)節(jié)等功能。支持 mp4、m3u8、flv 等多種媒體格式播放，解決大部分兼容問題，同時適應(yīng)在PC、手機(jī)端播放。

特點(diǎn)

• 各瀏覽器平臺播放 ui 不能統(tǒng)一
• ui 擴(kuò)展之間以及狀態(tài)處理容易產(chǎn)生沖突
• 在不同環(huán)境下（android、ios、pc）針對 h5 video api 可能觸發(fā)事件的時機(jī)盡不相同
• 媒體格式存在各種兼容問題，muiplayer 處理了大多數(shù)在不同環(huán)境下播放的兼容問題
• 具有豐富的參數(shù)可以自定義播放器實(shí)例，通過輕松的配置即可完成自定義場景的視頻播放

快速開始

• 安裝

使用 npm 安裝：

npm i mui-player --save

使用 yarn 安裝：

yarn add mui-player

• 使用

1 使用 script 標(biāo)簽引入：

<!-- 引入基礎(chǔ)樣式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基礎(chǔ)腳本 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 初始化構(gòu)建播放器

// 初始化 MuiPlayer 插件，MuiPlayer 方法傳遞一個對象，該對象包括所有插件的配置
var mp = new MuiPlayer({
    container:'#mui-player',
    title:'標(biāo)題',
    src:'./static/media/media.mp4',
})

以上就能為初始化構(gòu)建一個具有默認(rèn)配置控件的視頻播放器。

更多API基礎(chǔ)配置： https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE

效果演示

• 基礎(chǔ)效果

• 直播模式

• 播放字幕

• 播放彈幕

• 多窗口播放

更多內(nèi)容大家可自行前往閱讀。

開源地址：https://gitee.com/muiplayer/hello-muiplayer

近我在使用的一款簡單容易集成的 web 視頻播放組件，支持播放 B站彈幕。

DPlayer 介紹

DPlayer 是一款基于 JavaScript 的 HTML5 彈幕視頻播放器，用于在 web 開發(fā)中實(shí)現(xiàn)視頻播放的功能，可以讓開發(fā)者輕松在 web 應(yīng)用中嵌入視頻。

DPlayer 的技術(shù)特點(diǎn)

• 輕量簡潔的界面，集成使用非常簡單；
• 功能強(qiáng)大，支持主流的視頻格式，同時也支持彈幕播放，能夠輕松接入B站彈幕；
• 支持直播模式，也支持用戶實(shí)時彈幕互動；
• 完整支持視頻截圖、倍速播放、清晰度切換等主流視頻播放功能。

開發(fā)上手和使用體驗(yàn)

現(xiàn)在以視頻作為傳播媒體的內(nèi)容仍然處在一個非常火熱的發(fā)展階段，不知道常來我網(wǎng)站逛的各位開發(fā)者有沒有遇到要在項(xiàng)目中集成視頻播放的需求，我之前也用過 Tiny Player 這款小巧的播放器，不過支持的功能比較單一；而強(qiáng)大一點(diǎn)的 xgplayer 不支持彈幕，而這次需求要支持彈幕，無法滿足需求。

于是就花時間找了一下，發(fā)現(xiàn)了 DPlayer 這款播放器非常合適，于是順便寫一篇文章來推薦給大家。

支持的功能

• 顯示彈幕
• 視頻截圖
• 快捷鍵
• 清晰度切換
• 進(jìn)度縮略圖
• 加載字幕

支持視頻格式

流媒體格式：

• HLS
• FLV
• MPEG DASH
• WebTorrent
• 以及其他任何自定義的格式

視頻文件格式：

• MP4 H.264
• WebM
• Ogg Theora Vorbis

安裝使用

以 npm 為例，以及在 Vue.js 項(xiàng)目中使用：

npm install dplayer --save

Vue 頁面中引入：

<template>
  <div id="video"></div>
</template>
<script>
import DPlayer from 'dplayer';
// ... 省略無關(guān)代碼，初始化播放器
const dp = new DPlayer({
    container: document.getElementById('video'),
    video: {
        url: 'https:///xxx.xxxx.mp4', // 視頻地址
    },
});
</script>

這就完成一個基礎(chǔ)播放器了，非常簡單。當(dāng)然 DPlayer 支持的功能也很多，官網(wǎng)提供了中文文檔，寫得很詳細(xì)，并且都配套了代碼例子，這里就不做過多示例了，在簡單理解視頻播放原理的前提下，幾乎不需要學(xué)習(xí)就能輕松集成到項(xiàng)目中，親測在手機(jī)端也可以使用。

免費(fèi)開源說明

DPlayer 是一個免費(fèi)開源的 HTML5 視頻播放器，由來自國內(nèi)的開發(fā)者 DIYgod 開發(fā)，項(xiàng)目采用 MIT 開源協(xié)議，源碼托管在 Github 上，任何人都可以免費(fèi)下載來使用和修改，也能用于商業(yè)項(xiàng)目中。

↓↓點(diǎn)擊查看本次分享的網(wǎng)站。

DPlayer - 免費(fèi)開源、輕量簡潔的 HTML5 視頻播放器，支持彈幕播放、清晰度切換、倍速播放｜那些免費(fèi)的磚

eb項(xiàng)目開發(fā)中視頻播放是一個非常常見的需求，需要播放器能夠支持pc端和移動端的使用，并且支持常見的視頻格式。我們從github上精選了5款優(yōu)秀的Html5 播放器插件分享給大家。（排名不分先后）

1. Ckplayer

ckplayer是一款在網(wǎng)頁上播放視頻的開源軟件，主要特點(diǎn)是：開源，功能強(qiáng)大，不依賴其它插件，二次開發(fā)方便。

ckplayer基于MIT協(xié)議開源。

當(dāng)家官網(wǎng)最新版本是X2，更新時間：2020.09.20。

軟件下載后，使用到的文件如下：

一般項(xiàng)目只用到ckplayer.min.js 、ckplayer.swf、language.json、sytle.json 總大小不超過700k。

ckplayer 支持flv、mp4、m3u8、webm等。

功能上常用的播放控制、彈幕、貼片廣告都支持。

2、 Media-element.js

HTML5<audio>或<video>播放器，支持MP4、WebM和MP3，以及HLS、Dash、YouTube、Facebook、SoundCloud和其他具有通用HTML5 MediaElement API的播放器，在所有瀏覽器中實(shí)現(xiàn)一致的UI。

支持視頻和音頻播放，主要強(qiáng)調(diào)在多終端上的界面一致性。

最新版本4.2.17，更新日期：2021-7-6

使用基本功能只需要mediaelement-and-player.min.js、renderers/vimeo.min.js、renderers/twitch.min.js，大小在300k左右，非常小巧。

重點(diǎn)：提供插件機(jī)制，通過插件可以實(shí)現(xiàn)常見的播放列表、AirPlay、位置標(biāo)記、視頻預(yù)覽等功能。

3、 VideoJs

開源HTML5和Flash視頻播放器。目前多很大廠在使用。官網(wǎng)宣稱世界上最流行的開源html5播放器。

支持的視頻格式有：mp4，webm，ogv。

最新版本7.14.3, 更新時間：2021-7-27

文件大小約：700k。

4、 Dplayer

非常可愛的html5 彈幕視頻播放器。主打彈幕功能，支持MP4、HLS、FLV、WebTorrent播放，提供彈幕接口。

國人開發(fā)，有中文文檔。國內(nèi)很多公司在用。

最新版本v1.26.0 更新日期：2020-6-11

基本功能使用文件大小161k. 另外也提供了很多插件供使用。

5、 Xgplayer

西瓜視頻播放器（HTML5）、一款帶解析器、能節(jié)省流量的HTML5視頻播放器。字節(jié)跳動提供的開源視頻播放器。

• PC Web端支持直接播放mp4視頻，播放HLS、FLV、MPEG-DASH需要瀏覽器支持Media Source Extensions
• iOS系統(tǒng)Web場景支持直接播放mp4和HLS，不支持播放FLV、MPEG-DASH
• 安卓系統(tǒng)Web場景支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要瀏覽器支持Media Source Extensions

中文文檔寫得很非常全面。支持airplay、彈幕等功能。

支持視頻、音頻播放。基于插件機(jī)制，提供了豐富的插件來擴(kuò)展播放器的功能。官網(wǎng)提供在線生成器來簡化各種參數(shù)的配置，如下圖：

推薦使用。

今天為大寫整理了5個優(yōu)秀的開源視頻播放器的內(nèi)容，后期會再更新各個播放器的詳細(xì)使用并進(jìn)行詳細(xì)的評測，謝謝大家。