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

最新推荐文章于 2025-04-28 10:57:06 发布

Cloud_lengfeng

最新推荐文章于 2025-04-28 10:57:06 发布

阅读量1.2w

点赞数 5

分类专栏：前端文章标签：视频弹幕 Dplayer Html5 弹幕前端

本文链接：https://blog.youkuaiyun.com/Cloud_lengfeng/article/details/89534357

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本弹幕视频，通过 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{overflow:hidden;width:100%;height:10