javaScript蓝桥杯---视频弹幕

最新推荐文章于 2024-05-07 23:11:20 发布
最新推荐文章于 2024-05-07 23:11:20 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： javaScript 文章标签： javascript 蓝桥杯 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58065010/article/details/131098967
版权

目录

一、介绍

弹幕指直接显现在视频上的评论，可以以滚动、停留甚⾄更多动作特效⽅式出现在视频上，是观看视频的⼈发送的简短评论。通过发送弹幕可以给观众⼀种“实时互动”的错觉，弹幕的出现让观看过程充满乐趣。本题需要在已提供的基础项⽬中，完成视频弹幕的功能。

二、准备

开始答题前，需要先打开本题的项⽬代码⽂件夹，⽬录结构如下：

├── effect.gif
├── css
│ └── style.css
├── video
│ └── video1.webm
├── index.html
└── js
└── index.js

其中：

  • index.html 是主⻚⾯。
  • js/index.js 是需要补充代码的 js ⽂件。
  • css/style.css 是样式⽂件。
  • effect.gif 是完成的效果图。
  • video 是存放视频的⽂件夹。

在浏览器中预览 index.html ⻚⾯，显示如下所示：
在这里插入图片描述

三、⽬标

请在 js/index.js ⽂件中补全代码。具体需求如下：

  1. 补全 renderBullet 函数中的代码，控制弹幕的显示颜⾊和移动。功能说明如下：
    • 每个弹幕内容包裹在 span 标签中，作为⼦节点插⼊到 #video 元素节点内。
    • ⽣成的 span 元素节点相对于 #video 元素绝对定位 ，初始位置的 left 是 #video 元素的宽， top 是 #video 元素的⾼内的随机数。

    注意：需求中所需样式可直接通过已提供的 getEleStyle ⽅法获取。

    • 弹幕每隔 bulletConfig.time （弹幕配置对象） 时间，向左移动距离为bulletConfig.speed （弹幕配置对象）。
    • 当弹幕最右端完全移出 #video 元素时，移除 span 元素。
  2. 补全 #sendBulletBtn 元素的绑定事件，点击发送按钮，输⼊框中的⽂字出现在弹幕中，样式不同于普通弹幕（样式红⾊字体红⾊框已设置，类名为 create-bullet ）。通过调⽤renderBullet ⽅法和正确的传参实现功能。

最终效果可参考⽂件夹下⾯的 gif 图，图⽚名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览gif 图⽚）。
在这里插入图片描述

四、代码

index.html

<!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" />
    <title>视频弹幕</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div class="container">
      <div class="video-header">
        <h1 class="title">workerman基础</h1>
        <div class="video-info">
          <span>13.2亿播放</span>
          <span>656.5万弹幕</span>
          <span>2022-12-11 15:29:24</span>
        </div>
      </div>
      <div id="video">
        <video src="./video/video1.webm" poster="" id="vd" controls>
          您的浏览器不支持 video 标签。
        </video>
      </div>
      <div class="player-sending-area">
        <p class="player-video-info">231 人正在看，4396 条弹幕</p>
        <div class="switch-box">
          <input
            type="checkbox"
            name=""
            id="switchButton"
            class="switch"
            checked
          />
          <label for="switchButton"></label>
        </div>
        <input
          type="text"
          name=""
          id="bulletContent"
          placeholder="请输入您的弹幕"
        />
        <button id="sendBulletBtn">发送</button>
      </div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

css/style.css

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 850px;
  margin: 0px auto;
}

.container .video-header {
  box-sizing: border-box;
  padding: 24px 0;
}

.container .video-header .title {
  font-size: 20px;
  font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei,
    sans-serif;
  font-weight: 500;
  margin-bottom: 6px;
  color: #18191c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.container .video-header .video-info {
  display: flex;
  align-items: center;
}

.container .video-header .video-info span {
  margin-right: 12px;
  font-size: 13px;
  color: #9499a0;
}

#video {
  width: 850px;
  height: 560px;
  background-color: #000;
  position: relative;
  overflow: hidden;
}

#video > video {
  width: 100%;
  height: 100%;
}

#video > span {
  position: absolute;
  white-space: nowrap;
  color: #fff;
  font-size: 16px;
}

#video > .create-bullet {
  border: 1px solid red;
  box-shadow: 0 0 5px 5px rgb(255, 84, 84);
  padding: 5px 10px;
  border-radius: 10px;
  color: red !important;
  background-color: rgba(255, 255, 255, 0.5);
}

.container .player-sending-area {
  display: flex;
  align-items: center;
  width: 830px;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgb(207, 207, 207);
  padding: 0 10px;
}

.container .player-sending-area .player-video-info {
  font-size: 14px;
  color: rgb(95, 95, 95);
  margin: 0 15px;
}

.container .player-sending-area .switch-box {
  width: 48px;
}

.container .player-sending-area .switch-box .switch {
  display: none;
}

.container .player-sending-area .switch-box label {
  position: relative;
  display: block;
  margin: 1px;
  height: 28px;
  cursor: pointer;
}

.container .player-sending-area .switch-box label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -14px;
  width: 26px;
  height: 26px;
  border-radius: 100%;
  background-color: #fff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.06);
  transform: translateX(-9px);
  transition: all 0.3s ease;
}

.container .player-sending-area .switch-box .switch:checked ~ label::before {
  transform: translateX(10px);
}

.container .player-sending-area .switch-box label::after {
  content: "";
  display: block;
  border-radius: 30px;
  height: 28px;
  background-color: #dcdfe6;
  transition: all 0.3s ease;
}

.container .player-sending-area .switch-box .switch:checked ~ label::after {
  background-color: #00a1d6;
}

.container .player-sending-area > input {
  width: 250px;
  height: 30px;
  margin-left: 20px;
  border: 1px solid #e7e7e7;
  outline: none;
  text-indent: 10px;
  background-color: rgb(245, 244, 244);
  font-size: 12px;
  color: rgb(36, 35, 35);
}

.container .player-sending-area > input::placeholder {
  font-size: 12px;
}

.container .player-sending-area > button {
  width: 60px;
  height: 32px;
  color: #fff;
  background-color: #00a1d6;
  border: none;
}

js/index.js

const bullets = [
  "前方高能",
  "原来如此",
  "这么简单",
  "学到了",
  "学费了",
  "666666",
  "111111",
  "workerman",
  "学习了",
  "别走，奋斗到天明",
];

/**
 * @description 根据 bulletConfig 配置在 videoEle 元素最右边生成弹幕，并移动到最左边，弹幕最后消失
 * @param {Object} bulletConfig 弹幕配置
 * @param {Element} videoEle 视频元素
 * @param {boolean} isCreate 是否为新增发送的弹幕，为 true 表示为新增的弹幕
 *
 */
function renderBullet(bulletConfig, videoEle, isCreate = false) {
  const spanEle = document.createElement("SPAN");
  spanEle.classList.add(`bullet${index}`);
  if (isCreate) {
    spanEle.classList.add("create-bullet");
  }
  // TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离  bulletConfig.speed
}

document.querySelector("#sendBulletBtn").addEventListener("click", () => {
  // TODO:点击发送按钮，输入框中的文字出现在弹幕中
});

function getEleStyle(ele) {
  // 获得元素的width,height,left,right,top,bottom
  return ele.getBoundingClientRect();
}

function getRandomNum(end, start = 0) {
  // 获得随机数，范围是 从start到 end
  return Math.floor(start + Math.random() * (end - start + 1));
}

// 设置 index 是为了弹幕数组循环滚动
let index = 0;
const videoEle = document.querySelector("#video");
// 弹幕配置
const bulletConfig = {
  isHide: false, // 是否隐藏
  speed: 5, // 弹幕的移动距离
  time: 50, // 弹幕每隔多少ms移动一次
  value: "", // 弹幕的内容
};
let isPlay = false;
let timer; // 保存定时器
document.querySelector("#vd").addEventListener("play", () => {
  // 监听视频播放事件，当视频播放时，每隔 1000s 加载一条弹幕
  isPlay = true;
  bulletConfig.value = bullets[index++];
  renderBullet(bulletConfig, videoEle);
  timer = setInterval(() => {
    bulletConfig.value = bullets[index++];
    renderBullet(bulletConfig, videoEle);
    if (index >= bullets.length) {
      index = 0;
    }
  }, 1000);
});

document.querySelector("#vd").addEventListener("pause", () => {
  isPlay = false;
  clearInterval(timer);
});

document.querySelector("#switchButton").addEventListener("change", (e) => {
  if (e.target.checked) {
    bulletConfig.isHide = false;
  } else {
    bulletConfig.isHide = true;
  }
});

五、完成


/**
 * @description 根据 bulletConfig 配置在 videoEle 元素最右边生成弹幕，并移动到最左边，弹幕最后消失
 * @param {Object} bulletConfig 弹幕配置
 * @param {Element} videoEle 视频元素
 * @param {boolean} isCreate 是否为新增发送的弹幕，为 true 表示为新增的弹幕
 *
 */
function renderBullet(bulletConfig, videoEle, isCreate = false) {
  const spanEle = document.createElement('SPAN')
  spanEle.classList.add(`bullet${index}`)
  if (isCreate) {
    spanEle.classList.add('create-bullet')
  }
  // TODO：控制弹幕的显示颜色和移动，每隔 bulletConfig.time 时间，弹幕移动的距离  bulletConfig.speed
  if (bulletConfig.isHide) {
    return
  }
  //设置弹幕随机颜色
  spanEle.style.color = `rgb(${getRandomNum(255)},${getRandomNum(255)},${getRandomNum(255)})`
  //设置弹幕内容
  spanEle.innerHTML = bulletConfig.value
  //   ⽣成的 span 元素节点相对于 #video 元素绝对定位 ，
  spanEle.style.position = 'absolute'
  //初始位置的 left 是 #video 元素的宽，
  let leftSpan = getEleStyle(videoEle).width
  spanEle.style.left = leftSpan + 'px'
  // top 是 #video 元素的⾼内的随机数。
  spanEle.style.top = getRandomNum(getEleStyle(videoEle).height) + 'px'
  let _timer = setInterval(() => {
    //弹幕每隔 bulletConfig.time （弹幕配置对象） 时间，向左移动距离为
    leftSpan -= bulletConfig.speed
    spanEle.style.left = leftSpan + 'px'
    //每个弹幕内容包裹在 span 标签中，作为⼦节点插⼊到 #video 元素节点内
    videoEle.appendChild(spanEle)
    if (leftSpan < 0) {
      clearInterval(_timer)
      videoEle.removeChild(spanEle)
    }
  }, bulletConfig.time)
}

document.querySelector('#sendBulletBtn').addEventListener('click', () => {
  // TODO:点击发送按钮，输入框中的文字出现在弹幕中
  bulletConfig.value = document.querySelector('#bulletContent').value
  renderBullet(bulletConfig, videoEle, true)
})
懒羊羊h
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Javascript----文件操作
10-31
Javascript----文件操作
弹幕，是怎样练成的？
weixin_42600182的博客
11-13 355
天下视频唯弹幕不破 说起弹幕看过视频的都不会陌生，那满屏充满着飘逸评论的效果，让人如痴如醉，无法自拔 最近也是因为在学习关于canvas的知识，所以今天就想和大家分享一个关于弹幕的故事 那么究竟弹幕是怎样炼成的呢？ 我们且往下看(look) 看什么？看效果     效果图已经呈现给各位了，那么是不是有点小激动呢？是的，感慨万分，思绪宁乱，无语凝噎无论以后我们的工作中是否会遇到...
JavaScript案例-JavaScript
02-16
JavaScript案例-JavaScript
JavaScript案例-原生ajax
02-16
JavaScript案例-原生ajax
第十四届蓝桥杯Web应用开发—模拟赛3期--网页PPT--蓝桥校园一卡通--心愿便利贴
猪儿君的博客
02-27 1780
蓝桥校园一卡通 网页PPT 模拟赛3期 第十四届蓝桥杯Web应用开发
[ 蓝桥杯Web真题 ]-视频弹幕
weixin_51735748的博客
12-04 1311
详细分析讲解蓝桥杯Web应用开发省赛真题-视频弹幕。欢迎交流学习！
蓝桥杯（Web大学组）2023省赛真题：视频弹幕
ORANGE_3iING的博客
02-15 834
这里可以第二条语句中可以通过spanEle.style.left取值，是因为第一条语句使元素的样式为内联样式，如果没有第一条语句，而。这种情况下（通过CSS样式表设置的样式而不是内联样式），可以使用window.getComputedStyle。（不是一个数字），因为无法将空字符串或。的样式不是内联样式（即通过内联。、元素移除、清除定时器等，注意。，取决于浏览器的实现。给出的已有代码，进行。
JavaScript案例-js表单验证
02-16
JavaScript案例-js表单验证
JavaScript 学习 - 提高篇
10-31
JavaScript 学习 - 提高
纯js弹幕效果,vue可用
CloudJay的博客
12-11 452
基于张鑫旭的使用canvas实现和HTML5 video交互的弹幕效果源码改造 效果 区别 去掉了与视频的绑定,根据自然时间来推送弹幕进度,比较适合年会现场等大屏静态互动场景,支持vue直接使用 使用方式 引入canvasBarrage.js import canvasBarrage from "@/tools/canvasBarrage"; // 弹幕数据 var dataBarrage = [ { value: "speed设为0为非滚动", speed: 0, }, {.
html5+js制作自己的视频控件(实现弹幕效果，拖动进度条，播放时间) 一
qq_44771388的博客
04-10 4699
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
JS——弹幕发送（这个不是我完全原创的文章底部有原作者的地址）
HarryHY的博客
07-31 317
barrage.js /** * 设置 弹幕DOM池 每一个通道最多六条弹幕 **/ const MAX_DM_COUNT = 6; const CHANNEL_COUNT = 10; var domPool = []; var danmuPool = []; var hasPosition = []; var barrageflag = true function barrageinit(id) {
原生JS实现弹幕效果
qq_42616564的博客
06-10 1823
原文：https://www.cnblogs.com/wenruo/p/9566612.html
php+js实现弹幕,基于HTML5的有弹幕功能的视频播放器
weixin_34035088的博客
03-23 243
如何使用Danmmu Player需要依赖jQuery，因此首先需要加入相关css和js文件。接下来，在body中需要放置播放器的位置加入如下代码：最后，关键的部分，配置参数，调用插件。$("#danmup").DanmuPlayer({src: "abc.mp4", //视频源height: "480px", //区域的高度width: "800px", //区域的宽度urlToGetDanmu...
vue3+arco design通过动态表单方式实现自定义筛选
最新发布
m0_72167535的博客
05-07 387
vue3+arco design通过动态表单方式实现自定义筛选
基于Springboot的家具网站
趙兴晨的博客
05-03 542
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1199
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 427
注释很详细，直接上代码……
javaScript蓝桥杯----外卖给好评
10-25
JavaScript蓝桥杯是一个计算机编程竞赛，而外卖给好评是一个具体的问题，需要更多的上下文信息才能回答。不过，如果你想在JavaScript中实现外卖给好评的功能，可以考虑以下步骤： 1. 创建一个包含外卖评价的HTML页面，包括评分、评论和提交按钮。 2. 使用JavaScript编写一个函数，当用户点击提交按钮时，将评分和评论发送到服务器。 3. 在服务器端，使用后端编程语言（如PHP或Python）将评分和评论存储在数据库中。 4. 当用户查看外卖评价时，使用JavaScript从服务器获取评分和评论，并将它们显示在页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

懒羊羊h

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值