iframe引入H5播放器

   <iframe
   src="https://www.bilibili.com/blackboard/live/live-activity-h5-player.html?cid=23058&type=room" 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	number	房间号(必传)
type	string	这种形式只能传 'room'

demo展示

此demo需要使用手机浏览器打开 demo (opens new window)