DPlayer是一个视频播放器，封装很多实用的api，接下来我们就来聊聊关于html5音乐播放器管理?以下内容大家不妨参考一二希望能帮到您!

html5音乐播放器管理（前端开发-HTML5播放器DPlayer）

html5音乐播放器管理

介绍

DPlayer是一个视频播放器，封装很多实用的api

安装

使用 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 就初始化好了，它只有最基本的视频播放功能

参数

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

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 分钟', }, ], });

API事件绑定

dp.on(event, handler)

dp.on('ended', function () { console.log('player ended'); });

视频事件

播放器事件

清晰度切换

在 video.quality 里设置不同清晰度的视频链接和类型，video.defaultQuality 设置默认清晰度

Load demo

const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { quality: [ { name: 'HD', url: 'demo.m3u8', type: 'hls', }, { name: 'SD', url: 'demo.mp4', type: 'normal', }, ], defaultQuality: 0, pic: 'demo.png', thumbnails: 'thumbnails.jpg', }, });

弹幕接口

danmaku.api

现成的接口

链接: https://api.prprpr.me/dplayer/

每日备份: DPlayer-data(opens new window)

自己搭建

DPlayer-node(opens new window)

bilibili 弹幕

danmaku.addition

API: https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid](opens new window)

const option = { danmaku: { // ... addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=[aid]'], }, };

MSE 支持HLS

需要在 DPlayer.min.js 前面加载 hls.js (opens new window)。

Load demo

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

const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.m3u8', type: 'hls', }, pluginOptions: { hls: { // hls config }, }, }); console.log(dp.plugins.hls); // Hls 实例

// 另一种方式，使用 customType const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.m3u8', type: 'customHls', customType: { customHls: function (video, player) { const hls = new Hls(); hls.loadSource(video.src); hls.attachMedia(video); }, }, }, });

MPEG DASH

需要在 DPlayer.min.js 前面加载 dash.js (opens new window)。

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

const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.mpd', type: 'dash', }, pluginOptions: { dash: { // dash config }, }, }); console.log(dp.plugins.dash); // Dash 实例

// 另一种方式，使用 customType const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.mpd', type: 'customDash', customType: { customDash: function (video, player) { dashjs.MediaPlayer().create().initialize(video, video.src, false); }, }, }, });

MPEG DASH (Shaka)

需要在 DPlayer.min.js 前面加载 shaka-player.compiled.js (opens new window)。

<div id="dplayer"></div> <script src="shaka-player.compiled.js"></script> <script src="DPlayer.min.js"></script>

const dp = new DPlayer({ container: document.getElementById('dplayer'), screenshot: true, video: { url: 'demo.mpd', type: 'shakaDash', customType: { shakaDash: function (video, player) { var src = video.src; var playerShaka = new shaka.Player(video); // 将会修改 video.src playerShaka.load(src); }, }, }, });

FLV

需要在 DPlayer.min.js 前面加载 flv.js (opens new window)。

Load demo

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

const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.flv', type: 'flv', }, pluginOptions: { flv: { // refer to https://github.com/bilibili/flv.js/blob/master/docs/api.md#flvjscreateplayer mediaDataSource: { // mediaDataSource config }, config: { // config }, }, }, }); console.log(dp.plugins.flv); // flv 实例

// 另一种方式，使用 customType const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.flv', type: 'customFlv', customType: { customFlv: function (video, player) { const flvPlayer = flvjs.createPlayer({ type: 'flv', url: video.src, }); flvPlayer.attachMediaElement(video); flvPlayer.load(); }, }, }, });

WebTorrent

需要在 DPlayer.min.js 前面加载 webtorrent (opens new window)。

Load demo

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

const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'magnet:demo', type: 'webtorrent', }, pluginOptions: { webtorrent: { // webtorrent config }, }, }); console.log(dp.plugins.webtorrent); // WebTorrent 实例

// 另一种方式，使用 customType const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'magnet:demo', type: 'customWebTorrent', customType: { customWebTorrent: function (video, player) { player.container.classList.add('dplayer-loading'); const client = new WebTorrent(); const torrentId = video.src; client.add(torrentId, (torrent) => { const file = torrent.files.find((file) => file.name.endsWith('.mp4')); file.renderTo( video, { autoplay: player.options.autoplay, }, () => { player.container.classList.remove('dplayer-loading'); } ); }); }, }, }, });

配合其他 MSE 库使用

DPlayer 可以通过 customType 参数与任何 MSE 库一起使用，例如支持P2P插件：

<div id="dplayer"></div> <script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script> <script src="DPlayer.min.js"></script>

var type = 'normal'; if(Hls.isSupported() && Hls.WEBRTC_SUPPORT) { type = 'customHls'; } const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.m3u8', type: type, customType: { 'customHls': function (video, player) { const hls = new Hls({ debug: false, // Other hlsjsConfig options provided by hls.js p2pConfig: { live: false, // 如果是直播设为true // Other p2pConfig options provided by CDNBye http://www.cdnbye.com/cn/ } }); hls.loadSource(video.src); hls.attachMedia(video); } } }, });

直播

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

Load demo

初始化播放器:

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);

觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧

,