今天推荐一款超大html5视频播放器插件DPlayer，带弹幕。
dplayer一款开源的高品质H5视频播放器，其星高达9.5K+。作者是95后大四学生。支持弹幕、哔哩哔哩视频、实时视频(HLS M3U8 FLV)等格式。
安装
$ npm install dplayer --save
也可以由最新版本的DP player1 . 26 . 0cdn引入
https://***.bootcdn.cn/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有丰富的参数来定制你的播放器实例。详细配置如下:
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', }, dan***ku: { id: '9E2E3368B56CDBB4', api: 'https://api.prprpr.me/dplayer/', token: 'tokendemo', ***ximum: 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 分钟', }, ],});
清晰度开关
在video.quality中设置具有不同定义的视频链接和类型，并在video.defaultQuality中设置默认定义
const DP = new DP player({ container:document . getelementbyid(' DP player ')，视频:{ quality:[{ name: 'HD '，url: 'demo.m3u8 '，type: 'hls '，}，{ name: 'SD '，url: 'demo.mp4 '，type: 'nor***l '，}，]，defaultQuality: 0，pic: 'demo.png '，thumbnails: 'thumbnails.jpg '，}，})；HLS支持
Hls.js需要在DPlayer.min.js之前加载
<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 实例
提供丰富的文档支持和样本演示。
附上项目文档及地址附上项目文件和地址。
# 文档地址http://dplayer.js.org/zh/# 仓库地址https://github.com/MoePlayer/DPlayer
此外，DPlayer系列播放器还包括Vue和React版本。
本文来自挽梦忆笙歌投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/611561.html
微信扫一扫 
