linux

WordPress网站直接调用哔哩哔哩自适应视频教程

五仁 · 2月16日 · 2021年 · · 本文共1316个字 · 预计阅读5分钟1228次已读

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>

大家可以看到,我们去除了源代码中的bvidcid字段,同时加上了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模块放置。

0 条回应