乎学技术的logo图标

乎学技术

乎学技术是一个草根个人博客网站

  • 寻梦xunm的头像

    寻梦xunm

    无语了,垃圾评论防不胜防。

    评论

    3天前

  • 寻梦xunm的头像

    寻梦xunm

    又有大佬开始帮忙除草了,各种垃圾评论广告。

    评论

    4天前

  • 寻梦xunm的头像

    寻梦xunm

    解封了,双十一的快递什么时候才能到。

    评论

    6天前

  • 寻梦xunm的头像

    寻梦xunm

    小小的更新一下排版模式

    评论

    1周前

  • 寻梦xunm的头像

    寻梦xunm

    终于没有人每天刷评论了,真清净。

    评论

    2周前

  • 寻梦xunm的头像

    寻梦xunm

    好久没有停过电了,今天一大早上就停电了,好像是在换重新架设安装电线。

    评论

    2周前

广告空位,广告空位。
  • 博客嵌入自适应 B 站视频

  • 寻梦xunm的头像

    如何嵌入 B 站视频
    B 站的网页版已经提供了内嵌的 iframe 代码,我们只需要一键复制后就可以直接使用。

    外链的引用方式
    但是 B 站提供的外链在页面上显示经常是"残废版",而且不能调节清晰度、弹幕之类的,也不能全屏,非常影响体验。

    原版链接

    <iframe src="//player.bilibili.com/player.html?aid=328334002&bvid=BV1tA411q7xi&cid=193834244&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
    

    增大版本
    于是就想给它增大一下,也就是用 html 的方式调一下 width 和 height 的大小。

    <iframe src="//player.bilibili.com/player.html?aid=328334002&bvid=BV1tA411q7xi&cid=193834244&page=1" frameborder="no" scrolling="no" width="95%" height="600"></iframe></iframe>
    
    

    这样其实一般来说是够用了,但是它也有问题,就是移动端适配非常差,我们能不能搞一种更通用的引用方式呢?

    自适应版
    前面引那么多就是为了给出最后这个结论,当然是可以实现自适应的,代码如下,

    <div style="position: relative; padding: 30% 45%;">
    <iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=52516662&bvid=BV1o4411E7xW&cid=91907659&page=1&as_wide=1&high_quality=1&danmaku=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
    </div>
    
    

    参数说明:

    key 说明
    aid 之前 B 站使用的 AV 号
    bvid 目前的 BV 号
    page 第几个视频, 起始下标为 1 (默认值也是为 1)就是 B 站视频, 选集里的, 第几个视频
    as_wide 是否宽屏 【1: 宽屏, 0: 小屏】
    high_quality 是否高清 【1: 高清(最高1080p) / 0: 最低视频质量(默认)】
    danmaku 是否开启弹幕 【1: 开启(默认), 0: 关闭】
    相关信息:

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

    文章来源于:https://bestzuo.cn/posts/blog-bilbli.html

    教程分享

    2周前 0 条评论 36 阅

请输入5+2的计算结果: