DPlayer - 免費(fèi)開源、輕量簡潔的 HTML5 視頻播放器，支持彈幕

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

DPlayer 介紹

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

DPlayer 官網(wǎng)

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

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

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

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

DPlayer 文檔

于是就花時(shí)間找了一下，發(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ī)端也可以使用。

DPlayer 參數(shù)列表

免費(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)的磚

是編程樂趣，一個10年.Net開發(fā)經(jīng)驗(yàn)老程序員，點(diǎn)擊右上方“關(guān)注”，每天為你分享開源項(xiàng)目和編程知識。

近日字節(jié)跳動更新了開源項(xiàng)目：HTML5西瓜播放器，官方稱該播放器采用“組件化原則”構(gòu)建，因此具有相對更佳的擴(kuò)展性與輕量性。

項(xiàng)目簡介

西瓜播放器是一個功能強(qiáng)大的Web視頻播放器，由西瓜視頻技術(shù)團(tuán)隊(duì)官方出品。是一個基于HTML5技術(shù)的播放器。

還支持同一套UI的音樂播放器，歌詞同步滾動播放。

支持功能：倍速播放、清晰度選擇、彈幕、視頻旋轉(zhuǎn)、進(jìn)度條標(biāo)記、預(yù)覽、截圖、視頻下載、畫中畫、外掛字幕、鍵盤快捷鍵、微信移動配置等。

項(xiàng)目特點(diǎn)

1、支持多種視頻格式：支持在網(wǎng)頁上播放各種格式的視頻文件，包括MP4、HLS、FLV、MPEG-DASH等，能夠自動識別各種格式的視頻文件；

2、強(qiáng)大的播放能力：支持分段加載、清晰度無縫切換、帶寬節(jié)省等功能，能夠根據(jù)用戶的網(wǎng)絡(luò)狀況和設(shè)備性能，優(yōu)化視頻的加載和播放速度，提供流暢、高品質(zhì)的視頻體驗(yàn)。

3、靈活的插件體系：采用靈活的插件體系設(shè)計(jì)，支持通過插件擴(kuò)展功能。開發(fā)者可以自定義插件，滿足特定的需求，如字幕插件、播放控制插件等。

4、良好的用戶體驗(yàn)：提供了多種交互方式和界面效果。用戶可以通過鼠標(biāo)控制播放器的控制欄，實(shí)現(xiàn)播放、暫停、音量調(diào)節(jié)等操作。

5、詳細(xì)的文檔：官網(wǎng)有著詳細(xì)配置、API、插件等功能使用的文檔，方便開發(fā)者使用。

使用方法

1、npm方式

2、cdn方式

在線配置

項(xiàng)目地址

https://github.com/bytedance/xgplayer

https://gitee.com/ByteDance/xgplayer

我是編程樂趣，一個10年.Net開發(fā)經(jīng)驗(yàn)老程序員，專注開源項(xiàng)目和編程知識分享。
私信回復(fù)：【888】，領(lǐng)取.Net視頻教程。

- End -

推薦閱讀

.Net開發(fā)的音頻分離桌面應(yīng)用，可用于提取背景音樂

一個.Net功能強(qiáng)大、易于使用、跨平臺開源可視化圖表

一個.Net開發(fā)的功能強(qiáng)大、易于使用的流媒體服務(wù)器和管理系統(tǒng)

最新版2023年Asp.Net學(xué)習(xí)路線圖，助你成為合格程序員！

一個.Net Core開發(fā)的開源動態(tài)壁紙軟件

環(huán)球網(wǎng)科技綜合報(bào)道】日前，字節(jié)跳動在 Gitee 及 GitHub 中開源了一款名為 " 西瓜播放器 " 的 HTML 5 播放器，官方稱該播放器采用“組件化原則 ”構(gòu)建，因此具有相對更佳的擴(kuò)展性與輕量性。

官方表示，西瓜播放器是一個 Web 視頻播放器類庫，它本著一切都是組件化的原則設(shè)計(jì)了獨(dú)立可拆卸的 UI 組件。其獨(dú)特性在于，該播放器不只是在 UI 層有靈活的表現(xiàn)，在功能上也做了大膽的嘗試，擺脫視頻加載、緩沖、格式支持對 video 的依賴。尤其是在 mp4 點(diǎn)播上做了較大的努力，讓本不支持流式播放的 mp4 能做到分段加載，這就意味著可以做到清晰度無縫切換、加載控制、節(jié)省視頻流量。

同時(shí)，它也集成了對 flv、hls、dash 的點(diǎn)播和直播支持。

字節(jié)跳動同時(shí)表示，百度、網(wǎng)易、中國移動、轉(zhuǎn)轉(zhuǎn)、、抖音、西瓜視頻等超過 200 家網(wǎng)站均使用該播放器。字節(jié)跳動開源 HTML5 西瓜播放器。

在線咨詢

上一篇：10年前一個程序員想寫個網(wǎng)站
下一篇：十款好用的HTML生成工具推薦，幫你高效完成開發(fā)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商