DPlayer is an HTML 5 video player that supports pop-up. Support bilibilibili video and danmaku, real-time video (HTTP Live Streaming, M3U8 format) and FLV format.  

usage

HTML

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="dist/DPlayer.min.js"></script>

option

var dp = new DPlayer({
    element: document.getElementById('player1'),                       // Optional, player element
    autoplay: false,                                                   // Optional, auto play video, mobile browser not supported
    theme: '#FADFA3',                                                  // Optional, theme color, default: ාb7daff
    loop: true,                                                        // Optional, loop music, default: true
    lang: 'zh',                                                        // Optional, language, ` zh 'for Chinese, ` en' for English, default: Navigator 
                                                                          language
    screenshot: true,                                                  // Optional, enable screenshot function, default value: false, note: if set to
                                                                          true，Video and video screenshots must be cross domain enabled
    hotkey: true,                                                      // Optional, binding hotkeys, including left and right keys and spaces, default value: true
    preload: 'auto',                                                   // Optional. The preloading method can be 'none' metadata 'auto. The default is
                                                                          //Value: 'auto'
    video: {                                                           // Required, video information
        url: 'If it can shine.mp4',                                         // Required, video URL
        pic: 'If it can shine.png'                                          // Optional, video screenshot
    },
    danmaku: {                                                         // Optional, show barrage, ignore this option to hide the barrage
        id: '9E2E3368B56CDBB4',                                        // Required, pop id, note: it must be unique and cannot be in your new player
                                                                          //Use these in: ` https://api.prprpr.me/dplayer/list`
        api: 'https://api.prprpr.me/dplayer / ', / / required, pop-up api
        token: 'tokendemo',                                            // Optional, api's bullet token
        maximum: 1000,                                                 // Optional, maximum number of screens
        addition: ['https://API. Prprpr. Me / dplayer / bilibilibili? Aid = 4157142 '] / / optional, additional barrage, see ` Bilibili barrage support`
    }
});

Event binding

dp.on (event, handler) event:

Play: triggered when dplayer starts playing 
Pause: triggered when dplayer pauses 
Can play: triggered when there is enough data to play 
Playing: triggered periodically when dplayer is playing 
Ended: trigger when dplayer ends error: trigger when an error occurs

HLS support (real time video, M3U8 format)

It requires the hls.js library and should be loaded before DPlayer.min.js. Live Barrage is not yet supported.

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/hls.min.js"></script>
<script src="dist/DPlayer.min.js"></script>

<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.m3u8'
// ...
}
});
</script>

FLV support

It requires the flv.js library and should be loaded before DPlayer.min.js.

<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/flv.min.js"></script>
<script src="dist/DPlayer.min.js"></script>

<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.flv'
// ...
}
});
</script>

Using the bundler module

var DPlayer = require('DPlayer'); 
var dp = new DPlayer(option);

Other similar tools: DPlayer, videos.js, ckplayer, Vue DPlayer, Vue video player