阿里云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了~，内容就会浮在视频上方了。

posted @ 2017-03-24 18:27  TBHacker  阅读(1052)  评论(0)  编辑  收藏  举报