js实现原生video视频标签上发送文字弹幕效果代码-html代码-BFW代码库

js实现原生video视频标签上发送文字弹幕效果代码

代码语言：html

所属分类：多媒体

代码描述：js实现原生video视频标签上发送文字弹幕效果代码，video标签上覆盖一层canvas，进行弹幕动画。

下面为部分代码预览，完整代码请点击下载或在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>
        <div class="submit">
            <input type="text" placeholder="发个弹幕见证当下" />
            <button>发送</button>
        </div>
    </div>
    <script>
        // 设置按钮点击后的一系列样式
    // 获取按钮+输入框
    const btn = document.querySelector("button");
    const input = document.querySelector("input");
    // second 为倒计时秒数,dmList保存弹幕列表
    let second = 3,
    	dmList = [],
    	dmY = [18, 36, 54];
    // 点击按钮
    btn.addEventListener("click", function () {
    	// 先获取到输入框的值
    	const val = input.value;
    	// 如果val去除两边空格不等于空 就可以发送了
    	if (val.trim() !== "") {
    		// 也清除输入框的值
    		input.value = "";
    		this.className = "btn_active";
    		this.innerHTML = `${second} s`;
    		// 开启倒计时定时器
    		const timer = setInterval(() => {
    			second--;
    			this.innerHTML = `${second} s`;
    			// 当秒数为0 则恢复
    			if (second === 0) {
    				// 清除定时器
    				clearIn.........完整代码请登录后点击上方下载按钮下载查看