D-Player d player _D-Player

文章插圖

文章插圖
今天給大家推薦一個超強大的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 id="dplayer"></div><script src="http://www.mnbkw.com/jxjc/188842/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',},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.png',thumbnails: 'thumbnails.jpg',},});

HLS支持
需要在 DPlayer.min.js 前面加載 hls.js

<div id="dplayer"></div><script src="http://www.mnbkw.com/jxjc/188842/hls.min.js"></script><script src="http://www.mnbkw.com/jxjc/188842/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【D-Player d player】另外，DPlayer系列播放器還包含Vue和React版本。