DPlayer - 免费开源、轻量简洁的 HTML5 视频播放器，支持弹幕

myzbx 2024-12-30 05:30 85 浏览

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

HTML5 支持

上一篇：腾讯浏览服务TBS升级:支持零成本接入开放商业变现能力
下一篇：HTML5支持的视频文件格式和音频文件格式有哪些?

DPlayer - 免费开源、轻量简洁的 HTML5 视频播放器，支持弹幕

DPlayer 介绍

DPlayer 的技术特点

开发上手和使用体验

支持的功能

支持视频格式

安装使用

免费开源说明

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿