hexo优化bilibili显示

程序员朱永胜

发布于 2023-08-24 11:18:32

2450

发布于 2023-08-24 11:18:32

文章被收录于专栏：朱永胜的私房菜朱永胜的私房菜

首发博客地址

https://blog.zysicyj.top/

It has been 1086 days since the last update, the content of the article may be outdated.

这篇文章属于转载，原地址为Hexo博客引用B站视频并自动适配

在进行引用B站用iframe方式引入视频时发现，通过默认的方式导入会使得屏幕很小

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

默认：

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

修改后：

<iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="720"> </iframe>

即可较好的适配大屏幕，但是到手机上就不太好用了，不能自动适配，怎么办呢，看下面的两种办法：

外面包裹一个div标签，div标签自适应与屏幕的大小，包裹内iframe以100%顶边撑开。以butterfly主题为例子：在source/css/_ global/function.styl下底部添加以下css代码：

.bilibili{
    position: relative;
    width: 100%;
    height: 0;              
    padding-bottom: 75%;    
}
.bilibili iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

插入时写成如下形式即可：

<div class="bilibili">
    <iframe src="//player.bilibili.com/player.html?bvid=BV1hF411C7ks&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

效果如下：

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

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

和上面一样，在指定位置插入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;}
}

然后直接引用B站的iframe代码加上class="bilibili"：

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

[1]B站链接的参数

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

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

[2]阻止跳转B站

在网页上, 用户选择清晰度, 或者点击视频上面的一些图标, 会跳转到B站. 这个可通过设置 iframe 的 sandbox 属性去禁止

sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"

<iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts> </iframe>

[3]修改默认视频质量

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

<iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts> </iframe>