# 嵌入活动播放器
<iframe
style="width: 700px;height: 400px;"
src="https://www.bilibili.com/blackboard/live/live-activity-player.html?cid=23058"
frameborder="no" framespacing="0" scrolling="no" allow="autoplay; encrypted-media" allowfullscreen="true"
></iframe>
WARNING
iframe无法自适应宽高,需要手动设置width和height,最佳比例是16:9,否则周围会出现黑边
function resizeIframe() {
// 获取当前 iframe 元素
const iframe = document.querySelector('.blp-activity-h5-iframe');
// 获取当前页面宽度,例如 iPhone X 为 375
const width = document.body.offsetWidth;
// 根据当前页面宽度,获取到 iframe 高度。默认为16:9
const height = width * 9 / 16;
// 将获取到的宽高赋值给 iframe
iframe.width = width;
iframe.height = height;
}
// 页面加载完成之后,动态调整 iframe 宽高
window.onload = resizeIframe;
// 页面发生 resize 时,动态调整 iframe 宽高
window.onresize = resizeIframe;
# 参数详情
TIP
URL query参数改变可以更改播放器的配置,值0为不展示,1为展示。
管制原因recommend, danmaku,logo受p1接口影响,URL传入的参数或者p1接口的参数如果有一个是0那么就不展示
不展示右上方直播水印的例子: https://www.bilibili.com/blackboard/live/live-activity-player.html?cid=23058&logo=0 (opens new window)
param | 作用 | 取值 | 默认值 |
---|---|---|---|
cid | 房间号 | 必填 | 必填,不填报错 |
sendpanel | 是否展示右边的互动区域 | 0,1 | 0 |
quality | 切换画质和线路 | 0,1 | 1 |
entrance | 显示进入直播间 | 0:不展示,1:显示在控制栏,2:显示在视频中央 | 1 |
reload | 控制栏重新载入按钮 | 0,1 | 1 |
danmaku | 控制栏弹幕按钮,不显示时弹幕也不会飘过 | 0,1 | 1 |
fullscreen | 控制栏全屏按钮 | 0,1 | 1 |
send | 视频底部发送按钮 | 0,1 | 0 |
recommend | 关播推荐列表 | 0,1 | 1 |
logo | 右上角bilibili logo bilibili直播水印 (opens new window) | 0,1 | 0 |
mute | 是否静音播放(即使用户改过音量,下次进入直播依然静音),默认不静音 | 0,1 | 0 |
enableCtrlUI | 展示控制栏 | 1, 0。 | 默认 1 |
enableAutoPlayTips | 展示无法带声音自动播放的提示 | 1, 0。 | 默认 1 |
# demo展示
# 监听message
播放器的事件触发会收到消息,以playerOperation- 开头的字符串
window.addEventListener('message', function (e) {
console.error(e.data)
}, false)
类型 | 作用 |
---|---|
playerOperation-{"type":"playing","value":{...播放器信息}} | 播放器开始播放时触发,进入页面第一次播放也会触发 |
playerOperation-{"type":"MutePlay","value":{}} | 进入页面后播放器画面能自动播放,但是没有声音(浏览器的policy限制) |
playerOperation-{"type":"NotAutoPlay","value":{}} | 进入页面后无法自动播放(浏览器policy限制) |
playerOperation-{"type":"paused","value":{}} | 用户按下暂停按钮触发 |
playerOperation-{"type":"volumeChange","value":{"disabled":true,"value":90,"roomId":545068}} | 用户控制栏调节音量触发 |
playerOperation-{"type":"liveStateChange","value":{"status":2}} status | 直播状态改变触发 status 2轮播 1直播 0关播 |
# 操作
暂停和播放
postMessage('setPlayer-'+JSON.stringify({ type: 'play', value: false})) true 播放 false 暂停
调节音量
postMessage('setPlayer-'+JSON.stringify({ type: 'changeVolume', value: { volume: 0}}))
调节弹幕
postMessage('setPlayer-'+JSON.stringify({ type: 'setDanmaku', value: {"display":false,"opacity":100,"fontScale":98,"density":48,"area":3,"showMaskOption":false,"enableMask":true}}))
切换清晰度
WARNING
活动页不要使用hevc, !qn.includes('hevc')
postMessage('setPlayer-'+JSON.stringify({ type: 'switchQuality', value: '10000'}))
← 首页播放器 JS引入h5播放器(废弃) →