开源的用于网页上的H5弹幕播放器组件——DPlayer

介绍

DPlayer是一款开源的基于浏览器的H5视频弹幕播放器,DPlayer是一个基于MIT开源协议的项目,完全免费使用,在Github上相当的受欢迎,目前已经拥有9.2k的stars,即将突破万星。而且顺便告诉大家,DPlayer是开发者的毕设作品,后经不断完善,也越来越强大!


开源的用于网页上的H5弹幕播放器组件——DPlayer

Github

https://github.com/MoePlayer/DPlayer

安装使用

  • 安装

使用 npm:

npm install dplayer --save

使用 Yarn:

yarn add 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'),    video: {        url: 'demo.mp4',    },});

一个最简单的 DPlayer 就初始化好了,它只有最基本的视频播放功能

丰富的参数

开源的用于网页上的H5弹幕播放器组件——DPlayer
开源的用于网页上的H5弹幕播放器组件——DPlayer
开源的用于网页上的H5弹幕播放器组件——DPlayer
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://***',        token: 'tokendemo',        maximum: 1000,        addition: ['https://***/bilibili?aid=4157142'],        user: 'DIYgod',        bottom: '15%',        unlimited: true,    },    contextmenu: [        {            text: 'custom1',            link: '***',        },        {            text: 'custom2',            click: (player) => {                console.log(player);            },        },    ],    highlight: [        {            time: 20,            text: '这是第 20 秒',        },        {            time: 120,            text: '这是 2 分钟',        },    ],});

弹幕接口

开源的用于网页上的H5弹幕播放器组件——DPlayer

弹幕接口可以使用现成的,也可以自己搭建

https://github.com/MoePlayer/DPlayer-node

直播使用

你可以把 DPlayer 用在直播当中,但如果你想要直播弹幕,你需要自己准备一个 WebSocket 后端。

初始化播放器:

const dp = new DPlayer({    container: document.getElementById('dplayer'),    live: true,    danmaku: true,    apiBackend: {        read: function (endpoint, callback) {            console.log('Pretend to connect WebSocket');            callback();        },        send: function (endpoint, danmakuData, callback) {            console.log('Pretend to send danmaku via WebSocket', danmakuData);            callback();        },    },    video: {        url: 'demo.m3u8',        type: 'hls',    },});

通过 WebSocket 获取到弹幕之后,通过 dp.danmaku.draw 绘制弹幕:

const danmaku = {    text: 'Get a danmaku via WebSocket',    color: '#fff',    type: 'right',};dp.danmaku.draw(danmaku);

总结

DPlayer是一个非常不错的播放器,支持的格式也非常丰富,还有非常实用的弹幕功能,爱折腾的小伙伴们可以折腾一下了,支持开发者,enjoy it!

版权声明:飞鱼 发表于 2020-07-19 11:51:08。
转载请注明:开源的用于网页上的H5弹幕播放器组件——DPlayer | HelloWorld.La

暂无评论

暂无评论...