zoukankan      html  css  js  c++  java
  • 关于博客园内嵌入bilibili视频

    一、原理

    使用iframe标签,更改其中src对应bilibili视频的aid和cid,组装新的HTML源码,即可在文章内嵌入bilibili视频。

    二、获取aid和cid

    aid为视频的av号,但是每个av号下不一定只有1p,所以B站用cid来管理视频的真正id,那么也可以说如果视频只有1p,那么cid就无用了,我测试直接填1也是可以的。

    这里介绍两种获取aid和cid的方法:

    方法一

    先观察视频的URL

    https://www.bilibili.com/video/av84267566?from=search&seid=13400362594908841480
    

     其中84267566就是av号。

    或者直接点右键——查看网页源代码——ctrl+f——搜索'aid='、‘cid=’ 就可以了。

    方法二(推荐)

    我们在转发视频的时候直接可以看到嵌入代码

    这是官方准备的嵌入代码,可以直接拿来用,但是显示效果不是很理想,样式不是我们希望的,需要调整一下。

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

    从嵌入代码中我们直接得到了aid和cid

    我们重新设置一下功能、大小、样式,得到可用的HTML代码

    <iframe src="//player.bilibili.com/player.html?aid=84267566&amp;cid=145147963&amp;page=1" frameborder="no" scrolling="no" width="95%" height="600"></iframe></p>

    以后插入需要的bilibili视频只需要改变上面的aid和cid就可以了!

    三、移动端适配

    ExperDot大佬提出移动端出现不适配的问题,我当时其实并没有考虑移动端的问题,固定了播放器的高度造成了这个问题。

     大佬已经给出了解决方案

    <div style="position: relative; padding: 30% 45%;">
    <iframe style="position: absolute;  100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
    </div>

    可以用这个代码作为样板,以后只需要改变src的id好就可以了!

    再次感谢大佬ExperDot的帮助!

    四、嵌入方法

    选择tinyMCE编辑器,这是博客园默认的编辑器,选择编辑html原代码,插入上面的代码即可。

     

    五、参数说明

    本来这篇博客是我的游戏之作,但没想到捧场的朋友这么多,我看到评论区有朋友讲清晰度的问题,我这里再说一下几个参数。

    https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0
    key说明
    aid 视频ID
    就是B站的 avxxxx 后面的数字
    cid 应该是客户端id, clientId 的缩写(推测的, 不一定准确)
    经过测试, 这个字段不填也没关系
    page 第几个视频, 起始下标为 1 (默认值也是为1)
    就是B站视频, 选集里的, 第几个视频
    as_wide 是否宽屏
    1: 宽屏, 0: 小屏
    high_quality 是否高清
    1: 高清, 0: 最低视频质量(默认)
    如视频有 360p 720p 1080p 三种, 默认或者 high_quality=0 是最低 360p
    high_quality=1 是最高1080p
    danmaku 是否开启弹幕
    1: 开启(默认), 0: 关闭

    所以只要设置high_quality=1就能开启最高画质了。

    B站官方并没有给出文档说明.....但我发现论坛上有一些相关的讨论

    相关链接

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

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

    六、示例

    这里给出2020拜年祭的《万古生香》

    万古千秋,代代有玲珑气象!
    风云史往,页页赋秀骨生香!

    <div style="position: relative; padding: 30% 45%;">
    <iframe style="position: absolute;  100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no"></iframe>
    </div>
  • 相关阅读:
    20165225《Java程序设计》第六周学习总结
    实验一 Java开发环境的熟悉
    20165225《Java程序设计》第五周学习总结
    移动web——bootstrap响应式工具
    移动web——bootstrap栅格系统
    移动web——bootstrap模板
    移动web——媒体查询
    移动web——轮播图
    移动web——touch事件应用
    移动web——touch事件介绍
  • 原文地址:https://www.cnblogs.com/wkfvawl/p/12268980.html
Copyright © 2011-2022 走看看