这篇文章来介绍下Dplayer视频*放播**器
使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dplayer视频*放播**器</title>
<link rel="stylesheet" href="../css/dplayer/DPlayer.min.css"/>
<script type="text/javascript" src="../js/dplayer/DPlayer.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<style>
</style>
</head>
<body>
<div id="dplayer" class="dplayer" style="height: 600px;width:1000px;margin: 0 auto;">
</div>
<script type="text/javascript">
var dplayer = new DPlayer({
element: document.getElementById("dplayer"), //绑定节点
autoplay:true, //自动*放播**
theme:'#FADFA3', //主题
loop:true, //循环*放播**音乐
screenshot:true, //截屏
hotkey:true, //绑定热键
lang:'zh',//语言
preload: 'auto',//预加载
logo:'../images/gerenjianjie.jpg', //开机图片
video:{ //视频*放播**源
url:'https://pic.oh4k.com/spdiy/wp-content/uploads/2023/12/20231218-EAdNRn.mp4'
}
});
</script>
</body>
</html>
参数介绍
官方文档 https://dplayer.diygod.dev/zh/guide.html#special-thanks
DPlayer 有丰富的参数可以自定义你的*放播**器实例
|
名称 |
默认值 |
描述 |
|
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 |
false |
在 Safari 中开启 AirPlay |
|
chromecast |
false |
启用 Chromecast |
|
preload |
'auto' |
视频预加载，可选值: 'none', 'metadata', 'auto' |
|
volume |
0.7 |
默认音量，请注意*放播**器会记忆用户设置，用户手动设置音量后默认音量即失效 |
|
playbackSpeed |
[0.5, 0.75, 1, 1.25, 1.5, 2] |
可选的*放播**速率，可以设置成自定义的数组 |
|
logo |
- |
在左上角展示一个 logo，你可以通过 CSS 调整它的大小和位置 |
|
apiBackend |
- |
自定义获取和发送弹幕行为，见 #直播 |
|
preventClickToggle |
false |
阻止点击*放播**器时候自动切换*放播**/暂停 |
|
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 |
海量弹幕模式，即使重叠也展示全部弹幕，请注意*放播**器会记忆用户设置，用户手动设置后即失效 |
|
danmaku.speedRate |
1 |
弹幕速度倍率，越大速度越快 |
|
contextmenu |
[] |
自定义右键菜单 |
|
highlight |
[] |
自定义进度条提示点 |
|
mutex |
true |
互斥，阻止多个*放播**器同时*放播**，当前*放播**器*放播**时暂停其他*放播**器 |
其他相关事件可以查阅参考文档。