前端案例之视频弹幕

最新推荐文章于 2024-03-17 04:09:22 发布
最新推荐文章于 2024-03-17 04:09:22 发布
阅读量1.9k 收藏 1
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_27314097/article/details/83018150
版权

基础版本

<!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: relative;
			overflow: hidden;
		}

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

		.info {
			text-align: center;
			margin-top: 20px;
		}

		input[type=text] {
			width: 500px;
			height: 50px;
		}

		input[type=button] {
			height: 50px;
			width: 100px;

		}

		span {
			position: absolute;
			/* 文本强制不换行 */
			white-space: nowrap;
			font: bold 18px '微软雅黑';
		}
	</style>

</head>

<body>
	<div class="dm">
		<div class="box">
			<video src="m.mp4" controls></video>
		</div>
		<div class="info">
			<input type="text" maxlength="30" id="txt">
			<input type="button" value="发射" id="emit">
		</div>
	</div>
	<script src="jquery-1.12.4.js"></script>
	<script>
		// 0. 用一个数组保存一组颜色值
		var colors = ['red', 'green', 'yellow', '#fff', 'pink', 'blue'];
		// 1. 给发射按钮注册点击事件
		$('#emit').click(function () {
			// 2. 获取文本框的内容
			var v = $('#txt').val();
			// 3. 创建span标签，并设置内容，设置样式，最后追加到类名为box的div中
			var $span = $('<span></span>');
			$span.text(v)
			.css({
					left: $('.box').width(),
					top: parseInt(Math.random() * $('.box').height()),
					color: colors[parseInt(Math.random() * colors.length)]
				}).appendTo('.box');
			// 4. 让当前的span产生动画 left 为-span的宽度
			$span.animate({
				left: -1 * $span.width()
			}, 6000, 'linear', function () {
				// 当动画结束后，删除该元素
				$span.remove();
			})
		});
	</script>

</body>

</html>

加强版本

<!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: relative;
			overflow: hidden;
		}

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

		.info {
			text-align: center;
			margin-top: 20px;
		}

		input[type=text] {
			width: 500px;
			height: 50px;
		}

		input[type=button] {
			height: 50px;
			width: 100px;

		}

		span {
			position: absolute;
			/* 文本强制不换行 */
			white-space: nowrap;
			font: bold 18px '微软雅黑';
		}
	</style>

</head>

<body>
	<div class="dm">
		<div class="box">
 <!-- controls 如果出现该属性，则向用户显示控件，比如播放按钮。 -->
			<video src="m.mp4" controls></video>
		</div>
		<div class="info">
			<input type="radio" value="" id="ban" name="1">精简</input>
			<input type="radio" value="" id="vip" name="1">VIP尊享</input>
			<input type="text" maxlength="30" id="txt">
			<input type="button" value="发射" id="emit">
		</div>
	</div>
	<script src="jquery-1.12.4.js"></script>
	<script>
		// 0. 用一个数组保存一组颜色值
		var colors = ['red', 'green', 'yellow', '#fff', 'pink', 'blue'];

		//定义一个变量，定义其他样式的
		b = 0
		$('#ban').click(function () {
			b = 1;
		});
		$('#vip').click(function () {
			b = 2;
		});




		// 1. 给发射按钮注册点击事件
		$('#emit').click(function () {
			// 2. 获取文本框的内容
			var v = $('#txt').val();
			// 3. 创建span标签，并设置内容，设置样式，最后追加到类名为box的div中
			var $span = $('<span></span>');

			//定义CSS样式，让它是一个数组形式表现
			css = [{
					"left": $('.box').width(),
					"top": parseInt(Math.random() * $('.box').height()),
					"color": colors[parseInt(Math.random() * colors.length)]
				},
				{
					"left": $('.box').width(),
					"top": parseInt(Math.random() * ($('.box').height() / 2)),
					"color": colors[parseInt(Math.random() * colors.length)]
				},
				{
					"left": $('.box').width(),
					"top": parseInt(Math.random() * $('.box').height()),
					"color": "yellow",
					"fontSize": 50,
					"fontFamily": "楷体"
				}
			]
			//看看能不能打印出数组中的东西
			// console.log(abc[1])

			$span.text(v)
				.css(css[b])
				.appendTo('.box');

			// 4. 让当前的span产生动画 left 为-span的宽度

			//打印出文本长度
			// console.log(v.length)

			$span.animate({
					left: -1 * $span.width()
				}, (30 - v.length) * 333, 'linear',
				function () {
					// 当动画结束后，删除该元素
					$span.remove();
				})
		});
	</script>

</body>

</html>
HansMa
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端必备JS开发16个经典实例
04-12
前端必备JS开发16个经典实例 ,资源为教学视频，格式为MPG4.
带你实现完整的视频弹幕系统
SOHU_TECH的博客
01-07 2085
本文字数：6244字预计阅读时间：35分钟＋介绍弹幕诞生于日本的视频平台，后来被B站这种短视频平台引入到国内，并在国内发展壮大。后来逐渐被长视频平台所接受，现在视频相关的应用基本上都会有...
前端实现直播弹幕
qq_38363903的博客
07-21 4317
1：DOM实现 实现思路： 1，在一定的可视区划分出几条水平轨道，然后在轨道中添加弹幕，这样基本可以防止弹幕的重叠 2，建立所需要的dom节点并添加到dom池里面，dom节点总数=轨道数X每条轨道可放置的最大弹幕数，并把建好的dom节点加入到可视区容器里面通过添加class使其定位到可视区外部,并绑定相应的事件进行逻辑处理(注意作用域问题) 3,建立轨道是否可放置弹幕判断函数，此位置为tr...
微信小程序开发中的视频播放和弹幕评论功能
最新发布
吃不胖.
03-17 250
通过 video 组件实现视频播放功能，通过自定义弹幕评论组件来实现弹幕评论功能，并通过视频的时间更新事件来实现视频播放和弹幕评论的联动。三、视频播放和弹幕评论的联动 为了实现视频播放和弹幕评论的联动，我们可以通过监听视频的时间更新事件，在特定的时间点上添加弹幕评论。二、弹幕评论功能 弹幕评论功能可以通过实现一个弹幕评论组件来实现。微信小程序开发中的视频播放和弹幕评论功能是非常常见的需求，下面我将详细介绍如何实现这两个功能，并提供代码案例。这样，当视频播放到特定的时间点时，就会自动添加对应的弹幕评论。
弹幕的实现
diaolanbeng0962的博客
02-07 1439
一、前言 　　今天浏览某网站看到一个活动页有内嵌的弹幕模块（图一），但是看到移动的弹幕重叠很多，不忍直视啊。突然想起很久之前自己写写过类似的弹幕，就翻出来看了一下，呵，也是不忍直视的，最后再附上当年的效果以及代码； 二、大话几点 1、弹幕应用场景，视频中，直播中，微信墙等； 2、弹幕增加了大家的互动性，不再是单纯的傻白甜的看着视频，还可以吐吐槽，增加趣味性，但对于密集恐...
浅谈前端弹幕的设计
程序员成长指北
08-23 1657
大厂技术高级进阶精选好文点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群背景为了创造更好的多媒体体验，许多视频网站都添加了社交机制，使用户可以在媒体时间轴上的特...
前端开发——常用案例分享
不迁怒，不贰过。小知识，大智慧。
06-25 1969
1、网页布局 2、导航菜单 3、图片轮播 4、表单验证 5、动画效果
40个适合前端初学者练手的基础案例（HTML&CSS）
m0_67846661的博客
05-26 4041
英文 | https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361 翻译| 杨小爱 使用多个库进行网页设计会在一定程度上增加页面加载时间，并且难以应用于许多不同的项目。 所以，今天我将向您介绍使用纯 HTML 和 CSS 构建的组件效果。它将帮助您用于许多不同类型的 Web 项目，并进一步提高您在 HTML 和 CSS 方面的技能。 现在让我们一起去看看吧。 01、CSS 单选按钮.
30个HTML+CSS前端开发案例（完结篇）
热门推荐
终成大师的博客
02-14 1万+
30个HTML+CSS前端开发案例（完结篇）
【前端】实际开发案例
我的的博客哦
12-08 1万+
基础的表单实例
弹幕视频播放器插件Aoiplayer
07-24
弹幕视频播放器插件Aoiplayer是一款jQuery Aoiplayer弹幕视频播放器插件，可自定义mp4视频播放，无需PHPASPX等支撑。
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
12-30
之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹幕 css3弹幕性能优化 canvas实现弹幕 canva弹幕的扩展功能 1. css3实现乞丐版的弹幕 (1)如何通过css3实现弹幕 首先来看如何通过css的方法实现一个最简单的弹幕： 首先在html中定义一条弹幕的dom结构： 我是弹幕 弹幕的移动可以通过移动这个block来实现，以从右向左移动的弹幕为例，弹幕的初始位置在容器的最左侧且贴边隐藏（弹幕的最左边与
100个前端超经典实用的案例汇总
03-18
非常漂亮的100个前端案例，包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等等，只有你想不到，拿来即用。
jquery实现视频播放时弹幕效果
02-29
jquery实现视频播放时弹幕效果，动态添加输入弹幕，实时显示出来
纯原生JS 实现的多彩视频弹幕效果。可实现删除 关闭打开弹幕
05-21
适合刚学习完原生js项目的同学。里面简单用到了bootsrap的样式。弹幕是随机大小颜色。可以控制出现消失，列表清楚。适合刚学完面向对象 bom dom操作的同学
一个Vue弹幕视频播放器源码.zip
05-18
一个Vue弹幕视频播放器源码
SSM弹幕视频网站系统源码.zip
05-03
ssm弹幕视频网站系统功能介绍 1.系统使用SSM/springboot框架实现，前段技术使用html+js+css+layui+jsp实现，数据库采用mysql 2.系统分为用户前端和管理员后台管理，前端用户分为会员和非会员。非会员可以通过充值卡...
jQuery自定义视频弹幕插件.rar
01-04
经典的JS特效动画效果，效果实现的全部代码已提供，可供学习借鉴
JavaScript贪吃蛇游戏源码
一个程序员的复习笔记
10-09 7482
蛇对象 属性：方向、一组蛇节（div，div，div）、地图、食物 方法：生成蛇，增加蛇头，计算新蛇头的位置，蛇移动 食物对象 属性：横向位置、纵向位置、div元素、地图 方法：随机位置 游戏对象 属性：蛇，食物 方法：开始 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
视频弹幕网站开发技术选型
09-11
对于视频弹幕网站的开发，可以考虑以下技术选型： 1. 前端开发：可以选择使用 HTML、CSS 和 JavaScript 进行网页的开发，同时可以考虑使用一些前端框架，如React、Vue.js或Angular等来加速开发和提高用户界面的交互体验。 2. 后端开发：对于后端开发，可以选择使用一种服务器端编程语言，如Python、Node.js、Java或Ruby等。根据团队成员的技术背景和项目需求，选择合适的后端框架，如Django、Flask、Express.js或Ruby on Rails等。 3. 数据库：考虑到弹幕网站可能需要存储大量的弹幕数据和用户信息，可以选择关系型数据库（如MySQL、PostgreSQL）或非关系型数据库（如MongoDB）来存储数据。 4. 弹幕功能实现：可以使用WebSocket技术来实时传输和展示弹幕，也可以使用HTTP请求来发送和接收弹幕。对于弹幕的存储和管理，可以使用数据库进行存储，并结合前后端的交互来实现。 5. 视频处理：如果需要对视频进行处理，如视频上传、转码、截取等操作，可以考虑使用FFmpeg等流行的视频处理工具。 6. 服务器和部署：选择合适的云服务提供商（如AWS、阿里云、腾讯云等）来搭建服务器，并根据网站的流量和访问需求进行服务器的配置和部署。 综上所述，技术选型应根据项目需求、团队成员技术背景和预算等因素进行综合考虑，并选择适合的技术栈来开发视频弹幕网站。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值