阿里雲aliyunlive視頻直播，設置元素浮在視頻上方

時間 2019-12-02

原文原文鏈接

視頻直播，視頻是能夠看到了。可是還須要其餘的元素，好比聊天內容，小禮物效果，觀看人員列表等等。怎樣讓其餘的元素，浮在視頻上方呢？

解決方案，經過打開一個frame層，設置body的背景爲透明的。

新的frame層，會漂浮在視頻上方，背景透明，能夠不遮擋住視頻。
這樣，視頻和其餘元素就可以共同存在了。javascript
須要兩個頁面，一個用於被視頻依附，aliyunlive_play_con.htmlcss
一個用於存放其餘的頁面元素，好比聊天內容，小禮物效果，觀看人員列表等等，aliyunlive_play_frm.htmlhtml
在aliyunlive_play_con頁面中開啓視頻，並開啓frame。java

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);"api

<!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了~，內容就會浮在視頻上方了。測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。