wordpress嵌入bilibili哔哩哔哩视频,B站嵌入代码设置,自适应大小

网站搭建 z197 4242次浏览 已收录 用手机观看

bilibili外链的视频代码很容易使用,但默认的嵌入代码,会有一些问题。

比如视频清晰度低,默认会出现弹幕,视频播放的画面尺寸过小等。

那有没有办法,可以不使用WordPress插件,仅仅用优化后的代码插入bilibili视频到文章中,实现完美的自适应播放呢?答案是当然有!


下面我们介绍如何无需插件,在WordPress文章中插入bilibili视频。

在你需要插入的任一bilibili视频中,点击页面播放器下方的“转发”链接,找到“嵌入代码”并复制。嵌入代码格式如下——

 

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

将其中的

//player.bilibili.com/player.html?aid=685228004&bvid=BV1bU4y197ye&cid=753197105&page=1 

复制出来,替换我所提供的代码中的src视频地址

代码如下:

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="src视频地址" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
</div>
key 说明
aid 视频ID
就是B站的 avxxxx 后面的数字
cid 应该是客户端id, clientId 的缩写(推测的, 不一定准确)
经过测试, 这个字段不填也没关系
page 第几个视频, 起始下标为 1 (默认值也是为1)
就是B站视频, 选集里的, 第几个视频
as_wide 是否宽屏
1: 宽屏, 0: 小屏
high_quality 是否高清
1: 高清, 0: 最低视频质量(默认)
如视频有 360p 720p 1080p 三种, 默认或者 high_quality=0 是最低 360p
high_quality=1 是最高1080p
danmaku 是否开启弹幕
1: 开启(默认), 0: 关闭

参考代码如下:

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=685228004&bvid=BV1bU4y197ye&cid=753197105&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
</div>

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

注意, 如果单单设置了 sandbox , 却没有传参 high_quality 字段为 1, 那么用户是切换不了视频质量的.
就是用户只能在 360p, 而点击了 720p 或者 1080p 都无效

代码可根据个人需要自由修改,有以下优点:

1.自适应PC、Mac、iPad、手机等终端的游览器;

2.默认打开宽屏模式;

3.关闭恼人的弹幕功能;

4.默认启用高清晰度播放,如视频支持1080P,以1080P清晰度播放;

5.更改清晰度,或点击播放器的图标等情况,不会跳转到bilibili主站;

6.除了支持WordPress,还支持Typecho、Hexo、Ghost等支持HTML代码的程序。

本文参考:

1.WordPress调用哔哩哔哩B站视频自适应大小 

2.《关于接入B站iframe视频(bilibili引用视频)》 ;