PC端无需跳转直接调用哔哩哔哩自适应视频

   日期:2024-12-29     作者:e6bi6       评论:0    移动:http://3jjewl.riyuangf.com/mobile/news/14020.html
核心提示:1、获取B站相应嵌入代码:iframe src=https://cloud.tencent.com/developer/article///player.bilibili.com/player.html?aid=545

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是一样的,那怎么选择自己想要的视频呢?

 
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

举报收藏 0打赏 0评论 0
 
更多>同类最新资讯
0相关评论

相关文章
最新文章
推荐文章
推荐图文
最新资讯
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号