d-player是什么软件（player播放器安卓版安装）

今天给大家推荐一个超强大的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版本。