视频直播，视频是可以看到了。但是还需要其他的元素，比如聊天内容，小礼物效果，观看人员列表等等。怎样让其他的元素，浮在视频上方呢？

解决方案，通过打开一个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视频直播，设置元素浮在视频上方的更多相关文章

  1. 阿里云低延时直播 RTS 能力升级 让直播推流效果更佳

    行业背景 直播技术飞速发展让各个行业的用户体验呈现多样化和个性化,不同业务场景下创新实践满足大众对于音视频互动体验和参与的高标准要求.历经2020年初的巨变之后,以视频.游戏.电商.教育为主的互联网经 ...

  2. 阿里云 ECS 监控报警设置

    1.阿里云监控项说明 https://helpcdn.aliyun.com/document_detail/43505.html 2.监控设置 3.报警规则 4.设置阈值 5.确定即可. 6.效果图

  3. 搭建yum本地源_阿里云CentOS服务器初始化设置

    CentOS服务器初始化设置其实不分阿里云或其它服务器了,操作配置过程与步骤也差不多一.挂载硬盘 1.磁盘分区 fdisk -l #查看设备,一般可以看到设备名为/dev/xvdb fdisk /de ...

  4. 阿里云邮件服务器怎么设置才能在QQ邮箱访问，互发邮件?

    必须要在阿里云邮上打开IMAP和SMTP IMAP能够代发代收.在线更改.垃圾拦截,比POP3好: 记住打开的协议号: IMAP:143 带SSL:993 SMTP: 25 带SSL:465 前提是能 ...

  5. 阿里云全球首次互联网8K直播背后的技术解读

    3月28日,云栖大会·深圳峰会现场,阿里云发布并现场演示了阿里视频云最新8K互联网直播解决方案.这是全球发布的首个8K视频云解决方案,也是全球首次8K互联网视频直播. 视频地址:https://v.q ...

  6. 云栖大会压轴好戏 阿里云发布视频云V5计划与系列新产品

    9月25 - 27日,2019云栖大会如期召开.在大会最后一天下午,阿里云智能视频云分论坛为今年的云栖大会献上了一场精彩的压轴好戏. 视频云V5计划发布 使能生态合作伙伴 会上,阿里云智能研究员金戈进 ...

  7. 揭秘阿里云 RTS SDK 是如何实现直播降低延迟和卡顿

    作者:予涛 途坦 这个夏天,没什么能够比一场酣畅淋漓的奥运比赛来的过瘾.但是,在视频平台直播观看比赛也有痛点:"卡顿" 和 "延时".受限于不同地域.复杂的网络 ...

  8. 【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直 ...

  9. H5视频直播扫盲

    H5视频直播扫盲 2016-05-25 • 前端杂项 • 14 条评论 • lvming19901227 视频直播这么火,再不学就out了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主 ...

随机推荐

  1. HDU-2222 Keywords Search 字符串问题 AC自动机

    题目链接:https://cn.vjudge.net/problem/HDU-2222 题意 给一些关键词,和一个待查询的字符串 问这个字符串里包含多少种关键词 思路 AC自动机模版题咯 注意一般情况 ...

  2. BZOJ 3881 [COCI2015]Divljak (Trie图+Fail树+树链的并+树状数组维护dfs序)

    题目大意: Alice有n个字符串S_1,S_2...S_n,Bob有一个字符串集合T,一开始集合是空的. 接下来会发生q个操作,操作有两种形式: “1 P”,Bob往自己的集合里添加了一个字符串P. ...

  3. 紫书 习题 8-2 UVa 1610 （暴力出奇迹）

    这道题我真的想的非常的复杂, 拿草稿纸一直在找规律,推公式, 然后总有一些特殊的情况. 然后就WA了N次.无奈之下看了别人的博客, 然后就惊了.直接暴力枚举两个相邻字符串 里面的所有可能就可以了--真 ...

  4. 微信小程序踩坑记

    1:微信小程序之去掉横向滑动滚动条 /** 去除横向滚动条 */ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 2: ...

  5. 在oracle中采用connect by prior来实现递归查询

    注明:该文章为引用别人的文章,链接为:http://blog.csdn.net/apicescn/article/details/1510922 , 记录下来只是为了方便查看 原文: connect ...

  6. ShopEx文章页添加上一篇下一篇功能

    在全部的文章页中,会常常发现都会有这么一个功能.能引导用户去查看上一篇文章或下一篇文章,而在ShopEx中,我DEZEND了一下文章模型.并没有找到上一篇这种函数功能,因此,这就须要我们手动在相应的文 ...

  7. mysql-高级语言语法

    一.注释 从#字符到行尾 从'-- '序列到行尾.两个破折号之后至少要有一个空格符或制表符. 二.设置变量 用户变量的形式为@var_name,其中变量名varname可以有当前字符集的文字数字字符. ...

  8. taglist安装

    注意:taglist依赖于ctags,所以要先装ctags,否则taglist装了也没法用!1.首先安装ctags1)ubuntu安装sudo apt-get install exuberant-ct ...

  9. bzoj1016: [JSOI2008]最小生成树计数(kruskal+dfs)

    1016: [JSOI2008]最小生成树计数 题目:传送门 题解: 神题神题%%% 据说最小生成树有两个神奇的定理: 1.权值相等的边在不同方案数中边数相等  就是说如果一种方案中权值为1的边有n条 ...

  10. rest_framework-版本-总结完结篇

    总urls.py from django.conf.urls import url, include urlpatterns = [ url(r'^api/', include('api.urls') ...