阿里雲aliyunlive視訊直播，設定元素浮在視訊上方

桃子紅了吶發表於2018-01-07
阿里

視訊直播，視訊是可以看到了。但是還需要其他的元素，比如聊天內容，小禮物效果，觀看人員列表等等。怎樣讓其他的元素，浮在視訊上方呢？

解決方案，通過開啟一個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了~，內容就會浮在視訊上方了。

本文轉自TBHacker部落格園部落格，原文連結：http://www.cnblogs.com/jiqing9006/p/6612879.html，如需轉載請自行聯絡原作者


相關文章