WordPress 网站、博客引用 bilibli(哔哩哔哩)高清视频并自动适配大小

<br />



<br />

更新2020年11月24日

哔哩哔哩更改规则,引用的视频已无法高清播放。解决办法是,浏览用户在浏览器中登录哔哩哔哩官网,再浏览博客内视频时即可修改分为高清辨率。

目前国内大多数视频网站都提供了分享的途径,对于嵌入到其他网页的分享大多采用iframe。iframe是HTML的一个标签,它支持在HTML页面中以框架的形式显示来自其他网页的内容。通过使用iframe,你可以把来自视频网站的播放器嵌入到你的网页。主要讲的是如何在网页中嵌入来自哔哩哔哩的视频。

<br />

B站链接参数

https://player.bilibili.com/player.html?cid=57016129&aid=57016129&page=1&as_wide=1&high_quality=1&danmaku=0
Key 说明
aid 视频ID 就是B站的av号
cid 应该是客户端的id,clientid的缩写(推测) 测试表示不填也不会有什么问题
page 第几个视频 也就是分P的 默认是1
as_wide 是否宽屏 1:宽屏 0:小屏
high_quality 视频质量 1:最高视频质量 0:最低视频质量
danmaku 是否开启弹幕 1:开启(默认) 0:关闭
<br />

按比例播放视频

<br />



自定义一个CSS,添加到主题中。



<br />
.aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

在aspect-ratio类中,宽度被设为100%,高度被设为0,padding-bottom属性(外部下边距)被设为75%。因为当padding-bottom的值为百分比时,百分比计算的基准为父元素的宽,而aspect-ratio类的宽度为父元素宽度的100%,所以它的外部下边距也就占宽度的75%。这样,aspect-ratio类的实际宽高比(包含边距的宽高比)就变为了四比三。另外,aspect-ration类的position必须定义为relative,保证它的定位是相对于原始位置定义。
在aspect-ratio类下的iframe元素宽高都被设为100%。因为当元素的position属性设为absolute且width和height属性的值为百分比时,百分比计算基准分别为父元素包含外边距的款和高。所以,此时iframe元素会沾满整个aspect-ratio类的父元素,也就是形成四比三的宽高比。

<br />

定义完CSS之后,进入哔哩哔哩视频页获取iframe代码中的 aid 和 cid 码修改到下面代码汇中。

<br />



<br />

<img src="https://blog.virtualvmw.com:9043/wp-content/uploads/2021/02/fef90001c1c68aee59a8.jpg" alt="" width="1630" height="924" class="alignleft size-full wp-image-1627" /> 



<br />



<br />

然后,用一个aspect-ratio类的块内容把iframe包起来——

阻止跳转到B站


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

<br />
sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts”
<br />

注意:如果单单设置了 sandbox,却没设置 high_quality 字段为 1,用户切换不了视频清晰度。
就是用户只能在 360p,点击 720p 或者 1080p 都无效。

<br />



<br />



<br />

演示效果


<br />

效果一:可点击进bilibli版

<br />
<br />

效果二:不可点击进bilibli版

<br />
<br />

此方法不止用于嵌入哔哩哔哩视频,对其它的iframe框架同样支持(~ ̄▽ ̄)~

<br />

 

暂无评论

暂无评论...