接入B站iframe视频(bilibili引用视频)

已于 2024-02-21 17:40:52 修改
阅读量8.4w 收藏 120
点赞数 48
分类专栏： 其他 文章标签： B站自动放大 iframe Universal Links B站视频清晰度 BiliBili
于 2019-06-28 18:17:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinshou_caizhu/article/details/94028606
版权

文章目录

前言

因为公司要搞一些视频给客户看, 然后对比了各种视频网站, 各种广告什么的, 体验都不好.
选来选去, 还是B站(BiliBili)好, 而且自己又是B站大会员用户 ( 其实在我心里早就内定了 ✧(≖ ◡ ≖) )

这里总结一下碰到的一些坑吧

B站链接参数

https://player.bilibili.com/player.html?aid=699690540&bvid=BV1Zm4y1e7eR&cid=1159067867&p=1&as_wide=1&high_quality=1&danmaku=0&t=30

key说明
cidchat id，每个chat id对应一组弹幕池和
如填了 aid, 这个字段不填也没关系
aidarticle id, 视频的av号
就是B站的 avxxxx 后面的数字
bvidbilibili video id, 视频的bv号
2020.03 时候, B站把 AV 号根据一定的算法转成这个了
如果填了 bvid, 那么 aid 不填也可以
page(或者p)第几个视频, 起始下标为 1 (默认值也是为1)
就是B站视频, 选集里的, 第几个视频
as_wide是否宽屏
1: 宽屏, 0: 小屏
high_quality是否高清
1: 高清, 0: 最低视频质量(默认)
如视频有 360p 720p 1080p 三种, 默认或者 high_quality=0 是最低 360p
high_quality=1 是最高1080p
danmaku是否开启弹幕
1: 开启(默认), 0: 关闭
t打开时, 自动跳转到某个时间, 并且自动播放(单位秒)
比如 t=60, 那么自动跳转到1分钟, 且自动播放

已解决的坑

按比例播放视频

按比例播放视频

<!DOCTYPE HTML>
<html>
    
    <head>

    <style type="text/css">
        .aspect-ratio {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 75%;
        }
    
    .aspect-ratio iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    </style>
    
        
    </head>
    
    <body>
        
        <h1> test </h1>
        
        <div class="aspect-ratio" >
            <iframe src="https://player.bilibili.com/player.html?aid=56850347&cid=99299213&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
        </div>
        
    </body>
</html>

阻止跳转到B站

在网页上, 用户选择清晰度, 或者点击视频上面的一些图标, 会跳转到B站. 这个可通过设置 iframe 的 sandbox 属性去禁止
sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts”

<iframe src="https://player.bilibili.com/player.html?cid=99269782&aid=56824180&page=1&as_wide=1&high_quality=1&danmaku=0"
			 allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

注意, 如果单单设置了 sandbox , 却没有传参 high_quality 字段为 1, 那么用户是切换不了视频质量的.
就是用户只能在 360p, 而点击了 720p 或者 1080p 都无效

解决iOS上自动跳转到B站APP (Universal Links)

因为需求, 还要可能访问到B站, 但是又不想跳出, 这又牵扯到 Universal Links 的问题 ( 自动跳转是因为 Universal Links ).

虽然系统没有公开给我们选项, 但通过直接强加就可以了 (下面是 WKWebView 的代理 WKNavigationDelegate 方法)

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    decisionHandler(WKNavigationActionPolicyAllow);
}

//当前设备系统版本号
#define SYSTEMVersion [[[UIDevice currentDevice] systemVersion] floatValue]
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    if(SYSTEMVersion < 9.0f) {
        // iOS 9 还没有
        decisionHandler(WKNavigationActionPolicyAllow);
    }else{
        // 返回+2的枚举值, 意思允许链接跳转, 但是类似这种 Universal Links, 就不会去瞎跳到什么APP
        decisionHandler(WKNavigationActionPolicyAllow + 2);
    }
}

iOS 播放自动放大问题

这个是 webView 默认配置问题, 改一下默认配置就好

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
// 允许不全屏播放
configuration.allowsInlineMediaPlayback = YES;
WKWebView *webView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:configuration];

不过允许不全屏…那也跟着有另一个问题了, 就是如何把它放大???
主要目前又没解决监听他的放大按钮问题, 那这样的话, 就无法放大了…

弹幕因为 http 请求无法播放问题

报警告，http 请求问题

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure

在 head 里面加入

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

待填的坑

  1. 如何监听 iframe 里面的事件这些
  2. 如何隐藏 iframe 里面某些元素

一些其他事项

  1. 默认 480p，是未登录问题
  2. 没有播放的控制条，可以尝试改变一下视频大小

各位参考(大佬)网站

按比例播放视频

视频清晰度问题(评论里面找的)

解决自动跳转到B站APP

有帮到您的，就赞一个吧，编写不易！

普通上班族老王
关注
专栏目录
html添加B站视频,iframe嵌入BiliBili视频方法B站视频外链
weixin_39578513的博客
06-17 7683
iframe嵌入BiliBili视频方法B站视频外链BILIBILI 地址PC端参数&danmaku=0 (1=打开弹幕 0=关闭弹幕)iframe 参数allowfullscreen="allowfullscreen" #移动端全屏sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁...
博客内插入bilibili视频
weixin_30747253的博客
02-12 3450
原理 使用iframe标签，更改其中src的aid和cid，使其对应要插入的视频，即可在文章内插入bilibili视频 获取cid aid即为视频的av号，cid有两种获取方式，一是通过bilibili分享按钮直接可以看到嵌入代码，将代码内的cid复制即可（推荐），二是通过网页源代码查看（之前没有注意到到还能直接从分享按钮里看）。 这里简单介绍一下通过网页源代码看的方法： ...
解决Html iframe 内嵌video标签导致视频无法全屏展示的问题
最新发布
amoureux555的博客
08-02 651
解决Html iframe 内嵌video标签导致视频无法全屏展示的问题
vue3项目使用frame标签页嵌入B站视频
weixin_58149434的博客
12-27 931
前端页面嵌入B站视频
【html+css+js】如何轻松在网页中嵌入b站视频？
归忆_AC的博客
08-09 6662
教你轻松上手在网页中嵌入b站视频，简单的运用了html+css+js的知识，看不懂的直接按部就班也行。
实现iframe嵌套bilibili视频
臧小川的博客
12-22 2263
import React, { useState, useEffect } from 'react' import styles from './style.less' const data = [ { name: '夜曲', vid: 'BV1tA411q7xi' }, { name: '以父之名', vid: 'BV1mp4y1C7ja' }, { name: '晴天', vid: 'BV1Ag4y1q7tP' }, { name: '七里香', vid: 'BV1AA.
哔哩哔哩 B站视频引用到自己的网站的方法
qq_37956302的博客
04-10 9304
先上个例子 <iframe height=100% width=100% src="//player.bilibili.com/player.html?bvid=BV1LC4y1s7gd&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> <...
hexo中以iframe形式插入视频无法显示的问题解决
raintlung的博客
05-03 1405
文章目录前言一、文章参考二、问题解决1.按照文章插入代码2.尝试修改[元素样式](https://www.w3school.com.cn/css/index.asp)（1）在浏览器中打开开发人员工具，这里使用的是edge，按下ctrl+shift+i即可打开（2）在开发人员工具中的上方导航栏选择“元素”（一般默认就是“元素”），如下所示（3）左键单击代码部分，然后按下ctrl+f查找iframe![在这里插入图片描述](https://img-blog.csdnimg.cn/8720674d54be4ec2
HTML5课堂入门笔记（完）
ChengMeng11的博客
03-21 1691
HTML5入门笔记 一、网页设计中 的软件的安装设置 1、typroa—笔记本工具（方便记录说明文档，图片等内容） 减号加空格可出现此点 文件名：由 基本文件名.扩展名（扩展名来确定这个文件的打开方式） 打开扩展名的操作如图所示： 1、打开我的电脑或者此电脑 2、点击查看，将文件扩展名选中 3、则，文件后面则会显示扩展名 2、greenshot—截图工具 设置 ...
前端三语 HTML、CSS、JavaScript 入门简明教程
Quest_sec的博客
04-08 884
文章目录（一）概述（二）第一阶段：HTML、CSS、网页布局一、HTML 本文为个人笔记整理，视频课程链接：https://www.bilibili.com/video/BV1sW411T78k? （一）概述 1、做什么？ 无论是前端工程师还是后台工程师，我们要做的工作无非是软件的开发。软件主要分两种架构（下图），本文章（前端工程师）主要从事的是B/S的软件的开发。 2、什么是B/S？ B指bro...
04 渗透测试基础
weixin_43234021的博客
01-04 1万+
渗透测试基础一 代码审计1 基础环境搭建(1) Web服务：WAMP+phpstudy(2) phpstudy2 HTML 表单 一 代码审计 1 基础环境搭建 (1) Web服务：WAMP+phpstudy (2) phpstudy 启动问题 端口正常开放 80 http 3306 mysql web根目录[C:\Users\dq\Documents\phpStudy-1-24\phpStudy\WWW] php 探针 phpinfo.php phpmyadmin Apache配置文件：[
前端面试题--js
weixin_44501366的博客
10-09 5125
SetES6 新增的一种新的的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。成员不能重复；只有键值，没有键名，有点类似数组；可以遍历，方法有add: 新增，相当于array里的pushdelete: 存在即删除集合中的valuehas: 判断集合中是否存在valueclear: 清空集合Set 结构可以利用Array.from或者 扩展运算符 转化为数组。
2022年前端面试题整理，持续更新中
jiey0407的博客
08-01 2848
rem是一个相对单位，rem的是相对于html元素的字体大小，没有继承性em是一个相对单位，是相对于父元素字体大小有继承性px是一个“绝对单位”，就是css中定义的像素，利用px设置字体大小及元素的宽高等，比较稳定和精确。因为Vue的组件可能会在很多地方使用，会产生多个实例，如果返回的是对象的，这些组件之间的数据是同一份（引用关系），那么修改其中一个组件的数据，另外一个组件的数据都会被修改到。...
从bilibili引用视频
LGX_TvT的博客
06-02 1万+
&lt;iframe src="//player.bilibili.com/player.html?aid=24107076&amp;cid=40389954&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"&gt;
iframe 滚动条不显示_BILIBILI视频外链引用。iframe嵌入和第三方接口引用。
weixin_39755003的博客
12-01 415
iframe 嵌入和移动端高清免弹窗参数。iframe嵌入BiliBili视频方法B站视频外链 - 贝贝会员站​xbeibeix.com第三方接口引用：https://xbeibeix.com/api/bilibili/biliplayer/?url=（这里改成BILIBILI视频地址）可直接播放BILIBILI视频，无广告，无弹窗，无官方播放器界面。...
页面中插入视频的方法---video/embed/iframe总结
热门推荐
极客神殿
04-22 2万+
1. video标签 当前主流的方法当然是HTML5中的video标签了，但是 当前，video 元素只支持三种视频格式： Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 如果你的视频文件是m...
wordpress插入bilibili视频
测试0901-1
02-20 7695
wordpress插入bilibili视频 bilibili是中国大陆一个ACG相关的弹幕视频分享网站，也被称为哔哩哔哩、B站，其前身为视频分享网站Mikufans。站内视频很多都是来源于日本电视台播出的新番动画，NICONICO动画，Youtube等视频分享网站，也有不少国内的动漫爱好者制作的二次创作内容。网站本身不提供视频存储内容，视频内容也多是储存...
iframe嵌入哔哩哔哩视频禁止自动播放
weixin_46813963的博客
02-27 1468
在视频链接后加上&autoplay=0即可
视频播放插入代码
心有多大，你的舞台就有多大
07-28 1万+
 如果你是学做网页的,那在你自己的网页中添加这样的代码就可以在网页中看你自己想可看的视频,MTV http://diy.china001.com/telecom2/business.wmv" width="499" height="356" type="audio/x-wav" loop="false" autostart="false">src=   表示视频的地址499  356 表示
b站缓存视频名字代码
09-01
B站缓存视频的名字代码，也就是Bilibili视频缓存的命名方式。首先，我们需要了解B站缓存视频的命名规则。B站的缓存视频文件名由一串数字和字母组成，通常是一个32位的MD5值，用于保证文件名的唯一性和安全性。这个MD5值是根据视频内容计算生成的，不同的视频内容对应不同的MD5值。 当我们从B站观看视频时，如果选择了缓存功能，系统会自动为视频进行缓存，并将缓存文件保存在相应的文件夹中。而缓存文件的名字就是通过MD5值生成的。 关于具体的代码实现，我们可以利用B站提供的API来获取视频的缓存信息，并获取到缓存视频的文件名代码。下面是一个简单的示例代码： ```python import hashlib # 获得视频内容计算生成的MD5值 def get_md5(content): md5 = hashlib.md5() md5.update(content.encode('utf-8')) return md5.hexdigest() # 获取缓存视频的文件名 def get_cache_filename(video_url): # 从B站API获取视频内容 video_content = get_video_content(video_url) # 计算MD5值 md5_value = get_md5(video_content) # 生成缓存视频的文件名 cache_filename = md5_value + '.mp4' return cache_filename # 调用示例 video_url = 'https://www.bilibili.com/video/xxx' cache_filename = get_cache_filename(video_url) print(cache_filename) ``` 当我们调用`get_cache_filename`函数时，将视频的URL作为参数传入，即可获取到对应的缓存视频文件名。这样，我们就可以根据缓存视频的文件名来索引和管理缓存视频文件了。
评论 26
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值