PC端无需跳转直接调用哔哩哔哩自适应视频

1、获取B站相应视频嵌入代码：

<iframe src="//player.bilibili.com/player.html?aid=545983251&bvid=BV1Mq4y177qZ& cid=347297256&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

2、更改为：

<iframe src="//player.bilibili.com/player.html?aid=545983251&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>

可以看到，我们去除了源代码中的bvid和cid字段，同时加上了high_quality=1这个字段和width=100%的 CSS 样式，这样一来，我们调用的视频就可以是高清而且全宽显示了，但是要自适应，还要设定等比缩放的视频高度！因为在 CSS 中无法实现等比高度，所以，我们可以借助 js 代码内容，我们可以给这个 iframe 标签加一个 id，然后再写一段对应的 js 代码，比如我们设定一个mcvideo的 id，则代码变为：

<iframe id="mcvideo" src="//player.bilibili.com/player.html?aid=545983251&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 是最佳的比例值！

调用效果如下：https://www.bilibili.com/video/av674642436

到这里，我们网站调用的 B 站视频，就可以做到高清而且自适应了，大家可以不必担心手机端查看时因为设置了固定高度而不能正常显示了！

3、补充关于参数

#https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1 &as_wide=1&high_quality=1&danmaku=0#

经测试high_quality参数可以正常使用，此参数控制外链播放器的默认清晰度： =1时默认清晰度是最高非大会员清晰度，例如： （1）原视频清晰度有360P、480P、720P，外链播放器默认为最高的720P， （2）原视频清晰度有360P、480P、720P、1080P，外链播放器默认为最高的1080P， （3）原视频清晰度有360P、480P、720P、1080P、1080P+，外链播放器默认为1080P， 选择其他清晰度会打开原视频页面，

=其他数值或没有此参数时默认清晰度是360P，选择其他清晰度会打开原视频页面。

就是一个视频列表的aid是一样的，那怎么选择自己想要的视频呢？

其实很简单，刚才那串代码的 page=1 数字1代表的是第一个视频，2代表第二个，以此类推更改数字就可以了。