美樂地

  • 首页
  • 简介
  • 文集
  • 友链
  • 留言
  • 赞助
  1. 首页
  2. 建站笔记
  3. 正文

免插件在WordPress文章中插入bilibili视频

2020-10-05 3108点热度 5人点赞 7条评论

在博文里插入视频,可以大大增加文章的可读性和说服力。之前我曾用优酷来分享视频,但不支持HTTPS、广告时间太长等严重缺陷导致我被迫放弃使用,转而使用bilibili视频(B站)。不过,外链的bilibili视频代码尽管没有广告,但仍有默认清晰度较低、默认出现弹幕、播放画面过小等问题,那有没有办法可以无需使用WordPress插件,仅仅用优化后的代码插入bilibili视频到文章中,实现完美的自适应播放呢?答案是当然有!

代码如下——

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=(aid值/视频ID值)&bvid=(bvid值/视频编号值)&cid=(cid值/客户端ID值)&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
</div>

下面我们介绍如何无需插件,在WordPress文章中插入bilibili视频。

无需插件,在WordPress文章中插入bilibili视频

在你需要插入的任一bilibili视频中,点击页面播放器下方的“转发”链接,找到“嵌入代码”并复制。嵌入代码格式如下——

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

将其中的  //player.bilibili.com/player.html?aid=45847374&bvid=BV1Yb411i7AU&cid=80336292&page=1  复制出来,替换我所提供的代码,链接包含aid、bvid、cid和page值。

参考代码如下:

<div style="position: relative; padding: 30% 45%;">
<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="//player.bilibili.com/player.html?aid=45847374&bvid=BV1Yb411i7AU&cid=80336292&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>
</div>



代码可根据个人需要自由修改,本代码有以下优点:

1.自适应PC、Mac、iPad、手机等终端的游览器;

2.默认打开宽屏模式;

3.关闭恼人的弹幕功能;

4.默认启用高清晰度播放,如视频支持1080P,以1080P清晰度播放;

5.更改清晰度,或点击播放器的图标等情况,不会跳转到bilibili主站;

6.除了支持WordPress,还支持Typecho、Hexo、Ghost等支持HTML代码的程序。

这段是某时尚博主在海外旅行的Vlog,视频播放效果如下——

本文参考:

1.《关于博客园内嵌入bilibili视频》 ;

2.《关于接入B站iframe视频(bilibili引用视频)》 ;

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: bilibili视频
最后更新:2020-10-05

美樂地

这个人很懒,什么都没留下

打赏 点赞
< 上一篇
下一篇 >

文章评论

  • 刘亚洲

    感谢 很有用

    2022-07-31
    回复
  • px115

    默认还是720p播放,不是1080p呢。

    2022-05-03
    回复
  • 小叽

    谢谢分享,学习了好东西,另外站长如果喜欢玩单机游戏的话可以来我这里看看,全部是免费分享的,各种学习版

    2021-11-22
    回复
  • 牧羊人

    不插了,反正没人看

    2020-11-07
    回复
    • 掩耳

      @牧羊人 自己看就行

      2020-11-14
      回复
  • BlogWall

    学习了,收藏待用。

    2020-10-06
    回复
    • 掩耳

      @BlogWall 我个人已在多篇文章中使用该代码插入视频

      2020-11-14
      回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    赞助商
    最近评论
    S̆̈ 发布于 10 小时前(09月29日) 石来运转有意思
    恩爸 发布于 11 小时前(09月29日) “2017年,年仅11岁的小雨婷被选入本地少体校射击步枪队;” 这是有射击天赋啊,小朋友怎么会这么...
    老张博客 发布于 2 天前(09月27日) 早日康复,出行还是得要注意安全。
    小熊 发布于 3 天前(09月26日) 驾车都要谨慎,比如今天下班,我减速左转,都快转完了,突然来了个右转的进来我踩死了,然而人只是看了我一...
    小熊 发布于 3 天前(09月26日) 驾车都要谨慎,比如今天下班,我减速左转,都快转完了,突然来了个右转的进来我踩死了,然而人只是看了我一...
    最新 热点 随机
    最新 热点 随机
    黄雨婷,我家乡的骄傲 两轮电动车,驾驶需谨慎 登山活动,再次获奖 我网站,低质站点? OpenWrt固件无线中继设置教程
    我网站,低质站点?入手 Fujifilm X-T5 富士微单相机2023年福建行:有福之州梁静茹,宁波见!小区里的流浪猫
    Angry Birds PC完整版下载 法克这些人 临海茶辽印象 多说评论系统即将关闭 NVIDIA显卡门
    标签聚合
    Windows 7 Google 我的大学 K40 段子 iPhone 高清电影 WordPress

    COPYRIGHT © 2009-2023 美樂地 Meledee.com. ALL RIGHTS RESERVED.

    Theme Kratos Modified By Meledee.com