说明
这篇文章属于转载,原地址为Hexo博客引用B站视频并自动适配
引言
在进行引用B站用iframe方式引入视频时发现,通过默认的方式导入会使得屏幕很小
一般我们都是自己改width和height来修改大小,但是换成不同的设备就无法正常的显示了。如下
默认:
1 | <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 | <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 | /*哔哩哔哩视频适配*/ |
插入时写成如下形式即可:
1 | <div class="bilibili"> |
效果如下:
方法二
使用@media属性,对不同屏幕大小的设备,设置宽度和高度。@media可以查询到设备的以下属性
- 设备屏幕的高度
- 设备的方向(如移动设备横屏)
- 可视窗口的宽高
- 屏幕解析度
和上面一样,在指定位置插入css代码:
1 | /*哔哩哔哩视频适配*/ |
然后直接引用B站的iframe代码加上class="bilibili"
:
1 | <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 | <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 | <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> |