您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

技术解析:为什么 B 站的弹幕可以不挡人物?

时间:2022-11-24 09:38:20  来源:掘金  作者:钱得乐

我们在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了,不会挡住人物,是不是觉得特别神奇

图源:互联网

高端的效果,往往只需要采用最朴素的实现方式,我们打开电脑的F12,一探究竟。一张图片和一个属性

图源:互联网


图源:互联网

-webkit-mask-image这属性是干嘛用的

为了印证我们的想法,我们来写一个demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .video {
      width: 668px;
      height: 376px;
      position: relative;
      -webkit-mask-image: url("mask.svg");
      -webkit-mask-size: 668px 376px;
    }
    .bullet {
      position: absolute;
      font-size: 20px;
    }
  </style>
</head>
<body>
<div class="video">
  <div class="bullet" style="left: 100px; top: 0;">元芳,你怎么看</div>
  <div class="bullet" style="left: 200px; top: 20px;">你难道就是传说中的奶灵</div>
  <div class="bullet" style="left: 300px; top: 40px;">你好,我是胖灵</div>
  <div class="bullet" style="left: 400px; top: 60px;">这是第一集,还没有舔灵</div>
</div>
</body>
</html>

效果是这样的

图源:互联网

加一个红背景,看的清楚一些

图源:互联网

至此我们就实现了B站同款的不遮挡人物的弹幕。至于这张图片是怎么来的,肯定是AI识别出来然后生成的,一张图片也就一两K,一次加载很多张也不会造成很大的负担。

最后来看看这个神奇的css属性吧

https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask-image

Experimental: 这是一个实验中的功能

所以在开发需求的时候可以把它当成一个亮点使用,但是不能强依赖于这个属性做需求。

它还有一系列的属性,有兴趣的话可以挨个试一下。



Tags:弹幕   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
我们在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了,不会挡住人物,是不是觉得特别神奇图源:互联网高端的效果,往往只需要采用最朴素的实现方式,我们打开电脑的F12,一探...【详细内容】
2022-11-24  Tags: 弹幕  点击:(0)  评论:(0)  加入收藏
一、IO模型 阻塞式IO模型 非阻塞式IO模型 IO复用 信号驱动式IO 异步IO Linux IO流程 2. 各个IO模型的比较 NIO的优势 事件驱动模型 避免多线程 单线程处理多任务 非阻塞,IO...【详细内容】
2022-10-02  Tags: 弹幕  点击:(36)  评论:(0)  加入收藏
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  Tags: 弹幕  点击:(581)  评论:(0)  加入收藏
今天讲解如何用python爬取芒果TV、腾讯视频、B站、爱奇艺、知乎、微博这几个常见常用的影视、舆论平台的弹幕和评论,这类爬虫得到的结果一般用于娱乐、舆情分析,如:新出一部火...【详细内容】
2021-11-15  Tags: 弹幕  点击:(413)  评论:(0)  加入收藏
众所周知,弹幕,即在网络上观看视频时弹出的评论性字幕。不知道大家看视频的时候会不会点开弹幕,于我而言,弹幕是视频内容的良好补充,是一个组织良好的评论序列。通过分析弹幕,我们...【详细内容】
2020-10-09  Tags: 弹幕  点击:(141)  评论:(0)  加入收藏
前言直播业务现在特别火爆,也给人们的互动方式带来了很多新的改变,比如刷礼物、弹幕、排行榜等等。面对巨大的流量规模,直播技术的发展也备受关注。作为一个技术爱好者,相信你也...【详细内容】
2020-07-28  Tags: 弹幕  点击:(256)  评论:(0)  加入收藏
背景为了更好的支持东南亚直播业务,产品设计为直播业务增加了弹幕。第一期弹幕使用腾讯云支持,效果并不理想,经常出现卡顿、弹幕偏少等问题。最终促使我们开发自己的弹幕系统。...【详细内容】
2020-04-30  Tags: 弹幕  点击:(129)  评论:(0)  加入收藏
▌简易百科推荐
我们在B站看视频的时候偶然发现当字幕遇到人物的时候就被裁切了,不会挡住人物,是不是觉得特别神奇图源:互联网高端的效果,往往只需要采用最朴素的实现方式,我们打开电脑的F12,一探...【详细内容】
2022-11-24  钱得乐  掘金  Tags:弹幕   点击:(0)  评论:(0)  加入收藏
今天给大家介绍一个JPA的好搭档:QueryDSL。0. 前言相对于 MyBatis ,本人更喜欢 Spring Data JPA ,因为它更符合面向对象的思想,然而 JPA 对复杂的查询支持较弱,常见的有两种方式:...【详细内容】
2022-11-21  二哥学Java  今日头条  Tags:QueryDSL   点击:(6)  评论:(0)  加入收藏
云原生是当下IT圈非常热门的一个词,其目的是为了各组织在公有云、私有云和混合云等新型动态环境中,构建和运行可弹性扩展的应用。云原生包含很多技术,比如容器、微服务、DevOps...【详细内容】
2022-11-21  华为云开发者联盟    Tags:持续交付   点击:(4)  评论:(0)  加入收藏
大家好,我是Echa.今天来分享 Github 上 8 个很棒的 React 项目,希望能通过学习这些项目的源码,帮助大家更好地理解 React,编写更优雅的 React 代码!概览: React Tetris: 俄罗斯方...【详细内容】
2022-11-20  Echa攻城狮  今日头条  Tags:React   点击:(9)  评论:(0)  加入收藏
引言VHDL编程语言语法内容很多很杂,包括用于编程的规定、用于仿真的规定以及用于描述的规定。对于刚刚接触VHDL语言的设计者而言,拿到厚厚的VHDL编程语言书籍,往往有无从下手感...【详细内容】
2022-11-17  newpowerleader  今日头条  Tags:VHDL   点击:(24)  评论:(0)  加入收藏
OKHttpUtil在Java的世界中,Http客户端之前一直是Apache家的HttpClient占据主导,但是由于此包较为庞大,API又比较难用,因此并不使用很多场景。而新兴的OkHttp、Jodd-http固然好用...【详细内容】
2022-11-16  JAVA我要发大财  今日头条  Tags:OkHttp   点击:(7)  评论:(0)  加入收藏
作者 | Tyler Hawkins译者 | 叙缘策划 | 李冬梅Web 3 开发人员缺口很大,相对来说,目前只有一少部分开发人员成为该领域的专家。因此,如果一位成熟的 Web 2 工程师,想要进入 Web...【详细内容】
2022-11-16  AI前线    Tags:Web3   点击:(18)  评论:(0)  加入收藏
作者 | 苏宓出品 | CSDN(ID:CSDNnews)如果说此前 Kotlin、Dart、Julia、Carbon 等后起之秀向老牌编程语言发起挑战进攻都是小打小闹,那么这一次 C、C++ 这几种常青藤编程语言则...【详细内容】
2022-11-15    CSDN  Tags: C/C++   点击:(18)  评论:(0)  加入收藏
什么是Gateway Worker分离部署GatewayWorker有三种进程,Gateway进程负责网络IO,BusinessWorker进程负责业务处理,Register进程负责协调Gateway与BusinessWorker之间建立TCP长连...【详细内容】
2022-11-14  it程序员  今日头条  Tags:gateway   点击:(9)  评论:(0)  加入收藏
CONTINUE(100, "Continue"), SWITCHING_PROTOCOLS(101, "Switching Protocols"), PROCESSING(102, "Processing"), CHECKPOINT(103, "Checkpoint"), OK(20...【详细内容】
2022-11-10  男神是孟德大人啊  今日头条  Tags:http   点击:(12)  评论:(0)  加入收藏
站内最新
站内热门
站内头条