iframe引入H5播放器

   <iframe
   src="https://www.bilibili.com/blackboard/live/live-mobile-playerV3.html?roomId=7734200&danmaku=1" frameborder="0"></iframe>

WARNING

iframe无法自适应宽高,需要手动设置width和height,最佳比例是16:9,否则周围会出现黑边
调试pc端仅支持Safari，或使用手机端

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;

iframe引入H5播放器URL param

参数	值	备注
roomId	7734200	房间号(必传)
danmaku	0,1	是否展示弹幕(默认为0)

demo展示

demo (opens new window)