关于博客引入bilibili视频

博客引入bilibili iframe视频中某些问题的解决

首先解释一下链接参数。

https://player.bilibili.com/player.html?cid=134715710&aid=78736512&page=1&as_wide=1&high_quality=1&danmaku=0
key说明
aid视频ID
就是B站的avxxxx后面的数字
cid应该是客户端id
clientId 的缩写(推测的, 不一定准确)
经过测试, 这个字段不填也没关系
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: 关闭

可以优化的问题

按比例播放视频

<!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=78736512&cid=134715710&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
        </div>
        
    </body>
</html>

阻止跳转到B站

在网页上, 用户选择清晰度, 或者点击视频上面的一些图标, 会跳转到B站. 这个可通过设置 iframesandbox 属性去禁止。

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);
    }

<br>

//当前设备系统版本号
#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];

添加新评论

本站现已启用评论投票,被点踩过多的评论将自动折叠。与本文无关评论请发留言板。请不要水评论,谢谢。

评论列表