菜单
菜单
文章目录
  1. 一、去B站获取外链代码
  2. 二、在文章中添加外链代码

hexo博客文章如何加入视频

在博客文章中加入视频可以有效增加文章的可读性,也更加吸引读者。 那么如何给我们的博客加入视频呢?

其二方法参考 Sanarous 大佬的【博客嵌入自适应 B 站视频

一、去B站获取外链代码

点击视频的分享按钮,复制嵌入代码。

wl.webp

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

二、在文章中添加外链代码

其一,用raw格式插入代码,如下

1
2
3
{% raw %}
<iframe src="//player.bilibili.com/player.html?aid=540363712&bvid=BV1Hi4y1t7J7&cid=180054394&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
{% endraw %}

其二,或者直接插入

1
<div><iframe src="//player.bilibili.com/player.html?aid=540363712&bvid=BV1Hi4y1t7J7&cid=180054394&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe></div>

但是这样加入的视频有点难看。

wl2.webp

其一,修改代码为如下

1
2
3
4
{% raw %}
<div style="position: relative; width: 100%; height: 0;padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=925472858&bvid=BV1MT4y137Zk&cid=182520282&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute;; width: 100%; height: 100%; left: 0; top: 0;"></iframe></div>
{% endraw %}

其二,修改代码

1
2
<div style="position: relative; width: 100%; height: 0;padding-bottom: 75%;">
<iframe style="position: absolute;; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=925472858&bvid=BV1MT4y137Zk&cid=182520282&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="max-width: 100%" ></iframe></div>

修改后效果

wl3.webp

其一,这代码是从Hexo官网抄来的(●ˇ∀ˇ●)(●ˇ∀ˇ●),模板如下

1
2
3
{% raw %}
<div style="position: relative; width: 100%; height: 0;padding-bottom: 75%;"><iframe src="替换视频源地址&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute;; width: 100%; height: 100%; left: 0; top: 0;"> </iframe></div>
{% endraw %}

其二

1
<div style="position: relative; width: 100%; height: 0;padding-bottom: 75%;"><iframe style="position: absolute;; width: 100%; height: 100%; left: 0; top: 0;" src="替换视频地址&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="max-width: 100%" ></iframe></div>

简单来说就是替换 src=”一串链接” 的内容即可。

参数说明:

KEY说明
aid之前 B 站使用的 AV 号
bvid目前的 BV 号
page选集里的第几个视频, 默认值是为 1
as_wide是否宽屏 【1: 宽屏, 0: 小屏】
high_quality是否高清 【1: 高清(最高1080p) / 0: 最低视频质量(默认)】
danmaku是否开启弹幕 【1: 开启(默认), 0: 关闭】

最后效果见:https://senorui.top/posts/3e47.html

本文作者: Senorui

本文链接: https://senorui.top/posts/6962.html

版权声明: 本站所有文章除特别声明外,均为原创且采用【CC BY-NC-ND 4.0】许可协议,若转载请署名!

支持一下
感谢您支持Senorui哦!
  • 微信扫一扫
  • 支付宝扫一扫