Dplayer Html5 弹幕视频播放器的实现

最新推荐文章于 2025-11-10 09:32:25 发布

原创

最新推荐文章于 2025-11-10 09:32:25 发布 · 1.3w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#视频弹幕 #Dplayer #Html5 #弹幕 #前端

本文介绍了如何使用Dplayer构建一个Html5弹幕视频播放器。通过引用Dplayer的CSS和JS文件，结合Dplayer的初始化API，轻松实现弹幕功能。虽然可以直接使用公共API接口，但也可以根据需求自建弹幕接口。此外，还提及了视频记忆功能的实现，允许从数据库读取播放时间以实现上次观看位置的续播。

本弹幕视频，通过 Html5 Dplayer实现。

Dplayer官网：http://dplayer.js.org/#/

Dplayer文档：http://dplayer.js.org/#/zh-Hans/

Dplayer GitHub：https://github.com/MoePlayer/DPlayer

先看效果图

一、下载Dplayer相关文件

就是Dplayer GitHub下载。。。

二、前台页面

html页面中引用下载完的Dplayer中的css和js

<link rel="stylesheet" href="__PUBLIC__/assets/css/DPlayer.min.css">
<script src="__PUBLIC__/assets/js/DPlayer.min.js"></script>

这个是我自己的css样式，可以参考改一下，让视频精简一点。


<style>
    .basicinfo {
        margin: 15px 0;
    }
    .basicinfo .row > .col-xs-4 {
        padding-right: 0;
    }
    .basicinfo .row > div {
        margin: 5px 0;
    }
    .Dplayer_box{overfl