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

DPlayer 介紹

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

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

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

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

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

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

支持的功能

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

支持視頻格式

流媒體格式：

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

視頻文件格式：

• MP4 H.264
• WebM
• Ogg Theora Vorbis

安裝使用

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

npm install dplayer --save

Vue 頁(yè)面中引入：

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

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

免費(fèi)開(kāi)源說(shuō)明

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

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

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

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

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

項(xiàng)目簡(jiǎn)介

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

還支持同一套UI的音樂(lè)播放器，歌詞同步滾動(dòng)播放。

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

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

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

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

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

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

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

使用方法

1、npm方式

2、cdn方式

在線(xiàn)配置

項(xiàng)目地址

https://github.com/bytedance/xgplayer

https://gitee.com/ByteDance/xgplayer

我是編程樂(lè)趣，一個(gè)10年.Net開(kāi)發(fā)經(jīng)驗(yàn)老程序員，專(zhuān)注開(kāi)源項(xiàng)目和編程知識(shí)分享。

私信回復(fù)：【888】，領(lǐng)取.Net視頻教程。

- End -

推薦閱讀

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

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

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

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

一個(gè).Net Core開(kāi)發(fā)的開(kāi)源動(dòng)態(tài)壁紙軟件

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

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

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

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