前端解决弹幕可以不挡人物

已于 2023-02-02 15:27:22 修改
阅读量280 收藏 2
点赞数 3
分类专栏： css html 文章标签： css css3 前端
于 2023-02-02 15:21:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47230378/article/details/128850995
版权

在这里插入图片描述
那天在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了，不会挡住人物，觉得很神奇，于是决定一探究竟。

高端的效果，往往只需要采用最朴素的实现方式，忙碌了两个小时，陈师傅打开了F12，豁然开朗。一张图片+一个属性，直接搞定。
在这里插入图片描述

在这里插入图片描述
为了印证我的想法，我决定自己写一个demo

<!DOCTYPE html>
<html lang="en">
<he
最低0.47元/天 解锁文章
陈吖
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue2/3 - 实现类似”视频和直播间“ 的文字弹幕飘过效果功能，支持Nuxt项目！组件源码及详细的使用示例（可自己定义弹幕样式、修改滚动速度、显示隐藏弹幕、鼠标移入悬停与点击悬停）弹幕功能插件源码
高级前端工程师
03-28 7065
vue 中弹幕横向滚动，vue实现文字的无缝滚动效果，vue nuxt网页多行滚动文字弹幕效果功能插件，vue如何实现横屏滚动弹幕，vue nuxt 怎么做直播弹幕功能，vue 中弹幕横向滚动，vue实现顶部飘过滚动弹幕，vue nuxt 视频弹幕功能开发，vue nuxt 直播间弹幕效果插件示例源码，vue如何实现弹幕功能，vue如何实现弹幕效果，vue 弹幕列表功能组件，vue弹幕交互组件，vue nuxt 类似视频弹幕、直播弹幕效果功能，vue弹幕功能优秀插件组件，vue如何实现弹幕功能，vue nu
Vue - 超详细 “横向滚动“ 弹幕效果功能组件源码，类似视频与直播间的发言弹幕 （支持自定义弹幕样式 / 开启暂停弹幕播放 / 清空弹幕 / 修改弹幕移动速度 / 发送插入自己的弹幕并高亮显示等）
王佳斌
03-28 4906
vue 弹幕列表功能组件，vue弹幕交互组件，vue nuxt 类似视频弹幕、直播弹幕效果功能，vue弹幕功能优秀插件组件，vue如何实现弹幕功能，vue nuxt 实现多行横向滚动类似弹幕的效果，vue网站弹幕效果怎么实现，vue项目如何实现视频网站的弹幕功能，vue做一个类似直播弹幕效果的组件，vue 中弹幕横向滚动，vue实现文字的无缝滚动效果，vue nuxt网页多行滚动文字弹幕效果功能插件，vue如何实现横屏滚动弹幕，vue nuxt 怎么做直播弹幕功能，vue 中弹幕横向滚动，vue实现顶部飘过
vue-baberrage 弹幕组件踩坑吐槽（后来改用了vue-danmaku）
最新发布
qq_45386747的博客
09-27 1111
因为项目中要实现一个文字弹幕，要有鼠标悬停事件，自定义样式，且要支持点击按钮实现音频试听和下载功能（文字部分其实是一个标题，点击按钮播放对应录音）一开始小组选择了vue-baberrage这个弹幕插件,这里就顺便介绍一下使用方法吧首先，安装然后，全局注入（还有其他方法，这里只介绍了我使用的方法下同，详情请参考vue-baberrage官方文档页面中加入以下代码HTMLJSdata () {return {msg: 'Hello vue-babarrage', //弹幕内容。
vue如何实现弹幕功能
TwoBE9876的博客
04-28 6368
这篇文章将为大家详细讲解有关vue如何实现弹幕功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 （1）效果 如上图所示的效果，这里我们使用vue 制作。 (2)使用技术 vue + vue-baberrage 1.安装： npm install vue-baberrage 2.引入 方式一： importVuefrom'vue' import{vueBaberrage}from'vue-baberrage' Vue....
怎么给项目添加弹幕?使用vue-baberrage，帮你解决烦恼！
Dlihctcefrep的博客
02-09 3409
怎么给项目添加弹幕?使用vue-baberrage，帮你解决烦恼！
danmaku-vue弹幕交互插件
m0_59206508的博客
08-29 1460
vue3+ts 写的一个弹幕交互插件，轻便、开箱即用、可扩展性强
Html——表白弹幕 特效（效果 + 代码）.rar
02-07
在这个项目中，"Html——表白弹幕 特效（效果 + 代码）.rar" 提供了一个使用前端技术实现的互动表白特效。这个特效可能包括动态滚动的文字、动画效果，以及配合情境的背景音乐，从而创造出浪漫的氛围。 1. **...
本人之前写的JS弹幕 对前端H5 感兴趣的可以学习一下
05-21
9. **可扩展性**：设计弹幕系统时，要考虑未来的功能扩展，如支持自定义表情、弹幕投票、弹幕弹出特效等。这可能需要设计良好的模块化和组件化架构。 通过以上知识点的学习和实践，你可以创建一个基本的H5弹幕系统...
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
12-30
之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹幕 css3弹幕性能优化 canvas实现弹幕 canva弹幕的扩展功能 ...
弹幕视频播放器插件Aoiplayer
07-24
总之，Aoiplayer是一个功能强大且易于使用的弹幕视频播放器插件，它为网页开发者提供了一个轻松集成视频和弹幕功能的解决方案。通过熟练掌握Aoiplayer的使用，你可以创造出富有创新和互动性的在线视频体验。
vue实现弹幕功能
10-16
主要介绍了vue实现弹幕功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-danmak 弹幕交互组件
nunumaymax的博客
08-02 3597
是一个基于 vue 的弹幕交互组件，易上手，还可自定义修改弹幕的样式，因此推荐在vue中实现弹幕效果时使用。更多内容请参考：vue-danmaku官方文档。
B站不挡脸弹幕前端是如何实现的？
m0_64460287的博客
10-27 1373
相信最近有很多B站的用户都注意到了不挡脸的弹幕，打开一则视频右下角的“智能防挡弹幕”功能后，弹幕就不会再覆盖人像，而是呈现从人体身后穿过的效果。
vue制作弹幕
马优晨
10-23 6356
（1）效果 如上图所示的效果，这里我们使用vue 制作。 (2)使用技术 vue + vue-baberrage 1.安装： npm install vue-baberrage 2.引入 方式一： import Vue from 'vue' import { vueBaberrage } from 'vue-baberrage' Vue.use(vueBaberrage) 方式二： c...
实现一个B站弹幕不挡人物的效果
qq_37669585的博客
09-13 1655
如今各种视频网站，例如b站都有。再添加一些弹幕特效。通过在视频不同时的帧引入不同遮罩图，来实现。将svg的存入本地。弹幕动画可以自己设定，非常有趣！
【干货篇】Vue实现直播弹幕功能
破烂码农
07-25 7939
Vue实现直播弹幕 前言 上一篇文章我们讲述了如何用UniApp和Vue在搭建Nginx直播流媒体服务器后实现直播的功能，那么直播中必不可少的一部分就是弹幕，能够增加直播气氛同时，了解用户对于直播或者视频的反馈，本篇文章我们通过代码来讲讲，如何在视频/直播的基础上实现弹幕功能。 提示：如果你有需要通过Vue做直播功能，不妨看看上一篇文章 地址：UniApp+Vue实现直播功能 一、实现弹幕，我们需要什么？ 对没错，有些同学可能知道这个组件，叫：vue-barrage。 这是一款基于vue的弹幕组件，我们本
使用vueBaberrage实现网页弹幕效果
syynb的博客
07-07 2036
使用vueBaberrage实现网页弹幕效果，以及webpack5中缺少polyfills报错解决办法
视频字幕不能巧妙的隐藏？那快来看看mask 如何实现视频弹幕人物遮罩过滤
huz1lu的博客
03-02 540
经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一起的时候，弹幕会“巧妙”的躲到人物的下面，看着非常的智能。 简单的一个截图例子： 其实，这里是运用了 CSS 中的 MASK 属性实现的。 mask 简单用法介绍 之前在多篇文章都提到了 mask，比较详细的一篇是 -- 奇妙的 CSS MASK，本文不对 mask 的基本概念做过多讲解，向下阅读时，如果对一些 mask 的用法感到疑惑，可以再去看看。 这里只简单介绍下 mask
实现视频弹幕人物遮罩过滤的方法
sql65432的博客
02-24 348
1.https://www.cnblogs.com/coco1s/p/14419585.html 2.https://www.cnblogs.com/vickylinj/p/12084621.html
提升前端开发效率：百度的集成解决方案
百度前端集成解决方案是一个在2012年7月于杭州举行的D2前端技术论坛上讨论的主题，由雷志兴（Aka: berg）主讲，他隶属于百度WebFE通用组并作为W3C成员。该演讲旨在探讨如何通过创新的方法提升前端开发效率，特别是...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值