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

注意:本文最后更新时间:2020-12-24 23:58:52,文中部分资源内容具有一定的时效性,若文中的资源内容发生错误或已经失效,请在下方留言或者点击右下角QQ图标联系我们。

[email protected] 发了一篇文章链接,是关于 PC 站点调用 B 站视频的所谓教程,点进去看了一下,才发现他的调用教程中使用的代码,是在 B 站官方视频分享代码的基础上修改调用 HTML5 播放器之后再设定视频显示的固定高度来实现调用的,这种方法有一个不方便的地方就是无法在手机端进行等比缩放的展示和播放。

Bilibili 2019 Halloween

后来,站长还是决定写一个自己的自适应 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>

大家可以看到,我们去除了源代码中的bvidcid字段,同时加上了high_quality=1这个字段此功能已暂时失效,2020/12/24width=100%的 CSS 样式,这样一来,我们调用的视频就可以是高清此功能已暂时失效,2020/12/24而且全宽显示了,但是要自适应,还要设定等比缩放的视频高度!因为在 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 中,加入以下代码(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 站视频,就可以做到高清而且自适应了,大家可以不必担心手机端查看时因为设置了固定高度而不能正常显示了!

本站所有资源解压码为:www.yephy.com
铭创网络——精选WordPress主题及WordPress插件,帮助站长快速搭建心仪的网站。
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress 建站、仿站、开发、定制等各类服务
3、英文模板(主题)安装费用为150元/次,汉化主题首次免费安装(二次安装100元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: yephy8#gmail.com,请自行替换#),我们会及时删除,给您带来的不便,我们深表歉意!

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

5 评论

  1. 感觉不太行 用别的视频就变得特别小 用这个苹果的宣传片就正常 不知道为什么 代码除了那个链接都一模一样
    我还试了别的代码 也是旧视频是正常大小但是新视频就变得特别小

  2. 可以了
    原来是因为我预览视频的问题QAQ

  3. 我发现要在aid那串数字后面加上&才可以正常大小的视频

发表评论

提供最优质的资源集合

立即查看 了解详情