DPlayer – H5视频播放器支持弹幕

2018年07月15日 16:11helloweba.net 作者:月光光 标签:HTML5  网页播放器 

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku,支持HLS,FLV,MPEG DASH,WebTorrent以及其他视频格式,支持截屏、热键、切换清晰度以及字幕等。

安装

使用 npm:

npm install dplayer --save

使用 Yarn:

yarn add dplayer

入门

先载入所需文件:

<link rel="stylesheet" href="DPlayer.min.css">
<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>

调用:

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/'
    }
});

或者使用模块管理器:

import 'DPlayer/dist/DPlayer.min.css';
import DPlayer from 'DPlayer';

const dp = new DPlayer(options);

参数

名称 默认值 描述
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 开启热键
preload 'auto' 预加载,可选值: 'none', 'metadata', 'auto'
volume 0.7 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
logo - 在左上角展示一个 logo,你可以通过 CSS 调整它的大小和位置
apiBackend - 自定义获取和发送弹幕行为,详情
video - 视频信息
video.url - 视频链接
video.pic - 视频封面
video.thumbnails - 视频缩略图,可以使用 DPlayer-thumbnails 生成
video.type 'auto' 可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型
video.customType - 自定义类型
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 - 额外外挂弹幕
danmaku.user 'DIYgod' 弹幕用户名
danmaku.bottom - 弹幕距离播放器底部的距离,防止遮挡字幕,取值形如: '10px' '10%'
danmaku.unlimited false 海量弹幕模式,即使重叠也展示全部弹幕,请注意播放器会记忆用户设置,用户手动设置后即失效
contextmenu [] 自定义右键菜单
mutex true 互斥,阻止多个播放器同时播放,当前播放器播放时暂停其他播放器

示例:

const dp = new DPlayer({
    container: document.getElementById('player'),
    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/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);
            }
        }
    ]
});

API

dp.play():播放视频

dp.pause():暂停视频

dp.seek(time: number):跳转到特定时间

dp.toggle():切换播放和暂停

dp.on(event: string, handler: function):绑定视频和播放器事件

dp.switchVideo(video, danmaku):切换到其他视频

dp.notice(text: string, time: number):显示通知,时间的单位为毫秒,默认时间2000毫秒,默认透明度0.8

dp.switchQuality(index: number):切换清晰度

dp.destroy():销毁播放器

dp.speed(rate: number):设置视频速度

dp.volume(percentage: number, nostorage: boolean, nonotice: boolean):设置视频音量

dp.video:原生 video

----dp.video.currentTime:返回视频当前播放时间

----dp.video.duration:返回视频总时间

----dp.video.paused:返回视频是否暂停

事件绑定

dp.on(event, handler)

play:DPlayer 开始播放时触发

pause:DPlayer 暂停时触发

canplay:在有足够的数据可以播放时触发

playing:DPlayer 播放时定期触发

ended:DPlayer 结束时触发

error:发生错误时触发

DPlayer对hls和flv格式的支持需要相应的插件。

更多有关DPlayer的使用请参考项目官网:https://github.com/MoePlayer/DPlayer

0条评论