今天给大家推荐一个超强大的html5含弹幕视频播放器插件DPlayer。
???dplayer 一款开源的高质量H5视频播放器，Star高达9.5K+。作者是一名大四95后小鲜肉。支持发布弹幕、Bilibili视频及实时视频(HLS M3U8 FLV)等格式。
???安装
$ npm install dplayer --save 也可以使用cdn引入，dplayer目前最新版本1.26.0
https://www.bootcdn.cn/dplayer/ 我们先尝试初始化一个最简单的 DPlayer
加载播放器文件：
<div ></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.wf\\\', ???volume: 0.7, ???mutex: true, ???video: { ???????url: \\\'dplayer.mp4\\\', ???????pic: \\\'dplayer.wf\\\', ???????thumbnails: \\\'thumbnails.wf\\\', ???????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 分钟\\\', ???????}, ???],}); 清晰度切换
在 video.quality 里设置不同清晰度的视频链接和类型，video.defaultQuality 设置默认清晰度
???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.wf\\\', ???????thumbnails: \\\'thumbnails.wf\\\', ???},}); HLS支持
需要在 DPlayer.min.js 前面加载 hls.js
<div ></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版本。