Npcink Blog
切换菜单

PC 端直接调用哔哩哔哩视频，不跳转 - WordPress 教程

分享一段代码，让大家的网站在 PC 端也能直接展示哔哩哔哩的视频

最后更新于
本页目录9 节

如果我们用插件提供的短代码，例如 Smartideo，在 PC 端会是这个效果：

哔哩哔哩视频

单独打开播放器

虽然在移动端可以正常播放，但在 PC 端需要跳转才行。如果不嫌麻烦，可以看看下面的内容。

这里分享一段代码，让大家的网站在 PC 端也能直接展示哔哩哔哩的视频。

先看看效果：

哔哩哔哩视频

单独打开播放器

Npcink - 怎么实现

  1. 获取代码
  2. 构造代码
  3. 部署代码

注意

目前的方法，移动端高度不对，此文仅供各位参考，有好的代码欢迎在评论区留下链接。

1.获取代码

在哔哩哔哩找到你需要的视频，例如这个

表妹跳舞-《琵琶行》

找到这个位置

哔哩哔哩视频页面，红框标出分享入口。
视频分享弹窗，红框标出嵌入代码和复制按钮。

这样的话，我们就拿到了我们需要的代码了，如下：

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

2.构造代码

上面拿到的代码还不能直接用，需要构造一下。这里提供了一些参数给大家。这些参数需要放到> </iframe>前。

  • width="100%"(视频宽度，推荐为 100%)
  • height="600"(视频高度，推荐为 600)
  • high_quality="1" (1=最高画质 0=最低画质)
  • danmaku="0" (1=打开弹幕 0=关闭弹幕)

小孩子才做选择，我全都要，所以代码看起来是这样的

<iframe src="//player.bilibili.com/player.html?aid=46366415&bvid=BV1Xb411H7v1&cid=81238398&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="600" high_quality="1" danmaku="1"> </iframe>

3.部署代码

可以看出来，这就是一段 HTML 代码，我们可以这样部署。

经典编辑器

选择文本模式,在适当的位置黏贴构造好的代码即可。

WordPress 经典编辑器的文本模式与 iframe 视频嵌入代码。

古登堡编辑器

选择“自定义 HTML”区块，填入构造好的代码即可。

WordPress 区块编辑器中的自定义 HTML 区块和 iframe 视频代码。

补充

CSS 改好后调用别人的 API 能直接 1080P ，Smartideo 改好后能播放 但是只有 360P

铭创网络

昨天在群里看到@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字段，同时加上了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.php 中，加入以下代码：

<script type="text/javascript">
document.getElementById("mcvideo").style.height=document.getElementById("mcvideo").scrollWidth*0.65+"px";
</script>

或者，在需要用到上述代码的地方，添加上方的代码。可以用古德堡编辑器的 HTML 模块放置。

调用效果如下：

哔哩哔哩视频

单独打开播放器

原嵌入脚本已停用，等待人工审核。

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