播放器 dplayer.js.org

安装

使用npm：

npm install dplayer --save

 

使用纱线：

yarn add dplayer

 

＃快速开始

首先，让我们初始化一个最简单的DPlayer

加载DPlayer文件

<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>

 

或与模块捆绑器一起使用：

import DPlayer from 'dplayer';

const dp = new DPlayer(options);

 

在js中初始化：

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    screenshot: true,
    video: {
        url: 'demo.mp4',
        pic: 'demo.jpg',
        thumbnails: 'thumbnails.jpg',
    },
    subtitle: {
        url: 'webvtt.vtt',
    },
    danmaku: {
        id: 'demo',
        api: 'https://api.prprpr.me/dplayer/',
    },
});

 

＃选项

您可以通过这些选项自定义播放器实例

名称	默认	描述
容器	document.querySelector（'。dplayer'）	播放器容器
居住	错误的	启用实时模式，请参阅#live
自动播放	错误的	视频自动播放
主题	'＃b7daff'	主色
环形	错误的	视频循环
郎	navigator.language.toLowerCase（）	值：“ en”，“ zh-cn”，“ zh-tw”
截屏	错误的	启用屏幕截图，如果为true，则视频和视频海报必须启用跨域
播放	真的	在Safari中启用airplay
热键	真的	启用热键，支持FF，FR，音量控制，播放和暂停
预载	'汽车'	值：“无”，“元数据”，“自动”
体积	0.7	默认音量，请注意播放器会记住用户设置，用户自己设置音量后默认音量将不起作用
播放速度	[0.5，0.75，1，1.25，1.5，2]	可选的播放速度，或者您可以设置自定义的播放速度
商标	--	在左上角显示徽标，您可以通过CSS调整其大小和位置
apiBackend	--	以您的方式获取和发送danmaku，请参阅#live
视频	--	影片资讯
视频质量	--	请参阅＃质量切换
video.defaultQuality	--	请参阅＃质量切换
video.url	--	影片网址
video.pic	--	视频海报
video.thumbnails	--	由DPlayer缩略图生成的视频缩略图（在新窗口中打开）
video.type	'汽车'	值：“ auto”，“ hls”，“ flv”，“ dash”，“ webtorrent”，“ normal”或其他自定义类型，请参见#MSE支持
video.customType	--	自定义视频类型，请参阅#MSE支持
字幕	--	外部字幕
subtitle.url	required	字幕网址
字幕类型	'webvtt'	字幕类型，值：“ webvtt”，“ ass”，但目前仅支持webvtt
subtitle.fontSize	'20px'	字幕字体大小
subtitle.bottom	'40px'	字幕与播放器底部之间的距离，其值如下：“ 10px”，“ 10％”
字幕颜色	'#fff'	字幕颜色
弹幕	--	显示弹幕
danmaku.id	required	danmaku池ID，它必须是唯一的
danmaku.api	required	参见#Danmaku API
danmaku.token	--	后端验证令牌
最大弹幕	--	弹幕最大数量
danmaku.addition	--	其他danmaku，请参阅#bilibili danmaku
danmaku.user	'DIYgod'	danmaku用户名
danmaku.bottom	--	值，例如：“ 10px”，“ 10％”，即弹幕底部和播放器底部之间的距离，以防止遮挡字幕
danmaku.unlimited	错误的	即使danmaku重叠也显示所有danmaku，请注意，播放器会记住用户设置，而用户自己设置后默认设置将不起作用
上下文菜单	[]	自定义上下文菜单
强调	[]	进度条上的自定义时间标记
互斥体	真的	防止同时播放多个玩家，在该玩家开始播放时暂停其他玩家

 

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: [
        {
            text: 'marker for 20s',
            time: 20,
        },
        {
            text: 'marker for 2mins',
            time: 120,
        },
    ],
});