下载鸥 > 网站下载 > 插件下载 > JS/JQuery

dplayer.js视频播放器下载

13792021-05-28 00:56:35

收藏
dplayer.js视频播放器下载
dplayer.js是一款十分好用的web视频播放器,不仅功能强大、支持手机端,而且可以自定义logo。相对于一些强制放logo广告的播放器而言,可以说是非常好用了。

dplayer.js视频播放器下载
 

dplayer.js用法

以下代码包含dplayer.js容器、相关文件引用与调用,建议全部复制,只可修改不要随意删除,否则可能导致dplayer播放器无效。
<!--html部分-->
<div id="dplayer"></div>

<!--核心文件引入部分-->
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>

<!--调用部分-->
<script>
    const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#999',
    loop: true,
    lang: 'zh-cn',
    hotkey: true,
    preload: 'auto',
    logo: '这里是logo路径,支持写入绝对路径',
    volume: 0.6,
    mutex: true,
    video: {
        url: '<?=$trueurl?>',
        type: 'hls',
    },
    highlight: [
        {
            time: 20,
            text: '这是第 20 秒',
        },
        {
            time: 120,
            text: '这是 2 分钟',
        },
    ],
});
 </script>
 

dplayer.js参数

名称 默认值 描述
container document.querySelector('.dplayer') 播放器容器元素
live false 开启直播模式, 见#直播
autoplay false 视频自动播放
theme '#b7daff' 主题色
loop false 视频循环播放
lang navigator.language.toLowerCase() 可选值: 'en', 'zh-cn', 'zh-tw'
screenshot false 开启截图,如果开启,视频和视频封面需要允许跨域
hotkey true 开启热键,支持快进、快退、音量控制、播放暂停
airplay true 在 Safari 中开启 AirPlay
preload 'auto' 视频预加载,可选值: 'none', 'metadata', 'auto'
volume 0.7 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
playbackSpeed [0.5, 0.75, 1, 1.25, 1.5, 2] 可选的播放速率,可以设置成自定义的数组
logo - 在左上角展示一个 logo,你可以通过 CSS 调整它的大小和位置
apiBackend - 自定义获取和发送弹幕行为,见#直播
video - 视频信息
video.quality - #清晰度切换
video.defaultQuality - #清晰度切换
video.url - 视频链接
video.pic - 视频封面
video.thumbnails - 视频缩略图,可以使用 DPlayer-thumbnails (opens new window)生成
video.type 'auto' 可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, 见#MSE 支持
video.customType - 自定义类型, 见#MSE 支持
subtitle - 外挂字幕
subtitle.url required 字幕链接
subtitle.type 'webvtt' 字幕类型,可选值: 'webvtt', 'ass',目前只支持 webvtt
subtitle.fontSize '20px' 字幕字号
subtitle.bottom '40px' 字幕距离播放器底部的距离,取值形如: '10px' '10%'
subtitle.color '#fff' 字幕颜色
danmaku - 显示弹幕
danmaku.id required 弹幕池 id,必须唯一
danmaku.api required #弹幕接口
danmaku.token - 弹幕后端验证 token
danmaku.maximum - 弹幕最大数量
danmaku.addition - 额外外挂弹幕,见#bilibili 弹幕
danmaku.user 'DIYgod' 弹幕用户名
danmaku.bottom - 弹幕距离播放器底部的距离,防止遮挡字幕,取值形如: '10px' '10%'
danmaku.unlimited false 海量弹幕模式,即使重叠也展示全部弹幕,请注意播放器会记忆用户设置,用户手动设置后即失效
contextmenu [] 自定义右键菜单
highlight [] 自定义进度条提示点
mutex true 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    lang: 'zh-cn',
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    logo: 'logo.png',
    volume: 0.7,
    mutex: true,
    video: {
        url: 'dplayer.mp4',
        pic: 'dplayer.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto',
    },
    subtitle: {
        url: 'dplayer.vtt',
        type: 'webvtt',
        fontSize: '25px',
        bottom: '10%',
        color: '#b7daff',
    },
    danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true,
    },
    contextmenu: [
        {
            text: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer',
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            },
        },
    ],
    highlight: [
        {
            time: 20,
            text: '这是第 20 秒',
        },
        {
            time: 120,
            text: '这是 2 分钟',
        },
    ],
});
查看更多参数可访问本链接:http://dplayer.js.org/zh/guide.html#参数
 

下载文件附注

由于dplayer托管在GitHub很不稳定,只能暂时放出自己在用的dplayer.js文件供下载(不是正儿八经的官方完整版,但确定可用)。如果你没被墙,可点击右侧官网链接进入GitHub下载页面。
郑重承诺

dplayer.js视频播放器插件为官方正版,下载鸥未增删过任意一个字节,请放心下载。

下载地址 立即下载 导出教程
发表评论 共有条评论
插件下载分类

插件信息

  • 分类JS/JQuery
  • 编号No.18-64
  • 价格免费
  • 编码UTF-8
  • 官网下载 前往官网
推荐JS/JQuery插件下载
最新JS/JQuery插件下载
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入