DPlayer视频播放器使用方法

最新推荐文章于 2026-04-19 09:56:51 发布

原创

最新推荐文章于 2026-04-19 09:56:51 发布 · 1.1w 阅读

收录于

本文介绍如何在Web页面中嵌入DPlayer视频播放器，包括加载库文件、初始化视频、事件监听等步骤，并演示了如何实现弹幕、HLS及FLV格式的支持。

最近在项目开发中需要在Web页面中嵌入视频播放器，并且通过监听一些事件来记录访问者对于视频的一些操作，在此记录使用方法，方便查询使用

1、在页面中加载库文件
 
<link rel="stylesheet" href="./assets/lib/dplayer/dist/DPlayer.min.css"/>   //视频播放器对应样式文件
<script src="../assets/lib/dplayer/dist/DPlayer.min.js"></script>

2、创建HTML
 
<div id="dplayer"></div>

3、初始化视频var dplayer = new DPlayer({
    element: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: false,
    screenshot: true, //截屏
    hotkey: false,
    logo: '/public/assets/images/server/favicon.ico',
    video: {  //视频源 包含不同分辨率源
        quality: [{
            name: '普清',
            url: url1
        },{
            name: '高清',
            url: url2
        }, {
            name: '超清',
            url: url3
        }],
        defaultQuality: 0,
        pic: '',
        type: 'auto'
    }
});
 
4、事件：
　　play,  播放