typecho 在文章中添加 bilibili 视频

news2024/11/18 16:41:18

一、获取视频来源:

可以有2种方式来定位一个 bilibili 视频:

  • 第一种是使用 bvid 参数定位
  • 第二种是使用 aid 参数定位

如何获取这两个参数?

首先我们可以看看 bilibili 网站中的视频页面链接其实可以分为两种:

  • 第一种是类似:https://www.bilibili.com/video/BV17B4y1R775 这样的,这里BV后面的 17B4y1R775 就是当前视频的 bvid
  • 第二种是类似:https://www.bilibili.com/bangumi/play/ep733316?spm_id_from=333.337.0.0 这样的,看不到 bvid,但可以在视频处右键,点击“复制视频地址(精准空降)”,从而得到类似 https://www.bilibili.com/video/av478818261?t=205.6 的网址,这里 av 后面的 478818261 就是当前视频的 aid

但是,不管那种地址,我们都可以通过查看 bilibili 视频所在网页的源代码来找到这些参数的值。

方法:在 bilibili 视频页面,右键查看源代码,然后按 ctrl+F 组合键搜索"aid",“bvid”(带引号搜索可以精准定位)

例如,对于第二种视频,我们搜索 “aid” 可以找到647个值,每个值对应一个视频,首先看第一个 aid 的值为 478818261 ,并且往后看可以发现"bvid": “BV1vT411d7QE”, “cid”: 1022370693,以及 “long_title”: “凡人风起天南1重制版”。long_title的值就是这个视频的标题(第一集),而另一个定位视频的 bvid 的值也同样找到了,就是 1vT411d7QE 。

第一种视频还提供了“嵌入代码”,直接使用这些代码就可达到引用的效果。

方法:在 bilibili视频下方有个点击复制链接的图标,移动至图标会弹出一个对话框,对话框下方如果有“嵌入代码”,点击即可复制该代码。

例如,泽泽社长的这个视频 https://www.bilibili.com/video/BV1uS4y1S7E6,我们可以找到他的“嵌入代码”为:

<iframe src="//player.bilibili.com/player.html?aid=725087364&bvid=BV1uS4y1S7E6&cid=556589728&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

这是操作截屏:

在这里插入图片描述

二、引用视频

1. 视频引用的 CSS 样式

/* bilibili视频挂载样式 */
.iframe_div {
  position: relative;
  width: 100%;
  height: 0;
}

.iframe_div .iframe_video {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0
}

2. 引用视频可通过 <iframe> 标签来实现,有 2 种方法:

第一种方法

<div class="iframe_div">
   <iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=478818261"> </iframe>
</div>

<!-- 或者 -->
<div class="iframe_div">
   <iframe class="iframe_video" src="//player.bilibili.com/player.html?bvid=1vT411d7QE"> </iframe>
</div>

还有以下参数可以控制视频的显示:

参数说明
page第几个视频, 起始下标为 1 (默认值也是为1) 就是B站视频选集里的第几个视频
as_wide是否宽屏 1: 宽屏, 0: 小屏
high_quality是否高清 1: 高清, 0: 最低视频质量(默认),不过因为要 bilibili 对于高清视频要求登陆的远古,往往设置了高清也无效。
danmaku是否开启弹幕 1: 开启(默认), 0: 关闭

因此,上面的引用还可以完善为:

<div class="iframe_div">
   <iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=478818261&page=1&danmaku=0&as_wide=1&high_quality=1"> </iframe>
</div>

这种方式可以显示与 bilibili 网站中界面一致的视频界面,而且点击视频可以直接链接到 bilibli 网站,但要素太多,有时候并不喜欢。
不过在手机浏览器中使用这种方法的前提是视频在分享那里提供了“嵌入代码”,没有提供这个潜入代码的视频在手机浏览器中会无法正常播放。

第二种方法:

这种方法只显示视频,没有跳转,也没有花里胡哨的点赞、分享等功能信息,不过只适用于上面提到的第一种视频,也就是 https://www.bilibili.com/video/BV17B4y1R775 这样的视频,如果选择第二种视频,往往会因为视频著作权等原因而无法正常播放。

<div class="iframe_div">
   <iframe class="iframe_video" src="https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=17B4y1R775"></iframe>
</div>

第一种方法的参数同样可以用于第二种方法,如:

<div class="iframe_div">
   <iframe class="iframe_video" src="https://www.bilibili.com/blackboard/html5mobileplayer.html?bvid=17B4y1R775&page=1&danmaku=0&as_wide=1&high_quality=1"></iframe>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1437940.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

自动化测试 —— Web自动化三大报错

Web自动化三大报错有哪些呢&#xff1f;接下来给大家讲讲。 Web自动化三大报错&#xff08;Exception&#xff09; 1. Exception1&#xff1a;no such element&#xff08;没有在页面上找到这个元素&#xff09; reason1&#xff1a;元素延迟加载了 solution&#xff1a; …

手把手教你激活BetterZip for Mac免费下载(附注册码) v5.3.4

软件介绍 BetterZip for Mac是一款广受欢迎的文件解压缩工具&#xff0c;支持Mac以及Windows等多个平台&#xff0c;能够生成被Win和Mac支持的压缩包&#xff0c;让用户可以在Mac和Windows电脑之间使用一种通用压缩包&#xff0c;用户可以更快捷地向压缩文件中添加和删除文件&…

设计模式-行为型模式(下)

1.访问者模式 访问者模式在实际开发中使用的非常少,因为它比较难以实现并且应用该模式肯能会导致代码的可读性变差,可维护性变差,在没有特别必要的情况下,不建议使用访问者模式. 访问者模式(Visitor Pattern) 的原始定义是&#xff1a; 允许在运行时将一个或多个操作应用于一…

有哪些方法可以配置并发服务器?

通过合理配置并发服务器&#xff0c;可以提高服务器的处理能力和响应速度&#xff0c;从而更好地满足用户需求。本文将介绍一些常见的并发服务器配置方法&#xff0c;以帮助您更好地实现服务器的高效运行。 一、选择合适的操作系统 操作系统的选择是并发服务器配置的重要环节…

泛娱乐社交出海洞察,Flat Ads解锁海外增长新思路

摘要:解读泛娱乐社交应用出海现状与趋势,解锁“掘金”泛娱乐社交出海赛道新思路。 根据全球舆情监测机构 Meltwater 和社交媒体机构We are Social最新发布数据显示,全球社交媒体活跃用户数量已突破50亿,约占世界人口总数62.5%。庞大的用户数量意味着广阔的增量空间,目前,随着全…

【NLP 自然语言处理(一)---词向量】

文章目录 什么是NLP自然语言处理发展历程自然语言处理模型模型能识别单词的方法词向量分词 一个向量vector表示一个词词向量的表示-one-hot多维词嵌入word embeding词向量的训练方法 CBOW Skip-gram词嵌入的理论依据 一个vector&#xff08;向量&#xff09;表示短语或者文章ve…

力扣精选算法100道——和为 K 的子数组[前缀和专题]

和为K的子数组链接 目录 第一步&#xff1a;了解题意​编辑 第二步&#xff1a;算法原理 第三步&#xff1a;代码 第一步&#xff1a;了解题意 数组中和为k的连续子数组&#xff0c;我们主要关注的是连续的&#xff0c; 比如[1,1,1],和为2的子数组有俩个&#xff0c;比如第…

Springboot简单设计两级缓存

两级缓存相比单纯使用远程缓存&#xff0c;具有什么优势呢&#xff1f; 本地缓存基于本地环境的内存&#xff0c;访问速度非常快&#xff0c;对于一些变更频率低、实时性要求低的数据&#xff0c;可以放在本地缓存中&#xff0c;提升访问速度 使用本地缓存能够减少和Redis类的远…

JWT令牌 | 一个区别于cookie/session的更安全的校验技术

目录 1、简介 2、组成成分 3、应用场景 4、生成和校验 5、登录下发令牌 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和算法&#xff0c;初步涉猎Pyth…

波纹扩散效果

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>波纹扩散</title><style>body {disp…

在 vite + ts 中,使用require

因为 require 属于 Webpack 的方法&#xff0c;所以 Vite 项目中是不能使用require的&#xff0c;所以控制台会给你报错&#xff0c;如下 解决办法如下&#xff1a;就是很不情愿的办法&#xff0c;没招啊 第一步、安装插件 npm i vite-plugin-require-transform --save-de…

【蓝桥杯冲冲冲】[NOIP2017 提高组] 宝藏

蓝桥杯备赛 | 洛谷做题打卡day29 文章目录 蓝桥杯备赛 | 洛谷做题打卡day29[NOIP2017 提高组] 宝藏题目背景题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1样例 #2样例输入 #2样例输出 #2提示题解代码我的一些话[NOIP2017 提高组] 宝藏 题目背景 NOIP2017 D2T2 题目描…

服务器安装Docker (centOS)

1. 卸载旧版本的Docker&#xff08;如果有&#xff09; 首先&#xff0c;如果您的系统上安装了旧版本的Docker&#xff0c;需要将其卸载。Docker的旧版本称为docker或docker-engine。使用以下命令来卸载旧版本&#xff1a; sudo yum remove docker \ docker-client \ docker-…

vCenterServer部署

一、硬件配置 vCenterServer本身最低的硬件要求是14GB&#xff0c;而vCenterServer则是以虚拟机的形式安装在ESXi中的虚拟机&#xff0c;所以ESXi的最低硬件要求是15.5GB&#xff0c;就是15872MB 二、安装vCenterServer 直接解压VMware-VCSA-all-8.0.0-20920323.iso&#xf…

使用No-SQL数据库支持连接查询用例的讨论

简介 在本文中&#xff0c;我们将简单介绍什么是No-SQL数据库。然后我们会讨论一种使用关系数据库比较容易实现的查询&#xff0c;即连接查询&#xff0c;怎么样使用No-SQL来实现。 什么是No-SQL数据库 与No-SQL数据库相对应的是传统的关系数据库&#xff08;RDBMS&#xff…

Leetcode刷题-(11~15)-Java+Python+JavaScript

算法是程序员的基本功&#xff0c;也是各个大厂必考察的重点&#xff0c;让我们一起坚持写算法题吧 遇事不决&#xff0c;可问春风&#xff0c;春风不语&#xff0c;即是本心。 我们在我们能力范围内&#xff0c;做好我们该做的事&#xff0c;然后相信一切都事最好的安排就可…

关于可变类型和不可变类型的探究

个人猜想&#xff08;很遗憾失败了&#xff09; 在硬盘或者系统中存在一个字符集 如果存在硬盘中&#xff0c;那么硬盘出厂的时候他的字符集所占用的空间就已经确定了。 如果存在于系统的话&#xff0c;硬盘应该在出厂的时候为系统设置一个存储系统字符集的地方。在安装系统…

【Scala】1. 变量和数据类型

1. 变量和数据类型 1.1 for begining —— hello world 新建hello.scala文件&#xff0c;注意object名字与文件名一致。 object hello { def main(args:Array[String]): Unit { println("hello world!") } }运行后打印结果如下&#xff1a; hello world!Pr…

go 版本 LeeCode 刷题 在线

https://books.halfrost.com/leetcode/ChapterFour/0001~0099/0001.Two-Sum/ 参考 https://github.com/anzhihe/learning/tree/master/shell/book/abs-3.9.1_cn

Java Character源码剖析

Character类除了封装了一个char外&#xff0c;还封装了Unicode字符级别的各种操作&#xff0c;是Java文本处理的基础。下面结合源码分析Character的贡献。 Unicode 也许你没听过Unicode&#xff0c;但应该见过UTF-8。UTF-8&#xff08;8-bit Unicode Transformation Format&a…