Pretty HTML5 video player DPlayer

 

DPlayer

 

Quick Start

　　The player loads the file:

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

　　In js Lane initialization:

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.mp4',
    },
});

　　One of the easiest DPlayer initialized Well, it is only the most basic video playback.

 

Build video barrage background service

 

　　Preconditions: installed git, docker, docker-compose

 

　　Download the background service code, of course, you can also build their own back-office services

git clone https://github.com/MoePlayer/DPlayer-node.git

　　Enter DPlayer-node directory command execution docker-compose

cd DPlayer-node

docker-compose build
docker-compose pull
docker-compose up  -d

　　After the barrage started service, you can have fun in watching the video side made a barrage (~ ¯ ▽ ¯) ~

　　Of course, need to set the attribute barrage DPlayer. DPlayer supports playback of various formats, the following video options set effective pro-test, but did not test the video subtitles, there are interested students can create their own play with subtitles.

<h1>DPlayer</h1>

<link rel="stylesheet" href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" />
<div id="dplayer"></div>
<script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- 以上js都需要在dplayer之前加载 -->
<script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>

<script type="text/javascript">
    var url = '/assets/oceans.mp4';
    var vid = md5(url);
    
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        autoplay: false,Autoplay//
        Theme: ' # FADFA3 ' , // theme 
        Loop: to true , // Loop 
        lang: ' zh-CN ' , // Language 
        Screenshot: to true , // Screenshot 
        Hotkey: to true , // hotkey 
        PRELOAD: ' Auto ' , // preload 
        logo: ' /assets/octocat.png ' , // upper left corner logo 
        Volume: 0.7 , //The volume of 
        the mutex: to true , // plurality of mutually exclusive video 
        @ conventional manner 
        Video: { 
            URL: URL, 
            type: ' Normal ' , 
            PIC: ' /assets/demo.png ' , @ Cover 
            Thumbnails: ' / Assets / thumbnail The .jpg ' , // thumbnail 
        },
         // M3U8 
        // Video: { 
        //     URL:' /assets/demo.m3u8 ', 
        //     type:' HLS ' 
        // }, 
        // FLV 
        //video: {
        //    url: '/assets/demo.flv',
        //    type: 'flv'
        //},
        pluginOptions: {
            hls: {
                // hls config
                autoStartLoad: true,
                startPosition: -1

            },
            flv: {
                enableWorker: false,
                enableStashBuffer: true,
                stashInitialSize: undefined,

                isLive: false,

                lazyLoad: true,
                lazyLoadMaxDuration: 3 * 60,
                lazyLoadRecoverDuration: 30,
                deferLoadAfterSourceOpen: true,

                // autoCleanupSourceBuffer: default as false, leave unspecified
                autoCleanupMaxBackwardDuration: 3 * 60,
                autoCleanupMinBackwardDuration: 2 * 60,

                statisticsInfoReportInterval: 600,

                fixAudioTimestampGap: true,

                accurateSeek: false,
                seekType: 'range',  // [range, param, custom]
                seekParamStart: 'bstart',
                seekParamEnd: 'bend',
                rangeLoadZeroStart: false,
                customSeekHandler: undefined,
                reuseRedirectedURL: false,
                // referrerPolicy: leave as unspecified

                headers: undefined,
                customLoader: undefined
            }
        },
        
        // 切换视频质量
        //video: {
        //    quality: [
        //        {
        //            name: 'HD',
        //            url: 'demo.m3u8',
        //            type: 'hls',
        //        },
        //        {
        //            name: 'SD',
        //            url: 'demo.mp4',
        //            type: 'normal',
        //        },
        //    ],
        //    defaultQuality: 0,
        //    pic: 'demo.png',
        //    thumbnails: 'thumbnails.jpg',
        //},
        // 视频字幕
        subtitle: {
            type: 'webvtt',
            URL: ' webvtt.vtt ' , 
            the fontSize: ' 25px ' , 
            bottom: ' 10% ' , 
            Color: ' # b7daff ' 
        }, 
        // barrage 
        danmaku: { 
            ID: VID, 
            API: ' http://192.168.1.172 : 1207 / ' , 
            Addition: [ ' http://192.168.1.172:1207/v3/bilibili?aid=80266688&cid=137358410 ' ] 
        }, 
        // video context menu 
        contextmenu: [ 
            { 
                text: ' falltakeman ' , 
                Link: ' https://cnblogs.com/falltakeman ' , 
            }, 
            { 
                text: ' Dplayer ' , 
                the Click: (Player) => { 
                    the console.log (Player); 
                } 
            } 
        ], 
        // energetic Trailer 
        highlight: [ 
            { 
                text: ' enemy and 10 seconds to reach the battlefield ' , 
                Time:10 , 
            }, 
            { 
                text: ' 2mins airborne ' , 
                Time: 120 , 
            }, 
        ], 
    }); 

</ Script >

 

danmaku attribute

　　Explain danmaku property:

　　id video id, the need to ensure uniqueness, it is recommended to use md5 encryption.

　　api is the address of the station behind the bomb.

　　addition is optional, used to load bilibili barrage, in fact, by just going to build a barrage service station load b barrage.

 

　　I can see that the addition of this property is: http: //192.168.1.172:? 1207 / v3 / bilibili aid = 80266688 & cid = 137358410

　　Examples official website did not elaborate, no contact may not know what this aid, this aid is av video station No. b, and is cid barrage id.

 

　　Of course, you can not pass parameters cid, playing behind the station will look for cid according to aid.

　　It is not loaded barrage of shots b station, originally recorded gif, but the file is too big, not posted a gif image.

　　It is loaded with video barrage of shots bilibili

　　Right on the video display customized content