如何在WordPress文章中添加B站(哔哩哔哩)的视频,不使用插件实现以及设置不自动播放的方法

在用WordPress写文章时,有需要添加网络视频到文章里的需求,不用把视频上传到自己的服务器,不使用插件。而使用bilibili(B站)视频链接就很容易,而且B站官方支持很好的嵌套展示效果。

1、首先在B站找到需要的视频,如果是自己发的,可以在 创作中心-》稿件管理-》对应的视频-》分享投稿-》嵌入代码-》复制,获取可以用于WordPress的iframe代码,如图

如何在WordPress文章中添加B站(哔哩哔哩)的视频,不使用插件实现以及设置不自动播放的方法-张兴举的个人网站
如何在WordPress文章中添加B站(哔哩哔哩)的视频,不使用插件实现以及设置不自动播放的方法-张兴举的个人网站

可以复制得到这样一段html代码:

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

如果是别的up主发的视频,可以在视频播放页 分享按钮-》嵌入代码 获取,如图

如何在WordPress文章中添加B站(哔哩哔哩)的视频,不使用插件实现以及设置不自动播放的方法-张兴举的个人网站
如何在WordPress文章中添加B站(哔哩哔哩)的视频,不使用插件实现以及设置不自动播放的方法-张兴举的个人网站

2、然后来到WordPress文章,在文章中插入 自定义HTML区块,默认不展示的话可以使用搜索“自定义”或者浏览全部找到。

如何在WordPress文章中添加B站(哔哩哔哩)的视频,不使用插件实现以及设置不自动播放的方法-张兴举的个人网站

3、把复制的代码粘贴到区块中,这样就完成了,如下面的视频

4、但是这样插入的视频在文章中是自动播放的,这不友好,用户访问你文章时突然视频有声音自动播放体验不好。那么我们需要不让它自动播放,禁止自动播放。B站的视频链接支持传入参数 autoplay进行控制自动播放。关闭自动播放的写法为 在&page=1后面加 &autoplay=0 如代码标识和图所示的位置,注意在双引号里面。这对于接触过编程或者html的人应该会很容易,写这么细是针对于完全没接触的人。

<iframe src="//player.bilibili.com/player.html?bvid=BV1DTChYDESe&page=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
如何在WordPress文章中添加B站(哔哩哔哩)的视频,不使用插件实现以及设置不自动播放的方法-张兴举的个人网站