【WP技巧】PC端无需跳转直接调用哔哩哔哩自适应视频

/ 0评 / 2

首先,我们找到 B 站的任意一个视频,比如我们找到这个“【李紫婷】百看不厌的发光舞台-《红色高跟鞋》”视频,地址是:“https://www.bilibili.com/video/BV1Xt411C7TK”,我们在视频下方点击分享,会获得如下的“嵌入代码”:

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

在这段代码中,我们能获取视频的aid信息,这个视频的aid就是36522195,所以我们可以将视频分享代码,修改成如下内容:

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

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

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

同时,我们还要在我们的主题 footer 中,加入以下代码(2020-11-14 )修复

<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 站视频,就可以做到高清而且自适应了,大家可以不必担心手机端查看时因为设置了固定高度而不能正常显示了!

这时候有些小白肯定看懵了,我来简单的为大家说下怎么做:

第一步

将上面的那一串js代码加入到正在使用的主题 footer.php的</body>前面。

第二步

将下面代码提示的地方替换为视频获取到的aid号码。

<iframe id="mcvideo" src="//player.bilibili.com/player.html?aid=这里替换为视频aid号码&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>

第三步

将代码按下图方式插入到你想放的地方就可以了。

补充

发现了一个问题,看下图:

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

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注