当前位置:网站首页>PHP live source code to achieve simple barrage effect related code
PHP live source code to achieve simple barrage effect related code
2022-08-02 02:11:00 【Life doesn't stop, fight doesn't stop】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<title>Community group buying live room</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.btn{
margin-top:10px;
margin-left: 80px;
}
.wrapBox {
width: 800px;
height: 550px;
border: 1px solid #000;
margin: 50px auto 0;
}
.videoBox {
height: 500px;
position: relative;
overflow: hidden;
}
.videoBox img {
width: 100%;
height: 100%;
}
video {
width: 100%;
}
.danmuSend {
display: flex;
height: 50px;
}
#content {
flex: 1;
}
#send {
width: 100px;
}
.danmu {
color: #f00;
font-size: 20px;
position: absolute;
left: 800px;
top: 0;
white-space: nowrap;
}
.danmu img {
width: 30px;
height: 30px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="wrapBox">
<div class="videoBox">
<!--<img src="http://imgvue.wyt.plus/2022-06-21/1.jpg" />-->
<div id="id_test_video" style="width:100%; height:auto;"></div>
<span class="danmu">我是弹幕</span>
</div>
<div class="danmuSend">
<input id="content" type="text">
<button id="send">发送</button>
</div>
<div class="btn">
<a href="http://10.3.38.7:9527/#/marketing/like/list">
<button style="width:100px" type="button" class="btn btn-danger">返回</button>
</a>
<button style="width:100px;margin-left:50px" type="button" class="btn btn-light">强制关闭</button>
</div>
</div>
</body>
<script src="https://web.sdk.qcloud.com/player/tcplayerlite/release/v2.4.1/TcPlayer-2.4.1.js" charset="utf-8"></script>
<script src="49.234.23.21/live/TcPlayer-2.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
var player = new TcPlayer('id_test_video', {
"m3u8": "webrtc://live.wyt.plus/live/wyt",
"flv": "http://live.wyt.plus/live/wyt.flv", //增加了一个 flv 的播放地址,用于PCPlay on the platform 请替换成实际可用的播放地址
"autoplay" : true, //iOS 下 safari 浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
"poster" : "http://www.test.com/myimage.jpg",
"width" : '800',//视频的显示宽度,请尽量使用视频分辨率宽度
"height" : '500'//视频的显示高度,请尽量使用视频分辨率高度
});
</script>
<script>
var oSend = document.querySelector('#send');
var oContent = document.querySelector('#content');
var oVideoBox = document.querySelector('.videoBox');
//点击发送按钮时触发此事件
oSend.onclick = function () {
//获取文本框输入的内容
var content = oContent.value;
createDanmu(content)
}
function createDanmu(content) { // 创建弹幕 => 移动 => 消失
//新建一个span类型的标签
var oSpan = document.createElement('span');
//将获取的输入的内容传入标签
oSpan.innerHTML = '<img src="http://imgvue.wyt.plus/2022-06-21/6.jpg">' + content;
//添加其class属性,对头像图片进行样式修改
oSpan.classList.add('danmu');
//设置其字体颜色属性随机
oSpan.style.color = randomColor();
//在oVideoBox所代表的的标签内添加该元素
oVideoBox.appendChild(oSpan);
//使该新标签出现的位置随机
oSpan.style.top = Math.round(Math.random() * (oVideoBox.clientHeight - oSpan.offsetHeight)) + 'px';
//设置定时器,使其位置改变
var timer = setInterval(function () {
// 初始位置
var start = oSpan.offsetLeft;
// 偏移量
start -= 10;
//先判断,使其向左移动相对父元素的距离最终小于其右边时移除该元素,并清除该定时器
if (start < -oSpan.offsetWidth) {
clearInterval(timer);
oSpan.remove();
}
// 赋值新位置
oSpan.style.left = start + 'px';
}, 100);
}
//用来生成随机颜色
function randomColor() {
return 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ')';
}
</script>
</html>
边栏推荐
- typescript30-any类型
- Check if IP or port is blocked
- 力扣(LeetCode)213. 打家劫舍 II(2022.08.01)
- LeetCode刷题日记:153、寻找旋转排序数组中的最小值
- typescript38-class的构造函数实例方法继承(implement)
- 哈希冲突和一致性哈希
- Day115. Shangyitong: Background user management: user lock and unlock, details, authentication list approval
- 力扣、752-打开转盘锁
- 项目后台技术Express
- 『网易实习』周记(三)
猜你喜欢
数据链路层的数据传输
HSDC is related to Independent Spanning Tree
软件测试 接口自动化测试 pytest框架封装 requests库 封装统一请求和多个基础路径处理 接口关联封装 测试用例写在yaml文件中 数据热加载(动态参数) 断言
Multi-Party Threshold Private Set Intersection with Sublinear Communication-2021:解读
The Paddle Open Source Community Quarterly Report is here, everything you want to know is here
Redis Subscription and Redis Stream
Software testing Interface automation testing Pytest framework encapsulates requests library Encapsulates unified request and multiple base path processing Interface association encapsulation Test cas
MySQL optimization strategy
A full set of common interview questions for software testing functional testing [open thinking questions] interview summary 4-3
Handwritten Blog Platform ~ Day Two
随机推荐
Yunhe Enmo: Let the value of the commercial database era continue to prosper in the openGauss ecosystem
Golang分布式应用之定时任务
【 wheeled odometer 】
哈希冲突和一致性哈希
Effects of Scraping and Aggregation
YGG Guild Development Plan Season 1 Summary
typescript38-class的构造函数实例方法继承(implement)
Hash collisions and consistent hashing
C语言之插入字符简单练习
bool框架::PosInGrid (const简历:关键点kp, int &posX, int诗句)
Win Go开发包安装配置、GoLand配置
LeetCode Review Diary: 34. Find the first and last position of an element in a sorted array
openGauss切换后state状态显示不对
LeetCode刷题日记:74. 搜索二维矩阵
Ringtone 1161. Maximum In-Layer Elements and
Constructor instance method of typescript36-class
LeetCode 213. Robbery II (2022.08.01)
hash table
编码经验之谈
From 2023 onwards, these regions will be able to obtain a certificate with a score lower than 45 in the soft examination.