作者：陈小超Sum | 来源：互联网 | 2023-08-08 18:47
先上效果InstallationUsingnpm:npminstalldplayer--saveUsingYarn:yarnadddplayerQuickStartAtfi
先上效果
Installation
Using npm:
npm install dplayer --save
Using Yarn:
yarn add dplayer
Quick Start
At first, let&＃39;s initialize a simplest DPlayer
Load DPlayer files
Or work with module bundler:
import DPlayer from &＃39;dplayer&＃39;;const dp &＃61; new DPlayer(options);
Initialization in js:
const dp &＃61; new DPlayer({container: document.getElementById(&＃39;dplayer&＃39;),screenshot: true,video: {url: &＃39;demo.mp4&＃39;,pic: &＃39;demo.jpg&＃39;,thumbnails: &＃39;thumbnails.jpg&＃39;,},subtitle: {url: &＃39;webvtt.vtt&＃39;,},danmaku: {id: &＃39;demo&＃39;,api: &＃39;https://api.prprpr.me/dplayer/&＃39;,},
});
Options
You can custom your player instance by those options
| Name | Default | Description |
|---|
| container | document.querySelector(&＃39;.dplayer&＃39;) | player container |
| live | false | enable live mode, see #live |
| autoplay | false | video autoplay |
| theme | &＃39;#b7daff&＃39; | main color |
| loop | false | video loop |
| lang | navigator.language.toLowerCase() | values: &＃39;en&＃39;, &＃39;zh-cn&＃39;, &＃39;zh-tw&＃39; |
| screenshot | false | enable screenshot, if true, video and video poster must enable Cross-Origin |
| airplay | true | enable airplay in Safari |
| hotkey | true | enable hotkey, support FF, FR, volume control, play & pause |
| preload | &＃39;auto&＃39; | values: &＃39;none&＃39;, &＃39;metadata&＃39;, &＃39;auto&＃39; |
| volume | 0.7 | default volume, notice that player will remember user setting, default volume will not work after user set volume themselves |
| playbackSpeed | [0.5, 0.75, 1, 1.25, 1.5, 2] | optional playback speed, or or you can set a custom one |
| logo | - | showing logo in the top left corner, you can adjust its size and position by CSS |
| apiBackend | - | getting and sending danmaku in your way, see #live |
| video | - | video info |
| video.quality | - | see #Quality switching |
| video.defaultQuality | - | see #Quality switching |
| video.url | - | video url |
| video.pic | - | video poster |
| video.thumbnails | - | video thumbnails, generated by DPlayer-thumbnails(opens new window) |
| video.type | &＃39;auto&＃39; | values: &＃39;auto&＃39;, &＃39;hls&＃39;, &＃39;flv&＃39;, &＃39;dash&＃39;, &＃39;webtorrent&＃39;, &＃39;normal&＃39; or other custom type, see #MSE support |
| video.customType | - | custom video type, see #MSE support |
| subtitle | - | external subtitle |
| subtitle.url | required | subtitle url |
| subtitle.type | &＃39;webvtt&＃39; | subtitle type, values: &＃39;webvtt&＃39;, &＃39;ass&＃39;, but only webvtt is supported for now |
| subtitle.fontSize | &＃39;20px&＃39; | subtitle font size |
| subtitle.bottom | &＃39;40px&＃39; | the distance between the subtitle and player bottom, values like: &＃39;10px&＃39; &＃39;10%&＃39; |
| subtitle.color | &＃39;#fff&＃39; | subtitle color |
| danmaku | - | showing danmaku |
| danmaku.id | required | danmaku pool id, it must be unique |
| danmaku.api | required | see #Danmaku API |
| danmaku.token | - | back end verification token |
| danmaku.maximum | - | danmaku maximum quantity |
| danmaku.addition | - | additional danmaku, see #bilibili danmaku |
| danmaku.user | &＃39;DIYgod&＃39; | danmaku user name |
| danmaku.bottom | - | values like: &＃39;10px&＃39; &＃39;10%&＃39;, the distance between the danmaku bottom and player bottom, in order to prevent warding off subtitle |
| danmaku.unlimited | false | display all danmaku even though danmaku overlap, notice that player will remember user setting, default setting will not work after user set it themselves |
| contextmenu | [] | custom contextmenu |
| highlight | [] | custom time markers upon progress bar |
| mutex | true | prevent to play multiple player at the same time, pause other players when this player start play |
const dp &＃61; new DPlayer({container: document.getElementById(&＃39;dplayer&＃39;),autoplay: false,theme: &＃39;#FADFA3&＃39;,loop: true,lang: &＃39;zh-cn&＃39;,screenshot: true,hotkey: true,preload: &＃39;auto&＃39;,logo: &＃39;logo.png&＃39;,volume: 0.7,mutex: true,video: {url: &＃39;dplayer.mp4&＃39;,pic: &＃39;dplayer.png&＃39;,thumbnails: &＃39;thumbnails.jpg&＃39;,type: &＃39;auto&＃39;,},subtitle: {url: &＃39;dplayer.vtt&＃39;,type: &＃39;webvtt&＃39;,fontSize: &＃39;25px&＃39;,bottom: &＃39;10%&＃39;,color: &＃39;#b7daff&＃39;,},danmaku: {id: &＃39;9E2E3368B56CDBB4&＃39;,api: &＃39;https://api.prprpr.me/dplayer/&＃39;,token: &＃39;tokendemo&＃39;,maximum: 1000,addition: [&＃39;https://api.prprpr.me/dplayer/v3/bilibili?aid&＃61;4157142&＃39;],user: &＃39;DIYgod&＃39;,bottom: &＃39;15%&＃39;,unlimited: true,},contextmenu: [{text: &＃39;custom1&＃39;,link: &＃39;https://github.com/DIYgod/DPlayer&＃39;,},{text: &＃39;custom2&＃39;,click: (player) &＃61;> {console.log(player);},},],highlight: [{text: &＃39;marker for 20s&＃39;,time: 20,},{text: &＃39;marker for 2mins&＃39;,time: 120,},],
});
查看插件地址&＃xff1a;传送门
京公网安备 11010802041100号