乐趣区

关于后端:hexo优化bilibili显示

jiezi

首发博客地址

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 形式引入视频时发现，通过默认的形式导入会使得屏幕很小

[
](https://cdn.jsdelivr.net/gh/PaddyLin-xum/photo@master/4hgds.jpg)

个别咱们都是本人改 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 能够查问到设施的以下属性

  1. 设施屏幕的高度
  2. 设施的方向（如挪动设施横屏）
  3. 可视窗口的宽高
  4. 屏幕解析度

和下面一样，在指定地位插入 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>

[](#B 站链接的参数 “B 站链接的参数 ”)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：敞开

[](# 阻止跳转 B 站 “ 阻止跳转 B 站 ”)阻止跳转 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>

[](# 批改默认视频品质 “ 批改默认视频品质 ”)批改默认视频品质

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>

本文由 mdnice 多平台公布

退出移动版