分享好友 最新资讯首页 最新资讯分类 切换频道
PC端无需跳转直接调用哔哩哔哩自适应视频
2024-12-29 19:54

1、获取B站相应嵌入代码:

<iframe src=https://cloud.tencent.com/developer/article/"//player.bilibili.com/player.html?aid=545983251&bvid=BV1Mq4y177qZ& cid=347297256&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

2、更改为:

<iframe src=https://cloud.tencent.com/developer/article/"//player.bilibili.com/player.html?aid=545983251&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=https://cloud.tencent.com/developer/article/"//player.bilibili.com/player.html?aid=545983251&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100%> </iframe>

同时,我们还要在我们的主题 footer 中,加入以下代码:

<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 站视频,就可以做到高清而且自适应了,大家可以不必担心手机端查看时因为设置了固定高度而不能正常显示了!

3、补充关于参数

#https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1 &as_wide=1&high_quality=1&danmaku=0#

经测试high_quality参数可以正常使用,此参数控制外链播放器的默认清晰度: =1时默认清晰度是最高非大会员清晰度,例如: (1)原视频清晰度有360P、480P、720P,外链播放器默认为最高的720P, (2)原视频清晰度有360P、480P、720P、1080P,外链播放器默认为最高的1080P, (3)原视频清晰度有360P、480P、720P、1080P、1080P+,外链播放器默认为1080P, 选择其他清晰度会打开原视频页面,

=其他数值或没有此参数时默认清晰度是360P,选择其他清晰度会打开原视频页面。

就是一个视频列表的aid是一样的,那怎么选择自己想要的视频呢?

最新文章
5分钟搞出大模型应用!阿里云通义“全家桶”来了,从基础设施到应用平台全栈技术UP...
鱼羊 衡宇 发自 凹非寺量子位 | 公众号 QbitAI刚刚,阿里云搬出通义大模型“全家桶”炸场了!就在今天的云栖大会上&
cms设置是什么意思
CMS设置详解:理解内容管理系统的基础操作CMS,即内容管理系统(Content Management System),是一种用于创建、编辑、管理、发
2023流行的抓鬼游戏排行榜(可以捉鬼的手机游戏排行榜)
2023流行的抓鬼游戏排行榜有哪些?有些小伙伴很喜欢玩一些刺激又惊悚的游戏,比如抓鬼类的游戏,因为在玩的过程中可以体验到游戏
Ehcache(04)——设置缓存的大小
                                                                               
ai智能问答系统-为企业创造更大的商业价值
随着人工智能技术的不断发展,AI智能问答系统在各行各业得到了广泛应用。本文将深入探讨AI智能问答系统的功能,并介绍其在各个领
AI自动生成文章在线:让你的写作更轻松
伙伴们,AI自动生成文章在线工具真的太香了!不仅能帮你快速搞定各种文案,还能激发创作灵感,简直就是写作神器!不信?往下看,
Google 的常見檢索器清單
Google 的常見檢索器可用來尋找資訊,以便建構 Google 搜尋索引、執行其他產品專屬的檢索作業,以及進行分析。自動檢索時,這些
AI写作在线,陪你完成精彩作品
如今,随着人工智能(AI)技术的迅猛发展,AI写作在线平台已经弥补了传统写作过程中的一些短板。无需长时间思考和努力培养创作能
Data Formulator:使用prompt就能轻松完成数据可视化
编者按:在使用 AI 驱动的数据可视化工具时,你是否遇到过这些难题?比如,当你想要设计图表时,需要一次性描述你的可视化需求,
2024世界大学排行榜 全球十大大学排名
今天国际学校小编整理了2024世界大学排行榜 全球十大大学排名相关信息,希望在这方面能够更好帮助到大家。1、2024QS世界大学排名