# 嵌入活动播放器

<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'}))