typecho 在文章中添加 bilibili 视频

一、获取视频来源:

可以有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.hqwc.cn/news/450642.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kafka系列(一)【消息队列、Kafka的基本概念、Kafka的工作机制、Kafka可满足的需求、Kafka的特性、Kafka的应用场景】

kafka系列 一 一、消息队列1. 消息队列的来源2. 什么是消息队列3. 消息队列主要有哪些作用 二、Kafka的基本概念代理、生产者、消费者、消费者组主题、分区、副本、记录 三、了解 Kafka的工作机制-生产消息/消费消息四、Kafka可满足的需求五、Kafka的特性六、Kafka的场景 转自《…

[word] 怎么删除文字底纹 #职场发展#其他

怎么删除文字底纹 怎么删除文字底纹?我们在录入文字到文档的时候&#xff0c;或者是复制网上内容时&#xff0c;都会带有格式&#xff0c;有时候还会遇到删除不掉的问题。今天给大家分享小技巧&#xff0c;解决你的问题。 1、删除文字底纹 文档自带的底纹&#xff0c;删除技…

校园墙表白墙系统uniapp微信小程序

配置文件 (自动编号、配置参数名称、配置参数值)&#xff1b; 前端开发:vue 语言&#xff1a;javapythonnodejsphp均支持 运行软件:idea/eclipse/vscode/pycharm/wamp均支持 框架支持:Ssm/django/flask/thinkphp/springboot/springcloud均支持 数据库 mysql 数据库工具&#x…

gin框架学习

文章目录 文章目录 gin框架学习一、使用net包搭建web服务器二、gin的初体验1.什么是gin?2.如何得到gin?(要保证你的go版本可以使用go mod)3.案例初体验 三、模板引擎四、gin框架学习1、gin处理json的数据2、query参数3、form表单提交4、gin获取uri参数5、gin参数绑定6、文件…

C#验证字符串是否包含汉字:用正则表达式 vs 用ASCII码 vs 用汉字的 Unicode 编码

目录 一、使用的方法 1.使用正则表达式验证字符串 2.使用正则表达式验证字符 3.用ASCII码判断 4.用汉字的 Unicode 编码范围判断 二、实例 1.源码 2.生成效果 验证一个字符串是否是纯汉字或者包含有汉字的前提&#xff0c;是VS编辑器的默认编码格式设置为&#xff1a;选…

shell命令以及运行原理 | 权限

Shell命令原理剖析 shell命令以及运行原理&#x1f4a6;Linux权限的概念&#x1f4a6;什么是权限❔Linux下有哪些权限身份❔Linux中文件属性解析 shell命令以及运行原理&#x1f4a6; Linux严格意义上说的是一个操作系统&#xff0c;我们称之为 “核心&#xff08;kernel"…

Vulnhub-DC8

信息收集 # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:43:7c:b1, IPv4: 192.168.1.60 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.1.1 00:50:56:c0:00:08 VMware, Inc. 192.168.1.2 00:50:56:f…

《计算机网络简易速速上手小册》第8章:软件定义网络(SDN)与网络功能虚拟化(NFV)(2024 最新版)

第8章&#xff1a;软件定义网络&#xff08;SDN&#xff09;与网络功能虚拟化&#xff08;NFV&#xff09; 文章目录 8.1 SDN 架构与原理 - 智能网络的构建积木8.1.1 基础知识8.1.2 重点案例&#xff1a;使用 Python 控制 OpenFlow 交换机准备工作Python 脚本示例 8.1.3 拓展案…

SpringBoot注解--06--注解@Validated

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1 简述1.1 Validated作用1.2 所有参数注解含义1.3 异常处理1.4 Valid和Validated比较Valid级联校验 2.Validated 分组校验1.1为何要分组校验&#xff1f;1.2 代码案…

蓝桥杯每日一题----第k个数

题目&#xff1a;第k个数 主要为了学习数字的构造方法&#xff0c;如何快速求1~n中前缀为pre的数字的个数。 题目分析 一开始想的是把数字转化为字符串&#xff0c;然后丢给sort排序就行了&#xff0c;但是n太大了&#xff0c;会出现溢出问题。走到这里也从侧面反映了对所有…

金和OA jc6 UploadFileBlock 任意文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

2024美国大学生数学建模E题财产保险的可持续模型详解思路+具体代码季节性时序预测SARIMA天气预测建模

上一篇已经对赛题进行详细分析了&#xff0c;而且大方向和基本的模型已经确定完毕&#xff0c;数据集都已经找到了&#xff0c;现在最重要的就是要分析风暴数据集以及建立时序预测模型&#xff0c;使用气候模型预测的数据&#xff0c;评估气候变化对未来极端天气事件频率和强度…