PC端直接调用哔哩哔哩视频,不跳转 – WordPress教程
分享一段代码,让大家的网站在PC端也能直接展示哔哩哔哩的视频
首先,我们找到B站的任意一个视频,比如我们找到这个“【饭思思】 真人COS + 超燃演唱 《破茧》!!”的视频,地址是:https://www.bilibili.com/video/BV1hK4y1h7nV?from=search&seid=6221183747673092960,我们在视频下方点击分享,会获得如下的“嵌入代码”:
<iframe src="//player.bilibili.com/player.html?aid=754413551&bvid=BV1hK4y1h7nV&cid=245871289&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
在这段代码中,我们能获取视频的aid
信息,这个视频的aid
就是884907494
,所以我们可以将视频分享代码,修改成如下内容:
<iframe src="//player.bilibili.com/player.html?aid=754413551&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=754413551&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>
同时,我们还要在我们的主题footer中,加入以下代码:
<script type="text/javascript">
document.getElementById("mcvideo").style.height=document.getElementById("mcvideo").scrollWidth*0.64+"px";
</script>
这段代码的意思就是视频显示高度是宽度的0.65倍,经过站长调用调试发现,这个0.64是最佳的比例值!
或者,在需要用到上述代码的地方,添加上方的代码。可以用古德堡编辑器的HTML模块放置。