在博客内嵌入视频-bilibili-并调整至想要的窗口大小

有些时候,我们需要用到视频。那么如何在博客或者网站中嵌入Bilibili视频呢?

实现原理

使用html的iframe标签,更改其中src对应bilibili视频的aid和cid,组装新的HTML源码即可。

注释:ifram标签需要使用html编辑器输入,请记得切换成html输入,如果你的博客也是Typeche,需要增加标签支持:typecho增加标签教程

如何获取视频aid和cid?

进入bilibili任意视频,在分享页面其已经给出iframe标签地址。这里以《你永远也不会成为的人-后浪》为例演示

TIM截图20200603223839.jpg

复制得到如下代码

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

我们得到aid=412935552cid=186803402

查看代码效果

这个代码直接放入文章中即可调用播放器,上面代码嵌入后效果:

调整播放器到合适大小

播放器小且无法进行全屏之类的基本操作,这时候我们需要增加一些参数来调整效果。下述代码调整了宽度和高度(height="400"意思为高度400,这个数值可根据具体需要调整,width="75%"意思为宽度显示比例,为百分比数值,也可更改。数值越大越高/宽,反之亦然。)

<iframe frameborder="no" height="400" src="//player.bilibili.com/player.html?aid=412935552&cid=186803402&page=1" width="75%"></iframe>

看效果:

这样后续我们可以使用调整好大小的代码,替换aid和cid的值即可获取想要的视频。

小尾巴

其他平台视频嵌入同理,均可使用上述教程,无非就是改变链接地址

仅有 1 条评论
  1. ESP32 俄罗斯方块游戏机 - WWW.LAB-Z.COM

    [...]上述方法来自:https://www.yunyiya.com/index.php/archives/186/[...]

发表新评论