首发博客地址
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 来修改大小,但是换成不同的设备就无法正常的显示了。如下
默认:
1 2 3
| <iframe src="//player.bilibili.com/player.html?aid=81148317&cid=138878361&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
|
修改后:
1 2 3
| <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 代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .bilibili { position: relative; width: 100%; height: 0; padding-bottom: 75%; }
.bilibili iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
|
插入时写成如下形式即可:
1 2 3 4 5
| <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 代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
|
.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"
:
1 2 3
| <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 站链接的参数
例如: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 站. 这个可通过设置 iframe 的 sandbox 属性去禁止
sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"
1 2 3 4
| <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 来设置
1 2 3 4 5
| <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> ```low-scripts> </iframe>
|
如果您喜欢我的内容,就点击关注吧
扫码长按关注交流群获取最新消息,免费的全网最细面试题手册,支持艾宾浩斯记忆法即将在交流群内推出
![](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
公众号
![](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
个人微信
![](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)