在静态博客中嵌入B站视频

发表于 | 更新于

国外VPS的不便之处

国外VPS的特点基本上是价格便宜，带宽大，但受运营商国际带宽的影响，除非是超级贵的CN2 GIA线路的VPS，其余VPS从国内访问的速度是无法保证的。
但对于在VPS上搭建的静态博客而言，压缩过的小图片还好，虽然上传、下载都有点慢，但只要量不多的话还要以接受，一旦碰上量大或者有视频文件那就hold不住了。
对于照片或者小视频用图床还能接受，因为图床一个是对存储量有限制，另一个是对流量也有限制。幸好腾讯云对象存储用的比较早，目前总共50G的标准存储量，流量是一个月10G，是永久赠送的，看规则新使用的用户只赠送6个月。
但现在视频都在向高清发展，有些手机已经支持使用4K 60祯录像，拍摄出来的画面确实更加清晰流畅，但视频确实有些大，放在图床里对容量及流量压力都很大。
找来找去发现B站是可以支持上传4K录像文件的，只要开通了大会员就可以看4K，所以对于非私密的视频上传到B站然后再在自己的博客里嵌入会是个不错的选择。

如何在静态博客中嵌入B站视频

对于vuepress、hexo等静态博客来说，编辑用的是markdown，程序将markdown转换成WEB网页的过程中对于HTML的语言是支持原封不动转换到HTML文件中的。
使用了NEXT主题的hexo，如果图片不设置高度、宽度，就会导致图片是以原图大小展示的，这对电脑浏览器展示问题不大，但对手机浏览不友好。这点vuepress-theme-reco对图片的处理就更加贴心，能够自适应屏幕。
由于担心在移动端显示B站视频大小有问题，在网上搜了一下，发现了这篇文章《关于博客园内嵌入bilibili视频》，看了一下评论区有人答复在markdown中也是适用的，故决定尝试一下。
但在2020年3月23日，B站把AV号改成BV了，在电脑网页端分享里的嵌入代码中可以看到相比原先只是多了个bvid，由于这个是在URL中所以对代码应该不影响，故可以直接尝试。
以深坑秘境观景台看世茂深坑酒店4K 60hz为例，基本上没问题，但是不能全屏，对比了一下B站嵌入代码需要补一个allowfullscreen=”true”。另外有点可惜的是最高分辨率只有1080P，但也已经不错了。

1
2
3
<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?aid=756719640&bvid=BV1Hr4y1N7if&cid=298548212&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no" allowfullscreen="true"></iframe>
</div>


扩展使用

目前将图床中的图片与视频嵌入时都是使用的绝对尺寸，按这个思路可以试一下自适应。
20210323更新
发现上述方式使用padding是撑开了1个横向16:9的画面，这个对于内嵌播放器效果不错。
如果是要纵向撑开1个纵向16:9的内嵌播放器画面需要这样配置

1
2
3
<div style="position: relative; padding: 84% 47%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?aid=756719640&bvid=BV1Hr4y1N7if&cid=298548212&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no" allowfullscreen="true"></iframe>
</div>


如果是要纵向撑开1个纵向4:3的内嵌播放器画面需要这样配置

1
2
3
<div style="position: relative; padding: 61% 43%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?aid=756719640&bvid=BV1Hr4y1N7if&cid=298548212&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no" allowfullscreen="true"></iframe>
</div>


对于本地图片或对象存储中的图片可以这样自适应

1
<img src="/images/test.jpg" style="position: relative; width: 100%; height: auto; left: 0; top: 0; margin-left:5px" >

对于本地视频或对象存储中的视频可以这样自适应

1
2
3
<video src="/images/test.mp4" controls="controls" preload="none" poster="/images/click_to_play.gif" style="position: relative; width: 100%; height: auto; left: 0; top: 0;">
Your browser does not support the video tag.
</video>

🌻🌻🌻

0%