近我在使用的一款简单容易集成的 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 视频播放器，支持弹幕播放、清晰度切换、倍速播放｜那些免费的砖

是编程乐趣，一个10年.Net开发经验老程序员，点击右上方“关注”，每天为你分享开源项目和编程知识。

近日字节跳动更新了开源项目：HTML5西瓜播放器，官方称该播放器采用“组件化原则”构建，因此具有相对更佳的扩展性与轻量性。

项目简介

西瓜播放器是一个功能强大的Web视频播放器，由西瓜视频技术团队官方出品。是一个基于HTML5技术的播放器。

还支持同一套UI的音乐播放器，歌词同步滚动播放。

支持功能：倍速播放、清晰度选择、弹幕、视频旋转、进度条标记、预览、截图、视频下载、画中画、外挂字幕、键盘快捷键、微信移动配置等。

项目特点

1、支持多种视频格式：支持在网页上播放各种格式的视频文件，包括MP4、HLS、FLV、MPEG-DASH等，能够自动识别各种格式的视频文件；

2、强大的播放能力：支持分段加载、清晰度无缝切换、带宽节省等功能，能够根据用户的网络状况和设备性能，优化视频的加载和播放速度，提供流畅、高品质的视频体验。

3、灵活的插件体系：采用灵活的插件体系设计，支持通过插件扩展功能。开发者可以自定义插件，满足特定的需求，如字幕插件、播放控制插件等。

4、良好的用户体验：提供了多种交互方式和界面效果。用户可以通过鼠标控制播放器的控制栏，实现播放、暂停、音量调节等操作。

5、详细的文档：官网有着详细配置、API、插件等功能使用的文档，方便开发者使用。

使用方法

1、npm方式

2、cdn方式

在线配置

项目地址

https://github.com/bytedance/xgplayer

https://gitee.com/ByteDance/xgplayer

我是编程乐趣，一个10年.Net开发经验老程序员，专注开源项目和编程知识分享。

私信回复：【888】，领取.Net视频教程。

- End -

推荐阅读

.Net开发的音频分离桌面应用，可用于提取背景音乐

一个.Net功能强大、易于使用、跨平台开源可视化图表

一个.Net开发的功能强大、易于使用的流媒体服务器和管理系统

最新版2023年Asp.Net学习路线图，助你成为合格程序员！

一个.Net Core开发的开源动态壁纸软件

环球网科技综合报道】日前，字节跳动在 Gitee 及 GitHub 中开源了一款名为 " 西瓜播放器 " 的 HTML 5 播放器，官方称该播放器采用“组件化原则 ”构建，因此具有相对更佳的扩展性与轻量性。

官方表示，西瓜播放器是一个 Web 视频播放器类库，它本着一切都是组件化的原则设计了独立可拆卸的 UI 组件。其独特性在于，该播放器不只是在 UI 层有灵活的表现，在功能上也做了大胆的尝试，摆脱视频加载、缓冲、格式支持对 video 的依赖。尤其是在 mp4 点播上做了较大的努力，让本不支持流式播放的 mp4 能做到分段加载，这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。

同时，它也集成了对 flv、hls、dash 的点播和直播支持。

字节跳动同时表示，百度、网易、中国移动、转转、、抖音、西瓜视频等超过 200 家网站均使用该播放器。字节跳动开源 HTML5 西瓜播放器。