新的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了~,内容就会浮在视频上方了。测试