Hexo博客Next主题bilibili视频Markdown插入文章

问题及需求

B站视频无广告有弹幕，非常简洁，经常看B站视频，在文章引用B站的视频

在不用插件的情况下用官方的iframe方式引入视频，默认的方式导入视频屏幕会很小

一般我们都是自己改width和height来修改大小，但是换成不同的设备就无法正常的显示了

视频大小优化

不能自动适配，试试下面的两种办法：Next版本6.XX可以，7.xx版本可以试试

优化方法一

div标签自适应与屏幕的大小，iframe以100%顶边撑开。

以next主题为例子：在next\source\css\_custom\custom.styl下底部添加以下css代码：


/*哔哩哔哩视频适配*/.bilibili {position: relative;width: 100%;
}
@media only screen and (max-width: 767px) {.bilibili {height: 15em;max-width: 25em;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.bilibili {height: 20em;max-width: 30em;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.bilibili {height: 30em;max-width: 40em;}
}
@media only screen and (min-width: 1200px) {.bilibili {height: 40em;max-width: 50em;}
}

插入视频时，加入标签块

<div class="bilibili"></div>

写成如下形式即可：

<div class="bilibili"><iframe src="//player.bilibili.com/player.html?aid=14875394&cid=24237231&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

优化方法二

使用@media属性，对不同屏幕大小的设备，设置宽度和高度。
@media可以查询到设备的一下属性

设备屏幕的高度
设备的方向（如移动设备横屏）
可视窗口的宽高
屏幕解析度

在next\source\css\_custom\custom.styl下底部添加以下css代码：


/*哔哩哔哩视频适配*/.bilibili {position: relative;width: 100%;
}
@media only screen and (max-width: 767px) {.bilibili {height: 15em;max-width: 25em;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {.bilibili {height: 20em;max-width: 30em;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {.bilibili {height: 30em;max-width: 40em;}
}
@media only screen and (min-width: 1200px) {.bilibili {height: 40em;max-width: 50em;}
}

插入视频时，加入标签块class="bilibili"到B站的iframe代码:

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

效果如下：

链接相关参数

B站链接的参数

player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1

参数说明及举例使用

aid 视频ID 就是B站的av号
cid 应该是客户端的id,clientid的缩写（推测） 测试表示不填也不会有什么问题
page 第几个视频 也就是分P的 默认是1
as_wide 是否宽屏 1：宽屏 0：小屏
high_quality 视频质量 1：最高视频质量 0：最低视频质量
danmaku 是否开启弹幕 1：开启（默认） 0：关闭

举个例子：
B站默认视频质量是最低的，可以通过在src链接后面添加&high_quality=1来设置

src="//player.bilibili.com/player.html?aid=14875394&cid=24237231&page=1改为
src="//player.bilibili.com/player.html?aid=14875394&cid=24237231&page=1&high_quality=1

参考文章1
参考文章2

我的个人博客主页，欢迎访问

我的CSDN主页，欢迎访问

我的GitHub主页，欢迎访问