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

DPlayer 介紹

DPlayer 是一款基于 JavaScript 的 HTML5 彈幕視頻播放器，用于在 web 開發中實現視頻播放的功能，可以讓開發者輕松在 web 應用中嵌入視頻。

DPlayer 的技術特點

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

開發上手和使用體驗

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

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

支持的功能

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

支持視頻格式

流媒體格式：

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

視頻文件格式：

• MP4 H.264
• WebM
• Ogg Theora Vorbis

安裝使用

以 npm 為例，以及在 Vue.js 項目中使用：

npm install dplayer --save

Vue 頁面中引入：

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

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

免費開源說明

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

↓↓點擊查看本次分享的網站。

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