js制作简易视频弹幕

最新推荐文章于 2022-10-29 17:03:21 发布
最新推荐文章于 2022-10-29 17:03:21 发布
阅读量975 收藏 8
点赞数 2
文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51116095/article/details/110920417
版权

js制作简易弹幕

制作的原因:大家在直播或者视频软件上应该常常看见各种弹幕，我想大家应该也想知道弹幕是怎么做出来的，那么我们今天一起来制作一下简易弹幕。

主体思路:简易弹幕原理就是将用户输入的文字存储到一个标签(我用的是span)里面，然后将其在页面的右侧弹出。
我们纵观各种直播平台的弹幕

整体布局
在这里插入图片描述

css样式就不写出来了毕竟每个人审美不同

需要注意的点有
1.弹幕字体颜色可以随机改变(这里就直接上图片了，这样大家也可以自己敲一敲)
在这里插入图片描述

2.弹幕字体位置也是需要随机的，总不能一直在一个点输出。在这里插入图片描述
3.布局上面有一个需要注意的地方(outline: none;)一定要加上哦
在这里插入图片描述

总结:弹幕系统很简单，理解也很简单，我已经吧需要注意的点以及部分代码放在了上面，剩下的留给聪明的你们自己敲了，还可以改变一下字体的大小，以及需要注意代码输出时候，上下的边距。

autoplay(视频在就绪后马上播放)
controls(向用户显示控件，比如播放按钮。)
muted(关闭视频的声音)
loop(媒介文件完成播放后再次开始播放)

熊家顺
关注
JS实现视频弹幕效果
weixin_51276799的博客
11-21 1842
使用ES6的模块化开发及观察者模式来实现。观察者模式有很多种形式，这里是使用“注册—通知—撤销注册”的形式。TimeManager类可以返回一个单例，每一条弹幕作为一个观察者，注册到TimeManager类的单例的set表中，当单例的set中有数据时，被观察者状态被改变，执行动画，并通知所有观察者进行update状态更新。弹幕移动超过视频宽度时，从TimeManager中注销。当TimeManager单例的set表中所有被观察弹幕都注销时，setInterval停止执行。 1、Bullet.js： 观察
JavaScript css3模拟简单的视频弹幕功能
cc_fys的博客
10-11 2510
JavaScript css3模拟简单的视频弹幕功能 这个移动就用了CSS3 的transition 属性。position设置为absolute,那么就用的transition过度left属性，实现弹幕的移动。当然要注意设置其父元素的样式 overflow:hidden; 这样当字体飞出去的时候，就会隐藏飞出去的部分。
JavaScript 小案例 弹幕
小羽向前跑
01-27 545
功能： 1.输入框内输入文字，点击发送，或按enter键 2.框内文字清空 3.文字随机从屏幕左边运动至屏幕右边 4.文字运动到右边界结束消失 所有代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; c...
JS实现的视频弹幕效果示例
10-18
主要介绍了JS实现的视频弹幕效果,涉及javascript基于事件响应的页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
JS 简单实现视频弹幕效果 （ + cookie）
qq_26705343的博客
02-26 407
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
js视频弹幕
weixin_30451709的博客
07-12 319
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>视频弹幕</title> <style> #sendText { width: 250px...
js 弹幕 实现
hangGe0111的博客
03-28 452
1.https://blog.csdn.net/natural_live/article/details/76571597 2.http://www.cnblogs.com/wenruo/p/9566612.html 3.https://github.com/K-walker/dm 4.https://blog.csdn.net/qq_32849999/article/detai...
利用jQuery制作简易弹幕效果
小苏(º﹃º )的博客
05-18 602
利用jQuery制作简易弹幕效果实现步骤：1.制作样式2.逻辑，思路 实现步骤： 1.制作样式 我们先来看看body中的代码： <body> <div class="box"> <div class="small"> <div class="div1"> <input type="text"> <span>发射</sp
使用 Leaflet.js 创建地图的入门指南
qq_39652397的博客
03-10 6454
Leaflet.js 是目前最流行的映射库之一。它是一个灵活、轻量级的开源 JavaScript 库，用于创建交互式地图。 Leaflet 是一个用于呈现地图数据的框架。数据以及底图图层必须由开发人员提供。地图由切片图层以及浏览器支持、默认交互性、平移和缩放功能组成。您还可以添加更多自定义图层和插件，以及 Leaflet 中的所有映射。该地图库将您的数据转换为地图图层，并提供出色的支持，使其成为大多数开发人员的首选。它在主要的桌面和移动平台上运行良好，使其成为移动和大屏幕地图的完美 JavaScript
前端JS面试题2021及答案
zhao142731的博客
10-09 6699
一、数据类型 1、JavaScript中什么是基本数据类型什么是引用数据类型？以及各个数据类型是如何存储的？⭐⭐⭐⭐⭐ 基本数据类型有 Number String Boolean Null Undefined Symbol(ES6新增数据类型) bigInt 引用数据类型统称为Object类型，细分的话有 Object Array Date Function RegExp 基本数据类型的数据直接存储在栈中；而引用数据类型的数据存储在堆中，每个对象在堆中有一个引用地址。引...
JS实现直播网站弹幕
10-31
纯JS实现的弹幕效果，类似直播网站弹幕，支持输入实时显示。
js仿视频网站文字弹幕动画代码.zip
07-16
js仿视频网站文字幕动画代码是一款js dom操作节点实例特效下载。
javascript实现视频弹幕效果（两个版本）
12-13
本文实例为大家分享了javascript实现视频弹幕效果的具体代码，供大家参考，具体内容如下 基础版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .dm { width: 800px; height: 600px; background-color: blue; margin: 0 auto; } .box { height: 500px; background-color: #000; position
Html5弹幕视频播放器插件
11-06
Html5弹幕视频播放器插件,很NB的东西 Html5弹幕视频播放器插件,很NB的东西
原生 JS 实现视频弹幕功能
qq_43477721的博客
11-19 821
效果还行吧，大概就不到 150 行代码即可。快点学起来吧 <!DOCTYPE html> <html> <head> <title>视频弹幕</title> <style> * { padding: 0; margin: 0; } /* 通过标签名称设置样式 */ body { background: rgb(245, 245, 245); .
JS__视频弹幕(观察者模式)
weixin_44447804的博客
11-21 149
用观察者模式,写了一个视频弹幕小功能,有需要了解观察者模式可以看一下 通过一个固定,只读的实例化对象.来控制每一条实例化对象弹幕 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
实战练习1：使用原生js实现简单的视频弹幕效果。
chengpang2665的博客
11-27 377
项目描述（需求分析）： 1、使用html5中的video标签，创建一个视频播放器； 2、视频屏幕下可以输入弹幕，开头不能是空格，且可以通过提交按钮或者enter键进行提交； 3、输入的弹幕在视频区域实现从左到右滑动，字体颜色随机，大小随机，...
JS实现视频弹幕效果,不需下载资源直接用
最新发布
草木疏博客
10-29 629
JS实现视频弹幕效果,不需下载资源直接用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值