DPlayer :- https://dplayer.diygod.dev/
See Demo :- https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/index.html
Here is the basic Integration Guide :-
1. Place the CDN.
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.27.1/dist/DPlayer.min.js"></script>
2. Place the container where you want to see the video player and the put it in this JavaScript Function.
<div id="dplayer"></div>
<script>
const dp = new DPlayer({
container: document.getElementById('dplayer'),
screenshot: true,
video: {
url: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4',
pic: 'https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/DPlayer.png',
thumbnails: 'https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/DPlayer.png',
},
subtitle: "{"
url: 'webvtt.vtt',
}
});
</script>
Where you will place <div id="dplayer"></div>
the video player will be appear there...
Your basic video has been integrated. See the guide to get more updates.
Quality switching
const dp = new DPlayer({
container: document.getElementById('dplayer'),
video: {
quality: [
{
name: 'HD',
url: 'https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/raining_1080p.mp4',
type: 'normal',
},
{
name: 'SD',
url: 'https://tutorials.sh20raj.repl.co/add-dplayer-html5-video-player/raining_480p.mp4',
type: 'normal',
},
],
defaultQuality: 0,
pic: 'demo.png',
thumbnails: 'thumbnails.jpg',
},
});
More Features
you can use many more features see analyze and edit suitably.
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,
speedRate: 0.5,
},
contextmenu: [
{
text: 'custom1',
link: 'https://github.com/DIYgod/DPlayer',
},
{
text: 'custom2',
click: (player) => {
console.log(player);
},
},
],
highlight: [
{
text: 'marker for 20s',
time: 20,
},
{
text: 'marker for 2mins',
time: 120,
},
],
});
DPlayer
π Wow, such a lovely HTML5 danmaku video player
Introduction
DPlayer is a lovely HTML5 danmaku video player to help people build video and danmaku easily.
DPlayer supports:
- Streaming formats
- HLS
- FLV
- MPEG DASH
- WebTorrent
- Any other custom streaming formats
- Media formats
- MP4 H.264
- WebM
- Ogg Theora Vorbis
- Features
- Danmaku
- Screenshot
- Hotkeys
- Quality switching
- Thumbnails
- Subtitle
Using DPlayer on your project? Let me know!
Thanks
Sponsors
Contributors
Related Projects
Feel free to submit yours in Let me know!
Tooling
- DPlayer-thumbnails: generate video thumbnails
Danmaku api
- DPlayer-node: Node.js
- laravel-danmaku: PHP
- dplayer-live-backend: Node.js, WebSocket live backend
- RailsGun: Ruby
Plugins
- DPlayer-for-typecho: Typecho
- Hexo-tag-dplayer: Hexo
- DPlayer_for_Z-BlogPHP: Z-BlogPHP
- DPlayer for Discuz!: Discuz!
- DPlayer for WordPress: WordPress
- DPlayerHandle: WordPress
- Selection: WordPress
- Vue-DPlayer: Vue
- react-dplayer: React
- rc-dplayer: React
Other
- DPlayer-Lite: lite version
- hlsjs-p2p-engine: Let your viewers becomeβ¦
This video player has many features. You can See their guide here :- https://dplayer.diygod.dev/guide/
Top comments (0)