前言

年后开工第一帖，新的一年更要加油鸭~

最近在整理视频播放组件的资料，发现dplayer组件，除了完备视频播放功能之外，还有好多附件的小功能，是一个宝藏组件，大概是我自己工作内容的局限性，我也是第一次用到，记录一下~

先放一张图，感受下dplayer组件的强大吧

安装

npm install vue-dplayer -S

使用

1. main.js中全局引入

// main.js
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/vue-dplayer.css'Vue.use(VueDPlayer);

2. vue 页面引入

<d-player ref="player" :options="dplayerOptions"></d-player>

3. 属性配置

// 针对部分options属性进行配置
dplayerOptions: {theme: '#b7daff',  // 风格颜色，例如播放条，音量条的颜色loop: false,  // 是否自动循环lang: 'zh-cn',  // 语言，'en', 'zh-cn', 'zh-tw'screenshot: true,  // 是否允许截图（按钮），点击可以自动将截图下载到本地hotkey: true,  // 是否支持热键，调节音量，播放，暂停等preload: 'auto',  // 自动预加载volume: 0.7,  // 初始化音量logo: require('@/assets/logo.png'),  // 在视频左脚上打一个logovideo: {url: 'http://47.105.206.28/videos/wangkun.mp4', // 播放视频的路径quality: [  // 设置多个质量的视频{name: 'HD',url: 'http://47.105.206.28/videos/wangkun.mp4',type: 'auto',  // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型},{name: 'SD',url: 'http://47.105.206.28/videos/wangkun.mp4',type: 'auto',}],defaultQuality: 0,  // 默认是HDpic: "https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png",  // 视频封面图片thumbnails: require('@/assets/thumbnails.jpg')  // 进度条上的缩略图,需要通过dplayer-thumbnails来生成},subtitle: {url: 'http://www.baidu.com',fontSize: '20px',bottom: '50%',},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://www.bilibili.com'},{text: 'custom2',click: (player) => {console.log(player);}}],highlight: [  // 进度条时间点高亮{text: '10M',time: 600,},{text: '20M',time: 1200,},],}

除了上述代码段介绍的部分内容DPlayerGuide | DPlayer有更详细的介绍，大家可以自行按需使用即可，下面贴一张options的介绍截图叭

4. 事件配置

Guide | DPlayer事件绑定分为Video events和Play events，我也没逐个研究的

vue-dplayer 视频播放组件介绍相关推荐

vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
基于Vue的Quasar Framework 介绍这个框架UI组件很全面
基于Vue的Quasar Framework 介绍这个框架UI组件很全面基于Vue的Quasar Framework 中文网 http://www.quasarchs.com/ quasarfra ...
（23）Vue.js组件介绍
一.Vue.js组件介绍组件用于封装页面的部分功能,将功能的结构.样式.逻辑代码封装为整体.提高功能的复用性与可维护性,更好的专注于业务逻辑. 二.Vue.js组件使用组件使用时为自定义 HTML ...
Vue之非单文件组件介绍
简介主要介绍非单文件组件的方式创建Vue组件.使用. 非单文件组件指的是一个文件中包含多个vue组件. 非单文件组件实际上是html文件. 使用组件化主要分为三步: 编写组件. 注册组件. 使用组件 ...
Vue视频播放组件（Video）
可自定义设置以下属性: 视频文件url(videoUrl),必传视频封面url(videoCover),默认为null 视频播放器宽度(width),默认为800px 视频播放器高度(height) ...
vue视频播放组件vue-mini-player
vue-mini-player 官方文档:vue-mini-player: 基于Vue的一个轻量级HTML5视频播放组件,适配PC和移动端
vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍
这篇文章分享了从遇到前端业务性能问题,到分析.解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程. 初始加载资源过多问题起源于我们的一个页面,下 ...
超精致 Vue 视频播放组件Vue-CoreVideoPlayer
https://www.toutiao.com/i6846961652387021320/?group_id=6846961652387021320&wid=1625119721154 今天给 ...
vue 分步引导组件_引导卡组件：完整介绍
vue 分步引导组件 In this article, I'm going to introduce you to the Bootstrap card component and walk you ...

vue-dplayer 视频播放组件介绍

前言

安装

使用

1. main.js中全局引入

2. vue 页面引入

3. 属性配置

vue-dplayer 视频播放组件介绍相关推荐

最新文章

热门文章