DPlayer

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
  • Danamku
  • Screenshot
  • Hotkeys
  • Quality switching
  • Thumbnails
  • Subtitle

Using DPlayer on your project? Let me know!

Demo

Docs

Install

$ npm install dplayer --save

Quick Start

<link rel="stylesheet" href="dist/DPlayer.min.css">
<div id="player1"></div>
<script src="dist/DPlayer.min.js"></script>

var dp = new DPlayer({
    element: document.getElementById('player1'),
    video: {
        url: 'dplayer.mp4',
        pic: 'dplayer.png'
    },
    danmaku: {
        id: 'testid',
        api: 'https://api.prprpr.me/dplayer/'
    }
});

Usage

Read the Docs

FAQ

Why can't some videos be full screen?

If player is contained in a iframe, try adding the allowfullscreen attribute to the iframe. For full browser support it should look like this: ```html ```

Why can't player autoplay in some mobile browsers?

Most mobile browsers forbid video autoplay, you wont be able to achieve it without hacks.

Sponsor

Join the Discussion

• Telegram Group
• QQ Group: 415835947

Related Projects

• DPlayer-backend
• DPlayer-data(weekly backup for api.prprpr.me/dplayer)
• DPlayer-thumbnails
• DPlayer-for-typecho
• Hexo-tag-dplayer
• DPlayer_for_Z-BlogPHP
• 纸飞机视频区插件(DPlayer for Discuz!)
• dplayer_py_backend
• dplayer_lua_backend
• DPlayer for WordPress
• Vue-DPlayer
• react-dplayer
• DPlayer-Lite
• DPlayerHandle
• laravel-danmaku
• dplayer-live-backend
• Feel free to submit yours in Let me know!

Who use DPlayer?

• Hi, DIYgod
• 嘀哩嘀哩
• 0xBBC
• 树洞
• FGHRSH的博客
• 银色子弹
• 妖气山弹幕网
• 御宅同萌 – 聖域
• 纸飞机南航青年网络社区
• otomads
• JA 日本動漫交流平台Ω
• 九妖萌弹幕动漫网
• 爱弹幕
• 萌心次元
• kn007的个人博客
• Feel free to submit yours in Let me know!

CDN

• jsDelivr
• cdnjs
• unpkg
• RawGit

Donate

• Donate via Paypal
• Donate via WeChat Pay
• Donate via Alipay
• Donate via Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1

Author

DPlayer © DIYgod, Released under the MIT License.
Authored and maintained by DIYgod with help from contributors (list).

Blog · GitHub @DIYgod · Twitter @DIYgod · Telegram Channel @awesomeDIYgod