Hexo Blog加入B站视频播放器

Hexo Blog加入B站视频播放器

十一月 01, 2019

emm…..作为B站的重度用户(死宅一族)，写Blog的时候经常有在文章段落中加视频的需求。其实想要在自己的Blog中添加视频很简单，下面就一起来看看如何做吧。另外提一点，插入其他视频的话外链可能会有广告，但是！！！B站没有，哔哩哔哩干杯！🍻🍻🍻

第一步：获取B站视频的外链

进入B站点开自己想要分享的视频，点击分享按钮后你可以看到有一个“嵌入代码”，点击复制，这个就是视频的外链。

第二步：在文章中插入视频外链

md文档神奇之处就在于可以直接插入HTML代码，但是为了防止一些其他因素的干扰，Hexo动力系统还专门准备了一个raw标签来插入HTML代码。下面就是我们使用raw标签来插入视频外链的示例：

1
2
3
4
5
6
7
8
{% raw %}

<div style="position: relative;width: 100%;height: 0;padding-bottom: 75%">
<iframe src="//player.bilibili.com/player.html?aid=73790419&cid=126216386&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" > 
</iframe>
</div>

{% endraw %}

其效果如下：

是不是感觉不太好看？那当然要进行一定的美化了。

第三步：修改代码，美化播放样式

话不多说，直接上代码：

1
2
3
4
5
6
7
8
{% raw %}

<div style="position: relative;width: 100%;height: 0;padding-bottom: 75%">
<iframe src="//player.bilibili.com/player.html?aid=73790419&cid=126216386&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;"> 
</iframe>
</div>

{% endraw %}

啊刚好今天何同学更新啦！！！感觉评测视频里何同学做的是最有特色的，下面我就直接展示何同学视频外链来作为展示吧，喜欢的同学也可以去B站关注一波哟~好了，希望这篇文章能给你带来知识和乐趣，就到这里啦。