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

解决方案，通过打开一个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. redis 多实例监控

    1.制作redis_low_discovery.sh脚本 mkdir -p /data/service/script/zabbix cd /data/service/script/zabbix cat ...

  2. 企业级URL检测脚本

    #!/bin/bash #检查web url 是否正常 . /etc/init.d/functions #引用系统函数库 #判断传参个数是否为一个 function usage(){ echo $&q ...

  3. 紫书 例题8-15 UVa 12174 （滑动窗口）

    这道题就是给你一n长序列, 然后把这个序列按顺序分成很多段, 每段长s(最前面可以小于s, 只有第一段的后半段, 最后面也同样, 只有最后一段的前半段), 然后要求是每一段里面没有重复的数, 问你有几 ...

  4. 使用JMX透过防火墙远程监控tomcat服务

    https://my.oschina.net/mye/blog/64879 http://blog.csdn.net/l1028386804/article/details/51547408 http ...

  5. 洛谷——P1455 搭配购买

    https://www.luogu.org/problem/show?pid=1455 题目描述 明天就是母亲节了,电脑组的小朋友们在忙碌的课业之余挖空心思想着该送什么礼物来表达自己的心意呢?听说在某 ...

  6. Leetcode-Best Time to Buy and Sell Stock -java

    题目: Say you have an array for which the ith element is the price of a given stock on day i. If you w ...

  7. 11.Laravel5学习笔记：扩展 Validator 类

    简单介绍 在 Laravel5 中,本身已经提供了丰富的验证规则供我们使用,可是天下应用奇葩多,做为程序猿你会发现永远都有新的验证规则诞生,光是组合已经解救不了你的项目了.这个时候就须要我们扩展 Va ...

  8. hadoop-02-关闭防火墙

    hadoop-02-关闭防火墙 su root service iptables status #查看状态 即时关闭: service iptables stop #关闭 重启之后关闭: chkcon ...

  9. Java数据结构-线性表之单链表LinkedList

    线性表的链式存储结构,也称之为链式表,链表:链表的存储单元能够连续也能够不连续. 链表中的节点包括数据域和指针域.数据域为存储数据元素信息的域,指针域为存储直接后继位置(一般称为指针)的域. 注意一个 ...

  10. 关于Android制作.9.png图片

    第一个问题,.9格式的图片与我们之前的一般图片有什么问题呢? 这是安卓开发里面的一种特殊的图片. 这样的格式的图片在android 环境下具有自适应调节大小的能力. (1)同意开发者定义可扩展区域,当 ...