弹幕插件:vue-baberrage
vue-baberrage
- 前言
- 效果图
- 安装插件
- 引入插件
- 使用插件
前言
我们在bilibili
上浏览观看视频、刷剧的时候,有这样的一个功能——弹幕,百度搜了下,这样解释的:弹幕,指的是在网络上观看视频时弹出的评论性字幕。,有点类似我们在看实体书时,手拿笔在书上勾勾画画,顺便写写自己的读书笔记,想法啥的,只是现在将这个模式搬到了视频中,使用弹幕的方式来实现的。
图片来源于bilibili网站
下面我们来看看是如何实现的:
vue-baberrage
是一款基于Vue.js弹幕插件,其有如下特点:
- 容易使用 ¶只需几行代码,简单配置即可使用⁋
- 高性能 ¶过百条同屏弹幕依然能保持60FPS⁋
- 独立 ¶弹幕数据部分交还给使用者自己管理,可以配合Vuex使用⁋
效果图
官方Demo:点击进入
官方文档:点击进入
下面我们来看看使用方式:
安装插件
npm install vue-baberrage --save
引入插件
在main.js:
中写如下代码:
import Vue from 'vue'
import { vueBaberrage } from 'vue-baberrage'
Vue.use(vueBaberrage)
在index.vue:
中写如下代码:
import {MESSAGE_TYPE} from "vue-baberrage";
使用插件
在vue:
中写如下代码:
<vue-baberrage:barrageList="barrageList":boxHeight="boxHeight":isShow="barrageIsShow":lanesCount="lanesCount":loop="barrageLoop":messageHeight="messageHeight":throttleGap="throttleGap">
</vue-baberrage>
在js:
中写如下代码:
data() {return {barrageList: [],barrageIsShow: true, //是否展示弹幕barrageLoop: true, //是否循环播放boxHeight: 170, //高度messageHeight: 25, //消息高度lanesCount: 4, //泳道数量throttleGap: 5000, //消息间隔}
}
mounted() {this.addBarrageList();
},
methods: {addToList() {let list = [{id: 1,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第一条弹幕',time: 3},{id: 2,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第二条弹幕',time: 4},{id: 3,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第三条弹幕',time: 3},{id: 4,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第四条弹幕',time: 4},{id: 5,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第五条弹幕',time: 5},{id: 6,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第六条弹幕',time: 6},{id: 7,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第七条弹幕',time: 7},{id: 8,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第八条弹幕',time: 8},{id: 9,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第九条弹幕',time: 9},{id: 10,avatar: 'https://api.ddkjt.com/api/img_1.php',msg: '第十条弹幕',time: 10}];list.forEach((v) => {this.barrageList.push({id: v.id, //弹幕IDavatar: v.avatar, //头像msg: v.msg, //弹幕消息time: v.time, //屏幕展示时间type: MESSAGE_TYPE.NORMAL, //类型});});
}
在css:
中写如下代码:
/*弹幕区域高度*/
/deep/ .baberrage-stage {height: 170px;
}/*弹幕消息框*/
/deep/ .baberrage-item .normal {padding: 5px 10px;
}/*头像*/
/deep/ .baberrage-item .normal .baberrage-avatar {width: 25px;height: 25px;background-color: black;
}/*文字*/
/deep/ .baberrage-item .normal .baberrage-msg {font-size: 14px;line-height: 25px;
}
至此,完事儿,就可以实现弹幕
的功能了。
弹幕插件:vue-baberrage相关推荐
- 弹幕插件easyDanmaku.js使用详解
easyDanmaku.js弹幕插件使用详解(长期更新) 介绍 A Danmaku plugin for the web,一个用于web端的弹幕插件 特点 支持TypeScript.使用简单.使用cs ...
- vue 在浏览器控制台怎么调试 谷歌插件vue Devtools
vue 在浏览器控制台怎么调试 谷歌插件vue Devtools 问题: vuejs里面的变量,怎么用浏览器的console查看? 例如,想在chrome里用console.log查看变量$data, ...
- android 带图片的弹幕,一个可以支持文本,图片,文本+表情的简单弹幕插件
前言 最近因项目需要,使用canvas做了一个简单的弹幕插件,能满足基本功能, 后期还需要不断完善,有好的建议和想法欢迎提出. 为了做一个弹幕前期调研考察了颇久,首先列一下我需要的功能: 文字弹幕 新 ...
- php+js实现弹幕,jquery.barrager.js-专业的网页弹幕插件
jquery.barrager.js是一款专业的网页弹幕插件.它支持显示图片,文字以及超链接.支持自定义弹幕的速度.高度.颜色.数量等.能轻松集成到论坛,博客等网站中. 由于IE9以下的IE浏览器不兼 ...
- 【组件】前端js拖拽插件 VUE
[组件]前端js拖拽插件 VUE Vue Draggable - Vue 拖拽组件王者 Vue drag resize - 轻量级,无依赖,可缩放 Vue smooth dnd - 简单动效,上下拖拽 ...
- 【独立版】智慧城市同城V4_2.2.7全开源全插件VUE版,修复房产信息组件商户发布二手房房源信息未和商户关联的问题
源码介绍 [独立版]智慧城市同城V4 查看更多关于 智慧城市同城V4 的文章 _2.2.7全开源全插件VUE版,修复房产信息组件商户发布二手房房源信息未和商户关联的问题! 智慧城市同城是一套专注于多城 ...
- 【独立版】智慧城市同城V4_2.1.4全开源全插件VUE版,修复房产信息组件后台资料编辑中会显示其他平台小区的问题
源码介绍 [独立版]智慧城市同城V4_2.1.4全开源全插件VUE版,修复房产信息组件后台资料编辑中会显示其他平台小区的问题!智慧城市同城是一套专注于多城市生活服务同城技术解决方案,全面覆盖同堿信息. ...
- 【独立版】智慧城市同城V4_2.1.1全开源全插件+VUE前端,修复平台装修公告组件风格二和风格三无法自动滚动的问题
源码介绍 [独立版]智慧城市同城V4_2.1.1全开源全插件+VUE前端,修复平台装修公告组件风格二和风格三无法自动滚动的问题! 智慧城市同城是一套专注于多城市生活服务同城技术解决方案,全面覆盖同堿信 ...
- jq的插件 vue中引用_详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件,具有一定的参考价值,有兴趣的可以了解一下 使用vue-cli构建的vue项目,webpack的配置文 ...
最新文章
- SSM项目的数据库密码加密方案
- APK文件的解包打包和修改
- 【python】并行化的又一种思路
- python使用json实现树结构_js怎样将获取json转换为树形结构
- 二叉树最大路径和 python_[面试题]二叉树中最大路径和
- 注册表操作命令reg
- 总奖金7万美金,Kaggle近期可报名赛事,语音识别、图像识别分类领域
- MediaPlayer播放音频,也可以播放视频
- EasyUI使用JSON保存数据
- c语言函数名称大全,C语言函数大全
- html怎么把桌面的图片放大缩小,css怎么让图片随屏幕大小改变?
- 最重要的经济先行指标—PMI
- Udacity CH2中.bag 文件解析
- Android 8.0 Activity启动流程分析
- LeetCode.623 Add One Row to Tree
- 焦虑症应该怎么办?这六个缓解方法建议试试
- x265-1.8版本-common/lowres.cpp注释
- vue封装上拉菜单组件_Vue的灵活的lil上下文菜单组件
- 21-高级属性之内建方法(2)
- react package.json 里面的小尖角号和波折号各什么意思
热门文章
- Python练习19:合格率计算
- (附源码)基于PHP初中英语在线考试系统的设计与实现-计算机毕设87564
- 《PANet:Path Aggregation Network for Instance Segmentation》论文笔记
- 朝花夕拾 - 工作、生活的焦虑和解决
- NumPy 秘籍中文第二版:十二、使用 NumPy 进行探索性和预测性数据分析
- 0基础快速入门CSS技术栈(5)—图解详细阐述说透CSS的盒子模型(超级重要)、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心(附详细案例源码解析过程)2021.01.07更新
- 《电子商务概论》期末考试题总结
- python hasattr函数_Python3 hasattr()、getattr()、setattr()函数简介
- Spring Boot入门(07):整合 MySQL 和 Druid数据源 | 全网最详细保姆级教学(两万字)
- 西部专属的云安全人才培养计划长啥样?