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

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

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

首先,我们找到B站的任意一个视频,比如我们找到这个“【饭思思】 真人COS + 超燃演唱 《破茧》!!”的视频,7 J l . 6地址是:https://www.bilibili.com/video/BV1hK4y1h7nV?from=search&seid=62211837476a w 7 0 ` , Z73092960,我们在视频~ $ v + \ # K ^下方点击分享,会获得如下的“嵌入代码”:

<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>

u \ [ h d # d K &这段代码中,我们能获取视频的aid信息,这个视频的aid就是884907494,所以我们可z y f + ]以将视O – U , 2 G 4频分享代码,修改成Y . 8 N b如下内容:把首行“[“替换成”<”

[iframe src="//player.bilibili.com/player.html?aid=754413551&page=1&high_quality=1" width="100%" frameborder="no" scrolling="no" allowfullscreen="allowfullscreen"> 

大家可以看到,我们去除了源代码中的bvidcid字段,同时加上了high_quality=1这个字段和widt. * o A C ! ah=100%的CSS样式,这样一来,我/ ~ _ H n F t 2们调用的视频就可以是高清而且全宽显示了,但是要自适应,还要设J M 8定等比缩放的视频高度!因为在CSS中无法实现: # v \ [ ^ S S K等比高度,所以,我们可以借助js代码内容,我们可以给这个b / , k Miframe标签加一个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>

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

或者,在需要X 4 {7 y N = M j A 9 Q到上述代码的地方,添加上方的代码。可以用古德堡编辑器的HTML模块放置。

调用效果如下:\ g b p


原文链接:https://www.sdklib.cov i = \ ; ]m/2085.html

给TA打赏
共{{data.count}}人
人已打赏
建站教程青龙

青龙 Cdle XDD 简易安装

2021-8-7 18:06:48

打印机驱动

佳能Canon G6070驱动 For Win XP/7/10

2021-1-15 13:17:57

⚠️
免责声明:根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬。”您需知晓本站所有内容资源均来源于网络,仅供用户交流学习与研究使用,版权归属原版权方所有,版权争议与本站无关,用户本人下载后不能用作商业或非法用途,需在24个小时之内从您的电脑中彻底删除上述内容,否则后果均由用户承担责任;如果您访问和下载此文件,表示您同意只将此文件用于参考、学习而非其他用途,否则一切后果请您自行承担,如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 本站为个人博客非盈利性站点,所有软件信息均来自网络,所有资源仅供学习参考研究目的,并不贩卖软件,不存在任何商业目的及用途,网站会员捐赠是您喜欢本站而产生的赞助支持行为,仅为维持服务器的开支与维护,全凭自愿无任何强求。本站部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 momeis6@qq.com 或点击右侧 私信:momeis 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索