阿里云aliyunlive视频直播，设置元素浮在视频上方
视频直播，视频是可以看到了。但是还需要其他的元素，比如聊天内容，小礼物效果，观看人员列表等等。怎样让其他的元素，浮在视频上方呢？
解决方案，通过打开一个frame层，设置body的背景为透明的。
新的frame层，会漂浮在视频上方，背景透明，可以不遮挡住视频。
这样，视频和其他元素就能够共同存在了。需要两个页面，一个用于被视频依附，aliyunlive_play_con.html
一个用于存放其他的页面元素，比如聊天内容，小礼物效果，观看人员列表等等，aliyunlive_play_frm.html
在aliyunlive_play_con页面中开启视频，并开启frame。
apiready = function () {
mediaPlayer(); // 开启视频直播
openFrmPro('aliyunlive_play_frm'); // 打开frame层
}
function mediaPlayer() {
mediaPlayer = api.require('aliyunLive');
mediaPlayer.init({
rect: {
x: 0,
y: 0,
w: api.winWidth,
h: api.winHeight
},
accessKeyId : 'xxx',
accessKeySecret : 'xxx',
businessId : 'yunlutong',
fixedOn:'aliyunlive_play_con', // 视频依附的页面
fixed:false
}, function(ret, err) {
prepareToPlay();
play();
addEventListener();
});
}
在frame层中的body添加透明属性，style="background: rgba(0, 0, 0, 0.1);"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
<title>直播测试</title>
<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
<style>
</style>
</head>
<body style="background: rgba(0, 0, 0, 0.1);">
<div style="font-size: 25px;text-align: center;margin-top: 20px;" onclick="alert('我是头部');">头部</div>
<script type="text/javascript" src="../../script/api.js"></script>
</body>
</html>
ok了~，内容就会浮在视频上方了。
阿里云aliyunlive视频直播，设置元素浮在视频上方的更多相关文章
- 阿里云低延时直播 RTS 能力升级 让直播推流效果更佳
行业背景 直播技术飞速发展让各个行业的用户体验呈现多样化和个性化,不同业务场景下创新实践满足大众对于音视频互动体验和参与的高标准要求.历经2020年初的巨变之后,以视频.游戏.电商.教育为主的互联网经 ...
- 阿里云 ECS 监控报警设置
1.阿里云监控项说明 https://helpcdn.aliyun.com/document_detail/43505.html 2.监控设置 3.报警规则 4.设置阈值 5.确定即可. 6.效果图
- 搭建yum本地源_阿里云CentOS服务器初始化设置
CentOS服务器初始化设置其实不分阿里云或其它服务器了,操作配置过程与步骤也差不多一.挂载硬盘 1.磁盘分区 fdisk -l #查看设备,一般可以看到设备名为/dev/xvdb fdisk /de ...
- 阿里云邮件服务器怎么设置才能在QQ邮箱访问，互发邮件?
必须要在阿里云邮上打开IMAP和SMTP IMAP能够代发代收.在线更改.垃圾拦截,比POP3好: 记住打开的协议号: IMAP:143 带SSL:993 SMTP: 25 带SSL:465 前提是能 ...
- 阿里云全球首次互联网8K直播背后的技术解读
3月28日,云栖大会·深圳峰会现场,阿里云发布并现场演示了阿里视频云最新8K互联网直播解决方案.这是全球发布的首个8K视频云解决方案,也是全球首次8K互联网视频直播. 视频地址:https://v.q ...
- 云栖大会压轴好戏 阿里云发布视频云V5计划与系列新产品
9月25 - 27日,2019云栖大会如期召开.在大会最后一天下午,阿里云智能视频云分论坛为今年的云栖大会献上了一场精彩的压轴好戏. 视频云V5计划发布 使能生态合作伙伴 会上,阿里云智能研究员金戈进 ...
- 揭秘阿里云 RTS SDK 是如何实现直播降低延迟和卡顿
作者:予涛 途坦 这个夏天,没什么能够比一场酣畅淋漓的奥运比赛来的过瘾.但是,在视频平台直播观看比赛也有痛点:"卡顿" 和 "延时".受限于不同地域.复杂的网络 ...
- 【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直 ...
- H5视频直播扫盲
H5视频直播扫盲 2016-05-25 • 前端杂项 • 14 条评论 • lvming19901227 视频直播这么火,再不学就out了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主 ...
随机推荐
- state.sls web.apache
[root@master01 web]# salt 'node02' state.sls web.apache node02: ---------- ID: apache-inst ...
- Python排序 插入排序
插入排序从前往后遍历数组的每一个元素,对每一位元素都将其插入到已经有序的部分数组中,所以插入排序的要点就是找出要插入元素在已经有序的部分中的位置,同时,由于插入排序采用原地排序(in-place)算法 ...
- 紫书 例题11-10 UVa 1349 （二分图最小权完美匹配）
二分图网络流做法 (1)最大基数匹配.源点到每一个X节点连一条容量为1的弧, 每一个Y节点连一条容量为1的弧, 然后每条有向 边连一条弧, 容量为1, 然后跑一遍最大流即可, 最大流即是最大匹配对数 ...
- 紫书 习题8-7 UVa 11925（构造法， 不需逆向）
这道题的意思紫书上是错误的-- 难怪一开始我非常奇怪为什么第二个样例输出的是2, 按照紫书上的意思应该是22 然后就不管了,先写, 然后就WA了. 然后看了https://blog.csdn.net/ ...
- numpy学习笔记 - numpy常用函数、向量化操作及基本数学统计方法
# -*- coding: utf-8 -*-"""主要记录代码,相关说明采用注释形势,供日常总结.查阅使用,不定时更新.Created on Fri Aug 24 19 ...
- HTTP——状态码
(转载) 完整的 HTTP 1.1规范说明书来自于RFC 2616,你可以在http://www.talentdigger.cn/home/link.php?url=d3d3LnJmYy1lZGl0b ...
- Android 主界面长按创建快捷方式
Android中创建快捷方式主要有两种方式.一是在代码中直接加入生成桌面快捷方式的代码:二是通过小部件加入; 这篇文章主要讲另外一种方法! 1.通过在AndroidManifest文件里为Activi ...
- mysql-通过例子解释四种隔离级别
SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的. 低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. 首先,我们使用 test 数据库, ...
- 各大CMS系统优缺点（2017）
各大CMS系统优缺点(2017) 总结 WordPress之前用过,可能需要再完整的用一个才会比较了解. 从2015年各行业建站规模来看,还有一大批人想自己搭建网站,下面为大家盘点一下比较实用CMS系 ...
- 福建省赛--Problem E The Longest Straight(标记+二分)
Problem E The Longest Straight Accept: 71 Submit: 293 Time Limit: 1000 mSec Memory Limit : 327 ...