Code Monkey home page Code Monkey logo

dplayer's Introduction

DPlayer

npm CDNJS npm devDependency Status npm Travis %e2%9d%a4

Wow, such a lovely HTML5 danmaku video player

Introduction

Demo

Using DPlayer on your project? Let me know!

Screenshot image

Install

$ npm install dplayer --save

CDN

cdnjs

BootCDN

Usage

HTML

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

JS

var dp = new DPlayer(option);

Options

var option = {
    element: document.getElementById('player1'),                       // Optional, player element
    autoplay: false,                                                   // Optional, autoplay video, not supported by mobile browsers
    theme: '#FADFA3',                                                  // Optional, theme color, default: #b7daff
    loop: true,                                                        // Optional, loop play music, default: true
    lang: 'zh',                                                        // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language
    screenshot: true,                                                  // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin
    hotkey: true,                                                      // Optional, binding hot key, including left right and Space, default: true
    preload: 'auto',                                                   // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    video: {                                                           // Required, video info
        url: '若能绽放光芒.mp4',                                         // Required, video url
        pic: '若能绽放光芒.png'                                          // Optional, music picture
    },
    danmaku: {                                                         // Optional, showing danmaku, ignore this option to hide danmaku
        id: '9E2E3368B56CDBB4',                                        // Required, danmaku id, NOTICE: it must be unique, can not use these in your new player: `https://api.prprpr.me/dplayer/list`
        api: 'https://api.prprpr.me/dplayer/',                             // Required, danmaku api
        token: 'tokendemo',                                            // Optional, danmaku token for api
        maximum: 1000,                                                 // Optional, maximum quantity of danmaku
        addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142']   // Optional, additional danmaku, see: `Bilibili 弹幕支持`
    }
}

API

  • dp.play() // Resume play
  • dp.play(time) // Set currentTime
  • dp.pause() // Pause
  • dp.toggle() // Toggle between play and pause
  • dp.on(event, handler) // Event binding
  • dp.switchVideo(video, danmaku) // Switch to a new video, the format of video and danmaku is the same as option
  • dp.dan // Return danmaku info
  • dp.danIndex // Return danmaku index
  • dp.video // Return native video, most native api are supported
  • dp.video.currentTime // Returns the current playback position
  • dp.video.loop // Returns whether the video should start over again when finished
  • Most native api

Event binding

dp.on(event, handler)

event:

  • play: Triggered when DPlayer start play
  • pause: Triggered when DPlayer paused
  • canplay: Triggered when enough data is available that DPlayer can be played
  • playing: Triggered periodically when DPlayer is playing
  • ended: Triggered when DPlayer ended
  • error: Triggered when an error occurs

bilibili 弹幕及直链支持

弹幕

API: https://api.prprpr.me/dplayer/bilibili?aid=【bilibili视频AV号】

var option = {
    danmaku: {
        // ...
        addition: ['https://api.prprpr.me/dplayer/bilibili?aid=【bilibili视频AV号】']
    }
}

直链

API: https://api.prprpr.me/dplayer/video/bilibili?aid=【bilibili视频AV号】

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            var response = JSON.parse(xhr.responseText);
            var dp1 = new DPlayer({
                // options
                screenshot: false,
                video: {
                    url: response.durl[0].url
                    // options
                }
            });
        }
        else {
            console.log('Request was unsuccessful: ' + xhr.status);
        }
    }
};
xhr.open('get', 'https://api.prprpr.me/dplayer/video/bilibili?aid=【bilibili视频AV号】', true);
xhr.send(null);

Live Video (HTTP Live Streaming, M3U8 format) support

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

Live danamku is not supported yet.

<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 format support

It requires the library flv.js and it 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>

Work with module bundler

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

Danmaku back-end

Ready-made API:

https://api.prprpr.me/dplayer/

Build yourself:

Required environment

  • Node.js
  • Mongodb

Run in development

$ npm install
$ npm run dev

Make a release

$ npm install
$ npm run build

Related Projects

LICENSE

The Star And Thank Author License (SATA)

dplayer's People

Contributors

diygod avatar pvnr0082t avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.