【Web前端】用<iframe>在HTML中插入B站视频

最近在写博客的时候遇到了要在文章中插入视频的需求，由于 <video> 标签要从本地引用资源，因此选择了用 <iframe> 标签接入B站视频的播放器的方法。

1、获取嵌入代码：将鼠标悬停在PC网页端B站视频播放器下方的「分享」按钮上，点击弹出元素中的「嵌入代码」获取。

2、嵌入代码结构：

<iframe src="//player.bilibili.com/player.html?aid=NNNNNNNN6&bvid=BVXXXXXXXX&cid=NNNNNNNNNN&page=1&autoplay=1&danmaku=1&as_wide=1&t=60" height="1920" width="1080" name="player" allowfullscreen="true" sandebox=""></iframe>

src 参数：(写在 src 引号中链接最后，各项之间用「&」连接)

「aid」article id，即视频的 av 号；B站在 2020.03 把 av 号根据一定的算法转换成了 bv 号，所以如果填了 bvid ，那么不填 aid 也可。

「bvid」bilibili video id，即视频的 bv 号。

「cid」chat id，即视频对应弹幕池的编号，如果填了 aid / bvid，那么不填也可。

「page」视频集数（默认为1），即分集视频中的第几集（起始下标为1）。

「autoplay」设定视频是否自动播放，1为自动播放、0为禁止自动播放，默认为1；注意：开启自动播放会默认伴随静音开播。

「danmaku」是否开启弹幕，1为开启、0为关闭，默认为1。

「as_wide」是否宽屏，1为宽屏、0为小屏，默认为1。

「t」<iframe>加载完毕时自动跳转至该秒数并自动播放，单位s，默认为0。

「high_quality」视频清晰度，1为高清、0为最低清晰度，默认为0；注意：由于<iframe>默认处于未登陆状态，且B站播放器在未登录状态下只允许视频 360p 播放，所以该参数约等于没用。

iframe 参数：（写在 iframe 标签中，各项之间用空格隔开）

「src」规定 <iframe> 中显示文档的URL。

「height」规定 <iframe> 宽度，单位px。

「width」规定 <iframe> 高度，单位px。

「name」规定 <iframe> 名称。

「allowfullscreen」规定 <iframe> 是否允许全屏播放。

「seamless」令 <iframe> 看起来就像是父文档的一部分，是一个 Boolean 值；注意：只有 Chrome 和 Safari 6 支持 <iframe> 标签的 seamless 属性。

「sandbox」对 <iframe> 的额外限制，用以提升iFrame的安全性；注意：sandbox 值既可以是用空格分隔的一系列指定的字符串，也可以是一个空字符串（将会启用所有的限制）。

其他属性，如「align」、「scrolling」等，HTML5 不支持，建议使用 CSS 代替（建议所有样式有关的属性都尽量使用 CSS 代替）。

sandbox 参数：（写在 sandbox 属性的引号中，各项之间用空格隔开）

「allow-same-origin」允许将内容作为普通源来对待，否则嵌入的内容将被视为一个独立的源（跨域）。

「allow-top-navigation」允许嵌入的网页对顶级窗口进行导航。

「allow-forms」允许提交表单。

「allow-scripts」允许脚本执行。

「allow-modals」允许弹出提示框。

「allow-popups」允许嵌入的网页使用 window.open(); 方法弹出窗口。

「allow-popups-to-escape-sandbox」允许嵌入的网页使用 window.open(); 方法弹出窗口，且弹出的窗口不受沙箱的限制。

「allow-downloads-without-user-activation」允许在没有用户激活的情况下，嵌入的网页启动下载。

「allow-orientation-lock」允许嵌入的网页用脚本锁定屏幕的方向。

「（空字符串）」打开以上所有限制。

注意：同时开启「allow-scripts」和「allow-same-origin」将使得嵌入的网页可以通过脚本改变或删除 sandbox 属性。

方法一：设置 sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" 即可阻止通过 <iframe> 跳转至B站（原理不太懂，但确实有效）。

方法二：改用移动网页端B站视频播放器的嵌入代码。

<iframe
                src="//www.bilibili.com/blackboard/html5mobileplayer.html?bvid=BVXXXXXXXX&page=1&as_wide=1"
                allowfullscreen="allowfullscreen"></iframe>

与PC网页端的不同：

1、播放器路径由「//player.bilibili.com/player.html」变为「//www.bilibili.com/blackboard/html5mobileplayer.html」

2、界面十分简洁，只有播放/暂停、进度条、弹幕开关、静音、全屏功能，没有跳转功能即不会触发发点击跳转。

3、其他参数与上文基本一致，但「autoplay」无论值是什么都会开启自动播放，不赋值会报错，只有不写这个属性才能禁止自动播放。

因为要维持 <iframe> 16:9 的宽高比，因此只需要令 <iframe> 的宽度随窗口宽度变化，再令其高度随宽度按比例变化即可。

                    
    <script>
        const setIframeHeight = () => {
            document.getElementById('iframe').style.width = window.innerWidth + 'px';
            document.getElementById('iframe').style.height = (9 * document.getElementById('iframe').offsetWidth / 16) + 'px';
        }

        setIframeHeight();
        addEventListener('resize', setIframeHeight);
    </script>

【Web前端】用<iframe>在HTML中插入B站视频 2023.08.07