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