d

今天给大家推荐一个超强大的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({    co李国豪之死ntainer: document.getelementbyid('dplayer'),    autoplay: fal,    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',        a居家隔离封条pi: '/d/file/titlepic/click        token: 'tokendemo',        maximum: 1000,        addition: ['/d/file/titlepic/bilibili        ur: '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版本。