昨天在群里看到@Muze 发了一篇文章链接，是关于 PC 站点调用 B 站视频的所谓教程，点进去看了一下，才发现他的调用教程中使用的代码，是在 B 站官方视频分享代码的基础上修改调用 HTML5 播放器之后再设定视频显示的固定高度来实现调用的，这种方法有一个不方便的地方就是无法在手机端进行等比缩放的展示和播放。
后来，铭创网络还是决定写一个自己的自适应 B 站视频调用的教程出来，分享给不会调用的小伙伴儿们。话不多说，下面上教程内容：
首先，我们找到 B 站的任意一个视频，比如我们找到这个“2020 苹果 iPhone12 发布会-中文字幕-全程回放”的视频，地址是：https://www.bilibili.com/video/av969951173，我们在视频下方点击分享，会获得如下的“嵌入代码”：
<iframe src="//player.bilibili.com/player.html?aid=969951173&bvid=BV1Cp4y1r72P&cid=245418457&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
在这段代码中，我们能获取视频的aid信息，这个视频的aid就是969951173，所以我们可以将视频分享代码，修改成如下内容：
<iframe src="//player.bilibili.com/player.html?aid=969951173&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
大家可以看到，我们去除了源代码中的bvid和cid字段，同时加上了（2020/12/24 起此功能已失效）和high_quality=1这个字段width=100%的 CSS 样式，这样一来，我们调用的视频就可以是高清而且全宽显示了，但是要自适应，还要设定等比缩放的视频高度！因为在 CSS 中无法实现等比高度，所以，我们可以借助 js 代码内容，我们可以给这个 iframe 标签加一个 id，然后再写一段对应的 js 代码，比如我们设定一个mcvideo的 id，则代码变为：
<iframe id="mcvideo" src="//player.bilibili.com/player.html?aid=969951173&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
同时，我们还要在我们的主题 footer 中，加入以下代码：
<script type="text/javascript">if(document.getElementById("mcvideo")){document.getElementById("mcvideo").style.height=document.getElementById("mcvideo").scrollWidth*0.64+"px";}</script>
这段代码的意思就是视频显示高度是宽度的 0.64 倍，这个比例各位站长可以根据自己网站的内容来设置合适的高度，本站使用这个 0.64 是最佳的比例值！
调用效果如下：
到这里，我们网站调用的 B 站视频，就可以做到高清而且自适应了，大家可以不必担心手机端查看时因为设置了固定高度而不能正常显示了！
相关文章
