视频直播，视频是可以看到了。但是还需要其他的元素，比如聊天内容，小礼物效果，观看人员列表等等。怎样让其他的元素，浮在视频上方呢？
解决方案，通过打开一个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了~，内容就会浮在视频上方了。