博客园在线网页与视频嵌入

嵌入B站视频

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

<iframe>是HTML语言的一个标签，<iframe>标签定义了一个内联框架，这个内联框架被用来在当前HTML文档中嵌入另一个文档

后台管理，新建随笔——选择tinyMCE编辑器（默认是markdown编辑器）——选择编辑html原代码，插入html代码即可。

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

aid和vid获取，视频网页面，转发——嵌入代码获得，然后获得其中aid和cid号即可

方法1

<iframe src="//player.bilibili.com/player.html?
isOutside=true&aid=519188243&bvid=BV1pg411b7Ug&cid=936667045&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

将aid和cid号替换下面代码即可，该格式适配移动端

1.插入一个视频的模板格式
<div style="position: relative; padding: 30% 45%;">
    <iframe style="position: absolute; width: 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>

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: 关闭

取消代码块模式即可，在markdown中可以直接呈现html文档，所以可以直接上传.md文档

方法2

<iframe width="560" height="315" src="https://player.bilibili.com/player.html?cid=145147963&aid=84267566&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

替换src链接的aid和vid号即可，嵌入代码或者转发视频的视频链接不同

插入油管

<iframe width="560" height="315" src="https://www.youtube.com/embed/{{include youtube.html id="IlkBLwl4aBM" }}" frameborder="0" allowfullscreen></iframe>

更换id号，即可更换播放视频

插入网页

以下嵌入网页的标准格式，目标网页替换src中代码块中网址即可

<div style="position: relative; padding: 30% 45%;">
    <iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" frameborder="no" scrolling="no"></iframe>
</div>

取消代码块格式后

插入网易云音乐

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="100" src="https://music.163.com/outchain/player?type=2&amp;id=38018486&amp;auto=1&amp;height=100"></iframe>

获取网易云链接后，提取id，更换id即实现更换音乐

• height为插入模块的高度
• auto为一时，为自动播放模式，为0时，为非自动播放模式

取消代码块后：

html<iframe>标签

frameborder 属性规定是否显示 <iframe> 周围的边框

<iframe frameborder="1|0">

值	描述
1	默认。开启边框。
0	关闭边框。

<frame scrolling="auto|yes|no">

值	描述
auto	在需要的时候显示滚动条（默认）。
yes	始终显示滚动条（即使不需要）。
no	从不显示滚动条（即使需要）。

html的元素标签在线

参考

https://www.cnblogs.com/wengle520/p/12411812.html