天給大家推薦一個超強大的html5含彈幕視頻播放器插件DPlayer。

dplayer 一款開源的高質量H5視頻播放器，Star高達9.5K+。作者是一名大四95后小鮮肉。支持發布彈幕、Bilibili視頻及實時視頻(HLS M3U8 FLV)等格式。

安裝

$ npm install dplayer --save

也可以使用cdn引入，dplayer目前最新版本1.26.0

https://www.bootcdn.cn/dplayer/

我們先嘗試初始化一個最簡單的 DPlayer

加載播放器文件：

<div id="dplayer"></div>
<script src="DPlayer.min.js"></script>

使用模塊管理器

import DPlayer from 'dplayer';
const dp = new DPlayer(options);

使用js初始化

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

DPlayer 有豐富的參數可以自定義你的播放器實例，詳細配置如下：

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    autoplay: false,
    theme: '#FADFA3',
    loop: true,
    lang: 'zh-cn',
    screenshot: true,
    hotkey: true,
    preload: 'auto',
    logo: 'logo.png',
    volume: 0.7,
    mutex: true,
    video: {
        url: 'dplayer.mp4',
        pic: 'dplayer.png',
        thumbnails: 'thumbnails.jpg',
        type: 'auto',
    },
    subtitle: {
        url: 'dplayer.vtt',
        type: 'webvtt',
        fontSize: '25px',
        bottom: '10%',
        color: '#b7daff',
    },
    danmaku: {
        id: '9E2E3368B56CDBB4',
        api: 'https://api.prprpr.me/dplayer/',
        token: 'tokendemo',
        maximum: 1000,
        addition: ['https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142'],
        user: 'DIYgod',
        bottom: '15%',
        unlimited: true,
    },
    contextmenu: [
        {
            text: 'custom1',
            link: 'https://github.com/DIYgod/DPlayer',
        },
        {
            text: 'custom2',
            click: (player) => {
                console.log(player);
            },
        },
    ],
    highlight: [
        {
            time: 20,
            text: '這是第 20 秒',
        },
        {
            time: 120,
            text: '這是 2 分鐘',
        },
    ],
});

清晰度切換

在 video.quality 里設置不同清晰度的視頻鏈接和類型，video.defaultQuality 設置默認清晰度

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        quality: [
            {
                name: 'HD',
                url: 'demo.m3u8',
                type: 'hls',
            },
            {
                name: 'SD',
                url: 'demo.mp4',
                type: 'normal',
            },
        ],
        defaultQuality: 0,
        pic: 'demo.png',
        thumbnails: 'thumbnails.jpg',
    },
});

HLS支持

需要在 DPlayer.min.js 前面加載 hls.js

<div id="dplayer"></div>
<script src="hls.min.js"></script>
<script src="DPlayer.min.js"></script>

const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
        url: 'demo.m3u8',
        type: 'hls',
    },
    pluginOptions: {
        hls: {
            // hls config
        },
    },
});
console.log(dp.plugins.hls); // Hls 實例

提供豐富的文檔支持及示例演示

附上項目文檔及地址

# 文檔地址
http://dplayer.js.org/zh/

# 倉庫地址
https://github.com/MoePlayer/DPlayer

另外，DPlayer系列播放器還包含Vue和React版本。

• Vue-DPlayer

https://dplayer.netlify.app/

• React-DPlayer

https://github.com/MoePlayer/react-dplayer

好了，就分享到這里。感興趣的同學可以去看下哈！如果小伙伴們有其它優秀的H5播放器，歡迎一起交流討論。