DPlayer 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
DPlayer 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
DPlayer 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
DPlayer 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
DPlayer 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

一个很好看的弹幕视频播放器。

Demo

屏幕截图

安装

$ npm install dplayer --save

用法

HTML

<link rel=" sheet" href="DPlayer.min.css">
<!-- ... -->
<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="DPlayer.min.js"></script>

JS

var dp = new DPlayer(option);
dp.init();

Options

var option = {
    element: document.getElementById('player1'),                       // Optional, player element
    autoplay: false,                                                   // Optional, autoplay video, not supported by mobile browsers
    theme: '#FADFA3',                                                  // Optional, theme color, default: #b7daff
    loop: true,                                                        // Optional, loop play music, default: true
    video: {                                                           // Required, video info
        url: '若能绽放光芒.mp4',                                         // Required, video url
        pic: '若能绽放光芒.png'                                          // Optional, music picture
    },
    danmaku: {                                                         // Optional, showing danmaku
        id: '9E2E3368B56CDBB4',                                        // Required, danmaku id, MUST BE UNIQUE, CAN NOT USE THESE IN YOUR NEW PLAYER: `https://dplayer.daoapp.io/list`
        api: 'https://dplayer.daoapp.io/',                             // Required, danmaku api
        token: 'tokendemo',                                            // Optional, danmaku token for api
        maximum: 1000                                                  // Optional, maximum quantity of danmaku
    }
}

API

  • dp.init()

  • dp.play()

  • dp.pause()

     

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (5)

加载中
中国人
02/15 13:01
回复
举报
dplayer 怎样给video.quality动态赋值
2019/05/08 15:22
回复
举报
打分: 力荐
非常好的一款播放器。
2018/01/14 17:19
回复
举报
1
02/08 10:21
回复
举报
看看 #DPlayer#
2016/07/16 08:23
回复
举报
更多评论
暂无内容
发表于大前端专区
2019/12/19 01:36

DPlayer简单用法

DPlayer 是一个支持弹幕的 HTML5 视频播放器。支持 Bilibili 视频和 danmaku,实时视频(HTTP Live Streaming,M3U8格式)以及 FLV 格式。 用法 HTML <div id="player1" class="dplayer"></div> <!-- ... --> <script src="dist/DPlayer.min.js"></script> 选项 var dp = new DPlayer({ element: document.getElementById('player1'), // 可选,player元素 autoplay: false, ...

0
0
发表了博客
2018/07/14 18:04

vue2.0+vue-dplayer实现hls播放

vue2.0+vue-dplayer实现hls播放 开始 安装依赖 npm install vue-dplayer -S 1,编写组件HelloWorld.vue <template> <div class="hello"> <d-player ref="player" @play="play" :logo="logo" :lang="lang" :video="video" :contextmenu="contextmenu"></d-player> </div> </template> <script> import VueDPlayer from './VueDPlayerHls'; import logoImg from '@/assets/logo.png'; export default { ...

0
2
发表了博客
2019/12/25 23:29

漂亮的HTML5弹幕视频播放器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 就初始化好了,它只有最基本的视频播放功能。 搭建视频弹幕后台服务   前置条件:...

0
0
发表了博客
2019/11/06 18:42

苹果CMSV10整合dplayer播放器增加记忆+P2P播放+自动下一集功能

今天给大家分享下整合好的,苹果cmsv10系统dplayer播放器增加记忆+P2P播放+自动下一集功能,首先呢先替换下面的dplayer播放器代码,替换目录苹果cms系统static/player/dplayer.html 全部内容替换即可。代码无毒无马,可检验。 也可以下载整合好的文件直接上传到网站根目录覆盖即可:https://www.lanzous.com/i74ajej(蓝奏云盘下载) 1 <html> 2 <head> 3 <title>dplayer播放器p2p加速+记忆播放</title> 4 <met...

0
0
发表了博客
2020/02/14 20:17

[前端] Vue视频组件

一、vue-video-player 1.安装 cnpm install vue-video-player -S cnpm install 'video.js' -S 2.导入使用 在main.js中导入: import VueVideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css'; Vue.use(VueVideoPlayer); 使用video组件:(完整代码) <template> <div class='home'> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :...

0
0
发表于大前端专区
2018/08/14 18:09

react npm插件推荐

![](http://file.homeins.cn/Fk_fiIqug5QZTpBaTT0Bg2J9EwlI ) # react npm插件推荐 本文依据博主在平时应用中运用的[react插件](https://www.npmjs.com/)做简单介绍,如果有更好的技术交流可邮箱联系:regan_jeff@163.com。 #### 音乐播放器([aplayer](https://aplayer.js.org/#/)) 正如它的介绍 "*** Wow, such a beautiful HTML5 music player***”,如此美丽的播放器,aplayer不仅仅美丽同时也兼具了功能等,不仅简单而且易...

0
0
发表于大前端专区
2020/01/21 13:28

开源播放器

DPlayer

0
0
发表了博客
2019/10/25 13:12

详解vue2.0+vue-video-player实现hls播放全过程

起因 最近公司想做一套视频点播服务,因为考虑到成本问题,领导希望一切都用开源系统来完成。基于这个出发点,那就肯定排除了各大云视频平台(腾讯云 音视频点播VOD、网易云视频、七牛云、阿里云 视频服务等)。其实这里我还是建议购买云视频平台,因为自己造轮子肯定没有别人造的好(专门研发团队除外、以此业务为生的公司除外),再说,云视频平台服务商提供的都是一整套解决方案:收集、存储、转码、播放器等,并且在cdn和弹...

0
1
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
5 评论
85 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部