漂亮的HTML5彈幕視頻播放器DPlayer

本文轉載自查看原文 2019-12-25 23:29 8660 DPlayer

DPlayer

快速開始

　　加載播放器文件：

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

　　在js里初始化：

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

　　一個最簡單的 DPlayer 就初始化好了，它只有最基本的視頻播放功能。

搭建視頻彈幕后台服務

　　前置條件：安裝了git、docker、docker-compose

　　下載后台服務代碼，當然也可以自己搭建后台服務

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

　　進入DPlayer-node目錄執行docker-compose命令

cd DPlayer-node

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

　　啟動彈幕服務之后，就可以愉快的在邊看視頻邊發彈幕了(～￣▽￣)～

　　當然需要先在DPlayer設置彈幕屬性。DPlayer支持播放各種格式，以下的視頻選項設置親測有效，不過視頻字幕沒有測試，有感興趣的同學可以自己制作字幕玩一下。

<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, // 自動播放
        theme: '#FADFA3', // 主題
        loop: true, // 循環播放
        lang: 'zh-cn', // 語言
        screenshot: true, // 截圖
        hotkey: true, // 熱鍵
        preload: 'auto', // 預加載
        logo: '/assets/octocat.png', // 左上角logo
        volume: 0.7, // 音量
        mutex: true, // 多個視頻互斥
        // 常規方式
        video: {
            url: url,
            type: 'normal',
            pic: '/assets/demo.png', // 封面
            thumbnails: '/assets/thumbnail.jpg', // 縮略圖
        },
        // 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',
            fontSize: '25px',
            bottom: '10%',
            color: '#b7daff'
        },
        // 彈幕
        danmaku: {
            id: vid,
            api: 'http://192.168.1.172:1207/',
            addition: ['http://192.168.1.172:1207/v3/bilibili?aid=80266688&cid=137358410']
        },
        // 視頻右鍵菜單
        contextmenu: [
            {
                text: 'falltakeman',
                link: 'https://cnblogs.com/falltakeman',
            },
            {
                text: 'dplayer',
                click: (player) => {
                    console.log(player);
                },
            },
        ],
        // 高能預告
        highlight: [
            {
                text: '敵軍還有10秒到達戰場',
                time: 10,
            },
            {
                text: '2mins 空降',
                time: 120,
            },
        ],
    });

</script>