弹幕插件: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,                    //弹幕ID
              avatar: 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;
}

至此,完事儿,就可以实现弹幕的功能了。

目录
相关文章
|
JavaScript 前端开发 编译器
看完这篇文章,不再害怕Vue3的源码(一)
看完这篇文章,不再害怕Vue3的源码
|
存储 安全 Shell
深入浅出操作系统:从原理到实践
【9月更文挑战第21天】在数字时代的浪潮中,操作系统扮演着至关重要的角色。本文将深入探究操作系统的奥秘,从其基本概念和核心原理出发,逐步引导读者理解操作系统的工作机制。我们将通过生动的例子和实用的代码片段,揭示操作系统如何管理计算机硬件资源、提供用户接口以及确保系统安全与性能优化。无论你是初学者还是有一定基础的开发者,这篇文章都将为你打开一扇通往操作系统深层世界的大门。准备好跟随我们的脚步,一起探索这个让计算机变得生动起来的神奇软件吧!
339 8
|
缓存 JavaScript 前端开发
看完这篇文章,不再害怕Vue3的源码(二)
看完这篇文章,不再害怕Vue3的源码
Layui 内置方法 - layer.close(关闭特定层)
Layui 内置方法 - layer.close(关闭特定层)
693 0
|
3月前
|
人工智能 前端开发 Java
2025年WebStorm高效Java开发全指南:从配置到实战
WebStorm 2025不仅是一款强大的JavaScript IDE,也全面支持Java开发。本文详解其AI辅助编程、Java特性增强及性能优化,并提供环境配置、高效开发技巧与实战案例,助你打造流畅的全栈开发体验。
293 4
|
12月前
|
Python
Datetime模块应用:Python计算上周周几对应的日期
Datetime模块应用:Python计算上周周几对应的日期
310 1
|
存储 JavaScript API
LocalStorage/sessionStorage 封装 - 基于TypeScript
文章主要介绍了如何封装一个自定义 Hooks 形式的存储服务,用于在 localStorage 或者 sessionStorage 中进行持久化存储值。通过封装的方法包括 get、set、remove、clearExcept 和 clearAll,使得操作存储变得更加简单和方便。
351 1
|
11月前
|
资源调度 前端开发 JavaScript
React 测试库 React Testing Library
【10月更文挑战第22天】本文介绍了 React Testing Library 的基本概念和使用方法,包括安装、基本用法、常见问题及解决方法。通过代码案例详细解释了如何测试 React 组件,帮助开发者提高应用质量和稳定性。
343 1
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
12月前
|
算法 Java 开发者
Java中的垃圾回收机制:从原理到实践
Java的垃圾回收机制(Garbage Collection, GC)是其语言设计中的一大亮点,它为开发者提供了自动内存管理的功能,大大减少了内存泄漏和指针错误等问题。本文将深入探讨Java GC的工作原理、不同垃圾收集器的种类及它们各自的优缺点,并结合实际案例展示如何调优Java应用的垃圾回收性能,旨在帮助读者更好地理解和有效利用Java的这一特性。