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

也想出现在这里?联系我们
阿里云ECS爆款特惠

昨天在群里看到@Muze发了一篇文章链接,是关于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这个字段和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中,加入以下代码:

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

这段代码的意思就是视频显示高度是宽度的0.65倍,经过站长调用调试发现,这个0.64是最佳的比例值!

调用效果如下:

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

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

铭创网络 » WordPress网站直接调用哔哩哔哩自适应视频教程
也想出现在这里?联系我们
腾讯云 11.11 云上盛惠

发表评论

提供最优质的资源集合

立即查看 了解详情