js实现原生video视频标签上发送文字弹幕效果代码
代码语言:html
所属分类:多媒体
代码描述:js实现原生video视频标签上发送文字弹幕效果代码,video标签上覆盖一层canvas,进行弹幕动画。
代码标签: js 原生 video 视频 标签 上 发送 文字 弹幕
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <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" /> <style> * { /* 清除所有元素自带的内外边距 */ padding: 0; margin: 0; /* 改变盒子模型 */ box-sizing: border-box; } body { /* 弹性布局 让页面元素垂直+水平居中 */ display: flex; justify-content: center; align-items: center; /* 页面占浏览器可视区域的高度 */ height: 100vh; } .barrage { width: 600px; } /* 视频部分 start */ .barrage .video { /* 相对定位 */ position: relative; width: 100%; } .barrage .video video { width: 100%; } .barrage .video canvas { /* 绝对定位 */ position: absolute; top: 0; left: 0; width: 100%; } /* 视频部分 end */ /* 发送弹幕部分 start */ .barrage .submit { display: flex; width: 100%; height: 40px; } .barrage .submit input { /* 清除form表单元素自带的轮廓 */ outline: 0; width: 500px; padding: 10px; border: 1px solid #e7e7e7; } .barrage .submit button { outline: 0; border: 0; width: 100px; color: #fff; background: linear-gradient(45deg, #016eff 70%, #1296ea); /* 鼠标变小手 */ cursor: pointer; } /* 按钮点击后的样式 */ .barrage .submit .btn_active { color: #bbb; background: #e7e7e7; /* 鼠标变禁止点击状态 */ cursor: not-allowed; } /* 发送弹幕部分 end */ </style> </head> <body> <!-- 很多小伙伴问我这是什么写法 这是emmet语法 我会放一条连接在简介 --> <div class="barrage"> <div class="video"> <video src="//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4" controls></video> <canvas width="600px"></canvas> </div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0