这篇教程引用bilibili视频写得很实用，希望能帮到您。
接入B站iframe视频(bilibili引用视频)
B站自动放大 iframe Universal Links B站视频清晰度 BiliBili
B站链接参数
已解决的坑
按比例播放视频
阻止跳转到B站
解决iOS上自动跳转到B站APP (Universal Links)
iOS 播放自动放大问题
待填的坑
一些其他事项
各位参考(大佬)网站
前言
因为公司要搞一些视频给客户看, 然后对比了各种视频网站, 各种广告什么的, 体验都不好.
选来选去, 还是B站(BiliBili)好, 而且自己又是B站大会员用户 ( 其实在我心里早就内定了 ✧(≖ ◡ ≖) )
这里总结一下碰到的一些坑吧
B站链接参数
https://player.bilibili.com/player.html?cid=57016129&aid=57016129&bvid=BV1Ex411d7VY&page=1&as_wide=1&high_quality=1&danmaku=0&t=30
key 说明
cid chat id，每个chat id对应一组弹幕池和
如填了 aid, 这个字段不填也没关系
aid article id, 视频的av号
就是B站的 avxxxx 后面的数字
bvid bilibili video id, 视频的bv号
2020.03 时候, B站把 AV 号根据一定的算法转成这个了
如果填了 bvid, 那么 aid 不填也可以
page 第几个视频, 起始下标为 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>
1
2
注意, 如果单单设置了 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);
}
1
2
3
//当前设备系统版本号
#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];
1
2
3
4
不过允许不全屏…那也跟着有另一个问题了, 就是如何把它放大???
主要目前又没解决监听他的放大按钮问题, 那这样的话, 就无法放大了…
待填的坑
如何监听 iframe 里面的事件这些
如何隐藏 iframe 里面某些元素
一些其他事项
默认 480p，是未登录问题
没有播放的控制条，可以尝试改变一下视频大小
各位参考(大佬)网站
按比例播放视频
视频清晰度问题(评论里面找的)
解决自动跳转到B站APP
有帮到您的，就赞一个吧，编写不易！
返回列表
返回列表 |
